@jsenv/core 27.0.0-alpha.3 → 27.0.0-alpha.30

package/src/plugins/transpilation/jsenv_plugin_transpilation.js

@@ -0,0 +1,44 @@
+/*
+ * Transforms code to make it compatible with browser that would not be able to
+ * run it otherwise. For instance:
+ * - const -> var
+ * - async/await -> promises
+ * Anything that is not standard (import.meta.dev for instance) is outside the scope
+ * of this plugin
+ */
+
+import { jsenvPluginCssParcel } from "./css_parcel/jsenv_plugin_css_parcel.js"
+import { jsenvPluginImportAssertions } from "./import_assertions/jsenv_plugin_import_assertions.js"
+import { jsenvPluginAsJsClassic } from "./as_js_classic/jsenv_plugin_as_js_classic.js"
+import { jsenvPluginBabel } from "./babel/jsenv_plugin_babel.js"
+import { jsenvPluginTopLevelAwait } from "./jsenv_plugin_top_level_await.js"
+
+export const jsenvPluginTranspilation = ({
+  importAssertions = true,
+  css = true,
+  jsModuleAsJsClassic = true,
+  systemJsInjection = true,
+  topLevelAwait = true,
+  getCustomBabelPlugins,
+}) => {
+  return [
+    // import assertions we want it all the time
+    ...(importAssertions ? [jsenvPluginImportAssertions()] : []),
+    // babel also so that rollup can bundle babel helpers for instance
+    jsenvPluginBabel({
+      topLevelAwait,
+      getCustomBabelPlugins,
+    }),
+    // but the conversion from js_module to js_classic
+    // we want to do it after bundling
+    // so the build function will disable jsModuleAsJsClassic during build
+    // and enable it manually during postbuild
+    ...(jsModuleAsJsClassic
+      ? [jsenvPluginAsJsClassic({ systemJsInjection })]
+      : []),
+    // topLevelAwait must come after js_module_as_js_classic because it's related to the module format
+    // so we want to wait to know the module format before transforming things related to top level await
+    ...(topLevelAwait ? [jsenvPluginTopLevelAwait(topLevelAwait)] : []),
+    ...(css ? [jsenvPluginCssParcel()] : []),
+  ]
+}

package/src/plugins/url_references/css/css_urls.js

@@ -0,0 +1,49 @@
+/*
+ * https://github.com/parcel-bundler/parcel/blob/v2/packages/transformers/css/src/CSSTransformer.js
+ */
+
+import { createMagicSource } from "@jsenv/utils/sourcemap/magic_source.js"
+import { applyPostCss } from "@jsenv/utils/css_ast/apply_post_css.js"
+import { postCssPluginUrlVisitor } from "@jsenv/utils/css_ast/postcss_plugin_url_visitor.js"
+
+export const parseAndTransformCssUrls = async (urlInfo, context) => {
+  const actions = []
+  const magicSource = createMagicSource(urlInfo.content)
+  await applyPostCss({
+    sourcemaps: false,
+    plugins: [
+      postCssPluginUrlVisitor({
+        urlVisitor: ({
+          declarationNode,
+          type,
+          specifier,
+          line,
+          column,
+          start,
+          end,
+        }) => {
+          const [reference] = context.referenceUtils.found({
+            node: declarationNode,
+            type: `css_${type}`,
+            specifier,
+            line,
+            column,
+          })
+          actions.push(async () => {
+            magicSource.replace({
+              start,
+              end,
+              replacement: await context.referenceUtils.readGeneratedSpecifier(
+                reference,
+              ),
+            })
+          })
+        },
+      }),
+    ],
+    url: urlInfo.data.rawUrl || urlInfo.url,
+    content: urlInfo.content,
+  })
+  await Promise.all(actions.map((action) => action()))
+  return magicSource.toContentAndSourcemap()
+}

package/src/plugins/url_references/html/html_urls.js

@@ -0,0 +1,273 @@
+import {
+  parseHtmlString,
+  stringifyHtmlAst,
+  getHtmlNodeAttributeByName,
+  htmlNodePosition,
+  visitHtmlAst,
+} from "@jsenv/utils/html_ast/html_ast.js"
+import { htmlAttributeSrcSet } from "@jsenv/utils/html_ast/html_attribute_src_set.js"
+
+export const parseAndTransformHtmlUrls = async (urlInfo, context) => {
+  const url = urlInfo.data.rawUrl || urlInfo.url
+  const content = urlInfo.content
+  const { scenario, referenceUtils } = context
+  const htmlAst = parseHtmlString(content, {
+    storeOriginalPositions: scenario !== "build",
+  })
+  const actions = []
+  visitHtmlUrls({
+    url,
+    htmlAst,
+    onUrl: ({
+      type,
+      subtype,
+      expectedType,
+      line,
+      column,
+      originalLine,
+      originalColumn,
+      specifier,
+      attribute,
+    }) => {
+      const isRessourceHint = [
+        "preconnect",
+        "dns-prefetch",
+        "prefetch",
+        "preload",
+        "modulepreload",
+      ].includes(subtype)
+      const [reference] = referenceUtils.found({
+        type,
+        expectedType,
+        line,
+        column,
+        originalLine,
+        originalColumn,
+        specifier,
+        isRessourceHint,
+      })
+      actions.push(async () => {
+        attribute.value = await referenceUtils.readGeneratedSpecifier(reference)
+      })
+    },
+  })
+  await Promise.all(actions.map((action) => action()))
+  return {
+    content: stringifyHtmlAst(htmlAst),
+  }
+}
+
+const visitHtmlUrls = ({ url, htmlAst, onUrl }) => {
+  const addDependency = ({
+    type,
+    subtype,
+    expectedType,
+    node,
+    attribute,
+    specifier,
+  }) => {
+    const generatedFromInlineContent = Boolean(
+      getHtmlNodeAttributeByName(node, "generated-from-inline-content"),
+    )
+    let position
+    if (generatedFromInlineContent) {
+      // when generated from inline content,
+      // line, column is not "src" nor "generated-from-src" but "original-position"
+      position = htmlNodePosition.readNodePosition(node)
+    } else {
+      position = htmlNodePosition.readAttributePosition(node, attribute.name)
+    }
+    const {
+      line,
+      column,
+      // originalLine, originalColumn
+    } = position
+    onUrl({
+      type,
+      subtype,
+      expectedType,
+      line,
+      column,
+      // originalLine, originalColumn
+      specifier,
+      attribute,
+      // injected:Boolean(getHtmlNodeAttributeByName(node, "injected-by"))
+      // srcGeneratedFromInlineContent
+      ...readFetchMetas(node),
+    })
+  }
+  const onNode = (node) => {
+    if (node.nodeName === "link") {
+      const relAttribute = getHtmlNodeAttributeByName(node, "rel")
+      const rel = relAttribute ? relAttribute.value : undefined
+      const typeAttribute = getHtmlNodeAttributeByName(node, "type")
+      const type = typeAttribute ? typeAttribute.value : undefined
+      visitAttributeAsUrlSpecifier({
+        type: "link_href",
+        subtype: rel,
+        node,
+        attributeName: "href",
+        expectedContentType: type,
+        expectedType: {
+          manifest: "webmanifest",
+          modulepreload: "js_module",
+          stylesheet: "css",
+        }[rel],
+      })
+      return
+    }
+    // if (node.nodeName === "style") {
+    //   // styles.push(node)
+    //   return
+    // }
+    if (node.nodeName === "script") {
+      const typeAttributeNode = getHtmlNodeAttributeByName(node, "type")
+      visitAttributeAsUrlSpecifier({
+        type: "script_src",
+        expectedType: {
+          "undefined": "js_classic",
+          "text/javascript": "js_classic",
+          "module": "js_module",
+          "importmap": "importmap",
+        }[typeAttributeNode ? typeAttributeNode.value : undefined],
+        node,
+        attributeName: "src",
+      })
+      return
+    }
+    if (node.nodeName === "a") {
+      visitAttributeAsUrlSpecifier({
+        type: "a_href",
+        node,
+        attributeName: "href",
+      })
+    }
+    if (node.nodeName === "iframe") {
+      visitAttributeAsUrlSpecifier({
+        type: "iframe_src",
+        node,
+        attributeName: "src",
+      })
+    }
+    if (node.nodeName === "img") {
+      visitAttributeAsUrlSpecifier({
+        type: "img_src",
+        node,
+        attributeName: "src",
+      })
+      visitSrcset({
+        type: "img_srcset",
+        node,
+      })
+      return
+    }
+    if (node.nodeName === "source") {
+      visitAttributeAsUrlSpecifier({
+        type: "source_src",
+        node,
+        attributeName: "src",
+      })
+      visitSrcset({
+        type: "source_srcset",
+        node,
+      })
+      return
+    }
+    // svg <image> tag
+    if (node.nodeName === "image") {
+      visitAttributeAsUrlSpecifier({
+        type: "image_href",
+        node,
+        attributeName: "href",
+      })
+      return
+    }
+    if (node.nodeName === "use") {
+      visitAttributeAsUrlSpecifier({
+        type: "use_href",
+        node,
+        attributeName: "href",
+      })
+      return
+    }
+  }
+  const visitAttributeAsUrlSpecifier = ({
+    type,
+    subtype,
+    expectedType,
+    node,
+    attributeName,
+  }) => {
+    const attribute = getHtmlNodeAttributeByName(node, attributeName)
+    const value = attribute ? attribute.value : undefined
+    if (value) {
+      const generatedBy = getHtmlNodeAttributeByName(node, "generated-by")
+      if (generatedBy) {
+        // during build the importmap is inlined
+        // and shoud not be considered as a dependency anymore
+        return
+      }
+      addDependency({
+        type,
+        subtype,
+        expectedType,
+        node,
+        attribute,
+        specifier:
+          attributeName === "generated-from-src" ||
+          attributeName === "generated-from-href"
+            ? new URL(value, url).href
+            : value,
+      })
+    } else if (attributeName === "src") {
+      visitAttributeAsUrlSpecifier({
+        type,
+        subtype,
+        expectedType,
+        node,
+        attributeName: "generated-from-src",
+      })
+    } else if (attributeName === "href") {
+      visitAttributeAsUrlSpecifier({
+        type,
+        subtype,
+        expectedType,
+        node,
+        attributeName: "generated-from-href",
+      })
+    }
+  }
+  const visitSrcset = ({ type, node }) => {
+    const srcsetAttribute = getHtmlNodeAttributeByName(node, "srcset")
+    const srcset = srcsetAttribute ? srcsetAttribute.value : undefined
+    if (srcset) {
+      const srcCandidates = htmlAttributeSrcSet.parse(srcset)
+      srcCandidates.forEach((srcCandidate) => {
+        addDependency({
+          type,
+          node,
+          attribute: srcsetAttribute,
+          specifier: srcCandidate.specifier,
+        })
+      })
+    }
+  }
+  visitHtmlAst(htmlAst, onNode)
+}
+
+const crossOriginCompatibleTagNames = ["script", "link", "img", "source"]
+const integrityCompatibleTagNames = ["script", "link", "img", "source"]
+const readFetchMetas = (node) => {
+  const meta = {}
+  if (crossOriginCompatibleTagNames.includes(node.nodeName)) {
+    const crossoriginAttribute = getHtmlNodeAttributeByName(node, "crossorigin")
+    meta.crossorigin = crossoriginAttribute
+      ? crossoriginAttribute.value
+      : undefined
+  }
+  if (integrityCompatibleTagNames.includes(node.nodeName)) {
+    const integrityAttribute = getHtmlNodeAttributeByName(node, "integrity")
+    meta.integrity = integrityAttribute ? integrityAttribute.value : undefined
+  }
+  return meta
+}

package/src/plugins/url_references/js/js_urls.js

@@ -0,0 +1,163 @@
+import { applyBabelPlugins } from "@jsenv/utils/js_ast/apply_babel_plugins.js"
+import {
+  analyzeImportCall,
+  isImportCall,
+  analyzeImportExportDeclaration,
+  analyzeNewUrlCall,
+  analyzeNewWorkerOrNewSharedWorker,
+  analyzeImportScriptCalls,
+  analyzeSystemRegisterCall,
+  analyzeSystemImportCall,
+  analyzeServiceWorkerRegisterCall,
+} from "@jsenv/utils/js_ast/js_static_analysis.js"
+import { createMagicSource } from "@jsenv/utils/sourcemap/magic_source.js"
+import { isWebWorkerUrlInfo } from "@jsenv/core/src/omega/web_workers.js"
+
+export const parseAndTransformJsUrls = async (urlInfo, context) => {
+  const isJsModule = urlInfo.type === "js_module"
+  const isWebWorker = isWebWorkerUrlInfo(urlInfo)
+  const { metadata } = await applyBabelPlugins({
+    babelPlugins: [
+      [babelPluginMetadataJsUrlMentions, { isJsModule, isWebWorker }],
+    ],
+    urlInfo,
+  })
+  const { jsMentions, usesTopLevelAwait, usesImport, usesExport } = metadata
+  urlInfo.data.usesImport = usesImport
+  urlInfo.data.usesExport = usesExport
+  urlInfo.data.usesTopLevelAwait = usesTopLevelAwait
+
+  const { rootDirectoryUrl, referenceUtils } = context
+  const actions = []
+  const magicSource = createMagicSource(urlInfo.content)
+  jsMentions.forEach((jsMention) => {
+    const [reference] = referenceUtils.found({
+      type: jsMention.type,
+      subtype: jsMention.subtype,
+      expectedType: jsMention.expectedType,
+      expectedSubtype: jsMention.expectedSubtype || urlInfo.subtype,
+      line: jsMention.line,
+      column: jsMention.column,
+      specifier: jsMention.specifier,
+      data: jsMention.data,
+      baseUrl: {
+        "StringLiteral": jsMention.baseUrl,
+        "window.origin": rootDirectoryUrl,
+        "import.meta.url": urlInfo.url,
+      }[jsMention.baseUrlType],
+    })
+    actions.push(async () => {
+      magicSource.replace({
+        start: jsMention.start,
+        end: jsMention.end,
+        replacement: await referenceUtils.readGeneratedSpecifier(reference),
+      })
+    })
+  })
+  await Promise.all(actions.map((action) => action()))
+  return magicSource.toContentAndSourcemap()
+}
+
+/*
+ * see also
+ * https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md
+ * https://github.com/mjackson/babel-plugin-import-visitor
+ *
+ */
+const babelPluginMetadataJsUrlMentions = (_, { isJsModule, isWebWorker }) => {
+  return {
+    name: "metadata-js-mentions",
+    visitor: {
+      Program(programPath, state) {
+        const jsMentions = []
+        let usesImport = false
+        let usesExport = false
+        let usesTopLevelAwait = false
+
+        const callOneStaticAnalyzer = (path, analyzer) => {
+          const returnValue = analyzer(path)
+          if (returnValue === null) {
+            return false
+          }
+          if (Array.isArray(returnValue)) {
+            jsMentions.push(...returnValue)
+            return true
+          }
+          if (typeof returnValue === "object") {
+            jsMentions.push(returnValue)
+            return true
+          }
+          return false
+        }
+        const callStaticAnalyzers = (path, analysers) => {
+          for (const analyzer of analysers) {
+            if (callOneStaticAnalyzer(path, analyzer)) {
+              break
+            }
+          }
+        }
+
+        const visitors = {
+          AwaitExpression: (path) => {
+            const closestFunction = path.getFunctionParent()
+            if (!closestFunction) {
+              usesTopLevelAwait = true
+            }
+          },
+          NewExpression: (path) => {
+            callStaticAnalyzers(path, [
+              (path) => analyzeNewWorkerOrNewSharedWorker(path, { isJsModule }),
+              (path) => analyzeNewUrlCall(path, { isJsModule }),
+            ])
+          },
+        }
+        const callExpressionStaticAnalysers = [
+          ...(isJsModule
+            ? [analyzeImportCall]
+            : [analyzeSystemRegisterCall, analyzeSystemImportCall]),
+          ...(isWebWorker ? [analyzeImportScriptCalls] : []),
+          analyzeServiceWorkerRegisterCall,
+        ]
+        visitors.CallExpression = (path) => {
+          if (isJsModule && !usesImport && isImportCall(path.node)) {
+            usesImport = true
+          }
+          callStaticAnalyzers(path, callExpressionStaticAnalysers)
+        }
+
+        if (isJsModule) {
+          Object.assign(visitors, {
+            ExportNamedDeclaration: (path) => {
+              if (!usesImport && path.node.source) {
+                usesImport = true
+              }
+              usesExport = true
+              callStaticAnalyzers(path, [analyzeImportExportDeclaration])
+            },
+            ExportAllDeclaration: (path) => {
+              usesImport = true
+              usesExport = true
+              callStaticAnalyzers(path, [analyzeImportExportDeclaration])
+            },
+            ExportDefaultDeclaration: (path) => {
+              if (!usesImport && path.node.source) {
+                usesImport = true
+              }
+              usesExport = true
+              callStaticAnalyzers(path, [analyzeImportExportDeclaration])
+            },
+            ImportDeclaration: (path) => {
+              usesImport = true
+              callStaticAnalyzers(path, [analyzeImportExportDeclaration])
+            },
+          })
+        }
+        programPath.traverse(visitors)
+        state.file.metadata.jsMentions = jsMentions
+        state.file.metadata.usesImport = usesImport
+        state.file.metadata.usesExport = usesExport
+        state.file.metadata.usesTopLevelAwait = usesTopLevelAwait
+      },
+    },
+  }
+}

package/src/plugins/url_references/jsenv_plugin_url_references.js

@@ -0,0 +1,18 @@
+import { parseAndTransformHtmlUrls } from "./html/html_urls.js"
+import { parseAndTransformCssUrls } from "./css/css_urls.js"
+import { parseAndTransformJsUrls } from "./js/js_urls.js"
+import { parseAndTransformWebmanifestUrls } from "./webmanifest/webmanifest_urls.js"
+
+export const jsenvPluginUrlReferences = () => {
+  return {
+    name: "jsenv:url_references",
+    appliesDuring: "*",
+    transformUrlContent: {
+      html: parseAndTransformHtmlUrls,
+      css: parseAndTransformCssUrls,
+      js_classic: parseAndTransformJsUrls,
+      js_module: parseAndTransformJsUrls,
+      webmanifest: parseAndTransformWebmanifestUrls,
+    },
+  }
+}

package/src/plugins/url_references/webmanifest/webmanifest_urls.js

@@ -0,0 +1,17 @@
+export const parseAndTransformWebmanifestUrls = async (urlInfo, context) => {
+  const content = urlInfo.content
+  const manifest = JSON.parse(content)
+  const actions = []
+  const { icons = [] } = manifest
+  icons.forEach((icon) => {
+    const [reference] = context.referenceUtils.found({
+      type: "webmanifest_icon_src",
+      specifier: icon.src,
+    })
+    actions.push(async () => {
+      icon.src = await context.referenceUtils.readGeneratedSpecifier(reference)
+    })
+  })
+  await Promise.all(actions.map((action) => action()))
+  return JSON.stringify(manifest, null, "  ")
+}

package/src/{omega/core_plugins → plugins}/url_resolution/jsenv_plugin_url_resolution.js

@@ -1,13 +1,18 @@
 export const jsenvPluginUrlResolution = () => {
-  const urlResolver = ({ parentUrl, specifier }) => {
-    return new URL(specifier, parentUrl).href
+  const urlResolver = (reference) => {
+    if (reference.specifier[0] === "#") {
+      reference.external = true
+    }
+    return new URL(
+      reference.specifier,
+      reference.baseUrl || reference.parentUrl,
+    ).href
   }
   return {
     name: "jsenv:url_resolution",
     appliesDuring: "*",
-    resolve: {
+    resolveUrl: {
       "entry_point": urlResolver,
-      "js_import_export": urlResolver,
       "link_href": urlResolver,
       "script_src": urlResolver,
       "a_href": urlResolver,
@@ -21,8 +26,10 @@ export const jsenvPluginUrlResolution = () => {
       "css_@import": urlResolver,
       "css_url": urlResolver,
       "sourcemap_comment": urlResolver,
-      "js_import_meta_url_pattern": urlResolver,
+      "js_import_export": urlResolver,
+      "js_url_specifier": urlResolver,
       "js_inline_content": urlResolver,
+      "webmanifest_icon_src": urlResolver,
     },
   }
 }

package/src/{omega/core_plugins → plugins}/url_version/jsenv_plugin_url_version.js

@@ -4,27 +4,27 @@ export const jsenvPluginUrlVersion = ({
   return {
     name: "jsenv:url_version",
     appliesDuring: "*", // maybe only during dev?
-    normalize: ({ url }) => {
+    normalizeUrl: (reference) => {
       // "v" search param goal is to enable long-term cache
       // for server response headers
       // it is also used by hmr to bypass browser cache
       // this goal is achieved when we reach this part of the code
       // We get rid of this params so that urlGraph and other parts of the code
       // recognize the url (it is not considered as a different url)
-      const urlObject = new URL(url)
+      const urlObject = new URL(reference.url)
       urlObject.searchParams.delete("v")
       return urlObject.href
     },
-    transformReferencedUrl: ({ url, data }) => {
-      if (!data.version) {
+    transformUrl: (reference) => {
+      if (!reference.data.version) {
         return null
       }
-      const urlObject = new URL(url)
-      if (urlObject.searchParams.has("v")) {
+      if (reference.searchParams.has("v")) {
         return null
       }
-      urlObject.searchParams.set("v", data.version)
-      return urlObject.href
+      return {
+        v: reference.data.version,
+      }
     },
     augmentResponse: ({ url }) => {
       if (!longTermCache) {