@jsenv/core 20.0.4 → 20.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "20.0.4",
+  "version": "20.0.8",
   "description": "Tool to develop, test and build js projects",
   "license": "MIT",
   "repository": {
@@ -11,8 +11,7 @@
     "node": ">=14.9.0"
   },
   "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org"
+    "access": "public"
   },
   "type": "module",
   "exports": {

package/src/buildProject.js

@@ -36,7 +36,7 @@ export const buildProject = async ({
   writeOnFileSystem = true,
 
   format,
-  systemJsUrl = "/node_modules/systemjs/dist/s.min.js",
+  systemJsUrl,
   globalName,
   globals = {},
   babelPluginMap = jsenvBabelPluginMap,

package/src/internal/building/asset-builder.js

@@ -387,7 +387,7 @@ export const createAssetBuilder = (
           return
         }
 
-        const targetBuildBuffer = buildFileInfo.code
+        const targetBuildBuffer = Buffer.from(buildFileInfo.code)
         const targetFileName = buildFileInfo.fileName
         const targetBuildRelativeUrl =
           buildManifest[targetFileName] || targetFileName
@@ -543,7 +543,7 @@ export const createAssetBuilder = (
       const transform = assetTransformMap[targetUrl]
       if (typeof transform !== "function") {
         target.targetBuildEnd(
-          target.targetBuffer,
+          target.targetBuildBuffer || target.targetBuffer,
           target.targetBuildRelativeUrl,
         )
         return

package/src/internal/building/buildToCompilationResult.js

@@ -79,10 +79,12 @@ export const buildToCompilationResult = (
     if (fileName === mainFileName) return
 
     const rollupFile = rollupBuild[fileName]
+    if (rollupFile.type === "asset") return
+
     const file = parseRollupFile(rollupFile, {
       urlResponseBodyMap,
       compiledFileUrl,
-      sourcemapFileUrl: resolveUrl(file.map.file, compiledFileUrl),
+      sourcemapFileUrl: resolveUrl(rollupFile.map.file, compiledFileUrl),
     })
     trackDependencies(file.dependencyMap)
     assets.push(resolveUrl(fileName), compiledFileUrl)

package/src/internal/building/build_file_contents.js

@@ -1,49 +1,9 @@
-import { resolveUrl, urlToRelativeUrl } from "@jsenv/filesystem"
-
-import { setJavaScriptSourceMappingUrl } from "@jsenv/core/src/internal/sourceMappingURLUtils.js"
-
-export const createBuildFileContents = ({ rollupBuild, buildDirectoryUrl }) => {
+export const createBuildFileContents = ({ rollupBuild }) => {
   const buildFileContents = {}
   Object.keys(rollupBuild).forEach((buildRelativeUrl) => {
-    const rollupFileInfo = rollupBuild[buildRelativeUrl]
-    const fileBuildUrl = resolveUrl(buildRelativeUrl, buildDirectoryUrl)
-
-    if (rollupFileInfo.type === "asset") {
-      buildFileContents[buildRelativeUrl] = rollupFileInfo.source
-      return
-    }
-
-    const { code, map } = rollupFileInfo
-
-    if (!map) {
-      buildFileContents[buildRelativeUrl] = code
-      return
-    }
-
-    const sourcemapBuildRelativeUrl = `${buildRelativeUrl}.map`
-    const sourcemapRollupFileInfo = rollupBuild[sourcemapBuildRelativeUrl]
-    if (sourcemapRollupFileInfo) {
-      // already in rollup build, sourcemap will be found
-      buildFileContents[buildRelativeUrl] = code
-      return
-    }
-
-    const sourcemapBuildUrl = resolveUrl(
-      sourcemapBuildRelativeUrl,
-      buildDirectoryUrl,
-    )
-    const fileSourcemapString = JSON.stringify(map, null, "  ")
-    buildFileContents[sourcemapBuildRelativeUrl] = fileSourcemapString
+    const { type, source, code } = rollupBuild[buildRelativeUrl]
 
-    const sourcemapBuildUrlRelativeToFileBuildUrl = urlToRelativeUrl(
-      sourcemapBuildUrl,
-      fileBuildUrl,
-    )
-    const codeWithSourcemapComment = setJavaScriptSourceMappingUrl(
-      code,
-      sourcemapBuildUrlRelativeToFileBuildUrl,
-    )
-    buildFileContents[buildRelativeUrl] = codeWithSourcemapComment
+    buildFileContents[buildRelativeUrl] = type === "asset" ? source : code
   })
   return buildFileContents
 }

package/src/internal/building/createJsenvRollupPlugin.js

@@ -44,6 +44,7 @@ import { minifyJs } from "./js/minifyJs.js"
 import { createImportResolverForNode } from "../import-resolution/import-resolver-node.js"
 import { createImportResolverForImportmap } from "../import-resolution/import-resolver-importmap.js"
 import { getDefaultImportMap } from "../import-resolution/importmap-default.js"
+import { injectSourcemapInRollupBuild } from "./rollup_build_sourcemap.js"
 import { createBuildFileContents } from "./build_file_contents.js"
 import { createBuildStats } from "./build_stats.js"
 
@@ -367,6 +368,7 @@ building ${entryFileRelativeUrls.length} entry files...`)
             return parseTarget(target, notifiers, {
               format,
               systemJsUrl,
+              projectDirectoryUrl,
               urlToOriginalFileUrl: (url) => {
                 return asOriginalUrl(url)
               },
@@ -901,12 +903,14 @@ building ${entryFileRelativeUrls.length} entry files...`)
         ...jsModuleBuild,
         ...assetBuild,
       }
+      rollupBuild = injectSourcemapInRollupBuild(rollupBuild, {
+        buildDirectoryUrl,
+      })
       rollupBuild = sortObjectByPathnames(rollupBuild)
       buildManifest = sortObjectByPathnames(buildManifest)
       buildMappings = sortObjectByPathnames(buildMappings)
       buildFileContents = createBuildFileContents({
         rollupBuild,
-        buildDirectoryUrl,
       })
       const buildDuration = Date.now() - buildStartMs
       buildStats = createBuildStats({

package/src/internal/building/html/parseHtmlAsset.js

@@ -30,15 +30,18 @@ import {
   getHtmlNodeAttributeByName,
   stringifyHtmlAst,
   getUniqueNameForInlineHtmlNode,
-  addHtmlNodeAttribute,
   removeHtmlNodeAttribute,
   setHtmlNodeText,
   getHtmlNodeTextNode,
-  removeHtmlNodeText,
   parseSrcset,
   stringifySrcset,
 } from "@jsenv/core/src/internal/compiling/compileHtml.js"
-import { setJavaScriptSourceMappingUrl } from "@jsenv/core/src/internal/sourceMappingURLUtils.js"
+import {
+  getJavaScriptSourceMappingUrl,
+  setJavaScriptSourceMappingUrl,
+  getCssSourceMappingUrl,
+  setCssSourceMappingUrl,
+} from "@jsenv/core/src/internal/sourceMappingURLUtils.js"
 import {
   getTargetAsBase64Url,
   targetIsReferencedOnlyByRessourceHint,
@@ -68,9 +71,9 @@ export const parseHtmlAsset = async (
 
   const linksMutations = collectNodesMutations(links, notifiers, htmlTarget, [
     linkStylesheetHrefVisitor,
-    (link, { notifyReferenceFound }) =>
+    (link, notifiers) =>
       linkHrefVisitor(link, {
-        notifyReferenceFound,
+        ...notifiers,
         ressourceHintNeverUsedCallback,
       }),
   ])
@@ -146,7 +149,11 @@ export const parseHtmlAsset = async (
   }
 }
 
-const regularScriptSrcVisitor = (script, { notifyReferenceFound }) => {
+const regularScriptSrcVisitor = (
+  script,
+  { notifyReferenceFound },
+  htmlTarget,
+) => {
   const typeAttribute = getHtmlNodeAttributeByName(script, "type")
   if (
     typeAttribute &&
@@ -172,8 +179,21 @@ const regularScriptSrcVisitor = (script, { notifyReferenceFound }) => {
 
     if (shouldInline({ reference: remoteScriptReference, htmlNode: script })) {
       removeHtmlNodeAttribute(script, srcAttribute)
-      const { targetBuildBuffer } = remoteScriptReference.target
-      setHtmlNodeText(script, targetBuildBuffer)
+      const { target } = remoteScriptReference
+      const { targetBuildBuffer } = target
+      let jsString = String(targetBuildBuffer)
+
+      const sourcemapRelativeUrl = getJavaScriptSourceMappingUrl(jsString)
+      if (sourcemapRelativeUrl) {
+        const { targetBuildRelativeUrl } = target
+        const jsBuildUrl = resolveUrl(targetBuildRelativeUrl, "file:///")
+        const sourcemapBuildUrl = resolveUrl(sourcemapRelativeUrl, jsBuildUrl)
+        const htmlUrl = resolveUrl(htmlTarget.targetFileNamePattern, "file:///")
+        const sourcemapInlineUrl = urlToRelativeUrl(sourcemapBuildUrl, htmlUrl)
+        jsString = setJavaScriptSourceMappingUrl(jsString, sourcemapInlineUrl)
+      }
+
+      setHtmlNodeText(script, jsString)
       return
     }
 
@@ -259,14 +279,19 @@ const moduleScriptSrcVisitor = (script, { format, notifyReferenceFound }) => {
       // here put a warning if we cannot inline importmap because it would mess
       // the remapping (note that it's feasible) but not yet supported
       removeHtmlNodeAttribute(script, srcAttribute)
-      const { targetBuildBuffer } = remoteScriptReference.target
-      const jsString = String(targetBuildBuffer)
-
-      const codeWithSourcemapComment = setJavaScriptSourceMappingUrl(
-        jsString,
-        `${remoteScriptReference.target.targetFileName}.map`
-      )
-      setHtmlNodeText(script, codeWithSourcemapComment)
+      const { target } = remoteScriptReference
+      const { targetBuildBuffer } = target
+      let jsString = String(targetBuildBuffer)
+
+      // at this stage, for some reason the sourcemap url is not in the js
+      // (it will be added sshortly after by "injectSourcemapInRollupBuild")
+      // but we know that a script type module have a sourcemap
+      // and will be next to html file
+      // with these assumptions we can force the sourcemap url
+      const sourcemapUrl = `${target.targetBuildRelativeUrl}.map`
+      jsString = setJavaScriptSourceMappingUrl(jsString, sourcemapUrl)
+
+      setHtmlNodeText(script, jsString)
       return
     }
 
@@ -314,14 +339,12 @@ const moduleScriptTextNodeVisitor = (
     targetIsJsModule: true,
     targetIsInline: true,
   })
-  return ({ getReferenceUrlRelativeToImporter }) => {
+  return () => {
     if (format === "systemjs") {
       typeAttribute.value = "systemjs-module"
     }
-    const urlRelativeToImporter = getReferenceUrlRelativeToImporter(jsReference)
-    const relativeUrlNotation = ensureRelativeUrlNotation(urlRelativeToImporter)
-    removeHtmlNodeText(script)
-    addHtmlNodeAttribute(script, { name: "src", value: relativeUrlNotation })
+    const { targetBuildBuffer } = jsReference.target
+    textNode.value = targetBuildBuffer
   }
 }
 
@@ -378,7 +401,10 @@ const importmapScriptSrcVisitor = (
       // the remapping (note that it's feasible) but not yet supported
       removeHtmlNodeAttribute(script, srcAttribute)
       const { targetBuildBuffer } = importmapReference.target
-      setHtmlNodeText(script, targetBuildBuffer)
+
+      const jsString = String(targetBuildBuffer)
+
+      setHtmlNodeText(script, jsString)
       return
     }
 
@@ -433,7 +459,11 @@ const importmapScriptTextNodeVisitor = (
   }
 }
 
-const linkStylesheetHrefVisitor = (link, { notifyReferenceFound }) => {
+const linkStylesheetHrefVisitor = (
+  link,
+  { notifyReferenceFound },
+  htmlTarget,
+) => {
   const hrefAttribute = getHtmlNodeAttributeByName(link, "href")
   if (!hrefAttribute) {
     return null
@@ -457,8 +487,22 @@ const linkStylesheetHrefVisitor = (link, { notifyReferenceFound }) => {
     }
 
     if (shouldInline({ reference: cssReference, htmlNode: link })) {
-      const { targetBuildBuffer } = cssReference.target
-      replaceHtmlNode(link, `<style>${targetBuildBuffer}</style>`)
+      const { target } = cssReference
+      const { targetBuildBuffer } = target
+      let cssString = String(targetBuildBuffer)
+      const sourcemapRelativeUrl = getCssSourceMappingUrl(cssString)
+      if (sourcemapRelativeUrl) {
+        const { targetBuildRelativeUrl } = target
+        const cssBuildUrl = resolveUrl(targetBuildRelativeUrl, "file:///")
+        const sourcemapBuildUrl = resolveUrl(sourcemapRelativeUrl, cssBuildUrl)
+        const htmlUrl = resolveUrl(htmlTarget.targetFileNamePattern, "file:///")
+        const sourcemapInlineUrl = urlToRelativeUrl(sourcemapBuildUrl, htmlUrl)
+        cssString = setCssSourceMappingUrl(cssString, sourcemapInlineUrl)
+      }
+
+      replaceHtmlNode(link, `<style>${cssString}</style>`, {
+        attributesToIgnore: ["href", "rel", "as", "crossorigin", "type"],
+      })
       return
     }
 
@@ -470,7 +514,7 @@ const linkStylesheetHrefVisitor = (link, { notifyReferenceFound }) => {
 
 const linkHrefVisitor = (
   link,
-  { notifyReferenceFound, ressourceHintNeverUsedCallback },
+  { format, notifyReferenceFound, ressourceHintNeverUsedCallback },
 ) => {
   const hrefAttribute = getHtmlNodeAttributeByName(link, "href")
   if (!hrefAttribute) {
@@ -527,6 +571,16 @@ const linkHrefVisitor = (
       return
     }
 
+    if (format === "systemjs" && rel === "modulepreload") {
+      const urlRelativeToImporter =
+        getReferenceUrlRelativeToImporter(linkReference)
+      replaceHtmlNode(
+        link,
+        `<link rel="preload" href="${urlRelativeToImporter}" as="script" />`,
+      )
+      return
+    }
+
     if (shouldInline({ reference: linkReference, htmlNode: link })) {
       replaceHtmlNode(
         link,

package/src/internal/building/parseTarget.js

@@ -1,10 +1,15 @@
+import { urlToRelativeUrl } from "@jsenv/filesystem"
+
 import {
   parseHtmlString,
-  htmlAstContains,
+  findHtmlNode,
   htmlNodeIsScriptModule,
+  getHtmlNodeAttributeByName,
+  getHtmlNodeTextNode,
   manipulateHtmlAst,
   findFirstImportMapNode,
 } from "@jsenv/core/src/internal/compiling/compileHtml.js"
+import { jsenvSystemJsFileInfo } from "@jsenv/core/src/internal/jsenvInternalFiles.js"
 
 import { parseHtmlAsset } from "./html/parseHtmlAsset.js"
 import { parseImportmapAsset } from "./importmap/parseImportmapAsset.js"
@@ -18,6 +23,7 @@ export const parseTarget = (
   target,
   notifiers,
   {
+    projectDirectoryUrl,
     format,
     systemJsUrl,
     urlToOriginalFileUrl,
@@ -49,18 +55,49 @@ export const parseTarget = (
             return
           }
 
-          const htmlContainsModuleScript = htmlAstContains(
-            htmlAst,
-            htmlNodeIsScriptModule,
-          )
-          if (!htmlContainsModuleScript) {
+          let hasModuleScript = false
+          let hasInlineModuleScript = false
+          findHtmlNode(htmlAst, (htmlNode) => {
+            const isScriptModule = htmlNodeIsScriptModule(htmlNode)
+            if (!isScriptModule) {
+              return false
+            }
+
+            hasModuleScript = true
+
+            const isInline =
+              getHtmlNodeAttributeByName(htmlNode, "data-jsenv-force-inline") ||
+              (!getHtmlNodeAttributeByName(htmlNode, "src") &&
+                getHtmlNodeTextNode(htmlNode))
+            if (!isInline) {
+              return false
+            }
+            hasInlineModuleScript = true
+            return true
+          })
+
+          if (!hasModuleScript) {
             return
           }
 
+          // use our own version of systemjs by default
+          // we should also detect if there is an inline script
+          // and, in that case, inline systemjs instead of using the url
+          if (typeof systemJsUrl === "undefined") {
+            systemJsUrl = `/${urlToRelativeUrl(
+              jsenvSystemJsFileInfo.url,
+              projectDirectoryUrl,
+            )}`
+          }
+
           manipulateHtmlAst(htmlAst, {
             scriptInjections: [
               {
+                id: "jsenv_inject_systemjs",
                 src: systemJsUrl,
+                ...(hasInlineModuleScript
+                  ? { "data-jsenv-force-inline": true }
+                  : {}),
               },
             ],
           })
@@ -82,7 +119,7 @@ export const parseTarget = (
             scriptInjections: [
               {
                 type: "importmap",
-                id: "jsenv-build-importmap",
+                id: "jsenv_inject_importmap",
                 text: "{}",
               },
             ],

package/src/internal/building/rollup_build_sourcemap.js

@@ -0,0 +1,54 @@
+import { resolveUrl, urlToRelativeUrl } from "@jsenv/filesystem"
+
+import { setJavaScriptSourceMappingUrl } from "@jsenv/core/src/internal/sourceMappingURLUtils.js"
+
+export const injectSourcemapInRollupBuild = (
+  rollupBuild,
+  { buildDirectoryUrl },
+) => {
+  const rollupBuildWithSourcemap = {}
+
+  Object.keys(rollupBuild).forEach((buildRelativeUrl) => {
+    const rollupFileInfo = rollupBuild[buildRelativeUrl]
+    const { type, code, map } = rollupFileInfo
+
+    if (type === "asset" || !map) {
+      rollupBuildWithSourcemap[buildRelativeUrl] = rollupFileInfo
+      return
+    }
+
+    const sourcemapBuildRelativeUrl = `${buildRelativeUrl}.map`
+    const sourcemapRollupFileInfo = rollupBuild[sourcemapBuildRelativeUrl]
+    if (sourcemapRollupFileInfo) {
+      rollupBuildWithSourcemap[buildRelativeUrl] = rollupFileInfo
+      return
+    }
+
+    const fileBuildUrl = resolveUrl(buildRelativeUrl, buildDirectoryUrl)
+    const sourcemapBuildUrl = resolveUrl(
+      sourcemapBuildRelativeUrl,
+      buildDirectoryUrl,
+    )
+    const fileSourcemapString = JSON.stringify(map, null, "  ")
+    const sourcemapBuildUrlRelativeToFileBuildUrl = urlToRelativeUrl(
+      sourcemapBuildUrl,
+      fileBuildUrl,
+    )
+    const codeWithSourcemapComment = setJavaScriptSourceMappingUrl(
+      code,
+      sourcemapBuildUrlRelativeToFileBuildUrl,
+    )
+
+    rollupBuildWithSourcemap[sourcemapBuildRelativeUrl] = {
+      type: "asset",
+      fileName: sourcemapBuildRelativeUrl,
+      source: fileSourcemapString,
+    }
+    rollupBuildWithSourcemap[buildRelativeUrl] = {
+      ...rollupFileInfo,
+      code: codeWithSourcemapComment,
+    }
+  })
+
+  return rollupBuildWithSourcemap
+}

package/src/internal/compiling/compileHtml.js

@@ -67,14 +67,23 @@ export const findNodes = (htmlString, predicate) => {
 export const findNodeByTagName = (htmlString, tagName) =>
   findNode(htmlString, (node) => node.nodeName === tagName)
 
+export const findHtmlNodeById = (htmlString, id) => {
+  return findNode(htmlString, (node) => {
+    const idAttribute = getHtmlNodeAttributeByName(node, "id")
+    return idAttribute && idAttribute.value === id
+  })
+}
+
 export const findAllNodeByTagName = (htmlString, tagName) =>
   findNodes(htmlString, (node) => node.nodeName === tagName)
 
 export const findFirstImportMapNode = (htmlStringOrAst) =>
   findNode(htmlStringOrAst, htmlNodeIsScriptImportmap)
 
-export const getHtmlNodeAttributeByName = (htmlNode, attributeName) =>
-  htmlNode.attrs.find((attr) => attr.name === attributeName)
+export const getHtmlNodeAttributeByName = (htmlNode, attributeName) => {
+  const attrs = htmlNode.attrs
+  return attrs && attrs.find((attr) => attr.name === attributeName)
+}
 
 export const removeHtmlNodeAttribute = (htmlNode, attributeToRemove) => {
   let attrIndex
@@ -148,16 +157,16 @@ export const getHtmlNodeLocation = (htmlNode) => {
   }
 }
 
-export const htmlAstContains = (htmlAst, predicate) => {
-  let contains = false
+export const findHtmlNode = (htmlAst, predicate) => {
+  let nodeFound = null
   visitHtmlAst(htmlAst, (node) => {
     if (predicate(node)) {
-      contains = true
+      nodeFound = node
       return "stop"
     }
     return null
   })
-  return contains
+  return nodeFound
 }
 
 export const htmlNodeIsScriptModule = (htmlNode) => {
@@ -275,7 +284,7 @@ export const parseHtmlAstRessources = (htmlAst) => {
 export const replaceHtmlNode = (
   node,
   replacement,
-  { inheritAttributes = true } = {},
+  { attributesInherit = true, attributesToIgnore = [] } = {},
 ) => {
   let newNode
   if (typeof replacement === "string") {
@@ -284,16 +293,12 @@ export const replaceHtmlNode = (
     newNode = replacement
   }
 
-  if (inheritAttributes) {
+  if (attributesInherit) {
+    // inherit attributes except thoos listed in attributesToIgnore
     newNode.attrs = [
-      // inherit script attributes except src, type, href, rel
-      ...node.attrs.filter(
-        ({ name }) =>
-          name !== "type" &&
-          name !== "src" &&
-          name !== "href" &&
-          name !== "rel",
-      ),
+      ...node.attrs.filter(({ name }) => {
+        return !attributesToIgnore.includes(name)
+      }),
       ...newNode.attrs,
     ]
   }

package/src/internal/compiling/html_source_file_service.js

@@ -255,6 +255,7 @@ const inlineImportmapScripts = async ({ logger, htmlAst, fileUrl }) => {
         importMapUrl,
         fileUrl,
       )
+
       replaceHtmlNode(
         remoteImportmapScript,
         `<script type="importmap">${JSON.stringify(
@@ -262,6 +263,9 @@ const inlineImportmapScripts = async ({ logger, htmlAst, fileUrl }) => {
           null,
           "  ",
         )}</script>`,
+        {
+          attributesToIgnore: ["src"],
+        },
       )
     }),
   )

package/src/internal/compiling/jsenvCompilerForHtml.js

@@ -58,11 +58,11 @@ const compileHtmlFile = ({
 
   return {
     compile: async (htmlBeforeCompilation) => {
-      // parsing html should not throw any syntax error
+      // we don't have to try/catch html parsing because:
+      // parsing html is fault tolerant (it does not throw any syntax error)
       // invalid html markup is converted into some valid html
       // in the worst cases the faulty html string special characters
-      // will be html encoded.
-      // All this comment to say we don't have to try/catch html parsing
+      // will be html encoded
       const htmlAst = parseHtmlString(htmlBeforeCompilation)
       manipulateHtmlAst(htmlAst, {
         scriptInjections: [
@@ -79,6 +79,11 @@ const compileHtmlFile = ({
             : []),
         ],
       })
+      // here we must convert "modulepreload" into "preload"
+      if (moduleOutFormat !== "esmodule") {
+      
+      }
+
       const { scripts } = parseHtmlAstRessources(htmlAst)
 
       let hasImportmap = false

package/src/internal/jsenvInternalFiles.js

@@ -106,3 +106,8 @@ export const jsenvToolbarJsFileInfo = {
   jsenvBuildUrl: resolveUrl("./dist/jsenv_toolbar.js", jsenvCoreDirectoryUrl),
   sourcemapFilename: "jsenv_toolbar.js.map",
 }
+
+export const jsenvSystemJsFileInfo = {
+  url: resolveUrl("./src/internal/runtime/s.js", jsenvCoreDirectoryUrl),
+  jsenvRelativeUrl: "./src/internal/runtime/s.js",
+}