Using esbuild instead of rollup (#1298)

docs/changelog.md

@@ -8,6 +8,7 @@ Features
 
 - Added a `docked` field and attribute for the `<py-terminal>` custom element, enabled by default when the terminal is in `auto` mode, and able to dock the terminal at the bottom of the page with auto scroll on new code execution.
 
+
 Bug fixes
 ---------
 
@@ -17,6 +18,8 @@ Enhancements
 ------------
 
 - Py-REPL tests now run on both osx and non osx OSs
+- migrated from *rollup* to *esbuild* to create artifacts
+- updated `@codemirror` dependency to its latest
 
 2023.01.1
 =========

pyscriptjs/Makefile

@@ -58,6 +58,9 @@ dev:
 build:
 	npm run build
 
+build-fast:
+	node esbuild.js
+
 examples:
 	mkdir -p ./examples
 	cp -r ../examples/* ./examples

pyscriptjs/esbuild.js

@@ -0,0 +1,84 @@
+const { build } = require('esbuild');
+const { spawn } = require('child_process');
+const { join } = require('path');
+const { watchFile } = require('fs');
+const { cp, lstat, readdir } = require('fs/promises');
+
+const production = !process.env.NODE_WATCH || process.env.NODE_ENV === 'production';
+
+const copy_targets = [
+    { src: 'public/index.html', dest: 'build' },
+    { src: 'src/plugins/python/*', dest: 'build/plugins/python' },
+];
+
+if (!production) {
+    copy_targets.push({ src: 'build/*', dest: 'examples/build' });
+}
+
+const pyScriptConfig = {
+    entryPoints: ['src/main.ts'],
+    loader: { '.py': 'text' },
+    bundle: true,
+    format: 'iife',
+    globalName: 'pyscript',
+};
+
+const copyPath = (source, dest, ...rest) => cp(join(__dirname, source), join(__dirname, dest), ...rest);
+
+const esbuild = async () => {
+    const timer = `\x1b[1mpyscript\x1b[0m \x1b[2m(${production ? 'prod' : 'dev'})\x1b[0m built in`;
+    console.time(timer);
+
+    await Promise.all([
+        build({
+            ...pyScriptConfig,
+            sourcemap: false,
+            minify: false,
+            outfile: 'build/pyscript.js',
+        }),
+        build({
+            ...pyScriptConfig,
+            sourcemap: true,
+            minify: true,
+            outfile: 'build/pyscript.min.js',
+        }),
+    ]);
+
+    const copy = [];
+    for (const { src, dest } of copy_targets) {
+        if (src.endsWith('/*')) {
+            copy.push(copyPath(src.slice(0, -2), dest, { recursive: true }));
+        } else {
+            copy.push(copyPath(src, dest + src.slice(src.lastIndexOf('/'))));
+        }
+    }
+    await Promise.all(copy);
+
+    console.timeEnd(timer);
+};
+
+esbuild().then(() => {
+    if (!production) {
+        (async function watchPath(path) {
+            for (const file of await readdir(path)) {
+                const whole = join(path, file);
+                if (/\.(js|ts|css|py)$/.test(file)) {
+                    watchFile(whole, async () => {
+                        await esbuild();
+                    });
+                } else if ((await lstat(whole)).isDirectory()) {
+                    watchPath(whole);
+                }
+            }
+        })('src');
+
+        const server = spawn('python', ['-m', 'http.server', '--directory', './examples', '8080'], {
+            stdio: 'inherit',
+            detached: false,
+        });
+
+        process.on('exit', () => {
+            server.kill();
+        });
+    }
+});

pyscriptjs/package.json

@@ -2,9 +2,8 @@
     "name": "pyscript",
     "version": "0.0.1",
     "scripts": {
-        "build-min": "NODE_ENV=production rollup -c",
-        "build": "rollup -c",
-        "dev": "rollup -c -w",
+        "build": "npm run tsc && node esbuild.js",
+        "dev": "NODE_WATCH=1 node esbuild.js",
         "tsc": "tsc --noEmit",
         "format:check": "prettier --check './src/**/*.{js,html,ts}'",
         "format": "prettier --write './src/**/*.{js,html,ts}'",
@@ -16,40 +15,30 @@
     },
     "devDependencies": {
         "@jest/globals": "29.1.2",
-        "@rollup/plugin-commonjs": "22.0.2",
-        "@rollup/plugin-legacy": "2.2.0",
-        "@rollup/plugin-node-resolve": "14.1.0",
-        "@rollup/plugin-typescript": "8.5.0",
         "@types/codemirror": "^5.60.5",
         "@types/jest": "29.1.2",
         "@types/node": "18.8.3",
         "@typescript-eslint/eslint-plugin": "5.39.0",
         "@typescript-eslint/parser": "5.39.0",
         "cross-env": "7.0.3",
+        "esbuild": "0.17.12",
         "eslint": "8.25.0",
         "jest": "29.1.2",
         "jest-environment-jsdom": "29.1.2",
         "prettier": "2.7.1",
         "pyodide": "0.22.1",
-        "rollup": "2.79.1",
-        "rollup-plugin-copy": "3.4.0",
-        "rollup-plugin-css-only": "3.1.0",
-        "rollup-plugin-livereload": "2.0.5",
-        "rollup-plugin-serve": "2.0.1",
-        "rollup-plugin-string": "3.0.0",
-        "rollup-plugin-terser": "7.0.2",
         "ts-jest": "29.0.3",
         "tslib": "2.4.0",
         "typescript": "4.8.4"
     },
     "dependencies": {
-        "@codemirror/commands": "6.1.1",
-        "@codemirror/lang-python": "6.0.2",
-        "@codemirror/language": "6.2.1",
-        "@codemirror/state": "6.1.2",
-        "@codemirror/theme-one-dark": "6.1.0",
-        "@codemirror/view": "6.3.0",
+        "@codemirror/commands": "^6.2.2",
+        "@codemirror/lang-python": "^6.1.2",
+        "@codemirror/language": "^6.6.0",
+        "@codemirror/state": "^6.2.0",
+        "@codemirror/theme-one-dark": "^6.1.1",
+        "@codemirror/view": "^6.9.3",
         "@hoodmane/toml-j0.4": "^1.1.2",
-        "codemirror": "6.0.1"
+        "codemirror": "^6.0.1"
     }
 }

pyscriptjs/rollup.config.js

@@ -1,68 +0,0 @@
-import commonjs from '@rollup/plugin-commonjs';
-import resolve from '@rollup/plugin-node-resolve';
-import { terser } from 'rollup-plugin-terser';
-import typescript from '@rollup/plugin-typescript';
-import css from 'rollup-plugin-css-only';
-import serve from 'rollup-plugin-serve';
-import { string } from 'rollup-plugin-string';
-import copy from 'rollup-plugin-copy';
-
-const production = !process.env.ROLLUP_WATCH || process.env.NODE_ENV === 'production';
-
-const copy_targets = {
-    targets: [
-        { src: 'public/index.html', dest: 'build' },
-        { src: 'src/plugins/*', dest: 'build/plugins' },
-    ],
-};
-
-if (!production) {
-    copy_targets.targets.push({ src: 'build/*', dest: 'examples/build' });
-}
-
-export default {
-    input: 'src/main.ts',
-    output: [
-        {
-            file: 'build/pyscript.js',
-            format: 'iife',
-            sourcemap: true,
-            inlineDynamicImports: true,
-            name: 'pyscript',
-        },
-        {
-            file: 'build/pyscript.min.js',
-            format: 'iife',
-            sourcemap: true,
-            inlineDynamicImports: true,
-            name: 'pyscript',
-            plugins: [terser()],
-        },
-    ],
-    plugins: [
-        css({ output: 'pyscript.css' }),
-        // Bundle all the Python files into the output file
-        string({
-            include: './src/**/*.py',
-        }),
-        resolve({
-            browser: true,
-        }),
-        commonjs(),
-        typescript({
-            sourceMap: !production,
-            inlineSources: !production,
-        }),
-        // This will make sure that examples will always get the latest build folder
-        copy(copy_targets),
-        // production && terser(),
-        !production &&
-            serve({
-                port: 8080,
-                contentBase: 'examples',
-            }),
-    ],
-    watch: {
-        clearScreen: false,
-    },
-};

pyscriptjs/tsconfig.json

@@ -12,6 +12,7 @@
         "strict": false,
         "esModuleInterop": true,
         "skipLibCheck": true,
+        "isolatedModules": true,
         "forceConsistentCasingInFileNames": true,
         "lib": ["es2017", "dom", "DOM.Iterable"]
     }