@jsenv/core 40.6.1 → 40.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/core",
-  "version": "40.6.1",
+  "version": "40.7.0",
   "description": "Tool to develop, test and build js projects",
   "license": "MIT",
   "author": {
@@ -39,7 +39,6 @@
   },
   "packageManager": "npm@11.3.0",
   "workspaces": [
-    "./packages/back_and_front/*",
     "./packages/backend/*",
     "./packages/frontend/*",
     "./packages/internal/*",
@@ -82,12 +81,12 @@
   },
   "dependencies": {
     "@financial-times/polyfill-useragent-normaliser": "1.10.2",
-    "@jsenv/ast": "6.7.2",
-    "@jsenv/js-module-fallback": "1.4.12",
+    "@jsenv/ast": "6.7.3",
+    "@jsenv/js-module-fallback": "1.4.14",
     "@jsenv/plugin-bundling": "2.9.7",
     "@jsenv/plugin-minification": "1.7.0",
-    "@jsenv/plugin-supervisor": "1.7.0",
-    "@jsenv/plugin-transpilation": "1.5.19",
+    "@jsenv/plugin-supervisor": "1.7.2",
+    "@jsenv/plugin-transpilation": "1.5.21",
     "@jsenv/server": "16.1.2",
     "@jsenv/sourcemap": "1.3.8"
   },
@@ -120,13 +119,13 @@
     "@jsenv/url-meta": "workspace:*",
     "@jsenv/urls": "workspace:*",
     "@jsenv/utils": "workspace:*",
-    "@playwright/browser-chromium": "1.51.1",
-    "@playwright/browser-firefox": "1.51.1",
-    "@playwright/browser-webkit": "1.51.1",
+    "@playwright/browser-chromium": "1.52.0",
+    "@playwright/browser-firefox": "1.52.0",
+    "@playwright/browser-webkit": "1.52.0",
     "babel-plugin-transform-async-to-promises": "0.8.18",
-    "eslint": "9.24.0",
+    "eslint": "9.25.1",
     "open": "10.1.1",
-    "playwright": "1.51.1",
+    "playwright": "1.52.0",
     "preact": "10.26.5",
     "prettier": "3.5.3",
     "prettier-plugin-organize-imports": "4.1.0",

package/src/dev/start_dev_server.js

@@ -96,6 +96,7 @@ export const startDevServer = async ({
   ribbon = true,
   // toolbar = false,
   onKitchenCreated = () => {},
+  spa,
 
   sourcemaps = "inline",
   sourcemapsSourcesContent,
@@ -265,6 +266,7 @@ export const startDevServer = async ({
         supervisor,
         injections,
         transpilation,
+        spa,
 
         clientAutoreload,
         clientAutoreloadOnServerRestart,
@@ -643,7 +645,7 @@ export const startDevServer = async ({
           body: response.body,
         });
         return {
-          status: 200,
+          status: response.status,
           headers: {
             "content-type": "application/json",
             "content-length": Buffer.byteLength(body),

package/src/kitchen/kitchen.js

@@ -17,6 +17,7 @@ import {
   determineSourcemapFileUrl,
 } from "./out_directory_url.js";
 import { createUrlGraph } from "./url_graph/url_graph.js";
+import { isPlaceholderInjection } from "./url_graph/url_info_injections.js";
 import { createUrlInfoTransformer } from "./url_graph/url_info_transformations.js";
 import { urlSpecifierEncoding } from "./url_graph/url_specifier_encoding.js";
 
@@ -102,6 +103,7 @@ export const createKitchen = ({
       inlineContentClientFileUrl,
       isSupportedOnCurrentClients: memoizeIsSupported(clientRuntimeCompat),
       isSupportedOnFutureClients: memoizeIsSupported(runtimeCompat),
+      isPlaceholderInjection,
       getPluginMeta: null,
       sourcemaps,
       outDirectoryUrl,

package/src/kitchen/url_graph/url_graph.js

@@ -213,6 +213,7 @@ const createUrlInfo = (url, context) => {
     contentLength: undefined,
     contentFinalized: false,
     contentSideEffects: [],
+    contentInjections: {},
 
     sourcemap: null,
     sourcemapIsWrong: false,

package/src/kitchen/url_graph/url_info_injections.js

@@ -0,0 +1,172 @@
+import { injectJsenvScript, parseHtml, stringifyHtmlAst } from "@jsenv/ast";
+import { composeTwoSourcemaps, createMagicSource } from "@jsenv/sourcemap";
+
+const injectionSymbol = Symbol.for("jsenv_injection");
+export const INJECTIONS = {
+  global: (value) => {
+    return { [injectionSymbol]: "global", value };
+  },
+  optional: (value) => {
+    return { [injectionSymbol]: "optional", value };
+  },
+};
+
+export const isPlaceholderInjection = (value) => {
+  return (
+    !value || !value[injectionSymbol] || value[injectionSymbol] !== "global"
+  );
+};
+
+export const applyContentInjections = (content, contentInjections, urlInfo) => {
+  const keys = Object.keys(contentInjections);
+  const globals = {};
+  const placeholderReplacements = [];
+  for (const key of keys) {
+    const contentInjection = contentInjections[key];
+    if (contentInjection && contentInjection[injectionSymbol]) {
+      const valueBehindSymbol = contentInjection[injectionSymbol];
+      if (valueBehindSymbol === "global") {
+        globals[key] = contentInjection.value;
+      } else if (valueBehindSymbol === "optional") {
+        placeholderReplacements.push({
+          key,
+          isOptional: true,
+          value: contentInjection.value,
+        });
+      } else {
+        throw new Error(`unknown injection type "${valueBehindSymbol}"`);
+      }
+    } else {
+      placeholderReplacements.push({
+        key,
+        value: contentInjection,
+      });
+    }
+  }
+
+  const needGlobalsInjection = Object.keys(globals).length > 0;
+  const needPlaceholderReplacements = placeholderReplacements.length > 0;
+
+  if (needGlobalsInjection && needPlaceholderReplacements) {
+    const globalInjectionResult = injectGlobals(content, globals, urlInfo);
+    const replaceInjectionResult = injectPlaceholderReplacements(
+      globalInjectionResult.content,
+      placeholderReplacements,
+      urlInfo,
+    );
+    return {
+      content: replaceInjectionResult.content,
+      sourcemap: composeTwoSourcemaps(
+        globalInjectionResult.sourcemap,
+        replaceInjectionResult.sourcemap,
+      ),
+    };
+  }
+  if (needGlobalsInjection) {
+    return injectGlobals(content, globals, urlInfo);
+  }
+  if (needPlaceholderReplacements) {
+    return injectPlaceholderReplacements(
+      content,
+      placeholderReplacements,
+      urlInfo,
+    );
+  }
+  return null;
+};
+
+export const injectPlaceholderReplacements = (
+  content,
+  placeholderReplacements,
+  urlInfo,
+) => {
+  const magicSource = createMagicSource(content);
+  for (const { key, isOptional, value } of placeholderReplacements) {
+    let index = content.indexOf(key);
+    if (index === -1) {
+      if (!isOptional) {
+        urlInfo.context.logger.warn(
+          `placeholder "${key}" not found in ${urlInfo.url}.
+--- suggestion a ---
+Add "${key}" in that file.
+--- suggestion b ---
+Fix eventual typo in "${key}"?
+--- suggestion c ---
+Mark injection as optional using INJECTIONS.optional():
+import { INJECTIONS } from "@jsenv/core";
+
+return {
+  "${key}": INJECTIONS.optional(${JSON.stringify(value)}),
+};`,
+        );
+      }
+      continue;
+    }
+
+    while (index !== -1) {
+      const start = index;
+      const end = index + key.length;
+      magicSource.replace({
+        start,
+        end,
+        replacement:
+          urlInfo.type === "js_classic" ||
+          urlInfo.type === "js_module" ||
+          urlInfo.type === "html"
+            ? JSON.stringify(value, null, "  ")
+            : value,
+      });
+      index = content.indexOf(key, end);
+    }
+  }
+  return magicSource.toContentAndSourcemap();
+};
+
+export const injectGlobals = (content, globals, urlInfo) => {
+  if (urlInfo.type === "html") {
+    return globalInjectorOnHtml(content, globals, urlInfo);
+  }
+  if (urlInfo.type === "js_classic" || urlInfo.type === "js_module") {
+    return globalsInjectorOnJs(content, globals, urlInfo);
+  }
+  throw new Error(`cannot inject globals into "${urlInfo.type}"`);
+};
+const globalInjectorOnHtml = (content, globals, urlInfo) => {
+  // 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 = parseHtml({
+    html: content,
+    url: urlInfo.url,
+    storeOriginalPositions: false,
+  });
+  const clientCode = generateClientCodeForGlobals(globals, {
+    isWebWorker: false,
+  });
+  injectJsenvScript(htmlAst, {
+    content: clientCode,
+    pluginName: "jsenv:inject_globals",
+  });
+  return {
+    content: stringifyHtmlAst(htmlAst),
+  };
+};
+const globalsInjectorOnJs = (content, globals, urlInfo) => {
+  const clientCode = generateClientCodeForGlobals(globals, {
+    isWebWorker:
+      urlInfo.subtype === "worker" ||
+      urlInfo.subtype === "service_worker" ||
+      urlInfo.subtype === "shared_worker",
+  });
+  const magicSource = createMagicSource(content);
+  magicSource.prepend(clientCode);
+  return magicSource.toContentAndSourcemap();
+};
+const generateClientCodeForGlobals = (globals, { isWebWorker = false }) => {
+  const globalName = isWebWorker ? "self" : "window";
+  return `Object.assign(${globalName}, ${JSON.stringify(
+    globals,
+    null,
+    "  ",
+  )});`;
+};

package/src/kitchen/url_graph/url_info_transformations.js

@@ -17,6 +17,7 @@ import {
   defineGettersOnPropertiesDerivedFromContent,
   defineGettersOnPropertiesDerivedFromOriginalContent,
 } from "./url_content.js";
+import { applyContentInjections } from "./url_info_injections.js";
 
 export const createUrlInfoTransformer = ({
   logger,
@@ -195,6 +196,7 @@ export const createUrlInfoTransformer = ({
       contentLength,
       sourcemap,
       sourcemapIsWrong,
+      contentInjections,
     } = transformations;
     if (type) {
       urlInfo.type = type;
@@ -202,13 +204,23 @@ export const createUrlInfoTransformer = ({
     if (contentType) {
       urlInfo.contentType = contentType;
     }
-    const contentModified = setContentProperties(urlInfo, {
-      content,
-      contentAst,
-      contentEtag,
-      contentLength,
-    });
-
+    if (Object.hasOwn(transformations, "contentInjections")) {
+      if (contentInjections) {
+        Object.assign(urlInfo.contentInjections, contentInjections);
+      }
+      if (content === undefined) {
+        return;
+      }
+    }
+    let contentModified;
+    if (Object.hasOwn(transformations, "content")) {
+      contentModified = setContentProperties(urlInfo, {
+        content,
+        contentAst,
+        contentEtag,
+        contentLength,
+      });
+    }
     if (
       sourcemap &&
       mayHaveSourcemap(urlInfo) &&
@@ -400,6 +412,15 @@ export const createUrlInfoTransformer = ({
     if (transformations) {
       applyTransformations(urlInfo, transformations);
     }
+    const { contentInjections } = urlInfo;
+    if (contentInjections && Object.keys(contentInjections).length > 0) {
+      const injectionTransformations = applyContentInjections(
+        urlInfo.content,
+        contentInjections,
+        urlInfo,
+      );
+      applyTransformations(urlInfo, injectionTransformations);
+    }
     applyContentEffects(urlInfo);
     urlInfo.contentFinalized = true;
   };

package/src/main.js

@@ -15,4 +15,4 @@ export const startBuildServer = async (...args) => {
 };
 
 // others
-export { INJECTIONS } from "./plugins/injections/jsenv_plugin_injections.js";
+export { INJECTIONS } from "./kitchen/url_graph/url_info_injections.js";

package/src/plugins/global_scenarios/jsenv_plugin_global_scenarios.js

@@ -5,21 +5,16 @@
  * That will be replaced with true/false
  */
 
-import {
-  INJECTIONS,
-  replacePlaceholders,
-} from "../injections/jsenv_plugin_injections.js";
+import { INJECTIONS } from "../../kitchen/url_graph/url_info_injections.js";
 
 export const jsenvPluginGlobalScenarios = () => {
   const transformIfNeeded = (urlInfo) => {
-    return replacePlaceholders(
-      urlInfo.content,
-      {
+    return {
+      contentInjections: {
         __DEV__: INJECTIONS.optional(urlInfo.context.dev),
         __BUILD__: INJECTIONS.optional(urlInfo.context.build),
       },
-      urlInfo,
-    );
+    };
   };
 
   return {

package/src/plugins/import_meta_scenarios/jsenv_plugin_import_meta_scenarios.js

@@ -6,6 +6,8 @@
  * - replaced by true: When scenario matches (import.meta.dev and it's the dev server)
  * - left as is to be evaluated to undefined (import.meta.build but it's the dev server)
  * - replaced by undefined (import.meta.dev but it's build; the goal is to ensure it's tree-shaked)
+ *
+ * TODO: ideally during dev we would keep import.meta.dev and ensure we set it to true rather than replacing it with true?
  */
 
 import { applyBabelPlugins } from "@jsenv/ast";

package/src/plugins/injections/jsenv_plugin_injections.js

@@ -1,100 +1,66 @@
-import { createMagicSource } from "@jsenv/sourcemap";
 import { URL_META } from "@jsenv/url-meta";
-import { asUrlWithoutSearch } from "@jsenv/urls";
+import { asUrlWithoutSearch, urlToRelativeUrl } from "@jsenv/urls";
+import { INJECTIONS } from "../../kitchen/url_graph/url_info_injections.js";
 
 export const jsenvPluginInjections = (rawAssociations) => {
-  let resolvedAssociations;
+  const getDefaultInjections = (urlInfo) => {
+    if (urlInfo.context.dev && urlInfo.type === "html") {
+      const relativeUrl = urlToRelativeUrl(
+        urlInfo.url,
+        urlInfo.context.rootDirectoryUrl,
+      );
+      return {
+        HTML_ROOT_PATHNAME: INJECTIONS.global(`/${relativeUrl}`),
+      };
+    }
+    return null;
+  };
+  let getInjections = null;
 
   return {
     name: "jsenv:injections",
     appliesDuring: "*",
     init: (context) => {
-      resolvedAssociations = URL_META.resolveAssociations(
-        { injectionsGetter: rawAssociations },
-        context.rootDirectoryUrl,
-      );
+      if (rawAssociations && Object.keys(rawAssociations).length > 0) {
+        const resolvedAssociations = URL_META.resolveAssociations(
+          { injectionsGetter: rawAssociations },
+          context.rootDirectoryUrl,
+        );
+        getInjections = (urlInfo) => {
+          const { injectionsGetter } = URL_META.applyAssociations({
+            url: asUrlWithoutSearch(urlInfo.url),
+            associations: resolvedAssociations,
+          });
+          if (!injectionsGetter) {
+            return null;
+          }
+          if (typeof injectionsGetter !== "function") {
+            throw new TypeError("injectionsGetter must be a function");
+          }
+          return injectionsGetter(urlInfo);
+        };
+      }
     },
     transformUrlContent: async (urlInfo) => {
-      const { injectionsGetter } = URL_META.applyAssociations({
-        url: asUrlWithoutSearch(urlInfo.url),
-        associations: resolvedAssociations,
-      });
-      if (!injectionsGetter) {
-        return null;
-      }
-      if (typeof injectionsGetter !== "function") {
-        throw new TypeError("injectionsGetter must be a function");
-      }
-      const injections = await injectionsGetter(urlInfo);
-      if (!injections) {
-        return null;
+      const defaultInjections = getDefaultInjections(urlInfo);
+      if (!getInjections) {
+        return {
+          contentInjections: defaultInjections,
+        };
       }
-      const keys = Object.keys(injections);
-      if (keys.length === 0) {
-        return null;
+      const injectionsResult = getInjections(urlInfo);
+      if (!injectionsResult) {
+        return {
+          contentInjections: defaultInjections,
+        };
       }
-      return replacePlaceholders(urlInfo.content, injections, urlInfo);
+      const injections = await injectionsResult;
+      return {
+        contentInjections: {
+          ...defaultInjections,
+          ...injections,
+        },
+      };
     },
   };
 };
-
-const injectionSymbol = Symbol.for("jsenv_injection");
-export const INJECTIONS = {
-  optional: (value) => {
-    return { [injectionSymbol]: "optional", value };
-  },
-};
-
-// we export this because it is imported by jsenv_plugin_placeholder.js and unit test
-export const replacePlaceholders = (content, replacements, urlInfo) => {
-  const magicSource = createMagicSource(content);
-  for (const key of Object.keys(replacements)) {
-    let index = content.indexOf(key);
-    const replacement = replacements[key];
-    let isOptional;
-    let value;
-    if (replacement && replacement[injectionSymbol]) {
-      const valueBehindSymbol = replacement[injectionSymbol];
-      isOptional = valueBehindSymbol === "optional";
-      value = replacement.value;
-    } else {
-      value = replacement;
-    }
-    if (index === -1) {
-      if (!isOptional) {
-        urlInfo.context.logger.warn(
-          `placeholder "${key}" not found in ${urlInfo.url}.
---- suggestion a ---
-Add "${key}" in that file.
---- suggestion b ---
-Fix eventual typo in "${key}"?
---- suggestion c ---
-Mark injection as optional using INJECTIONS.optional():
-import { INJECTIONS } from "@jsenv/core";
-
-return {
-  "${key}": INJECTIONS.optional(${JSON.stringify(value)}),
-};`,
-        );
-      }
-      continue;
-    }
-
-    while (index !== -1) {
-      const start = index;
-      const end = index + key.length;
-      magicSource.replace({
-        start,
-        end,
-        replacement:
-          urlInfo.type === "js_classic" ||
-          urlInfo.type === "js_module" ||
-          urlInfo.type === "html"
-            ? JSON.stringify(value, null, "  ")
-            : value,
-      });
-      index = content.indexOf(key, end);
-    }
-  }
-  return magicSource.toContentAndSourcemap();
-};

package/src/plugins/plugin_controller.js

@@ -423,6 +423,9 @@ const returnValueAssertions = [
           return undefined;
         }
         if (typeof content !== "string" && !Buffer.isBuffer(content) && !body) {
+          if (Object.hasOwn(valueReturned, "contentInjections")) {
+            return undefined;
+          }
           throw new Error(
             `Unexpected "content" returned by "${hook.plugin.name}" ${hook.name} hook: it must be a string or a buffer; got ${content}`,
           );

package/src/plugins/plugins.js

@@ -46,6 +46,7 @@ export const getCorePlugins = ({
   transpilation = true,
   inlining = true,
   http = false,
+  spa,
 
   clientAutoreload,
   clientAutoreloadOnServerRestart,
@@ -75,7 +76,7 @@ export const getCorePlugins = ({
 
   return [
     jsenvPluginReferenceAnalysis(referenceAnalysis),
-    ...(injections ? [jsenvPluginInjections(injections)] : []),
+    jsenvPluginInjections(injections),
     jsenvPluginTranspilation(transpilation),
     // "jsenvPluginInlining" must be very soon because all other plugins will react differently once they see the file is inlined
     ...(inlining ? [jsenvPluginInlining()] : []),
@@ -88,6 +89,7 @@ export const getCorePlugins = ({
      */
     jsenvPluginProtocolHttp(http),
     jsenvPluginProtocolFile({
+      spa,
       magicExtensions,
       magicDirectoryIndex,
       directoryListing,

package/src/plugins/protocol_file/jsenv_plugin_directory_listing.js

@@ -37,7 +37,6 @@ import {
 } from "@jsenv/urls";
 import { existsSync, lstatSync, readdirSync } from "node:fs";
 import { getDirectoryWatchPatterns } from "../../helpers/watch_source_files.js";
-import { replacePlaceholders } from "../injections/jsenv_plugin_injections.js";
 import { FILE_AND_SERVER_URLS_CONVERTER } from "./file_and_server_urls_converter.js";
 
 const htmlFileUrlForDirectory = import.meta.resolve(
@@ -124,22 +123,22 @@ export const jsenvPluginDirectoryListing = ({
         }
         const request = urlInfo.context.request;
         const { rootDirectoryUrl, mainFilePath } = urlInfo.context;
-        return replacePlaceholders(
-          urlInfo.content,
+        const directoryListingInjections = generateDirectoryListingInjection(
+          requestedUrl,
           {
-            ...generateDirectoryListingInjection(requestedUrl, {
-              autoreload,
-              request,
-              urlMocks,
-              directoryContentMagicName,
-              rootDirectoryUrl,
-              mainFilePath,
-              packageDirectory,
-              enoent,
-            }),
+            autoreload,
+            request,
+            urlMocks,
+            directoryContentMagicName,
+            rootDirectoryUrl,
+            mainFilePath,
+            packageDirectory,
+            enoent,
           },
-          urlInfo,
         );
+        return {
+          contentInjections: directoryListingInjections,
+        };
       },
     },
     devServerRoutes: [
@@ -158,8 +157,10 @@ export const jsenvPluginDirectoryListing = ({
               directoryRelativeUrl,
               rootDirectoryUrl,
             );
-            const closestDirectoryUrl =
-              getFirstExistingDirectoryUrl(requestedUrl);
+            const closestDirectoryUrl = getFirstExistingDirectoryUrl(
+              requestedUrl,
+              rootDirectoryUrl,
+            );
             const sendMessage = (message) => {
               websocket.send(JSON.stringify(message));
             };
@@ -375,15 +376,15 @@ const generateDirectoryListingInjection = (
   };
 };
 const getFirstExistingDirectoryUrl = (requestedUrl, serverRootDirectoryUrl) => {
-  let firstExistingDirectoryUrl = new URL("./", requestedUrl);
-  while (!existsSync(firstExistingDirectoryUrl)) {
-    firstExistingDirectoryUrl = new URL("../", firstExistingDirectoryUrl);
-    if (!urlIsInsideOf(firstExistingDirectoryUrl, serverRootDirectoryUrl)) {
-      firstExistingDirectoryUrl = new URL(serverRootDirectoryUrl);
+  let directoryUrlCandidate = new URL("./", requestedUrl);
+  while (!existsSync(directoryUrlCandidate)) {
+    directoryUrlCandidate = new URL("../", directoryUrlCandidate);
+    if (!urlIsInsideOf(directoryUrlCandidate, serverRootDirectoryUrl)) {
+      directoryUrlCandidate = new URL(serverRootDirectoryUrl);
       break;
     }
   }
-  return firstExistingDirectoryUrl;
+  return directoryUrlCandidate;
 };
 const getDirectoryContentItems = ({
   serverRootDirectoryUrl,