@jsenv/core 27.0.0-alpha.39 → 27.0.0-alpha.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "27.0.0-alpha.39",
+  "version": "27.0.0-alpha.41",
   "description": "Tool to develop, test and build js projects",
   "license": "MIT",
   "repository": {
@@ -11,7 +11,8 @@
     "node": ">=16.13.0"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
   },
   "type": "module",
   "imports": {},
@@ -67,7 +68,7 @@
     "@jsenv/node-esm-resolution": "0.0.6",
     "@jsenv/server": "12.6.1",
     "@jsenv/uneval": "1.6.0",
-    "@jsenv/utils": "1.5.0",
+    "@jsenv/utils": "1.6.1",
     "construct-style-sheets-polyfill": "3.1.0",
     "cssnano": "5.1.7",
     "cssnano-preset-default": "5.2.7",
@@ -107,4 +108,4 @@
     "redux": "4.1.2",
     "rollup": "2.70.1"
   }
-}
+}

package/src/build/build.js

@@ -223,6 +223,9 @@ ${Object.keys(rawGraph.urlInfos).join("\n")}`,
     })
   })
   const addToBundlerIfAny = (rawUrlInfo) => {
+    // if (rawUrlInfo.dependencies.size === 0) {
+    //   return
+    // }
     const bundler = bundlers[rawUrlInfo.type]
     if (bundler) {
       bundler.urlInfos.push(rawUrlInfo)
@@ -333,6 +336,7 @@ ${Object.keys(rawGraph.urlInfos).join("\n")}`,
     urlGraph: finalGraph,
     scenario: "build",
     sourcemaps,
+    sourcemapsRelativeSources: true,
     runtimeCompat,
     plugins: [
       jsenvPluginUrlReferences(),

package/src/jsenv_root_directory_url.js

@@ -0,0 +1 @@
+export const jsenvRootDirectoryUrl = new URL("../", import.meta.url).href

package/src/omega/kitchen.js

@@ -45,6 +45,7 @@ export const createKitchen = ({
     test: false,
     build: true,
   }[scenario],
+  sourcemapsRelativeSources,
   runtimeCompat = defaultRuntimeCompat,
   writeOnFileSystem = true,
 }) => {
@@ -214,6 +215,7 @@ export const createKitchen = ({
     urlGraph,
     sourcemaps,
     sourcemapsSources,
+    sourcemapsRelativeSources,
     injectSourcemapPlaceholder: ({ urlInfo, specifier }) => {
       const sourcemapReference = createReference({
         trace: `sourcemap comment placeholder for ${urlInfo.url}`,
@@ -629,6 +631,8 @@ export const createKitchen = ({
   const prepareEntryPoint = (params) => {
     const entryReference = createReference(params)
     const entryUrlInfo = resolveReference(entryReference)
+    // I should likely delete urlInfo.sourcemap
+    // otherwise it is reused when page is reloaded
     return [entryReference, entryUrlInfo]
   }
 

package/src/omega/url_graph/url_info_transformations.js

@@ -1,3 +1,4 @@
+import { urlToRelativeUrl } from "@jsenv/filesystem"
 import { composeTwoSourcemaps } from "@jsenv/utils/sourcemap/sourcemap_composition_v3.js"
 import {
   SOURCEMAP,
@@ -9,6 +10,7 @@ export const createUrlInfoTransformer = ({
   logger,
   sourcemaps,
   sourcemapsSources,
+  sourcemapsRelativeSources,
   urlGraph,
   injectSourcemapPlaceholder,
   foundSourcemap,
@@ -142,11 +144,16 @@ export const createUrlInfoTransformer = ({
       const sourcemapReference = urlInfo.sourcemapReference
       const sourcemapUrlInfo = urlGraph.getUrlInfo(sourcemapReference.url)
       sourcemapUrlInfo.contentType = "application/json"
-      sourcemapUrlInfo.content = JSON.stringify(urlInfo.sourcemap, null, "  ")
+      const sourcemap = urlInfo.sourcemap
+      if (sourcemapsRelativeSources) {
+        sourcemap.sources = sourcemap.sources.map((source) => {
+          const sourceRelative = urlToRelativeUrl(source, urlInfo.url)
+          return sourceRelative
+        })
+      }
+      sourcemapUrlInfo.content = JSON.stringify(sourcemap, null, "  ")
       if (sourcemaps === "inline") {
-        sourcemapReference.generatedSpecifier = sourcemapToBase64Url(
-          urlInfo.sourcemap,
-        )
+        sourcemapReference.generatedSpecifier = sourcemapToBase64Url(sourcemap)
       }
       if (sourcemaps === "file" || sourcemaps === "inline") {
         urlInfo.content = SOURCEMAP.writeComment({

package/src/plugins/autoreload/dev_sse/jsenv_plugin_dev_sse_client.js

@@ -1,15 +1,20 @@
+import { urlIsInsideOf } from "@jsenv/filesystem"
+
 import {
   parseHtmlString,
   stringifyHtmlAst,
   injectScriptAsEarlyAsPossible,
   createHtmlNode,
 } from "@jsenv/utils/html_ast/html_ast.js"
+import { jsenvRootDirectoryUrl } from "@jsenv/core/src/jsenv_root_directory_url.js"
 
-export const jsenvPluginDevSSEClient = () => {
-  const eventSourceClientFileUrl = new URL(
-    "./client/event_source_client.js",
-    import.meta.url,
-  ).href
+export const jsenvPluginDevSSEClient = ({ rootDirectoryUrl }) => {
+  const preferSourceFiles =
+    rootDirectoryUrl === jsenvRootDirectoryUrl ||
+    urlIsInsideOf(rootDirectoryUrl, jsenvRootDirectoryUrl)
+  const eventSourceClientFileUrl = preferSourceFiles
+    ? new URL("./client/event_source_client.js", import.meta.url).href
+    : new URL("./dist/event_source_client.js", jsenvRootDirectoryUrl).href
 
   return {
     name: "jsenv:dev_sse_client",

package/src/plugins/autoreload/dev_sse/jsenv_plugin_dev_sse_server.js

@@ -81,7 +81,8 @@ export const jsenvPluginDevSSEServer = ({
             declinedBy: dependentUrl,
           }
         }
-        if (dependentUrlInfo.data.hotAcceptDependencies.includes(urlInfo.url)) {
+        const { hotAcceptDependencies = [] } = dependentUrlInfo.data
+        if (hotAcceptDependencies.includes(urlInfo.url)) {
           instructions.push({
             type: dependentUrlInfo.type,
             boundary: urlToRelativeUrl(dependentUrl, rootDirectoryUrl),

package/src/plugins/autoreload/jsenv_plugin_autoreload.js

@@ -14,7 +14,9 @@ export const jsenvPluginAutoreload = ({
   }
   return [
     jsenvPluginHmr(),
-    jsenvPluginDevSSEClient(),
+    jsenvPluginDevSSEClient({
+      rootDirectoryUrl,
+    }),
     jsenvPluginDevSSEServer({
       rootDirectoryUrl,
       urlGraph,

package/src/plugins/html_supervisor/jsenv_plugin_html_supervisor.js

@@ -4,6 +4,8 @@
  * - scripts are wrapped to be supervised
  */
 
+import { urlIsInsideOf } from "@jsenv/filesystem"
+
 import {
   parseHtmlString,
   stringifyHtmlAst,
@@ -19,19 +21,22 @@ import {
   setHtmlNodeGeneratedText,
 } from "@jsenv/utils/html_ast/html_ast.js"
 import { generateInlineContentUrl } from "@jsenv/utils/urls/inline_content_url_generator.js"
+import { jsenvRootDirectoryUrl } from "@jsenv/core/src/jsenv_root_directory_url.js"
 
 export const jsenvPluginHtmlSupervisor = ({
+  rootDirectoryUrl,
   logs = false,
   measurePerf = false,
-} = {}) => {
-  const htmlSupervisorSetupFileUrl = new URL(
-    "./client/html_supervisor_setup.js",
-    import.meta.url,
-  ).href
-  const htmlSupervisorInstallerFileUrl = new URL(
-    "./client/html_supervisor_installer.js",
-    import.meta.url,
-  ).href
+}) => {
+  const preferSourceFiles =
+    rootDirectoryUrl === jsenvRootDirectoryUrl ||
+    urlIsInsideOf(rootDirectoryUrl, jsenvRootDirectoryUrl)
+  const htmlSupervisorSetupFileUrl = preferSourceFiles
+    ? new URL("./client/html_supervisor_setup.js", import.meta.url).href
+    : new URL("./dist/html_supervisor_setup.js", jsenvRootDirectoryUrl)
+  const htmlSupervisorInstallerFileUrl = preferSourceFiles
+    ? new URL("./client/html_supervisor_installer.js", import.meta.url).href
+    : new URL("./dist/html_supervisor_installer.js", jsenvRootDirectoryUrl)
 
   return {
     name: "jsenv:html_supervisor",

package/src/plugins/inline/jsenv_plugin_js_inline_content.js

@@ -2,38 +2,30 @@ import { CONTENT_TYPE } from "@jsenv/utils/content_type/content_type.js"
 import { createMagicSource } from "@jsenv/utils/sourcemap/magic_source.js"
 import { JS_QUOTES } from "@jsenv/utils/string/js_quotes.js"
 import { applyBabelPlugins } from "@jsenv/utils/js_ast/apply_babel_plugins.js"
-import { getTypePropertyNode } from "@jsenv/utils/js_ast/js_ast.js"
 import { generateInlineContentUrl } from "@jsenv/utils/urls/inline_content_url_generator.js"
 
 export const jsenvPluginJsInlineContent = ({ allowEscapeForVersioning }) => {
   const parseAndTransformInlineContentCalls = async (urlInfo, context) => {
-    if (
-      !urlInfo.content.includes("InlineContent(") &&
-      !urlInfo.content.includes("new Blob(") &&
-      !urlInfo.content.includes("JSON.parse(")
-    ) {
-      return null
-    }
-    const { metadata } = await applyBabelPlugins({
-      babelPlugins: [babelPluginMetadataInlineContentCalls],
-      urlInfo,
+    const inlineContentInfos = await parseJsInlineContentInfos({
+      js: urlInfo.content,
+      url: (urlInfo.data && urlInfo.data.rawUrl) || urlInfo.url,
+      isJsModule: urlInfo.type === "js_module",
     })
-    const { inlineContentCalls } = metadata
-    if (inlineContentCalls.length === 0) {
+    if (inlineContentInfos.length === 0) {
       return null
     }
     const magicSource = createMagicSource(urlInfo.content)
-    await inlineContentCalls.reduce(async (previous, inlineContentCall) => {
+    await inlineContentInfos.reduce(async (previous, inlineContentInfo) => {
       await previous
       const inlineUrl = generateInlineContentUrl({
         url: urlInfo.url,
-        extension: CONTENT_TYPE.asFileExtension(inlineContentCall.contentType),
-        line: inlineContentCall.line,
-        column: inlineContentCall.column,
-        lineEnd: inlineContentCall.lineEnd,
-        columnEnd: inlineContentCall.columnEnd,
+        extension: CONTENT_TYPE.asFileExtension(inlineContentInfo.contentType),
+        line: inlineContentInfo.line,
+        column: inlineContentInfo.column,
+        lineEnd: inlineContentInfo.lineEnd,
+        columnEnd: inlineContentInfo.columnEnd,
       })
-      let { quote } = inlineContentCall
+      let { quote } = inlineContentInfo
       if (
         quote === "`" &&
         !context.isSupportedOnCurrentClients("template_literals")
@@ -41,18 +33,18 @@ export const jsenvPluginJsInlineContent = ({ allowEscapeForVersioning }) => {
         // if quote is "`" and template literals are not supported
         // we'll use a regular string (single or double quote)
         // when rendering the string
-        quote = JS_QUOTES.pickBest(inlineContentCall.content)
+        quote = JS_QUOTES.pickBest(inlineContentInfo.content)
       }
       const [inlineReference, inlineUrlInfo] =
         context.referenceUtils.foundInline({
           type: "js_inline_content",
-          subtype: inlineContentCall.type, // "new_blob_first_arg", "new_inline_content_first_arg", "json_parse_first_arg"
+          subtype: inlineContentInfo.type, // "new_blob_first_arg", "new_inline_content_first_arg", "json_parse_first_arg"
           isOriginalPosition: urlInfo.content === urlInfo.originalContent,
-          line: inlineContentCall.line,
-          column: inlineContentCall.column,
+          line: inlineContentInfo.line,
+          column: inlineContentInfo.column,
           specifier: inlineUrl,
-          contentType: inlineContentCall.contentType,
-          content: inlineContentCall.content,
+          contentType: inlineContentInfo.contentType,
+          content: inlineContentInfo.content,
         })
       inlineUrlInfo.jsQuote = quote
       inlineReference.escape = (value) =>
@@ -62,8 +54,8 @@ export const jsenvPluginJsInlineContent = ({ allowEscapeForVersioning }) => {
         urlInfo: inlineUrlInfo,
       })
       magicSource.replace({
-        start: inlineContentCall.start,
-        end: inlineContentCall.end,
+        start: inlineContentInfo.start,
+        end: inlineContentInfo.end,
         replacement: JS_QUOTES.escapeSpecialChars(inlineUrlInfo.content, {
           quote,
           allowEscapeForVersioning,
@@ -83,78 +75,136 @@ export const jsenvPluginJsInlineContent = ({ allowEscapeForVersioning }) => {
   }
 }
 
-const babelPluginMetadataInlineContentCalls = () => {
+const parseJsInlineContentInfos = async ({ js, url, isJsModule }) => {
+  if (
+    !js.includes("InlineContent") &&
+    !js.includes("new Blob(") &&
+    !js.includes("JSON.parse(")
+  ) {
+    return []
+  }
+  const { metadata } = await applyBabelPlugins({
+    babelPlugins: [babelPluginMetadataInlineContents],
+    urlInfo: {
+      url,
+      type: isJsModule ? "js_module" : "js_classic",
+      content: js,
+    },
+  })
+  return metadata.inlineContentInfos
+}
+
+const babelPluginMetadataInlineContents = () => {
   return {
-    name: "metadata-inline-content-calls",
+    name: "metadata-inline-contents",
     visitor: {
       Program: (programPath, state) => {
-        const inlineContentCalls = []
+        const inlineContentInfos = []
+        const onInlineContentInfo = (inlineContentInfo) => {
+          inlineContentInfos.push(inlineContentInfo)
+        }
         programPath.traverse({
           NewExpression: (path) => {
-            const inlineContentCall = analyzeNewInlineContentCall(path)
-            if (inlineContentCall) {
-              inlineContentCalls.push(inlineContentCall)
+            if (isNewInlineContentCall(path)) {
+              analyzeNewInlineContentCall(path.node, {
+                onInlineContentInfo,
+              })
+              return
+            }
+            if (isNewBlobCall(path.node)) {
+              analyzeNewBlobCall(path.node, {
+                onInlineContentInfo,
+              })
               return
             }
           },
           CallExpression: (path) => {
-            const jsonParseCall = analyzeJsonParseCall(path)
-            if (jsonParseCall) {
-              inlineContentCalls.push(jsonParseCall)
-              return
+            const node = path.node
+            if (isJSONParseCall(node)) {
+              analyzeJsonParseCall(node, {
+                onInlineContentInfo,
+              })
             }
           },
         })
-        state.file.metadata.inlineContentCalls = inlineContentCalls
+        state.file.metadata.inlineContentInfos = inlineContentInfos
       },
     },
   }
 }
 
-const analyzeNewInlineContentCall = (path) => {
-  const identifier = parseNewIdentifier(path)
-  if (!identifier) {
-    return null
-  }
+const isNewInlineContentCall = (path) => {
   const node = path.node
+  if (node.callee.type === "Identifier") {
+    // terser rename import to use a shorter name
+    const name = getOriginalName(path, node.callee.name)
+    return name === "InlineContent"
+  }
+  if (node.callee.id && node.callee.id.type === "Identifier") {
+    const name = getOriginalName(path, node.callee.id.name)
+    return name === "InlineContent"
+  }
+  return false
+}
+const analyzeNewInlineContentCall = (node, { onInlineContentInfo }) => {
+  analyzeArguments({
+    node,
+    onInlineContentInfo,
+    nodeHoldingContent: node.arguments[0],
+    type: "new_inline_content_first_arg",
+  })
+}
+
+const isNewBlobCall = (node) => {
+  return node.callee.type === "Identifier" && node.callee.name === "Blob"
+}
+const analyzeNewBlobCall = (node, { onInlineContentInfo }) => {
+  const firstArg = node.arguments[0]
+  if (firstArg.type !== "ArrayExpression") {
+    return
+  }
+  if (firstArg.elements.length !== 1) {
+    return
+  }
+  analyzeArguments({
+    node,
+    onInlineContentInfo,
+    nodeHoldingContent: firstArg.elements[0],
+    type: "new_blob_first_arg",
+  })
+}
+
+const analyzeArguments = ({
+  node,
+  onInlineContentInfo,
+  nodeHoldingContent,
+  type,
+}) => {
   if (node.arguments.length !== 2) {
-    return null
+    return
   }
-  const [firstArg, secondArg] = node.arguments
+  const [, secondArg] = node.arguments
   const typePropertyNode = getTypePropertyNode(secondArg)
-  if (!typePropertyNode || typePropertyNode.value.type !== "StringLiteral") {
-    return null
+  if (!typePropertyNode) {
+    return
   }
-  const contentType = typePropertyNode.value.value
-  const type = identifier.type
-  let nodeHoldingInlineContent
-  if (type === "new_inline_content") {
-    nodeHoldingInlineContent = firstArg
-  } else if (type === "new_blob") {
-    if (firstArg.type !== "ArrayExpression") {
-      return null
-    }
-    if (firstArg.elements.length !== 1) {
-      return null
-    }
-    nodeHoldingInlineContent = firstArg.elements[0]
+  const typePropertyValueNode = typePropertyNode.value
+  if (typePropertyValueNode.type !== "StringLiteral") {
+    return
   }
-  const inlineContentInfo = extractInlineContentInfo(nodeHoldingInlineContent)
-  if (!inlineContentInfo) {
-    return null
-  }
-  return {
-    type:
-      type === "new_inline_content"
-        ? "new_inline_content_first_arg"
-        : "new_blob_first_arg",
-    contentType,
-    ...inlineContentInfo,
-    ...getNodePosition(nodeHoldingInlineContent),
+  const contentType = typePropertyValueNode.value
+  const contentDetails = extractContentDetails(nodeHoldingContent)
+  if (contentDetails) {
+    onInlineContentInfo({
+      node: nodeHoldingContent,
+      ...getNodePosition(nodeHoldingContent),
+      type,
+      contentType,
+      ...contentDetails,
+    })
   }
 }
-
-const extractInlineContentInfo = (node) => {
+const extractContentDetails = (node) => {
   if (node.type === "StringLiteral") {
     return {
       nodeType: "StringLiteral",
@@ -177,55 +227,6 @@ const extractInlineContentInfo = (node) => {
   return null
 }
 
-const parseNewIdentifier = (path) => {
-  const node = path.node
-  if (node.callee.type === "Identifier") {
-    // terser rename import to use a shorter name
-    const name = getOriginalName(path, node.callee.name)
-    if (name === "InlineContent") {
-      return {
-        type: "new_inline_content",
-      }
-    }
-    if (name === "Blob") {
-      return {
-        type: "new_blob",
-      }
-    }
-    return null
-  }
-  if (node.callee.id) {
-    // terser might combine new InlineContent('') declaration and usage
-    if (node.callee.id.type !== "Identifier") {
-      return null
-    }
-    const name = getOriginalName(path, node.callee.id.name)
-    if (name === "InlineContent") {
-      return {
-        type: "new_inline_content",
-      }
-    }
-  }
-  return null
-}
-
-const analyzeJsonParseCall = (path) => {
-  const node = path.node
-  if (!isJSONParseCall(node)) {
-    return null
-  }
-  const inlineContentInfo = extractInlineContentInfo(node.arguments[0])
-  if (!inlineContentInfo) {
-    return null
-  }
-  return {
-    type: "json_parse_first_arg",
-    contentType: "application/json",
-    ...inlineContentInfo,
-    ...getNodePosition(node.arguments[0]),
-  }
-}
-
 const isJSONParseCall = (node) => {
   const callee = node.callee
   return (
@@ -236,6 +237,19 @@ const isJSONParseCall = (node) => {
     callee.property.name === "parse"
   )
 }
+const analyzeJsonParseCall = (node, { onInlineContentInfo }) => {
+  const firstArgNode = node.arguments[0]
+  const contentDetails = extractContentDetails(firstArgNode)
+  if (contentDetails) {
+    onInlineContentInfo({
+      node: firstArgNode,
+      ...getNodePosition(firstArgNode),
+      type: "json_parse_first_arg",
+      contentType: "application/json",
+      ...contentDetails,
+    })
+  }
+}
 
 const getNodePosition = (node) => {
   return {
@@ -247,7 +261,6 @@ const getNodePosition = (node) => {
     columnEnd: node.loc.end.column,
   }
 }
-
 const getOriginalName = (path, name) => {
   const binding = path.scope.getBinding(name)
   if (!binding) {
@@ -268,3 +281,16 @@ const getOriginalName = (path, name) => {
   }
   return name
 }
+const getTypePropertyNode = (node) => {
+  if (node.type !== "ObjectExpression") {
+    return null
+  }
+  const { properties } = node
+  return properties.find((property) => {
+    return (
+      property.type === "ObjectProperty" &&
+      property.key.type === "Identifier" &&
+      property.key.name === "type"
+    )
+  })
+}

package/src/plugins/plugins.js

@@ -45,7 +45,14 @@ export const getCorePlugins = ({
   return [
     jsenvPluginUrlReferences(),
     jsenvPluginTranspilation(transpilation),
-    ...(htmlSupervisor ? [jsenvPluginHtmlSupervisor(htmlSupervisor)] : []), // before inline as it turns inline <script> into <script src>
+    ...(htmlSupervisor
+      ? [
+          jsenvPluginHtmlSupervisor({
+            rootDirectoryUrl,
+            ...htmlSupervisor,
+          }),
+        ]
+      : []), // before inline as it turns inline <script> into <script src>
     jsenvPluginInline(), // before "file urls" to resolve and load inline urls
     jsenvPluginImportmap(), // before node esm to handle bare specifiers before node esm
     jsenvPluginFileUrls(),