This is a multi-part project server-client application that allows editing, running, and sharing code and text documents via a web browser.
The project components include:
- Web app - allows editing and running of JavaScript and React code and text cells (collectively known as a 'book');
- CLI - command line utility to launch the local API
- Local API - serves up local web client as well as loading and saving of files to local computer.
- Public API (TBD) - serves public web client and allows transfer of code/text books to and from local APIs.
- React
- TypeScript
- axios - simplifies http request
- localForage - provides fast, simple, async storage using IndexedDB
- esbuild - in-browser bundler of JavaScript/TypeScript, CSS, modules and more
- unpkg.com - a global CDN containing every npm package. Allows loading of any file in a package - npm.com CORS policy will not allow individual file downloads
- redux for state management
- redux-thunk for async action creators
- custom esbuild plugin - fetches all files for an npm package from unpkg.com (need because by default esbuild will try to import from filesystem (which doesn't exist in browser))
- Lerna CLI to manage multi-package project
Todo:
- latest esbuild might be able to bundle css into main file so no hack required?
- add last browser resize tweak - sync width state between ResizableContainer and ResizableBox
- add code execution delay to allow time to update html - #172
- migrate redux code to use RTK as per latest redux version/docs - createStore is deprecated so use configureStore, thunk is built-in to RTK
- extract action creators into individual files
redux implementation:
- store is the data
- action types are enum constants to mitigate typos when referencing actions in action-creators and reducers
- actions are type interfaces for action creators
- action creators create actions that can be dispatched to the reducer they take in parameters or retrieve external data to send in action
- dispatch function send actions to the reducer
- reducer accepts actions to mutate and return state
- selectors use state to create derived data
- useTypedSelector enables the use of redux selectors with typescript
- vodka is used to alleviate the pain of using redux
review:
- async action creator returns a promise
to do: -remove bundles when code cell is deleted
more notes: useActions is a custom hook that use's react-redux's useDispatch use custom useAction to return action creator to call it??? actions, action types, actions creators, reducer entry only needed if updating state