@jsenv/core 26.0.1 → 27.0.0-alpha.2

package/src/omega/core_plugins/html_supervisor/client/html_supervisor_setup.js

@@ -0,0 +1,77 @@
+window.__html_supervisor__ = {
+  // "html_supervisor_installer.js" will implement
+  // - "addExecution"
+  // - "collectScriptResults"
+  // - "superviseScriptTypeModule"
+  // and take all executions in "executions" and implement their supervision
+  executions: [],
+  addExecution: (execution) => {
+    window.__html_supervisor__.executions.push(execution)
+  },
+  collectScriptResults: () => {
+    throw new Error("htmlSupervisor not installed")
+  },
+  superviseScriptTypeModule: () => {
+    throw new Error("htmlSupervisor not installed")
+  },
+  superviseScript: ({ src, crossorigin, integrity }) => {
+    window.__html_supervisor__.addExecution({
+      type: "js_classic",
+      improveErrorWithFetch: true,
+      currentScript: document.currentScript,
+      src,
+      promise: new Promise((resolve, reject) => {
+        const script = document.createElement("script")
+        if (crossorigin) {
+          script.crossorigin = crossorigin
+        }
+        if (integrity) {
+          script.integrity = integrity
+        }
+        script.src = src
+        const scriptUrl = new URL(src, window.location).href
+        let lastWindowErrorUrl
+        let lastWindowError
+        const windowErrorCallback = (e) => {
+          lastWindowErrorUrl = e.filename
+          lastWindowError = e.error
+        }
+        const cleanup = () => {
+          document.body.removeChild(script)
+          window.removeEventListener("error", windowErrorCallback)
+        }
+        window.addEventListener("error", windowErrorCallback)
+        script.addEventListener("error", () => {
+          cleanup()
+          reject(src)
+        })
+        script.addEventListener("load", () => {
+          cleanup()
+          if (lastWindowErrorUrl === scriptUrl) {
+            reject(lastWindowError)
+          } else {
+            resolve()
+          }
+        })
+        document.body.appendChild(script)
+      }),
+    })
+  },
+  getScriptExecutionResults: () => {
+    // wait for page to load before collecting script execution results
+    const htmlReadyPromise = new Promise((resolve) => {
+      if (document.readyState === "complete") {
+        resolve()
+        return
+      }
+      const loadCallback = () => {
+        window.removeEventListener("load", loadCallback)
+        resolve()
+      }
+      window.addEventListener("load", loadCallback)
+    })
+    return htmlReadyPromise.then(() => {
+      return window.__html_supervisor__.collectScriptResults()
+    })
+  },
+}

package/src/omega/core_plugins/html_supervisor/jsenv_plugin_html_supervisor.js

@@ -0,0 +1,233 @@
+/*
+ * Things happening here
+ * - html supervisor module injection
+ * - scripts are wrapped to be supervised
+ *
+ * TODO:
+ *  - if ressource is referenced by ressource hint we should do sthing?
+ *   I think so when we inject ?js_classic
+ */
+
+import { injectQueryParams } from "@jsenv/utils/urls/url_utils.js"
+import {
+  parseHtmlString,
+  stringifyHtmlAst,
+  visitHtmlAst,
+  getHtmlNodeAttributeByName,
+  removeHtmlNodeAttributeByName,
+  setHtmlNodeText,
+  assignHtmlNodeAttributes,
+  parseScriptNode,
+  injectScriptAsEarlyAsPossible,
+  createHtmlNode,
+  htmlNodePosition,
+  removeHtmlNodeText,
+  getHtmlNodeTextNode,
+} from "@jsenv/utils/html_ast/html_ast.js"
+import { generateInlineContentUrl } from "@jsenv/utils/urls/inline_content_url_generator.js"
+
+export const jsenvPluginHtmlSupervisor = ({
+  logs = false,
+  measurePerf = false,
+} = {}) => {
+  const htmlSupervisorSetupFileUrl = new URL(
+    "./client/html_supervisor_setup.js",
+    import.meta.url,
+  ).href
+  const htmlSupervisorInstallerFileUrl = new URL(
+    "./client/html_supervisor_installer.js",
+    import.meta.url,
+  ).href
+
+  return {
+    name: "jsenv:html_supervisor",
+    appliesDuring: {
+      dev: true,
+      test: true,
+    },
+    transform: {
+      html: ({ url, content }, { referenceUtils }) => {
+        const htmlAst = parseHtmlString(content)
+        const scriptsToSupervise = []
+
+        const handleInlineScript = (node, textNode) => {
+          const scriptCategory = parseScriptNode(node)
+          const { line, column, lineEnd, columnEnd, isOriginal } =
+            htmlNodePosition.readNodePosition(node, {
+              preferOriginal: true,
+            })
+          let inlineScriptUrl = generateInlineContentUrl({
+            url,
+            extension: ".js",
+            line,
+            column,
+            lineEnd,
+            columnEnd,
+          })
+          if (scriptCategory === "classic") {
+            inlineScriptUrl = injectQueryParams(inlineScriptUrl, {
+              js_classic: "",
+            })
+          }
+          const [inlineScriptReference] = referenceUtils.foundInline({
+            type: "script_src",
+            line: line - 1,
+            column,
+            isOriginal,
+            specifier: inlineScriptUrl,
+            contentType: "application/javascript",
+            content: textNode.value,
+          })
+          assignHtmlNodeAttributes(node, {
+            "src": inlineScriptReference.generatedSpecifier,
+            "src-generated-from-inline-content": "",
+          })
+          removeHtmlNodeText(node)
+          scriptsToSupervise.push({
+            node,
+            type: scriptCategory,
+            src: inlineScriptReference.generatedSpecifier,
+          })
+        }
+        const handleScriptWithSrc = (node, srcAttribute) => {
+          const scriptCategory = parseScriptNode(node)
+          const integrityAttribute = getHtmlNodeAttributeByName(
+            node,
+            "integrity",
+          )
+          const integrity = integrityAttribute
+            ? integrityAttribute.value
+            : undefined
+          const crossoriginAttribute = getHtmlNodeAttributeByName(
+            node,
+            "crossorigin",
+          )
+          const crossorigin = crossoriginAttribute
+            ? crossoriginAttribute.value
+            : undefined
+          scriptsToSupervise.push({
+            node,
+            type: scriptCategory,
+            src: srcAttribute.value,
+            integrity,
+            crossorigin,
+          })
+        }
+        visitHtmlAst(htmlAst, (node) => {
+          if (node.nodeName !== "script") {
+            return
+          }
+          const scriptCategory = parseScriptNode(node)
+          if (scriptCategory !== "classic" && scriptCategory !== "module") {
+            return
+          }
+          const injectedByAttribute = getHtmlNodeAttributeByName(
+            node,
+            "injected-by",
+          )
+          if (injectedByAttribute) {
+            return
+          }
+          const noHtmlSupervisor = getHtmlNodeAttributeByName(
+            node,
+            "no-html-supervisor",
+          )
+          if (noHtmlSupervisor) {
+            return
+          }
+          const textNode = getHtmlNodeTextNode(node)
+          if (textNode) {
+            handleInlineScript(node, textNode)
+            return
+          }
+          const srcAttribute = getHtmlNodeAttributeByName(node, "src")
+          if (srcAttribute) {
+            handleScriptWithSrc(node, srcAttribute)
+            return
+          }
+        })
+        if (scriptsToSupervise.length === 0) {
+          return null
+        }
+        const [htmlSupervisorInstallerFileReference] = referenceUtils.inject({
+          type: "js_import_export",
+          specifier: htmlSupervisorInstallerFileUrl,
+        })
+        injectScriptAsEarlyAsPossible(
+          htmlAst,
+          createHtmlNode({
+            "tagName": "script",
+            "type": "module",
+            "textContent": `
+import { installHtmlSupervisor } from ${
+              htmlSupervisorInstallerFileReference.generatedSpecifier
+            }
+installHtmlSupervisor(${JSON.stringify(
+              {
+                logs,
+                measurePerf,
+              },
+              null,
+              "  ",
+            )})`,
+            "injected-by": "jsenv:html_supervisor",
+          }),
+        )
+        const [htmlSupervisorSetupFileReference] = referenceUtils.inject({
+          type: "script_src",
+          specifier: injectQueryParams(htmlSupervisorSetupFileUrl, {
+            js_classic: "",
+          }),
+        })
+        injectScriptAsEarlyAsPossible(
+          htmlAst,
+          createHtmlNode({
+            "tagName": "script",
+            "src": htmlSupervisorSetupFileReference.generatedSpecifier,
+            "injected-by": "jsenv:html_supervisor",
+          }),
+        )
+        scriptsToSupervise.forEach(
+          ({ node, type, src, integrity, crossorigin }) => {
+            removeHtmlNodeAttributeByName(node, "src")
+            assignHtmlNodeAttributes(node, {
+              "content-src": src,
+            })
+            setHtmlNodeText(
+              node,
+              generateCodeToSuperviseScript({
+                type,
+                src,
+                integrity,
+                crossorigin,
+                htmlSupervisorInstallerSpecifier:
+                  htmlSupervisorInstallerFileReference.generatedSpecifier,
+              }),
+            )
+          },
+        )
+        const htmlModified = stringifyHtmlAst(htmlAst)
+        return {
+          content: htmlModified,
+        }
+      },
+    },
+  }
+}
+
+// Ideally jsenv should take into account eventual
+// "integrity" and "crossorigin" attribute during supervision
+const generateCodeToSuperviseScript = ({
+  type,
+  src,
+  integrity,
+  crossorigin,
+  htmlSupervisorInstallerSpecifier,
+}) => {
+  const paramsAsJson = JSON.stringify({ src, integrity, crossorigin })
+  if (type === "module") {
+    return `import { superviseScriptTypeModule } from ${htmlSupervisorInstallerSpecifier}
+superviseScriptTypeModule(${paramsAsJson})`
+  }
+  return `window.__html_supervisor__.superviseScript(${paramsAsJson})`
+}

package/src/omega/core_plugins/import_assertions/helpers/babel_plugin_metadata_import_assertions.js

@@ -0,0 +1,98 @@
+export const babelPluginMetadataImportAssertions = () => {
+  return {
+    name: "metadata-import-assertions",
+    visitor: {
+      Program: (programPath, state) => {
+        const importAssertions = collectProgramImportAssertions(programPath)
+        state.file.metadata.importAssertions = importAssertions
+      },
+    },
+  }
+}
+
+/*
+ * Jsenv wont touch code where "specifier" or "type" is dynamic (see code below)
+ * ```js
+ * const file ="./style.css"
+ * const type = "css"
+ * import(file, { assert: { type }})
+ * ```
+ * Jsenv could throw an error because we know browser will fail to execute the code
+ * because import assertions are not supported.
+ * But for now (as it is simpler to do so) we let the browser throw the error
+ */
+const collectProgramImportAssertions = (programPath) => {
+  const importAssertions = []
+  programPath.traverse({
+    CallExpression: (path) => {
+      if (path.node.callee.type !== "Import") {
+        // Some other function call, not import();
+        return
+      }
+      if (path.node.arguments[0].type !== "StringLiteral") {
+        // Non-string argument, probably a variable or expression, e.g.
+        // import(moduleId)
+        // import('./' + moduleName)
+        return
+      }
+      const args = path.node.arguments
+      const secondArg = args[1]
+      if (!secondArg) {
+        return
+      }
+      const { properties } = secondArg
+      const assertProperty = properties.find((property) => {
+        return property.key.name === "assert"
+      })
+      if (!assertProperty) {
+        return
+      }
+      const assertProperties = assertProperty.value.properties
+      const typePropertyNode = assertProperties.find((property) => {
+        return property.key.name === "type"
+      })
+      if (!typePropertyNode) {
+        return
+      }
+      const typePropertyValue = typePropertyNode.value
+      if (typePropertyValue.type !== "StringLiteral") {
+        return
+      }
+      const type = typePropertyValue.value
+      importAssertions.push({
+        path,
+        assert: {
+          type,
+        },
+      })
+    },
+
+    ImportDeclaration: (path) => {
+      const { assertions } = path.node
+      if (!assertions) {
+        return
+      }
+      if (assertions.length === 0) {
+        return
+      }
+      const typeAssertion = assertions.find(
+        (assertion) => assertion.key.name === "type",
+      )
+      if (!typeAssertion) {
+        return
+      }
+      const typeNode = typeAssertion.value
+      if (typeNode.type !== "StringLiteral") {
+        return
+      }
+      const type = typeNode.value
+      importAssertions.push({
+        path,
+        assert: {
+          type,
+        },
+      })
+    },
+  })
+  return importAssertions
+}

package/src/{internal/building/import_assertions → omega/core_plugins/import_assertions/helpers}/json_module.js

@@ -1,4 +1,4 @@
-export const convertJsonTextToJavascriptModule = ({ code }) => {
+export const convertJsonTextToJavascriptModule = ({ content }) => {
   // here we could do the following
   // return export default jsonText
   // This would return valid js, that would be minified later
@@ -6,6 +6,7 @@ export const convertJsonTextToJavascriptModule = ({ code }) => {
   // for js engine to parse JSON than JS
 
   return {
-    code: `export default JSON.parse(${JSON.stringify(code.trim())})`,
+    contentType: "application/javascript",
+    content: `export default JSON.parse(${JSON.stringify(content.trim())})`,
   }
 }

package/src/omega/core_plugins/import_assertions/helpers/text_module.js

@@ -0,0 +1,6 @@
+export const convertTextToJavascriptModule = ({ content }) => {
+  return {
+    contentType: "application/javascript",
+    content: `export default ${JSON.stringify(content)}`,
+  }
+}

package/src/omega/core_plugins/import_assertions/jsenv_plugin_import_assertions.js

@@ -0,0 +1,211 @@
+import { applyBabelPlugins } from "@jsenv/utils/js_ast/apply_babel_plugins.js"
+import { ContentType } from "@jsenv/utils/src/content_type.js"
+import { createMagicSource } from "@jsenv/utils/sourcemap/magic_source.js"
+import { injectQueryParamsIntoSpecifier } from "@jsenv/utils/urls/url_utils.js"
+import { JS_QUOTES } from "@jsenv/utils/string/js_quotes.js"
+
+import { babelPluginMetadataImportAssertions } from "./helpers/babel_plugin_metadata_import_assertions.js"
+import { convertJsonTextToJavascriptModule } from "./helpers/json_module.js"
+import { convertTextToJavascriptModule } from "./helpers/text_module.js"
+
+export const jsenvPluginImportAssertions = () => {
+  const importAssertions = [
+    {
+      name: "jsenv:import_assertions",
+      appliesDuring: "*",
+      transform: {
+        js_module: async (
+          { url, generatedUrl, content },
+          { scenario, isSupportedOnRuntime, referenceUtils },
+        ) => {
+          const importTypesToHandle = getImportTypesToHandle({
+            scenario,
+            isSupportedOnRuntime,
+          })
+          if (importTypesToHandle.length === 0) {
+            return null
+          }
+          const { metadata } = await applyBabelPlugins({
+            babelPlugins: [babelPluginMetadataImportAssertions],
+            url,
+            generatedUrl,
+            content,
+          })
+          const { importAssertions } = metadata
+          const magicSource = createMagicSource(content)
+          importAssertions.forEach((importAssertion) => {
+            const assertType = importAssertion.assert.type
+            if (!importTypesToHandle.includes(assertType)) {
+              return
+            }
+            const { path } = importAssertion
+            const { node } = path
+            const importType = `${assertType}_module`
+            if (node.type === "CallExpression") {
+              const importSpecifierPath = path.get("arguments")[0]
+              const specifier = importSpecifierPath.node.value
+              const newSpecifier = injectQueryParamsIntoSpecifier(specifier, {
+                [importType]: "",
+              })
+              const [newReference, newUrlInfo] = referenceUtils.updateSpecifier(
+                JSON.stringify(specifier),
+                newSpecifier,
+              )
+              newUrlInfo.data.importType = importType
+              magicSource.replace({
+                start: importSpecifierPath.node.start,
+                end: importSpecifierPath.node.end,
+                replacement: newReference.generatedSpecifier,
+              })
+              const secondArgPath = path.get("arguments")[1]
+              magicSource.remove({
+                start: secondArgPath.node.start,
+                end: secondArgPath.node.end,
+              })
+              return
+            }
+            const importSpecifierPath = path.get("source")
+            const specifier = importSpecifierPath.node.value
+            const newSpecifier = injectQueryParamsIntoSpecifier(specifier, {
+              [importType]: "",
+            })
+            const [newReference, newUrlInfo] = referenceUtils.updateSpecifier(
+              JSON.stringify(specifier),
+              newSpecifier,
+            )
+            newUrlInfo.data.importType = importType
+            magicSource.replace({
+              start: importSpecifierPath.node.start,
+              end: importSpecifierPath.node.end,
+              replacement: newReference.generatedSpecifier,
+            })
+            const assertionsPath = path.get("assertions")[0]
+            magicSource.remove({
+              start: assertionsPath.node.start,
+              end: assertionsPath.node.end,
+            })
+          })
+          return magicSource.toContentAndSourcemap()
+        },
+      },
+    },
+  ]
+
+  const importTypeJson = {
+    name: "jsenv:import_type_json",
+    appliesDuring: "*",
+    finalize: ({ url, contentType, content }) => {
+      if (!new URL(url).searchParams.has("json_module")) {
+        return null
+      }
+      if (contentType !== "application/json") {
+        throw new Error(
+          `Unexpected content type on ${url}, should be "application/json" but got ${contentType}`,
+        )
+      }
+      return convertJsonTextToJavascriptModule({
+        content,
+      })
+    },
+  }
+
+  // not standard but I expect this to happen one day?
+  const importTypeText = {
+    name: "jsenv:import_type_text",
+    appliesDuring: "*",
+    finalize: ({ url, contentType, content }) => {
+      if (!new URL(url).searchParams.has("text_module")) {
+        return null
+      }
+      if (ContentType.isTextual(contentType)) {
+        throw new Error(
+          `Unexpected content type on ${url}, should be "text/*" but got ${contentType}`,
+        )
+      }
+      return convertTextToJavascriptModule({
+        content,
+      })
+    },
+  }
+
+  return [
+    importAssertions,
+    importTypeJson,
+    jsenvPluginImportTypeCss(),
+    importTypeText,
+  ]
+}
+
+const jsenvPluginImportTypeCss = () => {
+  const inlineContentClientFileUrl = new URL(
+    "../inline/client/inline_content.js",
+    import.meta.url,
+  ).href
+
+  return {
+    name: "jsenv:import_type_css",
+    appliesDuring: "*",
+    // load the original css url
+    load: ({ data }, { urlGraph, load }) => {
+      if (data.importType !== "css_module") {
+        return null
+      }
+      return load({
+        reference: data.originalReference,
+        urlInfo: urlGraph.getUrlInfo(data.originalReference.url),
+      })
+    },
+    transform: ({ url, data, contentType, content }, { referenceUtils }) => {
+      if (data.importType !== "css_module") {
+        return null
+      }
+      if (contentType !== "text/css") {
+        throw new Error(
+          `Unexpected content type on ${url}, should be "text/css" but got ${contentType}`,
+        )
+      }
+      const [reference] = referenceUtils.inject({
+        type: "js_import_export",
+        specifier: inlineContentClientFileUrl,
+      })
+      const cssText = JS_QUOTES.escapeSpecialChars(content, {
+        // If template string is choosen and runtime do not support template literals
+        // it's ok because "jsenv:new_inline_content" plugin executes after this one
+        // and convert template strings into raw strings
+        canUseTemplateString: true,
+      })
+      return {
+        type: "js_module",
+        contentType: "application/javascript",
+        content: `import { InlineContent } from ${reference.generatedSpecifier}
+
+const css = new InlineContent(${cssText}, { type: "text/css" })
+const stylesheet = new CSSStyleSheet()
+stylesheet.replaceSync(css.text)
+export default stylesheet`,
+      }
+    },
+  }
+}
+
+const getImportTypesToHandle = ({ scenario, isSupportedOnRuntime }) => {
+  // during build always replace import assertions with the js:
+  // - means rollup can bundle more js file together
+  // - means url versioning can work for css inlined in js
+  // - avoid rollup to see import assertions
+  //   We would have to tell rollup to ignore import with assertion
+  if (scenario === "build") {
+    return ["json", "css", "text"]
+  }
+  const importTypes = []
+  if (!isSupportedOnRuntime("import_type_json")) {
+    importTypes.push("json")
+  }
+  if (!isSupportedOnRuntime("import_type_css")) {
+    importTypes.push("css")
+  }
+  if (!isSupportedOnRuntime("import_type_text")) {
+    importTypes.push("text")
+  }
+  return importTypes
+}