jsnoterk v1.0.5
JSNoterk
A cli tool for taking JavaScript notes. Includes in-browser bundling and transpiling with esbuild, as well as a text editor with markdown support.
The original was developed by Stephen Grider, from his course on React and Typescript: Build a Portfolio Project. If you want to learn to build this app yourself then here you go!
Essentially, this app is like a Jupyter Notebook, but for JavaScript. It's an interactive browser-based coding environment. Code is bundled and transpiled in the browser by esbuild, which is included using a wasm wrapper. You can even import NPM packages and CSS! These will be fetched from unpkg and included in the file. There's also a cumulative code feature so subsequent code cells will have access to variables and data declared in prior cells.
CLI Usage
npx jsnoterk [options] [command]serve [options] [filename]- open a file for editinghelp [command]- display help for command
Serve Command
npx jsnoterk serve [options] [filename]-p, --port <number>- port to run server on (default:4005)[filename]- specify filename to use (default:notebook.js)
Serveis the only available command at this time. Eventually there could be aLoginandPublishas a way to allow users to publish their notes to a publicly accessible url.
Features
- Code Editor
- Monaco Editor
- Import NPM Modules - Imports are dynamically fetched using unpkg. The bundler will account for nested imports too.
- Import CSS - Stylesheets can be imported as well. However, some modern features of CSS won't work due to the way CSS gets included.
- File Caching - To avoid endless network requests,
localForageis used to store fetched content in IndexedDB. - Debounced Bundling - Stop typing code for at least 1 second in order for bundling to occur.
show()- built-in feature allows rendering to the preview window without setup.- Example:
show('Text') - Example:
show(<div>JSX Element</div>)
- Example:
- Formatting:
Prettieris built-in. Click the Format button to format your code. - Cumulative Code Bundling - Subsequent cells include declarations from previous cells. No need to duplicate code.
- Error Handling - The preview window listens for
errorandmessageevents. The bundler also returns an error message if it fails.
- Text Editor
- Markdown - Features of the Markdown Editor are provided by its developer. Some CSS was applied.
- General
- Automatic Saving - Stop updating global cell state for at least 0.5 seconds and the save file will be updated.
- Add new Text or Code cells
- Move Cells up or down
- Delete Cells
Credits
Here are some great packages used for this project. Check them out!