@jsenv/core 38.4.19 → 39.0.0

package/dist/js/ribbon.js

@@ -37,26 +37,34 @@ const injectRibbon = ({ text }) => {
         user-select: none;
       }
     `;
-
   const html = /* html */ `<div id="jsenv_ribbon_container">
       <style>${css}</style>
       <div id="jsenv_ribbon">
         <div id="jsenv_ribbon_text">${text}</div>
       </div>
     </div>`;
-
-  const node = document.createElement("div");
-  node.innerHTML = html;
-
+  class JsenvRibbonHtmlElement extends HTMLElement {
+    constructor({ hidden }) {
+      super();
+      const root = this.attachShadow({ mode: "open" });
+      root.innerHTML = html;
+      if (hidden) {
+        root.style.display = "none";
+      }
+    }
+  }
+  if (customElements && !customElements.get("jsenv-ribbon")) {
+    customElements.define("jsenv-ribbon", JsenvRibbonHtmlElement);
+  }
   const toolbarStateInLocalStorage = localStorage.hasOwnProperty(
     "jsenv_toolbar",
   )
     ? JSON.parse(localStorage.getItem("jsenv_toolbar"))
     : {};
-  if (toolbarStateInLocalStorage.ribbonDisplayed === false) {
-    node.querySelector("#jsenv_ribbon_container").style.display = "none";
-  }
-  document.body.appendChild(node.firstChild);
+  const jsenvRibbonElement = new JsenvRibbonHtmlElement({
+    hidden: toolbarStateInLocalStorage.ribbonDisplayed === false,
+  });
+  document.body.appendChild(jsenvRibbonElement);
 };
 
 export { injectRibbon };

package/dist/jsenv_core.js

@@ -9141,15 +9141,15 @@ const JS_QUOTE_REPLACEMENTS = {
  * ```js
  * const file = "./style.css"
  * const type = "css"
- * import(file, { assert: { type }})
+ * import(file, { with: { type }})
  * ```
  * Jsenv could throw an error when it knows some browsers in runtimeCompat
- * do not support import assertions
+ * do not support import attributes
  * But for now (as it is simpler) we let the browser throw the error
  */
 
 
-const jsenvPluginImportAssertions = ({
+const jsenvPluginImportAttributes = ({
   json = "auto",
   css = "auto",
   text = "auto",
@@ -9172,17 +9172,17 @@ const jsenvPluginImportAssertions = ({
       } else {
         const { importTypeAttributeNode } = reference.astInfo;
         const content = reference.ownerUrlInfo.content;
-        const assertKeyboardStart = content.indexOf(
-          "assert",
-          importTypeAttributeNode.start - " assert { ".length,
+        const withKeywordStart = content.indexOf(
+          "with",
+          importTypeAttributeNode.start - " with { ".length,
         );
-        const assertKeywordEnd = content.indexOf(
+        const withKeywordEnd = content.indexOf(
           "}",
           importTypeAttributeNode.end,
         );
         magicSource.remove({
-          start: assertKeyboardStart,
-          end: assertKeywordEnd + 1,
+          start: withKeywordStart,
+          end: withKeywordEnd + 1,
         });
       }
     };
@@ -10161,7 +10161,7 @@ const analyzeConstructableStyleSheetUsage = (urlInfo) => {
         // import('./' + moduleName)
         return false;
       }
-      if (hasImportTypeCssAssertion(node)) {
+      if (hasImportTypeCssAttribute(node)) {
         return node;
       }
       if (hasCssModuleQueryParam(source)) {
@@ -10174,7 +10174,7 @@ const analyzeConstructableStyleSheetUsage = (urlInfo) => {
       if (hasCssModuleQueryParam(source)) {
         return source;
       }
-      if (hasImportTypeCssAssertion(node)) {
+      if (hasImportTypeCssAttribute(node)) {
         return node;
       }
       return false;
@@ -10236,22 +10236,20 @@ const hasCssModuleQueryParam = (node) => {
   );
 };
 
-const hasImportTypeCssAssertion = (node) => {
-  const importAssertionsDescriptor = getImportAssertionsDescriptor(
-    node.assertions,
-  );
-  return Boolean(importAssertionsDescriptor.type === "css");
+const hasImportTypeCssAttribute = (node) => {
+  const importAttributes = getImportAttributes(node);
+  return Boolean(importAttributes.type === "css");
 };
 
-const getImportAssertionsDescriptor = (importAssertions) => {
-  const importAssertionsDescriptor = {};
-  if (importAssertions) {
-    importAssertions.forEach((importAssertion) => {
-      importAssertionsDescriptor[importAssertion.key.name] =
-        importAssertion.value.value;
+const getImportAttributes = (importNode) => {
+  const importAttributes = {};
+  if (importNode.attributes) {
+    importNode.attributes.forEach((importAttributeNode) => {
+      importAttributes[importAttributeNode.key.name] =
+        importAttributeNode.value.value;
     });
   }
-  return importAssertionsDescriptor;
+  return importAttributes;
 };
 
 const babelPluginNewStylesheetInjector = (
@@ -11111,7 +11109,7 @@ const jsenvPluginCssTranspilation = () => {
 
 
 const jsenvPluginTranspilation = ({
-  importAssertions = true,
+  importAttributes = true,
   css = true, // TODO
   // build sets jsModuleFallback: false during first step of the build
   // and re-enable it in the second phase (when performing the bundling)
@@ -11119,8 +11117,8 @@ const jsenvPluginTranspilation = ({
   jsModuleFallback = true,
   babelHelpersAsImport = true,
 }) => {
-  if (importAssertions === true) {
-    importAssertions = {};
+  if (importAttributes === true) {
+    importAttributes = {};
   }
   if (jsModuleFallback === true) {
     jsModuleFallback = {};
@@ -11132,8 +11130,8 @@ const jsenvPluginTranspilation = ({
     }),
     jsenvPluginAsJsModule(),
     ...(jsModuleFallback ? [jsenvPluginJsModuleFallback()] : []),
-    ...(importAssertions
-      ? [jsenvPluginImportAssertions(importAssertions)]
+    ...(importAttributes
+      ? [jsenvPluginImportAttributes(importAttributes)]
       : []),
 
     ...(css ? [jsenvPluginCssTranspilation()] : []),
@@ -15928,7 +15926,8 @@ const jsenvPluginHtmlReferenceAnalysis = ({
               line,
               column,
             });
-            console.error(`Error while handling ${urlInfo.context.request ? urlInfo.context.request.url : urlInfo.url}:
+            urlInfo.kitchen.context.logger
+              .error(`Error while handling ${urlInfo.context.request ? urlInfo.context.request.url : urlInfo.url}:
 ${e.reasonCode}
 ${urlInfo.url}:${line}:${column}
 ${htmlErrorContentFrame}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "38.4.19",
+  "version": "39.0.0",
   "description": "Tool to develop, test and build js projects",
   "license": "MIT",
   "author": {
@@ -64,17 +64,17 @@
   "dependencies": {
     "@financial-times/polyfill-useragent-normaliser": "1.10.2",
     "@jsenv/abort": "4.3.0",
-    "@jsenv/ast": "6.0.7",
+    "@jsenv/ast": "6.1.0",
     "@jsenv/filesystem": "4.7.2",
     "@jsenv/humanize": "1.1.3",
     "@jsenv/importmap": "1.2.1",
     "@jsenv/integrity": "0.0.1",
-    "@jsenv/js-module-fallback": "1.3.16",
+    "@jsenv/js-module-fallback": "1.3.17",
     "@jsenv/node-esm-resolution": "1.0.2",
     "@jsenv/plugin-bundling": "2.6.12",
     "@jsenv/plugin-minification": "1.5.4",
-    "@jsenv/plugin-supervisor": "1.4.11",
-    "@jsenv/plugin-transpilation": "1.3.16",
+    "@jsenv/plugin-supervisor": "1.4.12",
+    "@jsenv/plugin-transpilation": "1.4.0",
     "@jsenv/runtime-compat": "1.3.0",
     "@jsenv/server": "15.2.8",
     "@jsenv/sourcemap": "1.2.10",
@@ -84,7 +84,7 @@
   },
   "devDependencies": {
     "@babel/eslint-parser": "7.24.7",
-    "@babel/plugin-syntax-import-assertions": "7.24.7",
+    "@babel/plugin-syntax-import-attributes": "7.24.7",
     "@babel/plugin-syntax-optional-chaining-assign": "7.24.7",
     "@jsenv/assert": "./packages/independent/assert/",
     "@jsenv/core": "./",

package/src/plugins/reference_analysis/html/jsenv_plugin_html_reference_analysis.js

@@ -151,7 +151,8 @@ export const jsenvPluginHtmlReferenceAnalysis = ({
               line,
               column,
             });
-            console.error(`Error while handling ${urlInfo.context.request ? urlInfo.context.request.url : urlInfo.url}:
+            urlInfo.kitchen.context.logger
+              .error(`Error while handling ${urlInfo.context.request ? urlInfo.context.request.url : urlInfo.url}:
 ${e.reasonCode}
 ${urlInfo.url}:${line}:${column}
 ${htmlErrorContentFrame}`);

package/src/plugins/ribbon/client/ribbon.js

@@ -37,24 +37,32 @@ export const injectRibbon = ({ text }) => {
         user-select: none;
       }
     `;
-
   const html = /* html */ `<div id="jsenv_ribbon_container">
       <style>${css}</style>
       <div id="jsenv_ribbon">
         <div id="jsenv_ribbon_text">${text}</div>
       </div>
     </div>`;
-
-  const node = document.createElement("div");
-  node.innerHTML = html;
-
+  class JsenvRibbonHtmlElement extends HTMLElement {
+    constructor({ hidden }) {
+      super();
+      const root = this.attachShadow({ mode: "open" });
+      root.innerHTML = html;
+      if (hidden) {
+        root.style.display = "none";
+      }
+    }
+  }
+  if (customElements && !customElements.get("jsenv-ribbon")) {
+    customElements.define("jsenv-ribbon", JsenvRibbonHtmlElement);
+  }
   const toolbarStateInLocalStorage = localStorage.hasOwnProperty(
     "jsenv_toolbar",
   )
     ? JSON.parse(localStorage.getItem("jsenv_toolbar"))
     : {};
-  if (toolbarStateInLocalStorage.ribbonDisplayed === false) {
-    node.querySelector("#jsenv_ribbon_container").style.display = "none";
-  }
-  document.body.appendChild(node.firstChild);
+  const jsenvRibbonElement = new JsenvRibbonHtmlElement({
+    hidden: toolbarStateInLocalStorage.ribbonDisplayed === false,
+  });
+  document.body.appendChild(jsenvRibbonElement);
 };