@jsenv/core 27.0.0-alpha.6 → 27.0.0-alpha.60

package/src/{omega/core_plugins → plugins/transpilation}/babel/jsenv_plugin_babel.js

@@ -1,41 +1,62 @@
 import { applyBabelPlugins } from "@jsenv/utils/js_ast/apply_babel_plugins.js"
 
+import { RUNTIME_COMPAT } from "@jsenv/core/src/omega/compat/runtime_compat.js"
 import { getBaseBabelPluginStructure } from "./helpers/babel_plugin_structure.js"
 import { babelPluginBabelHelpersAsJsenvImports } from "./helpers/babel_plugin_babel_helpers_as_jsenv_imports.js"
 import { babelPluginNewStylesheetAsJsenvImport } from "./new_stylesheet/babel_plugin_new_stylesheet_as_jsenv_import.js"
 import { babelPluginGlobalThisAsJsenvImport } from "./global_this/babel_plugin_global_this_as_jsenv_import.js"
 import { babelPluginRegeneratorRuntimeAsJsenvImport } from "./regenerator_runtime/babel_plugin_regenerator_runtime_as_jsenv_import.js"
 
-export const jsenvPluginBabel = ({
-  getCustomBabelPlugins,
-  topLevelAwait,
-} = {}) => {
+export const jsenvPluginBabel = ({ getCustomBabelPlugins } = {}) => {
   const transformWithBabel = async (urlInfo, context) => {
     const isJsModule = urlInfo.type === "js_module"
-    const isWorker =
-      urlInfo.subtype === "worker" || urlInfo.subtype === "service_worker"
-    const { isSupportedOnRuntime, referenceUtils } = context
+    const isWorker = urlInfo.subtype === "worker"
+    const isServiceWorker = urlInfo.subtype === "service_worker"
+    const isSharedWorker = urlInfo.subtype === "shared_worker"
+    const isWorkerContext = isWorker || isServiceWorker || isSharedWorker
+
+    let { clientRuntimeCompat } = context
+    if (isWorker) {
+      clientRuntimeCompat = RUNTIME_COMPAT.add(clientRuntimeCompat, "worker")
+    } else if (isServiceWorker) {
+      // when code is executed by a service worker we can assume
+      // the execution context supports more than the default one
+      // for instance arrow function are supported
+      clientRuntimeCompat = RUNTIME_COMPAT.add(
+        clientRuntimeCompat,
+        "service_worker",
+      )
+    } else if (isSharedWorker) {
+      clientRuntimeCompat = RUNTIME_COMPAT.add(
+        clientRuntimeCompat,
+        "shared_worker",
+      )
+    }
+
+    const isSupported = (feature) =>
+      RUNTIME_COMPAT.isSupported(clientRuntimeCompat, feature)
+    const getImportSpecifier = (clientFileUrl) => {
+      const [reference] = context.referenceUtils.inject({
+        type: "js_import_export",
+        expectedType: "js_module",
+        specifier: clientFileUrl,
+      })
+      return JSON.parse(reference.generatedSpecifier)
+    }
+
     const babelPluginStructure = getBaseBabelPluginStructure({
       url: urlInfo.url,
-      isSupportedOnRuntime,
-      topLevelAwait,
-      usesTopLevelAwait: urlInfo.data.usesTopLevelAwait,
+      isSupported,
+      isWorkerContext,
       isJsModule,
-      isWorker,
+      getImportSpecifier,
     })
     if (getCustomBabelPlugins) {
       Object.assign(babelPluginStructure, getCustomBabelPlugins(context))
     }
 
     if (isJsModule) {
-      const getImportSpecifier = (clientFileUrl) => {
-        const [reference] = referenceUtils.inject({
-          type: "js_import_export",
-          specifier: clientFileUrl,
-        })
-        return JSON.parse(reference.generatedSpecifier)
-      }
-      if (!isSupportedOnRuntime("global_this")) {
+      if (!isSupported("global_this")) {
         babelPluginStructure["global-this-as-jsenv-import"] = [
           babelPluginGlobalThisAsJsenvImport,
           {
@@ -43,7 +64,7 @@ export const jsenvPluginBabel = ({
           },
         ]
       }
-      if (!isSupportedOnRuntime("async_generator_function")) {
+      if (!isSupported("async_generator_function")) {
         babelPluginStructure["regenerator-runtime-as-jsenv-import"] = [
           babelPluginRegeneratorRuntimeAsJsenvImport,
           {
@@ -51,7 +72,7 @@ export const jsenvPluginBabel = ({
           },
         ]
       }
-      if (!isSupportedOnRuntime("new_stylesheet")) {
+      if (!isSupported("new_stylesheet")) {
         babelPluginStructure["new-stylesheet-as-jsenv-import"] = [
           babelPluginNewStylesheetAsJsenvImport,
           {
@@ -76,22 +97,19 @@ export const jsenvPluginBabel = ({
     )
     const { code, map } = await applyBabelPlugins({
       babelPlugins,
-      url: urlInfo.url,
-      generatedUrl: urlInfo.generatedUrl,
-      content: urlInfo.content,
+      urlInfo,
     })
     return {
       content: code,
       sourcemap: map,
     }
   }
-
   return {
     name: "jsenv:babel",
     appliesDuring: "*",
-    transform: {
-      js_module: transformWithBabel,
+    finalizeUrlContent: {
       js_classic: transformWithBabel,
+      js_module: transformWithBabel,
     },
   }
 }

package/src/{omega/core_plugins → plugins/transpilation}/babel/new_stylesheet/babel_plugin_new_stylesheet_as_jsenv_import.js

@@ -1,9 +1,3 @@
-/*
- * TODO:
- * - code should also inject helper when code uses new keyword on "CSSStyleSheet"
- * - code should also inject helper when code uses "document.adoptedStylesheets"
- */
-
 import { pathToFileURL } from "node:url"
 
 import { injectImport } from "@jsenv/utils/js_ast/babel_utils.js"
@@ -27,6 +21,18 @@ export const babelPluginNewStylesheetAsJsenvImport = (
         }
         let usesNewStylesheet = false
         programPath.traverse({
+          NewExpression: (path) => {
+            usesNewStylesheet = isNewCssStyleSheetCall(path.node)
+            if (usesNewStylesheet) {
+              path.stop()
+            }
+          },
+          MemberExpression: (path) => {
+            usesNewStylesheet = isDocumentAdoptedStyleSheets(path.node)
+            if (usesNewStylesheet) {
+              path.stop()
+            }
+          },
           CallExpression: (path) => {
             if (path.node.callee.type !== "Import") {
               // Some other function call, not import();
@@ -90,6 +96,24 @@ export const babelPluginNewStylesheetAsJsenvImport = (
   }
 }
 
+const isNewCssStyleSheetCall = (node) => {
+  return (
+    node.type === "NewExpression" &&
+    node.callee.type === "Identifier" &&
+    node.callee.name === "CSSStyleSheet"
+  )
+}
+
+const isDocumentAdoptedStyleSheets = (node) => {
+  return (
+    node.type === "MemberExpression" &&
+    node.object.type === "Identifier" &&
+    node.object.name === "document" &&
+    node.property.type === "Identifier" &&
+    node.property.name === "adoptedStyleSheets"
+  )
+}
+
 const hasCssModuleQueryParam = (path) => {
   const { node } = path
   return (

package/src/plugins/transpilation/css_parcel/jsenv_plugin_css_parcel.js

@@ -0,0 +1,18 @@
+import { transpileWithParcel } from "@jsenv/utils/css_ast/parcel_css.js"
+
+// https://github.com/parcel-bundler/parcel-css
+export const jsenvPluginCssParcel = () => {
+  return {
+    name: "jsenv:css_parcel",
+    appliesDuring: "*",
+    transformUrlContent: {
+      css: (urlInfo, context) => {
+        const { code, map } = transpileWithParcel(urlInfo, context)
+        return {
+          content: String(code),
+          sourcemap: map,
+        }
+      },
+    },
+  }
+}

package/src/plugins/transpilation/fetch_original_url_info.js

@@ -0,0 +1,30 @@
+export const fetchOriginalUrlInfo = async ({
+  urlInfo,
+  context,
+  searchParam,
+  expectedType,
+}) => {
+  const urlObject = new URL(urlInfo.url)
+  const { searchParams } = urlObject
+  if (!searchParams.has(searchParam)) {
+    return null
+  }
+  searchParams.delete(searchParam)
+  const originalUrl = urlObject.href
+  const originalReference = {
+    ...(context.reference.original || context.reference),
+    expectedType,
+  }
+  originalReference.url = originalUrl
+  const originalUrlInfo = context.urlGraph.reuseOrCreateUrlInfo(
+    originalReference.url,
+  )
+  await context.fetchUrlContent({
+    reference: originalReference,
+    urlInfo: originalUrlInfo,
+  })
+  if (originalUrlInfo.dependents.size === 0) {
+    context.urlGraph.deleteUrlInfo(originalUrlInfo.url)
+  }
+  return originalUrlInfo
+}

package/src/plugins/transpilation/import_assertions/jsenv_plugin_import_assertions.js

@@ -0,0 +1,181 @@
+/*
+ * 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 when it knows some browsers in runtimeCompat
+ * do not support import assertions
+ * But for now (as it is simpler) we let the browser throw the error
+ */
+
+import { urlToFilename } from "@jsenv/filesystem"
+
+import { injectQueryParams } from "@jsenv/utils/urls/url_utils.js"
+import { JS_QUOTES } from "@jsenv/utils/string/js_quotes.js"
+
+import { fetchOriginalUrlInfo } from "../fetch_original_url_info.js"
+
+export const jsenvPluginImportAssertions = () => {
+  const updateReference = (reference, searchParam) => {
+    reference.expectedType = "js_module"
+    reference.filename = `${urlToFilename(reference.url)}.js`
+    reference.mutation = (magicSource) => {
+      magicSource.remove({
+        start: reference.assertNode.start,
+        end: reference.assertNode.end,
+      })
+    }
+    const newUrl = injectQueryParams(reference.url, {
+      [searchParam]: "",
+    })
+    return newUrl
+  }
+
+  const importAssertions = {
+    name: "jsenv:import_assertions",
+    appliesDuring: "*",
+    redirectUrl: {
+      js_import_export: (reference, context) => {
+        if (!reference.assert) {
+          return null
+        }
+        // during build always replace import assertions with the js:
+        // - avoid rollup to see import assertions
+        //   We would have to tell rollup to ignore import with assertion
+        // - means rollup can bundle more js file together
+        // - means url versioning can work for css inlined in js
+        if (reference.assert.type === "json") {
+          if (
+            context.scenario !== "build" &&
+            context.isSupportedOnCurrentClients("import_type_json")
+          ) {
+            return null
+          }
+          return updateReference(reference, "as_json_module")
+        }
+        if (reference.assert.type === "css") {
+          if (
+            context.scenario !== "build" &&
+            context.isSupportedOnCurrentClients("import_type_css")
+          ) {
+            return null
+          }
+          return updateReference(reference, "as_css_module")
+        }
+        if (reference.assert.type === "text") {
+          if (
+            context.scenario !== "build" &&
+            context.isSupportedOnCurrentClients("import_type_text")
+          ) {
+            return null
+          }
+          return updateReference(reference, "as_text_module")
+        }
+        return null
+      },
+    },
+  }
+  return [importAssertions, ...jsenvPluginAsModules()]
+}
+
+const jsenvPluginAsModules = () => {
+  const inlineContentClientFileUrl = new URL(
+    "../../inline/client/inline_content.js",
+    import.meta.url,
+  ).href
+
+  const asJsonModule = {
+    name: `jsenv:as_json_module`,
+    appliesDuring: "*",
+    fetchUrlContent: async (urlInfo, context) => {
+      const originalUrlInfo = await fetchOriginalUrlInfo({
+        urlInfo,
+        context,
+        searchParam: "as_json_module",
+        expectedType: "json",
+      })
+      if (!originalUrlInfo) {
+        return null
+      }
+      const jsonText = JSON.stringify(originalUrlInfo.content.trim())
+      return {
+        type: "js_module",
+        contentType: "text/javascript",
+        // here we could `export default ${jsonText}`:
+        // but js engine are optimized to recognize JSON.parse
+        // and use a faster parsing strategy
+        content: `export default JSON.parse(${jsonText})`,
+      }
+    },
+  }
+
+  const asCssModule = {
+    name: `jsenv:as_css_module`,
+    appliesDuring: "*",
+    fetchUrlContent: async (urlInfo, context) => {
+      const originalUrlInfo = await fetchOriginalUrlInfo({
+        urlInfo,
+        context,
+        searchParam: "as_css_module",
+        expectedType: "css",
+      })
+      if (!originalUrlInfo) {
+        return null
+      }
+      const cssText = JS_QUOTES.escapeSpecialChars(originalUrlInfo.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: "text/javascript",
+        content: `import { InlineContent } from ${JSON.stringify(
+          inlineContentClientFileUrl,
+        )}
+  
+  const inlineContent = new InlineContent(${cssText}, { type: "text/css" })
+  const stylesheet = new CSSStyleSheet()
+  stylesheet.replaceSync(inlineContent.text)
+  export default stylesheet`,
+      }
+    },
+  }
+
+  const asTextModule = {
+    name: `jsenv:as_text_module`,
+    appliesDuring: "*",
+    fetchUrlContent: async (urlInfo, context) => {
+      const originalUrlInfo = await fetchOriginalUrlInfo({
+        urlInfo,
+        context,
+        searchParam: "as_text_module",
+        expectedType: "text",
+      })
+      if (!originalUrlInfo) {
+        return null
+      }
+      const textPlain = JS_QUOTES.escapeSpecialChars(urlInfo.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: "text/javascript",
+        content: `import { InlineContent } from ${JSON.stringify(
+          inlineContentClientFileUrl,
+        )}
+  
+const inlineContent = new InlineContent(${textPlain}, { type: "text/plain" })
+export default inlineContent.text`,
+      }
+    },
+  }
+
+  return [asJsonModule, asCssModule, asTextModule]
+}

package/src/plugins/transpilation/jsenv_plugin_top_level_await.js

@@ -0,0 +1,80 @@
+import { requireBabelPlugin } from "@jsenv/babel-plugins"
+
+import { applyBabelPlugins } from "@jsenv/utils/js_ast/apply_babel_plugins.js"
+
+export const jsenvPluginTopLevelAwait = () => {
+  return {
+    name: "jsenv:top_level_await",
+    appliesDuring: "*",
+    transformUrlContent: {
+      js_module: async (urlInfo, context) => {
+        if (context.isSupportedOnCurrentClients("top_level_await")) {
+          return null
+        }
+        const usesTLA = await usesTopLevelAwait(urlInfo)
+        if (!usesTLA) {
+          return null
+        }
+        const { code, map } = await applyBabelPlugins({
+          urlInfo,
+          babelPlugins: [
+            [
+              requireBabelPlugin("babel-plugin-transform-async-to-promises"),
+              {
+                // Maybe we could pass target: "es6" when we support arrow function
+                // https://github.com/rpetrich/babel-plugin-transform-async-to-promises/blob/92755ff8c943c97596523e586b5fa515c2e99326/async-to-promises.ts#L55
+                topLevelAwait: "simple",
+                // enable once https://github.com/rpetrich/babel-plugin-transform-async-to-promises/pull/83
+                // externalHelpers: true,
+                // externalHelpersPath: JSON.parse(
+                //   context.referenceUtils.inject({
+                //     type: "js_import_export",
+                //     expectedType: "js_module",
+                //     specifier:
+                //       "babel-plugin-transform-async-to-promises/helpers.mjs",
+                //   })[0],
+                // ),
+              },
+            ],
+          ],
+        })
+        return {
+          content: code,
+          sourcemap: map,
+        }
+      },
+    },
+  }
+}
+
+const usesTopLevelAwait = async (urlInfo) => {
+  if (!urlInfo.content.includes("await ")) {
+    return false
+  }
+  const { metadata } = await applyBabelPlugins({
+    urlInfo,
+    babelPlugins: [babelPluginMetadataUsesTopLevelAwait],
+  })
+  return metadata.usesTopLevelAwait
+}
+
+const babelPluginMetadataUsesTopLevelAwait = () => {
+  return {
+    name: "metadata-uses-top-level-await",
+    visitor: {
+      Program: (programPath, state) => {
+        let usesTopLevelAwait = false
+        programPath.traverse({
+          AwaitExpression: (path) => {
+            const closestFunction = path.getFunctionParent()
+            if (!closestFunction) {
+              usesTopLevelAwait = true
+              path.stop()
+            }
+          },
+        })
+        state.file.metadata.usesTopLevelAwait = usesTopLevelAwait
+      },
+    },
+  }
+}

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_analysis/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: ({
+          type,
+          specifier,
+          specifierStart,
+          specifierEnd,
+          specifierLine,
+          specifierColumn,
+        }) => {
+          const [reference] = context.referenceUtils.found({
+            type: `css_${type}`,
+            specifier,
+            specifierStart,
+            specifierEnd,
+            specifierLine,
+            specifierColumn,
+          })
+          actions.push(async () => {
+            magicSource.replace({
+              start: specifierStart,
+              end: specifierEnd,
+              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()
+}