Commit 3e2da4df authored by Jaden DIEFENBAUGH's avatar Jaden DIEFENBAUGH

update proj metadata & DEV notes

parent e18c8a9f
......@@ -14,8 +14,8 @@
#### Development
- You'll probably want the [React devtools](https://github.com/facebook/react-devtools) and [Redux devtools](https://github.com/zalmoxisus/redux-devtools-extension) browser plugins to sanely debug and inspect React/Redux code.
- You might need to enable/configure sourcemaps in your browser manually.
- You'll probably want Webpack's dev server (`npm start` or `npm run start:ui`) running in a separate terminal window/tab, as Webpack will automatically rebuild/update your project when files change. However, changes to the webpack config or other configuration files may not be watched. In general, anything under `src/` should be hot-reloaded, while anything else may not be. If there's issues with the app when running the dev server that you don't expect or don't make sense (especially if the issue came up after a hot reload), try refreshing the page - sometimes the hot reloader doesn't properly handle complex changes (such as state management or async functionality).
- When adding dependencies - especially if you import them directly - run the `flow-install` npm script to try to find type definitions for the library. Do the same whenever you update dependencies too.
- You'll probably want Webpack's dev server (`npm start`) running in a separate terminal window/tab, as Webpack will automatically rebuild/update your project when files change (served at `localhost:9101`. However, changes to the webpack config or other configuration files may not be watched. In general, anything under `src/` should be hot-reloaded, while anything else may not be. If there's issues with the app when running the dev server that you don't expect or don't make sense (especially if the issue came up after a hot reload), try refreshing the page - sometimes the hot reloader doesn't properly handle complex changes (such as state management or async functionality).
- When changing/updating dependencies, you'll want to install/update flow types for them. You'll need a globally-installed `flow-typed` (`npm install -g flow-typed`) to run `flow-typed install` in the root of the project.
## NPM Scripts Explanations
| Script | Target | Purpose |
......@@ -27,8 +27,6 @@
| `lint` | | Checks your JS, JSX, and CSS files for any errors |
| `lint:fix` | | Fixes any easier linting issues in your JS & JSX files |
| `flow` | `.flowconfig` | Checks your project's flow type annotations (static analysis) |
| `flow-install` | `flow-typed/` | Tries to install type definitions for the project's dependencies from `flow-typed`, and stubs out any dependencies without definition files |
| `prepush` | | Fires on Git's `pre-push` hook, running the `test` & `lint` scripts to make sure everything is passing locally |
## Technology Breakdown
......@@ -36,7 +34,10 @@
| Package | Purpose | Simple Explanation |
| :------ | :------ | :---------- |
| ajv | JSON schema validator | Uses [JSON schemas](http://json-schema.org/) to validate JSON objects |
| bootstrap | CSS source for `reactstrap` | Provides Bootstrap's styling to the `reactstrap` dependency |
| classnames | Manages complex class name logic for HTML elements | |
| prop-types | Runtimes React prop type checking | |
| react | UI library | JS framework for defining the user interface & overall UX |
| react-dom | DOM compat for React | Lets React run in the browser |
| react-popper | React adaptor for `popper.js` | Dependency of `reactstrap` |
......@@ -45,6 +46,8 @@
| react-transition-group | Helpers for writing transitions across React lifecycles | Dependency of `reactstrap` |
| reactstrap | Native React implementation of Bootstrap 4 | |
| redux | State Management library | Gives us a clear way to manage state across the entire app |
| redux-thunk | Redux action support for async operations | Lets Redux use async code (e.g. fetching from our server) |
| reselect | Memoized Redux selectors | Lets us calculate intermediate values from the Redux store once, even if the same calculation is used several places |
### Development Dependencies
......@@ -53,6 +56,7 @@
| babel-core | Compiler | Core of Babel, an ecosystem for compiling JS code (e.g. transforming new features to older features to support old browsers) |
| babel-eslint | Compiler support for linter | Lets ESLint parse advanced features that aren't built into ESLint's default parser |
| babel-loader | Compiler support for Webpack | Lets Webpack pass JS files through Babel when building |
| babel-plugin-dynamic-import-webpack | Compiler support for dynamic `import`s | Lets Webpack process `import`s called anywhere in code |
| babel-plugin-istanbul | Babel support for Istanbul | Lets Babel track which code is being ran as it's being compiled |
| babel-plugin-syntax-dynamic-import | Babel support for the dynamic import syntax | Lets Babel parse `import` statements in arbitrary places |
| babel-plugin-syntax-object-rest-spread | Babel support for the object spread syntax | Lets Babel parse using spread syntax (`...`) for objects as well as arrays |
......@@ -60,9 +64,9 @@
| babel-preset-env | Babel support for dynamic targeting via browserslist syntax | Lets Babel dynamically change what code it changes based on your configuration |
| babel-preset-react | Babel support for JSX, Flow types, and other react things | Lets Babel understand & process idiomatic React code |
| chai | Assertion library | Provides tools for `assert`ing things in tests |
| chai-enzyme | Chai support for enzyme functionality | |
| cross-env | Cross-environment variable support | Transforms environment variable definitions written in Linux format to the current platform |
| css-loader | Webpack CSS loader | Lets Webpack parse references to CSS files |
| enzyme-adapter-react-16 | Enzyme support for React 16 | |
| enzyme | React test utilities | Adds helpers for testing React code, especially Components |
| eslint | JS Linter | Statically analyzes JS code according to your configuration |
| eslint-plugin-compat | ESLint support for browserslist | Lets ESLint check if the JS APIs you use are supported by the browsers set in your configuration |
......
# beat.editor
An embeddable HTML/JS widget for managing many of the core BEAT objects, including a graphical toolchain editor and a simple web server. Aims to compliment `beat.cmdline` to enable a productive and smooth workflow for developing objects for the BEAT platform as well as replace the current toolchain editor in `beat.web`.
A local editor for BEAT objects, including a graphical toolchain editor and a simple web server. Aims to compliment `beat.cmdline` to enable a productive and smooth workflow for developing objects for the BEAT platform as well as replace the current toolchain editor in `beat.web`.
## Installation
#### System Requirements
......
{
"name": "react-setup",
"version": "0.0.0",
"description": "",
"description": "A local editor for BEAT objects, including a graphical toolchain editor and a simple web server.",
"main": "index.js",
"scripts": {
"start": "cross-env NODE_ENV=debug webpack-dev-server --hot",
......
......@@ -138,10 +138,6 @@ if(process.env.NODE_ENV === 'debug'){
}
}
if(process.env.TARGET === 'ui'){
module.exports.entry.main = './src/containers/main.js';
}
if(process.env.NODE_ENV === 'test'){
// when testing with karma, almost all plugins are useless
module.exports.plugins = [
......@@ -151,14 +147,8 @@ if(process.env.NODE_ENV === 'test'){
module.devtool = 'inline-source-map'
}
/*
if (process.env.TEST_TARGET === 'ui') {
module.exports.entry = './containers/test.js';
}
*/
// PROD
// TODO: pull out into different webpack config and see:
// TODO: pull out into different webpack config
if (process.env.NODE_ENV === 'production') {
// simpler source map alg
module.exports.devtool = 'source-map';
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment