@jsenv/core 29.2.1 → 29.3.0-alpha.1

package/dist/js/ribbon.js

@@ -0,0 +1,53 @@
+const injectRibbon = ({
+  text
+}) => {
+  const css = /* css */`
+      #jsenv_ribbon_container {
+        position: absolute;
+        z-index: 1001;
+        top: 0;
+        right: 0;
+        width: 100px;
+        height: 100px;
+        overflow: hidden;
+        opacity: 0.5;
+        pointer-events: none;
+      }
+      #jsenv_ribbon {
+        position: absolute;
+        top: -10px;
+        right: -10px;
+        width: 100%;
+        height: 100%;
+      }
+      #jsenv_ribbon_text {
+        position: absolute;
+        left: 0px;
+        top: 20px;
+        transform: rotate(45deg);
+        display: block;
+        width: 125px;
+        line-height: 36px;
+        background-color: orange;
+        color: rgb(55, 7, 7);
+        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+        font-weight: 700;
+        font-size: 16px;
+        font-family: "Lato", sans-serif;
+        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+        text-align: center;
+        user-select: none;
+      }
+    `;
+  const html = /* html */`<div id="jsenv_ribbon_container">
+      <style>${css}</style>
+      <div id="jsenv_ribbon">
+        <div id="jsenv_ribbon_text">${text}</span>
+      </div>
+    </div>`;
+  const node = document.createElement("div");
+  node.innerHTML = html;
+  document.body.appendChild(node.firstChild);
+};
+
+export { injectRibbon };

package/dist/main.js

@@ -16,7 +16,7 @@ import { Readable, Stream, Writable } from "node:stream";
 import { Http2ServerResponse } from "node:http2";
 import { lookup } from "node:dns";
 import { SOURCEMAP, generateSourcemapFileUrl, composeTwoSourcemaps, generateSourcemapDataUrl, createMagicSource, sourcemapConverter, getOriginalPosition } from "@jsenv/sourcemap";
-import { parseHtmlString, stringifyHtmlAst, getHtmlNodeAttribute, visitHtmlNodes, analyzeScriptNode, setHtmlNodeAttributes, parseSrcSet, getHtmlNodePosition, getHtmlNodeAttributePosition, applyPostCss, postCssPluginUrlVisitor, parseJsUrls, getHtmlNodeText, setHtmlNodeText, applyBabelPlugins, injectScriptNodeAsEarlyAsPossible, createHtmlNode, findHtmlNode, removeHtmlNode, removeHtmlNodeText, transpileWithParcel, injectJsImport, minifyWithParcel, analyzeLinkNode } from "@jsenv/ast";
+import { parseHtmlString, stringifyHtmlAst, getHtmlNodeAttribute, visitHtmlNodes, analyzeScriptNode, setHtmlNodeAttributes, parseSrcSet, getHtmlNodePosition, getHtmlNodeAttributePosition, applyPostCss, postCssPluginUrlVisitor, parseJsUrls, getHtmlNodeText, setHtmlNodeText, applyBabelPlugins, injectScriptNodeAsEarlyAsPossible, createHtmlNode, findHtmlNode, removeHtmlNode, removeHtmlNodeText, transpileWithParcel, injectJsImport, minifyWithParcel, analyzeLinkNode, injectHtmlNode } from "@jsenv/ast";
 import { createRequire } from "node:module";
 import babelParser from "@babel/parser";
 import v8, { takeCoverage } from "node:v8";
@@ -20655,6 +20655,59 @@ const jsenvPluginExplorer = ({
   };
 };
 
+const jsenvPluginRibbon = ({
+  htmlInclude = "**/*.html",
+  allowDuringBuild = false,
+  options = {}
+} = {}) => {
+  const ribbonClientFileUrl = new URL("./js/ribbon.js", import.meta.url);
+  const associations = URL_META.resolveAssociations({
+    ribbon: {
+      [htmlInclude]: true
+    }
+  }, "file://");
+  return {
+    name: "jsenv:ribbon",
+    appliesDuring: "*",
+    transformHtmlContent: {
+      html: (urlInfo, context) => {
+        if (context.scenarios.build && !allowDuringBuild) {
+          return null;
+        }
+        const {
+          ribbon
+        } = URL_META.applyAssociations({
+          url: urlInfo.url,
+          associations
+        });
+        if (!ribbon) {
+          return null;
+        }
+        const htmlAst = parseHtmlString(urlInfo.content);
+        const [ribbonClientFileReference] = context.referenceUtils.inject({
+          type: "script_src",
+          subtype: "js_module",
+          expectedType: "js_module",
+          specifier: ribbonClientFileUrl
+        });
+        options = {
+          text: context.scenarios.dev ? "DEV" : "BUILD",
+          ...options
+        };
+        injectHtmlNode(htmlAst, createHtmlNode({
+          tagName: "script",
+          type: "module",
+          content: `
+import { injectRibbon} from ${ribbonClientFileReference.generatedSpecifier}
+
+injectRibbon(${JSON.stringify(options, null, "  ")})`
+        }));
+        return stringifyHtmlAst(htmlAst);
+      }
+    }
+  };
+};
+
 const getCorePlugins = ({
   rootDirectoryUrl,
   runtimeCompat,
@@ -20670,7 +20723,8 @@ const getCorePlugins = ({
   clientAutoreload = false,
   clientFileChangeCallbackList,
   clientFilesPruneCallbackList,
-  explorer
+  explorer,
+  ribbon = false
 } = {}) => {
   if (explorer === true) {
     explorer = {};
@@ -20689,6 +20743,9 @@ const getCorePlugins = ({
   } else {
     clientMainFileUrl = String(clientMainFileUrl);
   }
+  if (ribbon === true) {
+    ribbon = {};
+  }
   return [jsenvPluginUrlAnalysis({
     rootDirectoryUrl,
     ...urlAnalysis
@@ -20715,7 +20772,7 @@ const getCorePlugins = ({
   })] : []), jsenvPluginCacheControl(), ...(explorer ? [jsenvPluginExplorer({
     ...explorer,
     clientMainFileUrl
-  })] : [])];
+  })] : []), ...(ribbon ? [jsenvPluginRibbon(ribbon)] : [])];
 };
 
 const GRAPH = {
@@ -21077,6 +21134,7 @@ const build = async ({
   versioningMethod = "search_param",
   // "filename", "search_param"
   lineBreakNormalization = process.platform === "win32",
+  ribbon,
   clientFiles = {
     "./src/": true
   },
@@ -21166,7 +21224,8 @@ build ${entryPointKeys.length} entry points`);
           jsClassicFallback: false
         },
         minification,
-        bundling
+        bundling,
+        ribbon
       })],
       sourcemaps,
       sourcemapsSourcesContent,
@@ -22447,6 +22506,7 @@ const createFileService = ({
   clientMainFileUrl,
   cooldownBetweenFileEvents,
   explorer,
+  ribbon,
   sourcemaps,
   sourcemapsSourcesProtocol,
   sourcemapsSourcesContent,
@@ -22550,7 +22610,8 @@ const createFileService = ({
         clientAutoreload,
         clientFileChangeCallbackList,
         clientFilesPruneCallbackList,
-        explorer
+        explorer,
+        ribbon
       })],
       sourcemaps,
       sourcemapsSourcesProtocol,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "29.2.1",
+  "version": "29.3.0-alpha.1",
   "description": "Tool to develop, test and build js projects",
   "license": "MIT",
   "author": {
@@ -66,7 +66,7 @@
     "@c88/v8-coverage": "0.1.1",
     "@financial-times/polyfill-useragent-normaliser": "1.10.2",
     "@jsenv/abort": "4.2.4",
-    "@jsenv/ast": "1.3.3",
+    "@jsenv/ast": "1.4.1",
     "@jsenv/babel-plugins": "1.0.8",
     "@jsenv/filesystem": "4.1.5",
     "@jsenv/importmap": "1.2.1",
@@ -99,8 +99,8 @@
   "devDependencies": {
     "@babel/eslint-parser": "7.19.1",
     "@babel/plugin-syntax-import-assertions": "7.18.6",
-    "@jsenv/assert": "2.7.0",
-    "@jsenv/eslint-config": "16.2.5",
+    "@jsenv/assert": "./packages/assert/",
+    "@jsenv/eslint-config": "./packages/eslint-config/",
     "@jsenv/file-size-impact": "13.0.1",
     "@jsenv/https-local": "3.0.1",
     "@jsenv/package-workspace": "0.5.0",

package/src/build/build.js

@@ -132,6 +132,7 @@ export const build = async ({
   versioning = true,
   versioningMethod = "search_param", // "filename", "search_param"
   lineBreakNormalization = process.platform === "win32",
+  ribbon,
 
   clientFiles = {
     "./src/": true,
@@ -231,6 +232,7 @@ build ${entryPointKeys.length} entry points`)
           },
           minification,
           bundling,
+          ribbon,
         }),
       ],
       sourcemaps,

package/src/dev/file_service.js

@@ -35,6 +35,7 @@ export const createFileService = ({
   clientMainFileUrl,
   cooldownBetweenFileEvents,
   explorer,
+  ribbon,
   sourcemaps,
   sourcemapsSourcesProtocol,
   sourcemapsSourcesContent,
@@ -138,6 +139,7 @@ export const createFileService = ({
           clientFileChangeCallbackList,
           clientFilesPruneCallbackList,
           explorer,
+          ribbon,
         }),
       ],
       sourcemaps,

package/src/plugins/plugins.js

@@ -22,6 +22,8 @@ import {
   explorerHtmlFileUrl,
   jsenvPluginExplorer,
 } from "./explorer/jsenv_plugin_explorer.js"
+// other
+import { jsenvPluginRibbon } from "./ribbon/jsenv_plugin_ribbon.js"
 
 export const getCorePlugins = ({
   rootDirectoryUrl,
@@ -41,6 +43,7 @@ export const getCorePlugins = ({
   clientFileChangeCallbackList,
   clientFilesPruneCallbackList,
   explorer,
+  ribbon = false,
 } = {}) => {
   if (explorer === true) {
     explorer = {}
@@ -61,6 +64,9 @@ export const getCorePlugins = ({
   } else {
     clientMainFileUrl = String(clientMainFileUrl)
   }
+  if (ribbon === true) {
+    ribbon = {}
+  }
 
   return [
     jsenvPluginUrlAnalysis({ rootDirectoryUrl, ...urlAnalysis }),
@@ -100,12 +106,8 @@ export const getCorePlugins = ({
       : []),
     jsenvPluginCacheControl(),
     ...(explorer
-      ? [
-          jsenvPluginExplorer({
-            ...explorer,
-            clientMainFileUrl,
-          }),
-        ]
+      ? [jsenvPluginExplorer({ ...explorer, clientMainFileUrl })]
       : []),
+    ...(ribbon ? [jsenvPluginRibbon(ribbon)] : []),
   ]
 }

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

@@ -0,0 +1,51 @@
+export const injectRibbon = ({ text }) => {
+  const css = /* css */ `
+      #jsenv_ribbon_container {
+        position: absolute;
+        z-index: 1001;
+        top: 0;
+        right: 0;
+        width: 100px;
+        height: 100px;
+        overflow: hidden;
+        opacity: 0.5;
+        pointer-events: none;
+      }
+      #jsenv_ribbon {
+        position: absolute;
+        top: -10px;
+        right: -10px;
+        width: 100%;
+        height: 100%;
+      }
+      #jsenv_ribbon_text {
+        position: absolute;
+        left: 0px;
+        top: 20px;
+        transform: rotate(45deg);
+        display: block;
+        width: 125px;
+        line-height: 36px;
+        background-color: orange;
+        color: rgb(55, 7, 7);
+        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
+        font-weight: 700;
+        font-size: 16px;
+        font-family: "Lato", sans-serif;
+        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+        text-align: center;
+        user-select: none;
+      }
+    `
+
+  const html = /* html */ `<div id="jsenv_ribbon_container">
+      <style>${css}</style>
+      <div id="jsenv_ribbon">
+        <div id="jsenv_ribbon_text">${text}</span>
+      </div>
+    </div>`
+
+  const node = document.createElement("div")
+  node.innerHTML = html
+  document.body.appendChild(node.firstChild)
+}

package/src/plugins/ribbon/jsenv_plugin_ribbon.js

@@ -0,0 +1,62 @@
+import {
+  parseHtmlString,
+  stringifyHtmlAst,
+  createHtmlNode,
+  injectHtmlNode,
+} from "@jsenv/ast"
+import { URL_META } from "@jsenv/url-meta"
+
+export const jsenvPluginRibbon = ({
+  htmlInclude = "**/*.html",
+  allowDuringBuild = false,
+  options = {},
+} = {}) => {
+  const ribbonClientFileUrl = new URL("./client/ribbon.js", import.meta.url)
+  const associations = URL_META.resolveAssociations(
+    {
+      ribbon: { [htmlInclude]: true },
+    },
+    "file://",
+  )
+  return {
+    name: "jsenv:ribbon",
+    appliesDuring: "*",
+    transformHtmlContent: {
+      html: (urlInfo, context) => {
+        if (context.scenarios.build && !allowDuringBuild) {
+          return null
+        }
+        const { ribbon } = URL_META.applyAssociations({
+          url: urlInfo.url,
+          associations,
+        })
+        if (!ribbon) {
+          return null
+        }
+        const htmlAst = parseHtmlString(urlInfo.content)
+        const [ribbonClientFileReference] = context.referenceUtils.inject({
+          type: "script_src",
+          subtype: "js_module",
+          expectedType: "js_module",
+          specifier: ribbonClientFileUrl,
+        })
+        options = {
+          text: context.scenarios.dev ? "DEV" : "BUILD",
+          ...options,
+        }
+        injectHtmlNode(
+          htmlAst,
+          createHtmlNode({
+            tagName: "script",
+            type: "module",
+            content: `
+import { injectRibbon} from ${ribbonClientFileReference.generatedSpecifier}
+
+injectRibbon(${JSON.stringify(options, null, "  ")})`,
+          }),
+        )
+        return stringifyHtmlAst(htmlAst)
+      },
+    },
+  }
+}