npm - @jsenv/core - Versions diffs - 24.4.6 → 24.5.2 - Mend

@jsenv/core 24.4.6 → 24.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (36) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "24.4.6",
+  "version": "24.5.2",
   "description": "Tool to develop, test and build js projects",
   "license": "MIT",
   "repository": {
@@ -56,7 +56,7 @@
     "@babel/plugin-syntax-numeric-separator": "7.10.4",
     "@babel/plugin-transform-modules-systemjs": "7.16.0",
     "@c88/v8-coverage": "0.1.1",
-    "@jsenv/abort": "4.1.1",
+    "@jsenv/abort": "4.1.2",
     "@jsenv/filesystem": "2.5.1",
     "@jsenv/importmap": "1.2.0",
     "@jsenv/log": "1.5.0",
@@ -99,6 +99,7 @@
     "terser": "5.10.0",
     "v8-to-istanbul": "8.1.0",
     "vm2": "3.9.5",
+    "why-is-node-running": "2.2.0",
     "wrap-ansi": "8.0.1"
   },
   "devDependencies": {

package/readme.md CHANGED Viewed

@@ -1,6 +1,6 @@
 # jsenv [![npm package](https://img.shields.io/npm/v/@jsenv/core.svg?logo=npm&label=package)](https://www.npmjs.com/package/@jsenv/core) [![github main worflow](https://github.com/jsenv/jsenv-core/workflows/main/badge.svg)](https://github.com/jsenv/jsenv-core/actions?workflow=main) [![codecov coverage](https://codecov.io/gh/jsenv/jsenv-core/branch/master/graph/badge.svg)](https://codecov.io/gh/jsenv/jsenv-core)
-`@jsenv/core` was first created to write tests that could be executed in different browsers AND Node.js. In the end it became a tool covering the core needs of a JavaScript project:
+_@jsenv/core_ was first created to write tests that could be executed in different browsers AND Node.js. In the end it became a tool covering the core needs of a JavaScript project:
 - A test runner to execute test files
 - A development server
@@ -29,7 +29,7 @@ Each standard listed in this section is potentially supported natively by the br
 # Test runner overview
-Let's assume you want to test `countDogs` exported by `animals.js` file.
+Let's assume you want to test `countDogs` exported by _animals.js_ file.
 ```js
 export const countDogs = (animals) => {
@@ -37,7 +37,7 @@ export const countDogs = (animals) => {
 }
 ```
-1 - Create `animals.test.html`
+1 - Create _animals.test.html_
 ```html
 <!DOCTYPE html>
@@ -61,7 +61,7 @@ export const countDogs = (animals) => {
 </html>
 ```
-2 - Create `execute_test_plan.mjs`
+2 - Create _execute_test_plan.mjs_
 ```js
 import {
@@ -85,7 +85,7 @@ executeTestPlan({
 })
 ```
-3 - Add `"@jsenv/core"` and `playwright`
+3 - Add _@jsenv/core_ and _playwright_
 ```console
 npm install --save-dev @jsenv/core
@@ -94,7 +94,7 @@ npx playwright install-deps
 npx playwright install
 ```
-4 - Run `execute_test_plan.mjs` with Node.js
+4 - Run _execute_test_plan.mjs_ with Node.js
 ```console
 > node ./execute_test_plan.mjs
@@ -134,13 +134,13 @@ You have an html file that you want to open in a browser on your machine.
 </html>
 ```
-1 - Add `"@jsenv/core"` to your _devDependencies_
+1 - Add _@jsenv/core_ to your _devDependencies_
 ```console
 npm install --save-dev @jsenv/core
 ```
-2 - Create `start_dev_server.mjs`
+2 - Create _start_dev_server.mjs_
 ```js
 import { startDevServer } from "@jsenv/core"
@@ -156,23 +156,23 @@ startDevServer({
 })
 ```
-3 - Run `start_dev_server.mjs` with Node.js
+3 - Run _start_dev_server.mjs_ with Node.js
 ```console
 > node ./start_dev_server.mjs
-server started at https://localhost:3456
+server started at http://localhost:3456
 ```
-4 - Open a browser and navigate to `https://localhost:3456`
+4 - Open a browser and navigate to `http://localhost:3456`
-When you open `https://localhost:3456` in a browser, a page called jsenv exploring index is shown. It displays a list of links to your html files.
+When you open `http://localhost:3456` in a browser, a page called jsenv exploring index is shown. It displays a list of links to your html files.
 ![dev server index screenshot](./docs/demo_exploring_index.png)
-5 - Click `main.html`
+5 - Click _main.html_
-Browser navigates to `main.html` and execute the file. Hello world is displayed in the browser.
+Browser navigates to _main.html_ and execute the file. Hello world is displayed in the browser.
 ![dev server hello world screenshot](./docs/demo_exploring_hello_world.png)
@@ -180,7 +180,7 @@ To read more about jsenv dev server, check [jsenv dev server documentation](./do
 # Build overview
-Following the steps below turns an `index.html` into an optimized `dist/main.html`.
+Following the steps below turns a `main.html` into an optimized `dist/main.prod.html`.
 Only the content of html files is shown below because the content of non-html files is trivial.
 ```html
@@ -201,13 +201,13 @@ Only the content of html files is shown below because the content of non-html fi
 </html>
 ```
-1 - Add `"@jsenv/core"` to your _devDependencies_
+1 - Add _@jsenv/core_ to your _devDependencies_
 ```console
 npm install --save-dev @jsenv/core
 ```
-2 - Create `build.mjs`
+2 - Create _build.mjs_
 ```js
 import { buildProject } from "@jsenv/core"
@@ -223,7 +223,7 @@ await buildProject({
 })
 ```
-3 - Run `build.mjs` with Node.js
+3 - Run _build.mjs_ with Node.js
 ```console
 > node ./build.mjs
@@ -246,7 +246,7 @@ build duration: 1.85 seconds
 ✔ build end
 ```
-4 - Open `dist/main.prod.html`
+4 - Open _dist/main.prod.html_
 ```html
 <!DOCTYPE html>
@@ -282,7 +282,7 @@ To sum up, jsenv focuses on simplicity and flexibility making it a perfect candi
 ## Main dependencies
-An overview of the main dependencies used by `@jsenv/core`.
+An overview of the main dependencies used by _@jsenv/core_.
 | Dependency                                            | How it is used by jsenv                     |
 | ----------------------------------------------------- | ------------------------------------------- |
@@ -296,16 +296,16 @@ An overview of the main dependencies used by `@jsenv/core`.
 ## Name
-The name `jsenv` stands for JavaScript environments. This is because the original purpose of `jsenv` was to bring closer two JavaScript runtimes: web browsers and Node.js. This aspect of `jsenv` is not highlighted in the documentation but it exists.
+The name "jsenv" stands for JavaScript environments. This is because the original purpose of jsenv was to bring closer two JavaScript runtimes: web browsers and Node.js. This aspect is not highlighted in the documentation but it exists.
-Maybe `jsenv` should be written `JSEnv`? That makes typing the name too complex:
+Maybe "jsenv" should be written "JSEnv"? That makes typing the name too complex:
 1. Hold `shift` on keyboard
 2. While holding `shift`, type `JSE`
 3. Release `shift`
 4. Finally, type `nv`.
-No one should have to do that, the prefered syntax is `jsenv`.
+No one wants to do that: the prefered syntax is "jsenv".
 ## Logo
@@ -328,17 +328,17 @@ The logo is composed by the name at the center and two circles orbiting around i
 npm install --save-dev @jsenv/core
 ```
-`@jsenv/core` is tested on Mac, Windows, Linux on Node.js 14.17.0. Other operating systems and Node.js versions are not tested.
+_@jsenv/core_ is tested on Mac, Windows, Linux on Node.js 16.13.0. Other operating systems and Node.js versions are not tested.
 # Configuration
-Jsenv configuration is done in [jsenv.config.mjs](https://github.com/jsenv/jsenv-core#jsenvconfigmjs) and [babel.config.cjs](https://github.com/jsenv/jsenv-core#babelconfigcjs).
+Jsenv configuration is done in [jsenv.config.mjs](#jsenvconfigmjs) and [babel.config.cjs](#babelconfigcjs).
 ## jsenv.config.mjs
-Jsenv codebase usually puts configuration in a top level file named `jsenv.config.mjs`.
+Jsenv codebase usually puts configuration in a top level file named _jsenv.config.mjs_.
-It's recommended to use the following `jsenv.config.mjs`
+It's recommended to use the following _jsenv.config.mjs_
 ```js
 /*
@@ -350,22 +350,16 @@ It's recommended to use the following `jsenv.config.mjs`
  * Read more at https://github.com/jsenv/jsenv-core#jsenvconfigmjs
  */
-export const projectDirectoryUrl = String(new URL("./", import.meta.url))
+export const projectDirectoryUrl = new URL("./", import.meta.url)
 ```
-The file is meant to be imported and passed using the spread operator.
-![screenshot about jsenv config import and spread operator](./docs/jsenv-config-spread.png)
-— See [script/test/test.js](https://github.com/jsenv/jsenv-core/blob/8da56c4aeb70891be1245f388bfe5d3088145ec6/script/test/test.js#L3)
-This technic helps to see jsenv custom configuration quickly and share it between files. That being said you are free to organize your configuration as you want.
+This file helps to see jsenv configuration quickly and share it between files. That being said you are free to organize your configuration as you want.
 ## babel.config.cjs
 When code needs to be transformed, the project must contain a [babel config file](https://babeljs.io/docs/en/config-files).
-It's recommended to use the following `babel.config.cjs`
+It's recommended to use the following _babel.config.cjs_
 ```js
 /*
@@ -427,6 +421,8 @@ You must also add an [importmap](https://github.com/WICG/import-maps#import-maps
 </script>
 ```
+The import mappings can be generated programmatically, you can use https://github.com/jsenv/importmap-node-module to do that.
 ## JSX
 If you want to use jsx, you need [@babel/plugin-transform-react-jsx](https://babeljs.io/docs/en/next/babel-plugin-transform-react-jsx.html) in your babel config file.

package/src/buildProject.js CHANGED Viewed

@@ -79,6 +79,7 @@ export const buildProject = async ({
   // https://github.com/cssnano/cssnano/tree/master/packages/cssnano-preset-default
   minifyCssOptions,
+  workers = {},
   serviceWorkers = {},
   serviceWorkerFinalizer,
@@ -237,6 +238,7 @@ export const buildProject = async ({
       minifyJsOptions,
       minifyCssOptions,
+      workers,
       serviceWorkers,
       serviceWorkerFinalizer,

package/src/internal/building/buildUsingRollup.js CHANGED Viewed

@@ -8,7 +8,6 @@ import {
 } from "@jsenv/filesystem"
 import { createDetailedMessage } from "@jsenv/logger"
-import { buildServiceWorker } from "@jsenv/core/src/internal/building/buildServiceWorker.js"
 import { humanizeUrl } from "@jsenv/core/src/internal/building/url_trace.js"
 import {
   isNodePartOfSupportedRuntimes,
@@ -16,7 +15,7 @@ import {
 } from "@jsenv/core/src/internal/generateGroupMap/runtime_support.js"
 import { featuresCompatMap } from "@jsenv/core/src/internal/generateGroupMap/featuresCompatMap.js"
 import { createRuntimeCompat } from "@jsenv/core/src/internal/generateGroupMap/runtime_compat.js"
-import { createJsenvRollupPlugin } from "./createJsenvRollupPlugin.js"
+import { createJsenvRollupPlugin } from "./rollup_plugin_jsenv.js"
 export const buildUsingRollup = async ({
   buildOperation,
@@ -48,6 +47,9 @@ export const buildUsingRollup = async ({
   externalImportSpecifiers,
   externalImportUrlPatterns,
   importPaths,
+  workers,
+  serviceWorkers,
+  serviceWorkerFinalizer,
   urlVersioning,
   urlVersionningForEntryPoints,
@@ -62,9 +64,6 @@ export const buildUsingRollup = async ({
   minifyJsOptions,
   minifyCssOptions,
   minifyHtmlOptions,
-  serviceWorkers,
-  serviceWorkerFinalizer,
 }) => {
   const node = isNodePartOfSupportedRuntimes(runtimeSupport)
   const browser = isBrowserPartOfSupportedRuntimes(runtimeSupport)
@@ -121,6 +120,9 @@ export const buildUsingRollup = async ({
     externalImportSpecifiers,
     externalImportUrlPatterns,
     importPaths,
+    workers,
+    serviceWorkers,
+    serviceWorkerFinalizer,
     urlVersioning,
     urlVersionningForEntryPoints,
@@ -157,7 +159,16 @@ export const buildUsingRollup = async ({
     if (e.plugin === "jsenv") {
       const jsenvPluginErrorMessage = getLastErrorMessage()
       if (jsenvPluginErrorMessage) {
+        // rollup is adding properties to the original error
+        // making it a bit harder to read
+        // It does not add useful information so we restore the error
+        delete e.code
+        delete e.hook
+        delete e.id
+        delete e.watchFiles
+        delete e.plugin
         e.message = jsenvPluginErrorMessage
+        throw e
       }
       throw e
     }
@@ -219,29 +230,6 @@ export const buildUsingRollup = async ({
         await writeFile(fileBuildUrl, buildFileContents[buildRelativeUrl])
       }),
     )
-    await Promise.all(
-      Object.keys(serviceWorkers).map(
-        async (serviceWorkerProjectRelativeUrl) => {
-          const serviceWorkerBuildRelativeUrl =
-            serviceWorkers[serviceWorkerProjectRelativeUrl]
-          await buildServiceWorker({
-            projectDirectoryUrl,
-            buildDirectoryUrl,
-            serviceWorkerProjectRelativeUrl,
-            serviceWorkerBuildRelativeUrl,
-            serviceWorkerTransformer: (code) =>
-              serviceWorkerFinalizer(code, {
-                buildManifest,
-                rollupBuild,
-                lineBreakNormalization,
-              }),
-            minify,
-          })
-        },
-      ),
-    )
   }
   return {

package/src/internal/building/{bundleWorker.js → js/babel_plugin_inline_worker_imports.js} RENAMED Viewed

@@ -1,73 +1,24 @@
-import { readFileSync } from "fs"
 import {
   resolveUrl,
-  urlToFileSystemPath,
   fileSystemPathToUrl,
+  urlToFileSystemPath,
 } from "@jsenv/filesystem"
-import { createDetailedMessage } from "@jsenv/logger"
-import { require } from "@jsenv/core/src/internal/require.js"
-export const bundleWorker = ({ workerScriptUrl, workerScriptSourceMap }) => {
-  const { code, map } = transformWorkerScript(workerScriptUrl, {
-    workerScriptSourceMap,
-  })
-  return { code, map }
-}
-const transformWorkerScript = (
-  scriptUrl,
-  { workerScriptSourceMap, importerUrl },
+export const babelPluginInlineWorkerImports = (
+  babel,
+  { readImportedScript },
 ) => {
-  const scriptPath = urlToFileSystemPath(scriptUrl)
-  let scriptContent
-  try {
-    scriptContent = String(readFileSync(scriptPath))
-  } catch (e) {
-    if (e.code === "ENOENT") {
-      if (importerUrl) {
-        throw new Error(
-          createDetailedMessage(`no file found for an import in a worker.`, {
-            ["worker url"]: importerUrl,
-            ["imported url"]: scriptUrl,
-          }),
-        )
-      }
-      throw new Error(`no worker file at ${scriptUrl}`)
-    }
-    throw e
-  }
-  const { transformSync } = require("@babel/core")
-  const { code, map } = transformSync(scriptContent, {
-    filename: scriptPath,
-    configFile: false,
-    babelrc: false, // trust only these options, do not read any babelrc config file
-    ast: false,
-    inputSourceMap: workerScriptSourceMap,
-    sourceMaps: true,
-    // sourceFileName: scriptPath,
-    plugins: [[babelPluginInlineImportScripts, {}]],
-  })
-  return { code, map }
-}
+  const { types } = babel
-const babelPluginInlineImportScripts = (api) => {
-  const { types, parse } = api
   return {
-    name: "transform-inline-import-scripts",
+    name: "transform-inline-worker-imports",
     visitor: {
-      CallExpression: (
-        path,
-        {
-          file: {
-            opts: { filename },
-          },
-        },
-      ) => {
+      CallExpression: (path, opts) => {
         const calleePath = path.get("callee")
         const replaceImportScriptsWithFileContents = () => {
+          const filename = opts.filename
           const fileUrl = fileSystemPathToUrl(filename)
           let previousArgType = ""
@@ -97,11 +48,24 @@ const babelPluginInlineImportScripts = (api) => {
           if (previousArgType === "local") {
             const nodes = importedUrls.reduce((previous, importedUrl) => {
-              const importedScriptResult = transformWorkerScript(importedUrl, {
-                importerUrl: fileUrl,
+              const importedScriptCode = readImportedScript(importedUrl)
+              const { ast } = babel.transformSync(importedScriptCode, {
+                filename: urlToFileSystemPath(importedUrl),
+                configFile: false,
+                babelrc: false, // trust only these options, do not read any babelrc config file
+                ast: true,
+                sourceMaps: true,
+                // sourceFileName: scriptPath,
+                plugins: [
+                  [
+                    babelPluginInlineWorkerImports,
+                    {
+                      readImportedScript,
+                    },
+                  ],
+                ],
               })
-              const importedSourceAst = parse(importedScriptResult.code)
-              return [...previous, ...importedSourceAst.program.body]
+              return [...previous, ...ast.program.body]
             }, [])
             calleePath.parentPath.replaceWithMultiple(nodes)

package/src/internal/building/js/parseJsRessource.js CHANGED Viewed

@@ -4,7 +4,7 @@ import {
   getJavaScriptSourceMappingUrl,
   setJavaScriptSourceMappingUrl,
 } from "@jsenv/core/src/internal/sourceMappingURLUtils.js"
-import { bundleWorker } from "@jsenv/core/src/internal/building/bundleWorker.js"
+import { transformWorker } from "./transform_worker.js"
 export const parseJsRessource = async (
   jsRessource,
@@ -47,19 +47,18 @@ export const parseJsRessource = async (
       map = JSON.parse(String(sourcemapRessource.bufferBeforeBuild))
     }
-    // in case this js asset is a worker, bundle it so that:
-    // importScripts are inlined which is good for:
-    // - not breaking things (otherwise we would have to copy imported files in the build directory)
-    // - perf (one less http request)
-    const mightBeAWorkerScript = !jsRessource.isInline
-    if (mightBeAWorkerScript) {
-      const workerScriptUrl = asOriginalUrl(jsUrl)
-      const workerBundle = await bundleWorker({
-        workerScriptUrl,
-        workerScriptSourceMap: map,
+    // in case this js asset is a worker, we transform it so that
+    // importScripts() calls are inlined
+    // We could also parse each importScripts call and decide to inline
+    // or not. For now inlining/concatenation is forced
+    if (jsRessource.isWorker || jsRessource.isServiceWorker) {
+      const transformResult = await transformWorker({
+        url: asOriginalUrl(jsUrl),
+        code: String(jsRessource.bufferBeforeBuild),
+        map,
       })
-      code = workerBundle.code
-      map = workerBundle.map
+      code = transformResult.code
+      map = transformResult.map
     } else {
       code = jsString
     }

package/src/internal/building/js/transform_worker.js ADDED Viewed

@@ -0,0 +1,55 @@
+// we could inline a worker by doing
+// var blob = new Blob(code, { type: 'text/javascript' })
+// window.URL.createObjectURL(blob)
+import { readFileSync } from "fs"
+import { urlToFileSystemPath } from "@jsenv/filesystem"
+import { createDetailedMessage } from "@jsenv/logger"
+import { babelPluginInlineWorkerImports } from "./babel_plugin_inline_worker_imports.js"
+export const transformWorker = async ({ url, code, map }) => {
+  const { transformSync } = await import("@babel/core")
+  const transformResult = transformSync(code, {
+    filename: urlToFileSystemPath(url),
+    configFile: false,
+    babelrc: false, // trust only these options, do not read any babelrc config file
+    ast: false,
+    inputSourceMap: map,
+    sourceMaps: true,
+    // sourceFileName: scriptPath,
+    plugins: [
+      [
+        babelPluginInlineWorkerImports,
+        {
+          readImportedScript: readWorkerFile,
+        },
+      ],
+    ],
+  })
+  code = transformResult.code
+  map = transformResult.map
+  return { code, map }
+}
+export const readWorkerFile = (url, importerUrl) => {
+  const filePath = urlToFileSystemPath(url)
+  try {
+    const code = String(readFileSync(filePath))
+    return code
+  } catch (e) {
+    if (e.code === "ENOENT") {
+      if (importerUrl) {
+        throw new Error(
+          createDetailedMessage(`no file found for an import in a worker.`, {
+            ["worker url"]: importerUrl,
+            ["imported url"]: url,
+          }),
+        )
+      }
+      throw new Error(`no worker file at ${url}`)
+    }
+    throw e
+  }
+}

package/src/internal/building/resolve_import_url_helper.js CHANGED Viewed

@@ -4,7 +4,8 @@ window.__resolveImportUrl__ = (url, baseUrl) => {
   if (importmapNode) {
     const importmap = JSON.parse(importmapNode.textContent)
-    return new URL(importmap.imports[url], baseUrl)
+    const specifier = importmap.imports[url] || url
+    return new URL(specifier, baseUrl)
   }
   return new URL(url, baseUrl)