@jsenv/core 27.0.0-alpha.12 → 27.0.0-alpha.13

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

@@ -1,40 +1,44 @@
 import { applyBabelPlugins } from "@jsenv/utils/js_ast/apply_babel_plugins.js"
 
-import { RUNTIME_SUPPORT } from "@jsenv/core/src/omega/runtime_support/runtime_support.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"
     const isServiceWorker = urlInfo.subtype === "service_worker"
-    const isWorkerContext = isWorker || isServiceWorker
-    let { runtimeSupport } = context
-    if (isServiceWorker) {
+    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
-      runtimeSupport = RUNTIME_SUPPORT.add(runtimeSupport, "service_worker")
-    }
-    if (isWorker) {
-      runtimeSupport = RUNTIME_SUPPORT.add(runtimeSupport, "worker")
+      clientRuntimeCompat = RUNTIME_COMPAT.add(
+        clientRuntimeCompat,
+        "service_worker",
+      )
+    } else if (isSharedWorker) {
+      clientRuntimeCompat = RUNTIME_COMPAT.add(
+        clientRuntimeCompat,
+        "shared_worker",
+      )
     }
+
     const { referenceUtils } = context
-    const isSupportedOnRuntime = (feature) =>
-      RUNTIME_SUPPORT.isSupported(runtimeSupport, feature)
+    const isSupported = (feature) =>
+      RUNTIME_COMPAT.isSupported(clientRuntimeCompat, feature)
     const babelPluginStructure = getBaseBabelPluginStructure({
       url: urlInfo.url,
-      isSupportedOnRuntime,
-      topLevelAwait,
-      usesTopLevelAwait: urlInfo.data.usesTopLevelAwait,
-      isJsModule,
+      isSupported,
       isWorkerContext,
     })
     if (getCustomBabelPlugins) {
@@ -45,11 +49,12 @@ export const jsenvPluginBabel = ({
       const getImportSpecifier = (clientFileUrl) => {
         const [reference] = referenceUtils.inject({
           type: "js_import_export",
+          expectedType: "js_module",
           specifier: clientFileUrl,
         })
         return JSON.parse(reference.generatedSpecifier)
       }
-      if (!isSupportedOnRuntime("global_this")) {
+      if (!isSupported("global_this")) {
         babelPluginStructure["global-this-as-jsenv-import"] = [
           babelPluginGlobalThisAsJsenvImport,
           {
@@ -57,7 +62,7 @@ export const jsenvPluginBabel = ({
           },
         ]
       }
-      if (!isSupportedOnRuntime("async_generator_function")) {
+      if (!isSupported("async_generator_function")) {
         babelPluginStructure["regenerator-runtime-as-jsenv-import"] = [
           babelPluginRegeneratorRuntimeAsJsenvImport,
           {
@@ -65,7 +70,7 @@ export const jsenvPluginBabel = ({
           },
         ]
       }
-      if (!isSupportedOnRuntime("new_stylesheet")) {
+      if (!isSupported("new_stylesheet")) {
         babelPluginStructure["new-stylesheet-as-jsenv-import"] = [
           babelPluginNewStylesheetAsJsenvImport,
           {
@@ -90,22 +95,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/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/import_assertions/jsenv_plugin_import_assertions.js

@@ -0,0 +1,243 @@
+import { urlToFilename } from "@jsenv/filesystem"
+
+import { applyBabelPlugins } from "@jsenv/utils/js_ast/apply_babel_plugins.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"
+
+export const jsenvPluginImportAssertions = () => {
+  const importAssertions = {
+    name: "jsenv:import_assertions",
+    appliesDuring: "*",
+    transformUrlContent: {
+      js_module: async (urlInfo, context) => {
+        const importTypesToTranspile = getImportTypesToTranspile(context)
+        if (importTypesToTranspile.length === 0) {
+          return null
+        }
+        const { metadata } = await applyBabelPlugins({
+          babelPlugins: [babelPluginMetadataImportAssertions],
+          urlInfo,
+        })
+        const { importAssertions } = metadata
+        const magicSource = createMagicSource(urlInfo.content)
+        importAssertions.forEach((importAssertion) => {
+          const assertType = importAssertion.assert.type
+          if (!importTypesToTranspile.includes(assertType)) {
+            return
+          }
+          const { searchParam } = importAsInfos[assertType]
+          const { path } = importAssertion
+          const { node } = path
+          if (node.type === "CallExpression") {
+            const importSpecifierPath = path.get("arguments")[0]
+            const specifier = importSpecifierPath.node.value
+            const reference = context.referenceUtils.findByGeneratedSpecifier(
+              JSON.stringify(specifier),
+            )
+            const [newReference] = context.referenceUtils.update(reference, {
+              expectedType: "js_module",
+              specifier: injectQueryParamsIntoSpecifier(specifier, {
+                [searchParam]: "",
+              }),
+              filename: `${urlToFilename(reference.url)}.js`,
+            })
+            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 reference = context.referenceUtils.findByGeneratedSpecifier(
+            JSON.stringify(specifier),
+          )
+          const [newReference] = context.referenceUtils.update(reference, {
+            expectedType: "js_module",
+            specifier: injectQueryParamsIntoSpecifier(specifier, {
+              [searchParam]: "",
+            }),
+            filename: `${urlToFilename(reference.url)}.js`,
+          })
+          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()
+      },
+    },
+  }
+  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: (urlInfo, context) => {
+      return fetchOriginalUrl({
+        urlInfo,
+        context,
+        searchParam: "as_json_module",
+        convertToJsModule: (urlInfo) => {
+          // here we could `export default ${jsonText}`:
+          // but js engine are optimized to recognize JSON.parse
+          // and use a faster parsing strategy
+          return `export default JSON.parse(${JSON.stringify(
+            urlInfo.content.trim(),
+          )})`
+        },
+      })
+    },
+  }
+
+  const asCssModule = {
+    name: `jsenv:as_css_module`,
+    appliesDuring: "*",
+    fetchUrlContent: (urlInfo, context) => {
+      return fetchOriginalUrl({
+        urlInfo,
+        context,
+        searchParam: "as_css_module",
+        convertToJsModule: (urlInfo) => {
+          const cssText = 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 `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: (urlInfo, context) => {
+      return fetchOriginalUrl({
+        urlInfo,
+        context,
+        searchParam: "as_text_module",
+        convertToJsModule: (urlInfo) => {
+          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 `import { InlineContent } from ${JSON.stringify(
+            inlineContentClientFileUrl,
+          )}
+    
+const inlineContent = new InlineContent(${textPlain}, { type: "text/plain" })
+export default inlineContent.text`
+        },
+      })
+    },
+  }
+
+  return [asJsonModule, asCssModule, asTextModule]
+}
+
+const fetchOriginalUrl = async ({
+  urlInfo,
+  context,
+  searchParam,
+  expectedType,
+  convertToJsModule,
+}) => {
+  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,
+  })
+  return {
+    type: "js_module",
+    contentType: "text/javascript",
+    content: convertToJsModule(originalUrlInfo, context),
+  }
+}
+
+const importAsInfos = {
+  json: {
+    searchParam: "as_json_module",
+    expectedType: "json",
+  },
+  css: {
+    searchParam: "as_css_module",
+    expectedType: "css",
+  },
+  text: {
+    searchParam: "as_text_module",
+    expectedType: "text",
+  },
+}
+
+const getImportTypesToTranspile = ({
+  scenario,
+  isSupportedOnCurrentClients,
+}) => {
+  // 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 (!isSupportedOnCurrentClients("import_type_json")) {
+    importTypes.push("json")
+  }
+  if (!isSupportedOnCurrentClients("import_type_css")) {
+    importTypes.push("css")
+  }
+  if (!isSupportedOnCurrentClients("import_type_text")) {
+    importTypes.push("text")
+  }
+  return importTypes
+}

package/src/plugins/transpilation/jsenv_plugin_transpilation.js

@@ -0,0 +1,40 @@
+/*
+ * 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"
+
+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 })]
+      : []),
+    ...(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()
+}