@jsenv/core 27.0.0-alpha.9 → 27.0.0-alpha.92

package/src/plugins/html_supervisor/jsenv_plugin_html_supervisor.js

@@ -0,0 +1,239 @@
+/*
+ * Things happening here
+ * - html supervisor module injection
+ * - scripts are wrapped to be supervised
+ */
+
+import {
+  parseHtmlString,
+  stringifyHtmlAst,
+  visitHtmlNodes,
+  getHtmlNodeAttribute,
+  setHtmlNodeAttributes,
+  analyzeScriptNode,
+  injectScriptNodeAsEarlyAsPossible,
+  createHtmlNode,
+  getHtmlNodePosition,
+  getHtmlNodeText,
+  removeHtmlNodeText,
+  setHtmlNodeText,
+} from "@jsenv/ast"
+import { generateInlineContentUrl } from "@jsenv/urls"
+
+export const jsenvPluginHtmlSupervisor = ({
+  logs = false,
+  measurePerf = false,
+}) => {
+  const htmlSupervisorSetupFileUrl = new URL(
+    "./client/html_supervisor_setup.js?js_classic",
+    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,
+    },
+    transformUrlContent: {
+      html: ({ url, content }, { referenceUtils }) => {
+        const htmlAst = parseHtmlString(content)
+        const scriptsToSupervise = []
+
+        const handleInlineScript = (node, htmlNodeText) => {
+          const scriptCategory = analyzeScriptNode(node)
+          const { line, column, lineEnd, columnEnd, isOriginal } =
+            getHtmlNodePosition(node, {
+              preferOriginal: true,
+            })
+          let inlineScriptUrl = generateInlineContentUrl({
+            url,
+            extension: ".js",
+            line,
+            column,
+            lineEnd,
+            columnEnd,
+          })
+          const [inlineScriptReference] = referenceUtils.foundInline({
+            type: "script_src",
+            expectedType: { classic: "js_classic", module: "js_module" }[
+              scriptCategory
+            ],
+            isOriginalPosition: isOriginal,
+            specifierLine: line - 1,
+            specifierColumn: column,
+            specifier: inlineScriptUrl,
+            contentType: "text/javascript",
+            content: htmlNodeText,
+          })
+          removeHtmlNodeText(node)
+          scriptsToSupervise.push({
+            node,
+            isInline: true,
+            type: scriptCategory,
+            src: inlineScriptReference.generatedSpecifier,
+          })
+        }
+        const handleScriptWithSrc = (node, src) => {
+          const scriptCategory = analyzeScriptNode(node)
+          const integrity = getHtmlNodeAttribute(node, "integrity")
+          const crossorigin =
+            getHtmlNodeAttribute(node, "crossorigin") !== undefined
+          const defer = getHtmlNodeAttribute(node, "defer") !== undefined
+          const async = getHtmlNodeAttribute(node, "async") !== undefined
+          setHtmlNodeAttributes(node, {
+            src: undefined,
+          })
+          scriptsToSupervise.push({
+            node,
+            type: scriptCategory,
+            src,
+            defer,
+            async,
+            integrity,
+            crossorigin,
+          })
+        }
+        visitHtmlNodes(htmlAst, {
+          script: (node) => {
+            const scriptCategory = analyzeScriptNode(node)
+            if (scriptCategory !== "classic" && scriptCategory !== "module") {
+              return
+            }
+            const injectedBy = getHtmlNodeAttribute(node, "injected-by")
+            if (injectedBy !== undefined) {
+              return
+            }
+            const noHtmlSupervisor = getHtmlNodeAttribute(
+              node,
+              "no-html-supervisor",
+            )
+            if (noHtmlSupervisor !== undefined) {
+              return
+            }
+            const htmlNodeText = getHtmlNodeText(node)
+            if (htmlNodeText) {
+              handleInlineScript(node, htmlNodeText)
+              return
+            }
+            const src = getHtmlNodeAttribute(node, "src")
+            if (src) {
+              handleScriptWithSrc(node, src)
+              return
+            }
+          },
+        })
+        const [htmlSupervisorInstallerFileReference] = referenceUtils.inject({
+          type: "js_import_export",
+          expectedType: "js_module",
+          specifier: htmlSupervisorInstallerFileUrl,
+        })
+        injectScriptNodeAsEarlyAsPossible(
+          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",
+          expectedType: "js_classic",
+          specifier: htmlSupervisorSetupFileUrl,
+        })
+        injectScriptNodeAsEarlyAsPossible(
+          htmlAst,
+          createHtmlNode({
+            "tagName": "script",
+            "src": htmlSupervisorSetupFileReference.generatedSpecifier,
+            "injected-by": "jsenv:html_supervisor",
+          }),
+        )
+        scriptsToSupervise.forEach(
+          ({
+            node,
+            isInline,
+            type,
+            src,
+            defer,
+            async,
+            integrity,
+            crossorigin,
+          }) => {
+            setHtmlNodeText(
+              node,
+              generateCodeToSuperviseScript({
+                type,
+                src,
+                isInline,
+                defer,
+                async,
+                integrity,
+                crossorigin,
+                htmlSupervisorInstallerSpecifier:
+                  htmlSupervisorInstallerFileReference.generatedSpecifier,
+              }),
+            )
+            setHtmlNodeAttributes(node, {
+              "generated-by": "jsenv:html_supervisor",
+              ...(src ? { "generated-from-src": src } : {}),
+              ...(isInline ? { "generated-from-inline-content": "" } : {}),
+            })
+          },
+        )
+        const htmlModified = stringifyHtmlAst(htmlAst)
+        return {
+          content: htmlModified,
+        }
+      },
+    },
+  }
+}
+
+// Ideally jsenv should take into account eventual
+// "integrity" and "crossorigin" attribute during supervision
+const generateCodeToSuperviseScript = ({
+  type,
+  src,
+  isInline,
+  defer,
+  async,
+  integrity,
+  crossorigin,
+  htmlSupervisorInstallerSpecifier,
+}) => {
+  const paramsAsJson = JSON.stringify({
+    src,
+    isInline,
+    defer,
+    async,
+    integrity,
+    crossorigin,
+  })
+  if (type === "module") {
+    return `
+      import { superviseScriptTypeModule } from ${htmlSupervisorInstallerSpecifier}
+      superviseScriptTypeModule(${paramsAsJson})
+`
+  }
+  return `
+      window.__html_supervisor__.superviseScript(${paramsAsJson})
+`
+}

package/src/plugins/http_urls/jsenv_plugin_http_urls.js

@@ -0,0 +1,16 @@
+export const jsenvPluginHttpUrls = () => {
+  return {
+    name: "jsenv:http_urls",
+    appliesDuring: "*",
+    redirectUrl: (reference) => {
+      if (
+        reference.url.startsWith("http:") ||
+        reference.url.startsWith("https:")
+      ) {
+        reference.shouldHandle = false
+      }
+      // TODO: according to some pattern matching jsenv could be allowed
+      // to fetch and transform http urls
+    },
+  }
+}

package/src/{dev/plugins/autoreload → plugins/import_meta_hot}/babel_plugin_metadata_import_meta_hot.js

@@ -16,13 +16,12 @@ export const babelPluginMetadataImportMetaHot = () => {
   }
 }
 const collectImportMetaProperties = (programPath) => {
-  let importMetaHotDetected = false
+  const importMetaHotPaths = []
   let hotDecline = false
   let hotAcceptSelf = false
   let hotAcceptDependencies = []
   programPath.traverse({
     MemberExpression(path) {
-      if (importMetaHotDetected) return
       const { node } = path
       const { object } = node
       if (object.type !== "MetaProperty") {
@@ -35,7 +34,7 @@ const collectImportMetaProperties = (programPath) => {
       const { property } = node
       const { name } = property
       if (name === "hot") {
-        importMetaHotDetected = true
+        importMetaHotPaths.push(path)
       }
     },
     CallExpression(path) {
@@ -64,7 +63,7 @@ const collectImportMetaProperties = (programPath) => {
               )
             }
             return {
-              specifierPath: firstArgPath.get(index),
+              specifierPath: firstArgPath.get(String(index)),
             }
           })
           return
@@ -79,7 +78,7 @@ const collectImportMetaProperties = (programPath) => {
     },
   })
   return {
-    importMetaHotDetected,
+    importMetaHotPaths,
     hotDecline,
     hotAcceptSelf,
     hotAcceptDependencies,

package/src/{dev/plugins/autoreload → plugins/import_meta_hot}/client/import_meta_hot.js

@@ -40,7 +40,9 @@ export const createImportMetaHot = (importMetaUrl) => {
         })
         return
       }
-      throw new Error(`invalid call to hot.accept()`)
+      throw new Error(
+        `invalid call to import.meta.hot.accept(), received ${firstArg}`,
+      )
     },
     dispose: (callback) => {
       addUrlMeta(url, {

package/src/{dev/plugins/autoreload → plugins/import_meta_hot}/html_hot_dependencies.js

@@ -1,8 +1,4 @@
-import {
-  getHtmlNodeAttributeByName,
-  parseLinkNode,
-} from "@jsenv/utils/html_ast/html_ast.js"
-import { htmlAttributeSrcSet } from "@jsenv/utils/html_ast/html_attribute_src_set.js"
+import { getHtmlNodeAttribute, analyzeLinkNode, parseSrcSet } from "@jsenv/ast"
 
 // Some "smart" default applied to decide what should hot reload / fullreload:
 // By default:
@@ -28,8 +24,7 @@ export const collectHotDataFromHtmlAst = (htmlAst) => {
   }
 
   const visitUrlSpecifierAttribute = ({ node, attributeName, hotAccepted }) => {
-    const attribute = getHtmlNodeAttributeByName(node, attributeName)
-    const value = attribute ? attribute.value : undefined
+    const value = getHtmlNodeAttribute(node, attributeName)
     if (value) {
       onSpecifier({
         specifier: value,
@@ -53,7 +48,7 @@ export const collectHotDataFromHtmlAst = (htmlAst) => {
       })
       visitUrlSpecifierAttribute({
         node,
-        attributeName: "content-href",
+        attributeName: "generated-from-href",
         hotAccepted,
       })
     }
@@ -65,15 +60,14 @@ export const collectHotDataFromHtmlAst = (htmlAst) => {
       })
       visitUrlSpecifierAttribute({
         node,
-        attributeName: "content-src",
+        attributeName: "generated-from-src",
         hotAccepted,
       })
     }
     if (nodeNamesWithSrcset.includes(node.nodeName)) {
-      const srcsetAttribute = getHtmlNodeAttributeByName(node, "srcset")
-      const srcset = srcsetAttribute ? srcsetAttribute.value : undefined
+      const srcset = getHtmlNodeAttribute(node, "srcset")
       if (srcset) {
-        const srcCandidates = htmlAttributeSrcSet.parse(srcset)
+        const srcCandidates = parseSrcSet(srcset)
         srcCandidates.forEach((srcCandidate) => {
           onSpecifier({
             node,
@@ -103,7 +97,7 @@ export const collectHotDataFromHtmlAst = (htmlAst) => {
   }
   iterate(htmlAst, {})
 
-  return { hotReferences }
+  return hotReferences
 }
 
 const nodeNamesWithHref = ["link", "a", "image", "use"]
@@ -112,12 +106,12 @@ const nodeNamesWithSrcset = ["img", "source"]
 
 const getNodeContext = (node) => {
   const context = {}
-  const hotAcceptAttribute = getHtmlNodeAttributeByName(node, "hot-accept")
-  if (hotAcceptAttribute) {
+  const hotAccept = getHtmlNodeAttribute(node, "hot-accept")
+  if (hotAccept !== undefined) {
     context.hotAccepted = true
   }
-  const hotDeclineAttribute = getHtmlNodeAttributeByName(node, "hot-decline")
-  if (hotDeclineAttribute) {
+  const hotDecline = getHtmlNodeAttribute(node, "hot-decline")
+  if (hotDecline !== undefined) {
     context.hotAccepted = false
   }
   return context
@@ -125,7 +119,7 @@ const getNodeContext = (node) => {
 
 const htmlNodeCanHotReload = (node) => {
   if (node.nodeName === "link") {
-    const { isStylesheet, isRessourceHint } = parseLinkNode(node)
+    const { isStylesheet, isRessourceHint, rel } = analyzeLinkNode(node)
     if (isStylesheet) {
       // stylesheets can be hot replaced by default
       return true
@@ -135,6 +129,9 @@ const htmlNodeCanHotReload = (node) => {
       // but we won't do anything (if the ressource is deleted we should?)
       return true
     }
+    if (rel === "icon") {
+      return true
+    }
     return false
   }
   return [

package/src/plugins/import_meta_hot/jsenv_plugin_import_meta_hot.js

@@ -0,0 +1,100 @@
+import { createMagicSource } from "@jsenv/sourcemap"
+import { parseHtmlString, applyBabelPlugins } from "@jsenv/ast"
+
+import { collectHotDataFromHtmlAst } from "./html_hot_dependencies.js"
+import { babelPluginMetadataImportMetaHot } from "./babel_plugin_metadata_import_meta_hot.js"
+
+export const jsenvPluginImportMetaHot = () => {
+  const importMetaHotClientFileUrl = new URL(
+    "./client/import_meta_hot.js",
+    import.meta.url,
+  ).href
+
+  return {
+    name: "jsenv:import_meta_hot",
+    appliesDuring: "*",
+    transformUrlContent: {
+      html: (htmlUrlInfo, context) => {
+        // during build we don't really care to parse html hot dependencies
+        if (context.scenario === "build") {
+          return
+        }
+        const htmlAst = parseHtmlString(htmlUrlInfo.content)
+        const hotReferences = collectHotDataFromHtmlAst(htmlAst)
+        htmlUrlInfo.data.hotDecline = false
+        htmlUrlInfo.data.hotAcceptSelf = false
+        htmlUrlInfo.data.hotAcceptDependencies = hotReferences.map(
+          ({ type, specifier }) => {
+            const [reference] = context.referenceUtils.found({
+              type,
+              specifier,
+            })
+            return reference.url
+          },
+        )
+      },
+      css: (cssUrlInfo) => {
+        cssUrlInfo.data.hotDecline = false
+        cssUrlInfo.data.hotAcceptSelf = false
+        cssUrlInfo.data.hotAcceptDependencies = []
+      },
+      js_module: async (urlInfo, context) => {
+        if (!urlInfo.content.includes("import.meta.hot")) {
+          return null
+        }
+        const { metadata } = await applyBabelPlugins({
+          babelPlugins: [babelPluginMetadataImportMetaHot],
+          urlInfo,
+        })
+        const {
+          importMetaHotPaths,
+          hotDecline,
+          hotAcceptSelf,
+          hotAcceptDependencies,
+        } = metadata
+        urlInfo.data.hotDecline = hotDecline
+        urlInfo.data.hotAcceptSelf = hotAcceptSelf
+        urlInfo.data.hotAcceptDependencies = hotAcceptDependencies
+        if (importMetaHotPaths.length === 0) {
+          return null
+        }
+        if (context.scenario === "build") {
+          return removeImportMetaHots(urlInfo, importMetaHotPaths)
+        }
+        return injectImportMetaHot(urlInfo, context, importMetaHotClientFileUrl)
+      },
+    },
+  }
+}
+
+const removeImportMetaHots = (urlInfo, importMetaHotPaths) => {
+  const magicSource = createMagicSource(urlInfo.content)
+  importMetaHotPaths.forEach((path) => {
+    magicSource.replace({
+      start: path.node.start,
+      end: path.node.end,
+      replacement: "undefined",
+    })
+  })
+  return magicSource.toContentAndSourcemap()
+}
+
+// For some reason using magic source here produce
+// better sourcemap than doing the equivalent with babel
+// I suspect it's because I was doing injectAstAfterImport(programPath, ast.program.body[0])
+// which is likely not well supported by babel
+const injectImportMetaHot = (urlInfo, context, importMetaHotClientFileUrl) => {
+  const [importMetaHotClientFileReference] = context.referenceUtils.inject({
+    parentUrl: urlInfo.url,
+    type: "js_import_export",
+    expectedType: "js_module",
+    specifier: importMetaHotClientFileUrl,
+  })
+  const magicSource = createMagicSource(urlInfo.content)
+  magicSource.prepend(
+    `import { createImportMetaHot } from ${importMetaHotClientFileReference.generatedSpecifier}
+import.meta.hot = createImportMetaHot(import.meta.url)
+`,
+  )
+  return magicSource.toContentAndSourcemap()
+}

package/src/{omega/core_plugins → plugins}/import_meta_scenarios/jsenv_plugin_import_meta_scenarios.js

@@ -9,21 +9,25 @@
  * - replaced by undefined (import.meta.dev but it's build; the goal is to ensure it's tree-shaked)
  */
 
-import { applyBabelPlugins } from "@jsenv/utils/js_ast/apply_babel_plugins.js"
-import { createMagicSource } from "@jsenv/utils/sourcemap/magic_source.js"
-
-import { collectProgramImportMetas } from "@jsenv/utils/js_ast/program_import_metas.js"
+import { createMagicSource } from "@jsenv/sourcemap"
+import { applyBabelPlugins } from "@jsenv/ast"
 
 export const jsenvPluginImportMetaScenarios = () => {
   return {
     name: "jsenv:import_meta_scenario",
     appliesDuring: "*",
-    transform: {
-      js_module: async ({ url, content }, { scenario }) => {
+    transformUrlContent: {
+      js_module: async (urlInfo, { scenario }) => {
+        if (
+          !urlInfo.content.includes("import.meta.dev") &&
+          !urlInfo.content.includes("import.meta.test") &&
+          !urlInfo.content.includes("import.meta.build")
+        ) {
+          return null
+        }
         const { metadata } = await applyBabelPlugins({
           babelPlugins: [babelPluginMetadataImportMetaScenarios],
-          url,
-          content,
+          urlInfo,
         })
         const { dev = [], test = [], build = [] } = metadata.importMetaScenarios
         const replacements = []
@@ -59,7 +63,7 @@ export const jsenvPluginImportMetaScenarios = () => {
             replace(path, "true")
           })
         }
-        const magicSource = createMagicSource(content)
+        const magicSource = createMagicSource(urlInfo.content)
         replacements.forEach(({ path, value }) => {
           magicSource.replace({
             start: path.node.start,
@@ -78,7 +82,28 @@ const babelPluginMetadataImportMetaScenarios = () => {
     name: "metadata-import-meta-scenarios",
     visitor: {
       Program(programPath, state) {
-        const importMetas = collectProgramImportMetas(programPath)
+        const importMetas = {}
+        programPath.traverse({
+          MemberExpression(path) {
+            const { node } = path
+            const { object } = node
+            if (object.type !== "MetaProperty") {
+              return
+            }
+            const { property: objectProperty } = object
+            if (objectProperty.name !== "meta") {
+              return
+            }
+            const { property } = node
+            const { name } = property
+            const importMetaPaths = importMetas[name]
+            if (importMetaPaths) {
+              importMetaPaths.push(path)
+            } else {
+              importMetas[name] = [path]
+            }
+          },
+        })
         state.file.metadata.importMetaScenarios = {
           dev: importMetas.dev,
           test: importMetas.test,

package/src/plugins/import_meta_url/client/import_meta_url_browser.js

@@ -0,0 +1,52 @@
+const getCurrentScriptSrc = () => {
+  const { currentScript } = document
+  if (currentScript) return currentScript.src
+
+  // https://github.com/amiller-gh/currentScript-polyfill
+
+  const scripts = Array.prototype.slice.call(
+    document.getElementsByTagName("script"),
+  )
+
+  const readyScript = scripts.find((script) => {
+    return script.readyState === "interactive"
+  })
+  if (readyScript) return readyScript
+
+  try {
+    throw new Error()
+  } catch (err) {
+    // Find the second match for the "at" string to get file src url from stack.
+    // Specifically works with the format of stack traces in IE.
+    const stackDetails = /.*at [^(]*\((.*):(.+):(.+)\)$/gi.exec(err.stack)
+    const scriptLocation = (stackDetails || [false])[1]
+    const line = (stackDetails || [false])[2]
+    const currentLocation = document.location.href.replace(
+      document.location.hash,
+      "",
+    )
+
+    if (scriptLocation === currentLocation) {
+      const source = document.documentElement.outerHTML
+      const codeRegExp = new RegExp(
+        `(?:[^\\n]+?\\n){0,${
+          line - 2
+        }}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*`,
+        "i",
+      )
+      const code = source.replace(codeRegExp, "$1").trim()
+
+      return scripts.find((script) => {
+        return script.innerHTML && script.innerHTML.trim() === code
+      })
+    }
+
+    return scripts.find((script) => {
+      return script.src === scriptLocation
+    })
+  }
+}
+
+const url = getCurrentScriptSrc()
+
+export default url

package/src/plugins/import_meta_url/client/import_meta_url_commonjs.mjs

@@ -0,0 +1,9 @@
+/* global __filename */
+
+const filenameContainsBackSlashes = __filename.indexOf("\\") > -1
+
+const url = filenameContainsBackSlashes
+  ? `file:///${__filename.replace(/\\/g, "/")}`
+  : `file://${__filename}`
+
+export default url