my exploration of monorepo setup and ES6

[hrgdavor]

I am opening this discussion to share my insights in a specific setup for monorepo and experience with es6 and code execution combined with es6 and cjs modules

current setup

current setup I am testing

• Rush - https://rushjs.io/ possible replacement for lerna
• Vite - https://vitejs.dev/ engine for live development and possibly building
  • HMR - Hot module reload, there is nice API that could be useful
• pnpm - https://pnpm.io/ used by Rush by default
• Babel 7 - https://babeljs.io/ for converting code to allow worker to execute it

background

I have taken a side-step from new web prototype that will return useful experiences and code back to JSCAD.

I have been a JS developer for a very long time (dinosaur level) with preference to watch the current mainstream but always making sth of my-own (based on the trends at the time that I like).
This is in fact my personal preference, and other will have their own, so my intention is to separate standalone parts as much as possible to not depend even on my own libraries.

I am building a UI lib that uses JSX and as part of the process also a JavaScript execution environment for interactive tutorials.
This entails

• producing markdown files that are basis for the tutorial with embeded or imported example code
• working with a code editor. Monaco (basis for vscode) is used in this case
• execution of the code samples with option for user to edit and play with examples

Vite

Vite has been a very nice to use and simple to start. If installed globally can be used for any html+js
you want to test easily without any setup. Only when advanced features are needed you need to have a vite.config.js

Just create a simple html page with script import, put you script in same folder or src.
You can write es6 code and use imports without any further setup it will find things automatically.

run vite command root folder of your project where node modules are and it will start a webserver with automatic hot reload for js and css.

open your page if it is not index.html by typing the relative path to it in the url and it works.

Edit the code and save, and it will reload without need to manually setup livereload or etc.

Babel 7

Babel 7 is important in all of this for worker to be flexible and can also enable other features

• allows support es6 for JSCAD even online (convert code from es6 to CJS for execution)
• can be used to inject things into code to enhance user experience (like model click back to code line)
• can be used to inject soft cancel logic to be able to exit worker in more cases instead of killing it
• infinite loop protection https://stackoverflow.com/questions/65282666/js-infinite-loop-protection-how-to-use-babel-standalone-plugins-without-node-or/73393992
• produce embeded sourcemaps so errors show correct file:line_number

ES6

ES6 has been a great experience working with, especially after switching to vscode as the editor.

Splitting code into separate files is simple and even if I write a function inline vscode has menu option
to move such function into own file (also adds the import to it) painlessly

The Tutorial runner and the mentioned setup in action

code: https://github.com/hrgdavor/jsx6/tree/main/apps/repl

I have added custom HMR to the config to be able to have instant live preview of my tutorial in few ms time after saving. The HMR plugin checks when markdown file is changed and sends it to the running app. Instead of full page reload, the app is setup to quickly reload the tutorial content and stay on the same chapter.

The video also shows the tutorial runner in action. It has two instances of Monaco editor side by side (with scroll sync) to display the code examples and also what JSX looks like after compilation by babel.

Code from editor is executed with 100ms delay for instant preview, but delay is longer if execution throws an error. Infinite loop protection was necessary here because code needs to execute in an iframe to have DOM access and in that case the whole tab with tutorial freezes and dies.

The tutorial runner has no console capture, but will likely keep relying on browser built-in console for those that are interested in console output. Showing error in the editor is not yet implemented.

Here is a video of the mentioned tutorial runner in action.

bandicam.2022-08-24.14-24-35-189.mp4

[hrgdavor]

looks like one of things that is important while doing es6 projects is this https://nodejs.org/api/esm.html#esm_mandatory_file_extensions

.js extension for local imports is needed. without it, build tools will work, but I had an error when writing tests because node did not want to import my local dependency without specifying .js at the end.

specifically without full file name ˙import {sth} from './dep'˙would fail in ava while testing with error ERR_MODULE_NOT_FOUND.
easy fix was to just ˙import {sth} from './dep.js'