@jsenv/core 25.1.0 → 25.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "25.1.0",
+  "version": "25.1.1",
   "description": "Tool to develop, test and build js projects",
   "license": "MIT",
   "repository": {

package/readme.md

@@ -2,7 +2,7 @@
 
 _@jsenv/core_ is a quick start pack to launch a js project. It provides what you need from the beginning: develoment, testing and building all in one.
 
-Jsenv **integrates naturally with standard** HTML, CSS and JS: you don't have to pick a JavaScript framework.
+Jsenv integrates naturally with standard HTML, CSS and JS: you don't have to pick a JavaScript framework.
 
 # Overview
 
@@ -276,7 +276,7 @@ Jsenv relies on **standard web features**. Each standard listed below is potenti
 
 Amongst other use cases, the ease of use and flexibility of jsenv makes it a great tool to start and learn web development.
 
-First because jsenv is a tool that was built to run raw js, html and css. It starts from the **simplest form of coding** in JavaScript. If a browser can run your code, so can jsenv without configuration or things to learn. There is no magic that will bite you right away or later. Jsenv can be configured to add more stuff later, on demand.
+First because jsenv is a tool that was built to run raw js, html and css. It starts from the **simplest form of coding**. If a browser can run your code, so can jsenv without configuration or things to learn. There is no magic that will bite you right away or later. Jsenv can be configured to add more stuff later, on demand.
 
 Second because jsenv is compatible with the latest standards. Even some that are not yet mature in the js ecosystem, such as import maps. This will makes you at ease with technologies that will be part of the ecosystem once you are confortable with coding.
 
@@ -357,9 +357,12 @@ This file helps to see jsenv configuration quickly and share it between files. T
 
 ## babel.config.cjs
 
-When code needs to be transformed, the project must contain a [babel config file](https://babeljs.io/docs/en/config-files).
+You need a babel config file when:
 
-It's recommended to use the following _babel.config.cjs_
+- Your code use non standard concepts. Examples: JSX, TypeScript.
+- You need to be compatible with browsers where some features used by your codebase are not available. Examples: `async/await`, destructuring.
+
+It's recommended to start with the following _babel.config.cjs_
 
 ```js
 /*
@@ -374,14 +377,16 @@ module.exports = {
 }
 ```
 
+This babel config file will be used as explained in [Browser support](./docs/config/browser_support.md). It can also be used to enable [JSX](./docs/config/react.md#Using-JSX) and [TypeScript](./docs/config/typescript.md).
+
 # See also
 
 | Link                                                                                 | Description                                                               |
 | ------------------------------------------------------------------------------------ | ------------------------------------------------------------------------- |
 | [Browser support](./docs/config/browser_support.md)                                  | Document how to configure browser support                                 |
 | [Web workers](./docs/config/web_workers.md)                                          | Document how to use web workers                                           |
+| [NPM package](./docs/config/npm_package.md)                                          | Document how to use a NPM package                                         |
 | [React](./docs/config/react.md)                                                      | Document how to enable react/preact and JSX                               |
-| [CommonJS modules](./docs/config/commonjs.md)                                        | Document how to use code written in CommonJS                              |
 | [TypeScript (Experimental)](./docs/config/typescript.md)                             | Document how to enable TypeScript                                         |
 | [@jsenv/template-pwa](https://github.com/jsenv/jsenv-template-pwa)                   | GitHub repository template for a progressive web application              |
 | [@jsenv/template-node-package](https://github.com/jsenv/jsenv-template-node-package) | GitHub repository template for a node package                             |

package/src/executeTestPlan.js

@@ -254,6 +254,17 @@ export const executeTestPlan = async ({
     await Promise.all(promises)
   }
 
+  // Sometimes on windows test plan scripts never ends
+  // I suspect it's some node process keeping the process alive
+  // because not properly killed for some reason.
+  // (It can be reproduced on @jsenv/importmap-node-module where playwright is not involved)
+  // The hotfix for now is to manually call process.exit() in on windows
+  if (process.platform === "win32") {
+    setTimeout(() => {
+      process.exit()
+    }, 2000).unref()
+  }
+
   return {
     testPlanAborted: result.aborted,
     testPlanSummary: result.planSummary,

package/src/internal/building/html/parseHtmlRessource.js

@@ -24,7 +24,7 @@ import {
   replaceHtmlNode,
   getHtmlNodeAttributeByName,
   stringifyHtmlAst,
-  getUniqueNameForInlineHtmlNode,
+  getIdForInlineHtmlNode,
   removeHtmlNodeAttribute,
   setHtmlNodeText,
   getHtmlNodeTextNode,
@@ -234,11 +234,10 @@ const regularScriptTextNodeVisitor = (
     return null
   }
 
-  const ressourceSpecifier = getUniqueNameForInlineHtmlNode(
-    script,
-    scripts,
-    `${urlToFilename(htmlRessource.url)}__inline__[id].js`,
-  )
+  const scriptId = getIdForInlineHtmlNode(script, scripts)
+  const ressourceSpecifier = `${urlToFilename(
+    htmlRessource.url,
+  )}__inline__${scriptId}.js`
   const jsReference = notifyReferenceFound({
     referenceLabel: "html inline script",
     contentTypeExpected: "application/javascript",
@@ -333,11 +332,10 @@ const moduleScriptTextNodeVisitor = (
     return null
   }
 
-  const ressourceSpecifier = getUniqueNameForInlineHtmlNode(
-    script,
-    scripts,
-    `${urlToFilename(htmlRessource.url)}__inline__[id].js`,
-  )
+  const scriptId = getIdForInlineHtmlNode(script, scripts)
+  const ressourceSpecifier = `${urlToFilename(
+    htmlRessource.url,
+  )}__inline__${scriptId}.js`
   const jsReference = notifyReferenceFound({
     referenceLabel: "html inline module script",
     contentTypeExpected: "application/javascript",
@@ -445,16 +443,14 @@ const importmapScriptTextNodeVisitor = (
     return null
   }
 
+  const importmapScriptId = getIdForInlineHtmlNode(script, scripts)
   const importmapReference = notifyReferenceFound({
     referenceLabel: "html inline importmap",
     contentTypeExpected: "application/importmap+json",
-    ressourceSpecifier: getUniqueNameForInlineHtmlNode(
-      script,
-      scripts,
-      `${urlToFilename(htmlRessource.url)}__inline__[id].importmap`,
-    ),
+    ressourceSpecifier: `${urlToFilename(
+      htmlRessource.url,
+    )}__inline__${importmapScriptId}.importmap`,
     ...referenceLocationFromHtmlNode(script),
-
     contentType: "application/importmap+json",
     bufferBeforeBuild: Buffer.from(textNode.value),
     isInline: true,
@@ -648,16 +644,14 @@ const styleTextNodeVisitor = (
     return null
   }
 
+  const styleId = getIdForInlineHtmlNode(style, styles)
   const inlineStyleReference = notifyReferenceFound({
     referenceLabel: "html style",
     contentTypeExpected: "text/css",
-    ressourceSpecifier: getUniqueNameForInlineHtmlNode(
-      style,
-      styles,
-      `${urlToFilename(htmlRessource.url)}__inline__[id].css`,
-    ),
+    ressourceSpecifier: `${urlToFilename(
+      htmlRessource.url,
+    )}__inline__${styleId}.css`,
     ...referenceLocationFromHtmlNode(style),
-
     contentType: "text/css",
     bufferBeforeBuild: Buffer.from(textNode.value),
     isInline: true,

package/src/internal/compiling/compileHtml.js

@@ -495,35 +495,22 @@ export const createInlineScriptHash = (script) => {
   return hash.digest("hex").slice(0, 8)
 }
 
-export const getUniqueNameForInlineHtmlNode = (node, nodes, pattern) => {
-  return renderNamePattern(pattern, {
-    id: () => {
-      const idAttribute = getHtmlNodeAttributeByName(node, "id")
-      if (idAttribute) {
-        return idAttribute.value
-      }
-
-      const { line, column } = getHtmlNodeLocation(node) || {}
-      const lineTaken = nodes.some((nodeCandidate) => {
-        if (nodeCandidate === node) return false
-        const htmlNodeLocation = getHtmlNodeLocation(nodeCandidate)
-        if (!htmlNodeLocation) return false
-        return htmlNodeLocation.line === line
-      })
-      if (lineTaken) {
-        return `${line}.${column}`
-      }
-
-      return line
-    },
-  })
-}
-
-const renderNamePattern = (pattern, replacements) => {
-  return pattern.replace(/\[(\w+)\]/g, (_match, type) => {
-    const replacement = replacements[type]()
-    return replacement
+export const getIdForInlineHtmlNode = (node, nodes) => {
+  const idAttribute = getHtmlNodeAttributeByName(node, "id")
+  if (idAttribute) {
+    return idAttribute.value
+  }
+  const { line, column } = getHtmlNodeLocation(node) || {}
+  const lineTaken = nodes.some((nodeCandidate) => {
+    if (nodeCandidate === node) return false
+    const htmlNodeLocation = getHtmlNodeLocation(nodeCandidate)
+    if (!htmlNodeLocation) return false
+    return htmlNodeLocation.line === line
   })
+  if (lineTaken) {
+    return `${line}.${column}`
+  }
+  return line
 }
 
 const parseHtmlAsSingleElement = (html) => {

package/src/internal/compiling/html_source_file_service.js

@@ -41,7 +41,7 @@ import {
   removeHtmlNodeAttribute,
   getHtmlNodeTextNode,
   setHtmlNodeText,
-  getUniqueNameForInlineHtmlNode,
+  getIdForInlineHtmlNode,
 } from "./compileHtml.js"
 import { jsenvCoreDirectoryUrl } from "../jsenvCoreDirectoryUrl.js"
 
@@ -121,8 +121,8 @@ export const createTransformHtmlSourceFileService = ({
       jsenvScriptInjection,
       jsenvEventSourceClientInjection,
       jsenvToolbarInjection,
-      onInlineModuleScript: ({ scriptContent, scriptIdentifier }) => {
-        const inlineScriptUrl = resolveUrl(scriptIdentifier, fileUrl)
+      onInlineModuleScript: ({ scriptContent, scriptSpecifier }) => {
+        const inlineScriptUrl = resolveUrl(scriptSpecifier, fileUrl)
         htmlInlineScriptMap.set(inlineScriptUrl, {
           htmlFileUrl: fileUrl,
           scriptContent,
@@ -248,19 +248,18 @@ const transformHTMLSourceFile = async ({
       // inline
       const textNode = getHtmlNodeTextNode(script)
       if (typeAttribute && typeAttribute.value === "module" && textNode) {
-        const scriptIdentifier = getUniqueNameForInlineHtmlNode(
-          script,
-          scripts,
-          `${urlToFilename(fileUrl)}__inline__[id].js`,
-        )
+        const scriptId = getIdForInlineHtmlNode(script, scripts)
+        const scriptSpecifier = `${urlToFilename(
+          fileUrl,
+        )}__inline__${scriptId}.js`
         onInlineModuleScript({
           scriptContent: textNode.value,
-          scriptIdentifier,
+          scriptSpecifier,
         })
         setHtmlNodeText(
           script,
           `window.__jsenv__.executeFileUsingDynamicImport(${JSON.stringify(
-            `./${scriptIdentifier}`,
+            `./${scriptSpecifier}`,
           )})`,
         )
         return

package/src/internal/compiling/jsenvCompilerForHtml.js

@@ -30,7 +30,7 @@ import {
   stringifyHtmlAst,
   getHtmlNodeAttributeByName,
   getHtmlNodeTextNode,
-  getUniqueNameForInlineHtmlNode,
+  getIdForInlineHtmlNode,
   removeHtmlNodeAttribute,
   setHtmlNodeText,
   visitHtmlAst,
@@ -365,11 +365,8 @@ const visitScripts = async ({
         return
       }
 
-      const inlineScriptName = getUniqueNameForInlineHtmlNode(
-        script,
-        scripts,
-        `[id].js`,
-      )
+      const scriptId = getIdForInlineHtmlNode(script, scripts)
+      const inlineScriptName = `${scriptId}.js`
       const scriptOriginalUrl = resolveUrl(inlineScriptName, url)
       const scriptCompiledUrl = generateCompiledFileAssetUrl(
         compiledUrl,
@@ -482,11 +479,8 @@ const visitScripts = async ({
         })
         return
       }
-      const inlineScriptName = getUniqueNameForInlineHtmlNode(
-        script,
-        scripts,
-        `[id].js`,
-      )
+      const scriptId = getIdForInlineHtmlNode(script, scripts)
+      const inlineScriptName = `${scriptId}.js`
       const scriptOriginalUrl = resolveUrl(inlineScriptName, url)
       const scriptCompiledUrl = generateCompiledFileAssetUrl(
         compiledUrl,