@jsenv/core 26.0.1 → 27.0.0-alpha.2

package/src/build/build_urls_generator.js

@@ -0,0 +1,64 @@
+import { urlToFilename } from "@jsenv/filesystem"
+
+import { memoizeByUrl } from "@jsenv/utils/memoize/memoize_by_url.js"
+
+export const createBuilUrlsGenerator = ({ buildDirectoryUrl }) => {
+  const cache = {}
+  const generate = memoizeByUrl((url, urlInfo, parentUrlInfo) => {
+    const directoryPath = determineDirectoryPath(urlInfo, parentUrlInfo)
+    let name = urlToFilename(url)
+    const { searchParams } = new URL(url)
+    if (
+      searchParams.has("css_module") ||
+      searchParams.has("json_module") ||
+      searchParams.has("text_module")
+    ) {
+      name = `${name}.js`
+    }
+    let names = cache[directoryPath]
+    if (!names) {
+      names = []
+      cache[directoryPath] = names
+    }
+
+    let nameCandidate = name
+    let integer = 1
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      if (!names.includes(nameCandidate)) {
+        names.push(nameCandidate)
+        break
+      }
+      integer++
+      nameCandidate = `${name}${integer}`
+    }
+    return `${buildDirectoryUrl}${directoryPath}${nameCandidate}`
+  })
+
+  return {
+    generate,
+  }
+}
+
+const determineDirectoryPath = (urlInfo, parentUrlInfo) => {
+  if (urlInfo.isInline) {
+    const parentDirectoryPath = determineDirectoryPath(parentUrlInfo)
+    return parentDirectoryPath
+  }
+  if (urlInfo.data.isEntryPoint) {
+    return ""
+  }
+  if (urlInfo.type === "html") {
+    return "html/"
+  }
+  if (urlInfo.type === "css") {
+    return "css/"
+  }
+  if (urlInfo.type === "js_module" || urlInfo.type === "js_classic") {
+    if (urlInfo.subtype === "service_worker") {
+      return ""
+    }
+    return "js/"
+  }
+  return "assets/"
+}

package/src/build/inject_version_mappings.js

@@ -0,0 +1,62 @@
+// https://bundlers.tooling.report/hashing/avoid-cascade/
+
+import {
+  parseHtmlString,
+  injectScriptAsEarlyAsPossible,
+  createHtmlNode,
+  stringifyHtmlAst,
+} from "@jsenv/utils/html_ast/html_ast.js"
+import { createMagicSource } from "@jsenv/utils/sourcemap/magic_source.js"
+
+export const injectVersionMappings = async (
+  urlInfo,
+  { kitchen, versionMappings },
+) => {
+  const injector = injectors[urlInfo.type]
+  if (injector) {
+    const { content, sourcemap } = injector(urlInfo, { versionMappings })
+    await kitchen.urlInfoTransformer.applyFinalTransformations(urlInfo, {
+      content,
+      sourcemap,
+    })
+  }
+}
+
+const injectors = {
+  html: (urlInfo, { versionMappings }) => {
+    // ideally we would inject an importmap but browser support is too low
+    // (even worse for worker/service worker)
+    // so for now we inject code into entry points
+    const htmlAst = parseHtmlString(urlInfo.content, {
+      storeOriginalPositions: false,
+    })
+    injectScriptAsEarlyAsPossible(
+      htmlAst,
+      createHtmlNode({
+        "tagName": "script",
+        "textContent": generateClientCodeForVersionMappings(versionMappings),
+        "injected-by": "jsenv:versioning",
+      }),
+    )
+    return {
+      content: stringifyHtmlAst(htmlAst, {
+        removeOriginalPositionAttributes: true,
+      }),
+    }
+  },
+  js_module: (urlInfo, { versionMappings }) => {
+    const magicSource = createMagicSource(urlInfo.content)
+    magicSource.prepend(generateClientCodeForVersionMappings(versionMappings))
+    return magicSource.toContentAndSourcemap()
+  },
+}
+
+const generateClientCodeForVersionMappings = (versionMappings) => {
+  return `
+var __versionMappings__ = ${JSON.stringify(versionMappings, null, "  ")}
+var __envGlobal__ = typeof self === 'undefined' ? global : self
+__envGlobal__.__v__ = function (specifier) {
+  return __versionMappings__[specifier] || specifier
+}
+`
+}

package/src/build/plugins/bundle_js_module/jsenv_plugin_bundle_js_module.js

@@ -0,0 +1,225 @@
+import { isFileSystemPath, urlToRelativeUrl } from "@jsenv/filesystem"
+
+import { applyRollupPlugins } from "@jsenv/utils/js_ast/apply_rollup_plugins.js"
+import { sourcemapConverter } from "@jsenv/utils/sourcemap/sourcemap_converter.js"
+import { fileUrlConverter } from "@jsenv/core/src/omega/file_url_converter.js"
+
+export const jsenvPluginBundleJsModule = () => {
+  return {
+    name: "jsenv:bundle_js_module",
+    appliesDuring: {
+      build: true,
+    },
+    bundle: {
+      js_module: async (
+        jsModuleUrlInfos,
+        {
+          signal,
+          logger,
+          rootDirectoryUrl,
+          buildDirectoryUrl,
+          urlGraph,
+          runtimeSupport,
+          sourcemaps,
+        },
+      ) => {
+        const { jsModuleBundleUrlInfos } = await buildWithRollup({
+          signal,
+          logger,
+          rootDirectoryUrl,
+          buildDirectoryUrl,
+          urlGraph,
+          jsModuleUrlInfos,
+
+          runtimeSupport,
+          sourcemaps,
+        })
+        return jsModuleBundleUrlInfos
+      },
+    },
+  }
+}
+
+export const buildWithRollup = async ({
+  signal,
+  logger,
+  rootDirectoryUrl,
+  buildDirectoryUrl,
+  urlGraph,
+  jsModuleUrlInfos,
+
+  runtimeSupport,
+  sourcemaps,
+}) => {
+  const resultRef = { current: null }
+  await applyRollupPlugins({
+    rollupPlugins: [
+      rollupPluginJsenv({
+        signal,
+        logger,
+        rootDirectoryUrl,
+        buildDirectoryUrl,
+        urlGraph,
+        jsModuleUrlInfos,
+
+        runtimeSupport,
+        sourcemaps,
+        resultRef,
+      }),
+    ],
+    inputOptions: {
+      input: [],
+      onwarn: (warning) => {
+        if (warning.code === "CIRCULAR_DEPENDENCY") {
+          return
+        }
+        logger.warn(String(warning))
+      },
+    },
+  })
+  return resultRef.current
+}
+
+const rollupPluginJsenv = ({
+  // logger,
+  rootDirectoryUrl,
+  buildDirectoryUrl,
+  urlGraph,
+  jsModuleUrlInfos,
+  sourcemaps,
+
+  resultRef,
+}) => {
+  let _rollupEmitFile = () => {
+    throw new Error("not implemented")
+  }
+  const emitChunk = (chunk) => {
+    return _rollupEmitFile({
+      type: "chunk",
+      ...chunk,
+    })
+  }
+  const urlImporters = {}
+
+  return {
+    name: "jsenv",
+    async buildStart() {
+      _rollupEmitFile = (...args) => this.emitFile(...args)
+      let previousNonEntryPointModuleId
+      jsModuleUrlInfos.forEach((jsModuleUrlInfo) => {
+        const id = jsModuleUrlInfo.url
+        if (jsModuleUrlInfo.data.isEntryPoint) {
+          emitChunk({
+            id,
+          })
+          return
+        }
+        emitChunk({
+          id,
+          implicitlyLoadedAfterOneOf: previousNonEntryPointModuleId
+            ? [previousNonEntryPointModuleId]
+            : null,
+        })
+        previousNonEntryPointModuleId = id
+      })
+    },
+    async generateBundle(outputOptions, rollupResult) {
+      _rollupEmitFile = (...args) => this.emitFile(...args)
+
+      const jsModuleBundleUrlInfos = {}
+      Object.keys(rollupResult).forEach((fileName) => {
+        const rollupFileInfo = rollupResult[fileName]
+        // there is 3 types of file: "placeholder", "asset", "chunk"
+        if (rollupFileInfo.type === "chunk") {
+          const { facadeModuleId } = rollupFileInfo
+          let url
+          if (facadeModuleId) {
+            url = fileUrlConverter.asFileUrl(facadeModuleId)
+          } else {
+            const { sources } = rollupFileInfo.map
+            const sourcePath = sources[sources.length - 1]
+            url = fileUrlConverter.asFileUrl(sourcePath)
+          }
+          const jsModuleBundleUrlInfo = {
+            // buildRelativeUrl: rollupFileInfo.fileName,
+            data: {
+              generatedBy: "rollup",
+            },
+            contentType: "application/javascript",
+            content: rollupFileInfo.code,
+            sourcemap: rollupFileInfo.map,
+          }
+          jsModuleBundleUrlInfos[url] = jsModuleBundleUrlInfo
+        }
+      })
+      resultRef.current = {
+        jsModuleBundleUrlInfos,
+      }
+    },
+    outputOptions: (outputOptions) => {
+      // const sourcemapFile = buildDirectoryUrl
+      Object.assign(outputOptions, {
+        format: "esm",
+        dir: fileUrlConverter.asFilePath(buildDirectoryUrl),
+        sourcemap: sourcemaps === "file" || sourcemaps === "inline",
+        // sourcemapFile,
+        sourcemapPathTransform: (relativePath) => {
+          return new URL(relativePath, buildDirectoryUrl).href
+        },
+        entryFileNames: () => {
+          return `[name].js`
+        },
+        chunkFileNames: (chunkInfo) => {
+          // preserves relative path parts:
+          // the goal is to mantain the original relative path (relative to the root directory)
+          // so that later in the build process, when resolving these urls, we are able to
+          // re-resolve the specifier againt the original parent url and find the original url
+          const { facadeModuleId } = chunkInfo
+          const fileUrl = fileUrlConverter.asFileUrl(facadeModuleId)
+          const relativePath = urlToRelativeUrl(fileUrl, rootDirectoryUrl)
+          return relativePath
+        },
+        // https://rollupjs.org/guide/en/#outputpaths
+        // paths: (id) => {
+        //   return id
+        // },
+      })
+    },
+    resolveId: (specifier, importer = rootDirectoryUrl) => {
+      if (isFileSystemPath(importer)) {
+        importer = fileUrlConverter.asFileUrl(importer)
+      }
+      const url = new URL(specifier, importer).href
+      const existingImporter = urlImporters[url]
+      if (!existingImporter) {
+        urlImporters[url] = importer
+      }
+      if (!url.startsWith("file:")) {
+        return { url, external: true }
+      }
+      const filePath = fileUrlConverter.asFilePath(url)
+      return filePath
+    },
+    async load(rollupId) {
+      const fileUrl = fileUrlConverter.asFileUrl(rollupId)
+      const urlInfo = urlGraph.getUrlInfo(fileUrl)
+      return {
+        code: urlInfo.content,
+        map: urlInfo.sourcemap
+          ? sourcemapConverter.toFilePaths(urlInfo.sourcemap)
+          : urlInfo.sourcemap,
+      }
+    },
+    // resolveFileUrl: ({ moduleId }) => {
+    //   return `${fileUrlConverter.asFileUrl(moduleId)}`
+    // },
+    renderChunk: (code, chunkInfo) => {
+      const { facadeModuleId } = chunkInfo
+      if (!facadeModuleId) {
+        // happens for inline module scripts for instance
+        return null
+      }
+      return null
+    },
+  }
+}

package/src/build/plugins/minify_html/jsenv_plugin_minify_html.js

@@ -0,0 +1,30 @@
+import { createRequire } from "node:module"
+
+const require = createRequire(import.meta.url)
+
+// https://github.com/kangax/html-minifier#options-quick-reference
+export const jsenvPluginMinifyHtml = ({
+  collapseWhitespace = true,
+  removeComments = true,
+} = {}) => {
+  return {
+    name: "jsenv:minify_html",
+    appliesDuring: {
+      build: true,
+    },
+    optimize: {
+      html: async (htmlUrlInfo) => {
+        return minifyHtml(htmlUrlInfo.content, {
+          collapseWhitespace,
+          removeComments,
+        })
+      },
+    },
+  }
+}
+
+const minifyHtml = (htmlString, options) => {
+  const { minify } = require("html-minifier")
+  const htmlMinified = minify(htmlString, options)
+  return htmlMinified
+}

package/src/build/plugins/minify_js/jsenv_plugin_minify_js.js

@@ -0,0 +1,47 @@
+// https://github.com/terser-js/terser#minify-options
+
+export const jsenvPluginMinifyJs = () => {
+  const applyTerser = async (urlInfo) => {
+    return minifyJs({
+      url: urlInfo.url,
+      content: urlInfo.content,
+      sourcemap: urlInfo.sourcemap,
+      isJsModule: urlInfo.type === "js_module",
+    })
+  }
+
+  return {
+    name: "jsenv:minify_js",
+    appliesDuring: {
+      build: true,
+    },
+    optimize: {
+      js_classic: applyTerser,
+      js_module: applyTerser,
+    },
+  }
+}
+
+const minifyJs = async ({ url, content, sourcemap, isJsModule }) => {
+  const { minify } = await import("terser")
+  const terserResult = await minify(
+    {
+      [url]: content,
+    },
+    {
+      sourceMap: {
+        ...(sourcemap ? { content: JSON.stringify(sourcemap) } : {}),
+        asObject: true,
+        includeSources: true,
+      },
+      module: isJsModule,
+      // We need to preserve "new InlineContent()" calls to be able to recognize them
+      // after minification in order to version urls inside inline content text
+      keep_fnames: /InlineContent/,
+    },
+  )
+  return {
+    content: terserResult.code,
+    sourcemap: terserResult.map,
+  }
+}

package/src/dev/plugins/autoreload/babel_plugin_metadata_import_meta_hot.js

@@ -0,0 +1,98 @@
+// https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/plugin-handbook.md#toc-stages-of-babel
+// https://github.com/cfware/babel-plugin-bundled-import-meta/blob/master/index.js
+// https://github.com/babel/babel/blob/f4edf62f6beeab8ae9f2b7f0b82f1b3b12a581af/packages/babel-helper-module-imports/src/index.js#L7
+
+export const babelPluginMetadataImportMetaHot = () => {
+  return {
+    name: "metadata-import-meta-hot",
+    visitor: {
+      Program(programPath, state) {
+        Object.assign(
+          state.file.metadata,
+          collectImportMetaProperties(programPath),
+        )
+      },
+    },
+  }
+}
+const collectImportMetaProperties = (programPath) => {
+  let importMetaHotDetected = false
+  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") {
+        return
+      }
+      const { property: objectProperty } = object
+      if (objectProperty.name !== "meta") {
+        return
+      }
+      const { property } = node
+      const { name } = property
+      if (name === "hot") {
+        importMetaHotDetected = true
+      }
+    },
+    CallExpression(path) {
+      if (isImportMetaHotMethodCall(path, "accept")) {
+        const callNode = path.node
+        const args = callNode.arguments
+        if (args.length === 0) {
+          hotAcceptSelf = true
+          return
+        }
+        const firstArg = args[0]
+        if (firstArg.type === "StringLiteral") {
+          hotAcceptDependencies = [
+            {
+              specifierPath: path.get("arguments")[0],
+            },
+          ]
+          return
+        }
+        if (firstArg.type === "ArrayExpression") {
+          const firstArgPath = path.get("arguments")[0]
+          hotAcceptDependencies = firstArg.elements.map((arrayNode, index) => {
+            if (arrayNode.type !== "StringLiteral") {
+              throw new Error(
+                `all array elements must be strings in "import.meta.hot.accept(array)"`,
+              )
+            }
+            return {
+              specifierPath: firstArgPath.get(index),
+            }
+          })
+          return
+        }
+        // accept first arg can be "anything" such as
+        // `const cb = () => {}; import.meta.accept(cb)`
+        hotAcceptSelf = true
+      }
+      if (isImportMetaHotMethodCall(path, "decline")) {
+        hotDecline = true
+      }
+    },
+  })
+  return {
+    importMetaHotDetected,
+    hotDecline,
+    hotAcceptSelf,
+    hotAcceptDependencies,
+  }
+}
+const isImportMetaHotMethodCall = (path, methodName) => {
+  const { property, object } = path.node.callee
+  return (
+    property &&
+    property.name === methodName &&
+    object &&
+    object.property &&
+    object.property.name === "hot" &&
+    object.object.type === "MetaProperty"
+  )
+}

package/src/dev/plugins/autoreload/client/autoreload_preference.js

@@ -0,0 +1,11 @@
+export const isAutoreloadEnabled = () => {
+  const value = window.localStorage.getItem("autoreload")
+  if (value === "0") {
+    return false
+  }
+  return true
+}
+
+export const setAutoreloadPreference = (value) => {
+  window.localStorage.setItem("autoreload", value ? "1" : "0")
+}