@jsenv/core 40.12.13 → 41.0.0

package/src/plugins/import_meta_css/client/import_meta_css_build.js

@@ -1,20 +1,49 @@
 export const installImportMetaCssBuild = (importMeta) => {
-  const stylesheet = new CSSStyleSheet({ baseUrl: importMeta.url });
+  const IMPORT_META_CSS_BUILD = "jsenv_import_meta_css_build";
 
-  let called = false;
-  // eslint-disable-next-line accessor-pairs
+  if (importMeta.css === IMPORT_META_CSS_BUILD) {
+    return;
+  }
+
+  const stylesheetMap = new Map();
+  const adopt = (url, value) => {
+    const stylesheet = new CSSStyleSheet({ baseUrl: importMeta.url });
+    stylesheet.replaceSync(value);
+    stylesheetMap.set(url, stylesheet);
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
+  };
+  const update = (url, value) => {
+    stylesheetMap.get(url).replaceSync(value);
+  };
+  const remove = (url) => {
+    const stylesheet = stylesheetMap.get(url);
+    document.adoptedStyleSheets = document.adoptedStyleSheets.filter(
+      (s) => s !== stylesheet,
+    );
+    stylesheetMap.delete(url);
+  };
+
+  const currentCssSourceMap = new Map();
   Object.defineProperty(importMeta, "css", {
     configurable: true,
-    set(value) {
-      if (called) {
-        throw new Error("import.meta.css setter can only be called once");
+    get() {
+      return IMPORT_META_CSS_BUILD;
+    },
+    set([value, url]) {
+      if (value === undefined) {
+        if (stylesheetMap.has(url)) {
+          remove(url);
+          currentCssSourceMap.delete(url);
+        }
+        return;
+      }
+      if (!stylesheetMap.has(url)) {
+        adopt(url, value);
+        currentCssSourceMap.set(url, value);
+      } else if (currentCssSourceMap.get(url) !== value) {
+        update(url, value);
+        currentCssSourceMap.set(url, value);
       }
-      called = true;
-      stylesheet.replaceSync(value);
-      document.adoptedStyleSheets = [
-        ...document.adoptedStyleSheets,
-        stylesheet,
-      ];
     },
   });
 };

package/src/plugins/import_meta_css/client/import_meta_css_dev.js

@@ -1,46 +1,58 @@
 export const installImportMetaCssDev = (importMeta) => {
-  let cssText = "";
-  let stylesheet = new CSSStyleSheet({ baseUrl: importMeta.url });
-  let adopted = false;
+  const IMPORT_META_CSS_DEV = "jsenv_import_meta_css_dev";
 
-  const css = {
-    toString: () => cssText,
-    update: (value) => {
-      cssText = value;
-      cssText += `
+  // useless today but browser might catch up to display it in devtools
+  const addUrlInfo = (cssText) => {
+    let cssTextWithUrlInfo = cssText;
+    cssTextWithUrlInfo += `
 /* sourceURL=${importMeta.url} */
 /* inlined from ${importMeta.url} */`;
-      stylesheet.replaceSync(cssText);
-    },
-    inject: () => {
-      if (!adopted) {
-        document.adoptedStyleSheets = [
-          ...document.adoptedStyleSheets,
-          stylesheet,
-        ];
-        adopted = true;
-      }
-    },
-    remove: () => {
-      if (adopted) {
-        document.adoptedStyleSheets = document.adoptedStyleSheets.filter(
-          (s) => s !== stylesheet,
-        );
-        adopted = false;
-      }
-    },
+    return cssTextWithUrlInfo;
+  };
+
+  let stylesheet;
+  const adopt = (value) => {
+    stylesheet = new CSSStyleSheet({ baseUrl: importMeta.url });
+    stylesheet.replaceSync(addUrlInfo(value));
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet];
+  };
+  const update = (value) => {
+    stylesheet.replaceSync(addUrlInfo(value));
+  };
+  const remove = () => {
+    document.adoptedStyleSheets = document.adoptedStyleSheets.filter(
+      (s) => s !== stylesheet,
+    );
   };
 
+  let currentCssSource;
   Object.defineProperty(importMeta, "css", {
     configurable: true,
     get() {
-      return css;
+      return IMPORT_META_CSS_DEV;
     },
     set(value) {
-      css.update(value);
-      css.inject();
+      if (value === undefined) {
+        if (stylesheet) {
+          remove();
+          stylesheet = undefined;
+          currentCssSource = undefined;
+        }
+        return;
+      }
+      if (!stylesheet) {
+        adopt(value);
+        currentCssSource = value;
+      } else if (currentCssSource !== value) {
+        update(value);
+        currentCssSource = value;
+      }
     },
   });
 
-  return css.remove;
+  return () => {
+    remove();
+    stylesheet = undefined;
+    currentCssSource = undefined;
+  };
 };

package/src/plugins/import_meta_css/jsenv_plugin_import_meta_css.js

@@ -36,11 +36,7 @@ export const jsenvPluginImportMetaCss = () => {
     appliesDuring: "*",
     transformUrlContent: {
       js_module: async (urlInfo) => {
-        if (
-          !urlInfo.content.includes("import.meta.css") ||
-          // there is already our installImportMetaCssBuild in the file
-          urlInfo.content.includes("installImportMetaCssBuild")
-        ) {
+        if (!urlInfo.content.includes("import.meta.css")) {
           return null;
         }
         const { metadata } = await applyBabelPlugins({
@@ -54,22 +50,78 @@ export const jsenvPluginImportMetaCss = () => {
         if (!usesImportMetaCss) {
           return null;
         }
+        if (urlInfo.context.build) {
+          const rootDirectoryUrl = urlInfo.context.rootDirectoryUrl;
+          const relativeUrl = urlInfo.originalUrl.slice(
+            rootDirectoryUrl.length - 1,
+          );
+          const { code } = await applyBabelPlugins({
+            babelPlugins: [
+              [babelPluginRewriteImportMetaCssAssignment, { relativeUrl }],
+            ],
+            input: urlInfo.content,
+            inputIsJsModule: true,
+            inputUrl: urlInfo.originalUrl,
+            outputUrl: urlInfo.generatedUrl,
+          });
+          if (code === urlInfo.content) {
+            // all assignments were already in array form (pre-built file) — nothing to do
+            return null;
+          }
+          return injectImportMetaCss(urlInfo, {
+            content: code,
+            importFrom: importMetaCssBuildClientFileUrl,
+            importName: "installImportMetaCssBuild",
+            importAs: "__installImportMetaCssBuild__",
+          });
+        }
         return injectImportMetaCss(urlInfo, {
-          importFrom: urlInfo.context.build
-            ? importMetaCssBuildClientFileUrl
-            : importMetaCssDevClientFileUrl,
-          importName: urlInfo.context.build
-            ? "installImportMetaCssBuild"
-            : "installImportMetaCssDev",
-          importAs: urlInfo.context.build
-            ? "__installImportMetaCssBuild__"
-            : "__installImportMetaCssDev__",
+          content: urlInfo.content,
+          importFrom: importMetaCssDevClientFileUrl,
+          importName: "installImportMetaCssDev",
+          importAs: "__installImportMetaCssDev__",
+          hot: true,
         });
       },
     },
   };
 };
 
+const babelPluginRewriteImportMetaCssAssignment = (
+  { types: t },
+  { relativeUrl },
+) => {
+  return {
+    name: "rewrite-import-meta-css-assignment",
+    visitor: {
+      AssignmentExpression(path) {
+        const { left, right } = path.node;
+        if (left.type !== "MemberExpression") {
+          return;
+        }
+        const { object, property } = left;
+        if (object.type !== "MetaProperty") {
+          return;
+        }
+        if (object.meta.name !== "import" || object.property.name !== "meta") {
+          return;
+        }
+        if (property.name !== "css") {
+          return;
+        }
+        // already transformed (e.g. pre-built file): leave as-is
+        if (right.type === "ArrayExpression") {
+          return;
+        }
+        path.node.right = t.arrayExpression([
+          right,
+          t.stringLiteral(relativeUrl),
+        ]);
+      },
+    },
+  };
+};
+
 const babelPluginMetadataUsesImportMetaCss = () => {
   return {
     name: "metadata-uses-import-meta-css",
@@ -101,7 +153,10 @@ const babelPluginMetadataUsesImportMetaCss = () => {
   };
 };
 
-const injectImportMetaCss = (urlInfo, { importFrom, importName, importAs }) => {
+const injectImportMetaCss = (
+  urlInfo,
+  { content, importFrom, importName, importAs, hot },
+) => {
   const importMetaCssClientFileReference = urlInfo.dependencies.inject({
     parentUrl: urlInfo.url,
     type: "js_import",
@@ -117,7 +172,9 @@ const injectImportMetaCss = (urlInfo, { importFrom, importName, importAs }) => {
     importBeforeFrom = `{ ${importName} } }`;
     importVariableName = importName;
   }
-  let prelude = `import ${importBeforeFrom} from ${importMetaCssClientFileReference.generatedSpecifier};
+
+  const prelude = hot
+    ? `import ${importBeforeFrom} from ${importMetaCssClientFileReference.generatedSpecifier};
 
 const remove = ${importVariableName}(import.meta);
 if (import.meta.hot) {
@@ -126,9 +183,13 @@ if (import.meta.hot) {
   });
 }
 
+`
+    : `import ${importBeforeFrom} from ${importMetaCssClientFileReference.generatedSpecifier};
+
+${importVariableName}(import.meta);
+
 `;
 
-  let content = urlInfo.content;
   return {
     content: `${prelude.replace(/\n/g, "")}${content}`,
   };

package/src/plugins/jsenv_plugins_controller.js

@@ -0,0 +1,197 @@
+import { createPluginsController } from "@jsenv/server/src/plugins_controller.js";
+
+import { jsenvPluginHtmlSyntaxErrorFallback } from "./html_syntax_error_fallback/jsenv_plugin_html_syntax_error_fallback.js";
+
+export const createJsenvPluginStore = async (plugins) => {
+  const allServerRoutes = [];
+  const allServerPlugins = [];
+  const pluginArray = [];
+
+  const pluginPromises = [];
+  const addPlugin = async (plugin) => {
+    if (plugin && typeof plugin.then === "function") {
+      pluginPromises.push(plugin);
+      const value = await plugin;
+      addPlugin(value);
+      return;
+    }
+    if (Array.isArray(plugin)) {
+      for (const subplugin of plugin) {
+        addPlugin(subplugin);
+      }
+      return;
+    }
+    if (plugin === null || typeof plugin !== "object") {
+      throw new TypeError(`plugin must be objects, got ${plugin}`);
+    }
+    if (!plugin.name) {
+      plugin.name = "anonymous";
+    }
+    const { serverRoutes } = plugin;
+    if (serverRoutes) {
+      for (const serverRoute of serverRoutes) {
+        allServerRoutes.push(serverRoute);
+      }
+    }
+    const { serverPlugins } = plugin;
+    if (serverPlugins) {
+      const serverPlugins = plugin.serverPlugins;
+      for (const serverPlugin of serverPlugins) {
+        allServerPlugins.push(serverPlugin);
+      }
+    }
+    pluginArray.push(plugin);
+  };
+  addPlugin(jsenvPluginHtmlSyntaxErrorFallback());
+  for (const plugin of plugins) {
+    addPlugin(plugin);
+  }
+  await Promise.all(pluginPromises);
+
+  return {
+    pluginArray,
+    allServerRoutes,
+    allServerPlugins,
+  };
+};
+
+export const createJsenvPluginsController = async (
+  pluginStore,
+  kitchen,
+  { meta } = {},
+) => {
+  kitchen.context.getPluginMeta = (id) => pluginsController.getPluginMeta(id);
+  const pluginsController = await createPluginsController({
+    plugins: pluginStore.pluginArray,
+    pluginDescription: JSENV_PLUGIN_DESCRIPTION,
+    filterPlugin: (plugin) => testAppliesDuring(plugin, kitchen),
+    getInitPluginArgs: (plugin) => [kitchen.context, { plugin }],
+    getEffectArgs: ({ otherPlugins }) => [
+      { kitchenContext: kitchen.context, otherPlugins },
+    ],
+    meta,
+  });
+  return pluginsController;
+};
+
+const hook = { type: "hook" };
+const nonHook = {};
+
+const assertUrlReturnValue = (valueReturned, urlInfo, { hook }) => {
+  if (valueReturned instanceof URL) {
+    return valueReturned.href;
+  }
+  if (typeof valueReturned === "string") {
+    return valueReturned;
+  }
+  throw new Error(
+    `Unexpected value returned by hook "${hook.plugin.name}.${hook.name}()": it must be a string; got ${valueReturned}`,
+  );
+};
+const assertContentReturnValue = (valueReturned, urlInfo, { hook }) => {
+  if (typeof valueReturned === "string" || Buffer.isBuffer(valueReturned)) {
+    return { content: valueReturned };
+  }
+  if (typeof valueReturned === "object") {
+    const { content, body } = valueReturned;
+    if (urlInfo.url.startsWith("ignore:")) {
+      return valueReturned;
+    }
+    if (typeof content !== "string" && !Buffer.isBuffer(content) && !body) {
+      if (Object.hasOwn(valueReturned, "contentInjections")) {
+        return valueReturned;
+      }
+      throw new Error(
+        `Unexpected "content" returned by hook "${hook.plugin.name}.${hook.name}()": it must be a string or a buffer; got ${content}`,
+      );
+    }
+    return valueReturned;
+  }
+  throw new Error(
+    `Unexpected value returned by hook "${hook.plugin.name}.${hook.name}()": it must be a string, a buffer or an object; got ${valueReturned}`,
+  );
+};
+
+const JSENV_PLUGIN_DESCRIPTION = {
+  name: "jsenv plugin",
+  properties: {
+    // non-hook properties (silently skipped)
+    appliesDuring: nonHook,
+    serverEvents: nonHook,
+    mustStayFirst: nonHook,
+    serverRoutes: nonHook,
+    serverPlugins: nonHook,
+    // hooks
+    init: hook,
+    resolveReference: {
+      type: "hook",
+      assertAndNormalize: assertUrlReturnValue,
+    },
+    redirectReference: {
+      type: "hook",
+      assertAndNormalize: assertUrlReturnValue,
+    },
+    transformReferenceSearchParams: hook,
+    formatReference: hook,
+    urlInfoCreated: hook,
+    fetchUrlContent: {
+      type: "hook",
+      assertAndNormalize: assertContentReturnValue,
+    },
+    transformUrlContent: {
+      type: "hook",
+      assertAndNormalize: assertContentReturnValue,
+    },
+    finalizeUrlContent: {
+      type: "hook",
+      assertAndNormalize: assertContentReturnValue,
+    },
+    bundle: hook,
+    optimizeBuildUrlContent: {
+      type: "hook",
+      assertAndNormalize: assertContentReturnValue,
+    },
+    cooked: hook,
+    augmentResponse: hook,
+    destroy: hook,
+    effect: hook,
+    refineBuildUrlContent: hook,
+    refineBuild: hook,
+    // serverRoutes and serverPlugins are nonHook above
+  },
+};
+
+const testAppliesDuring = (plugin, kitchen) => {
+  const { appliesDuring } = plugin;
+  if (appliesDuring === undefined) {
+    return true;
+  }
+  if (appliesDuring === "*") {
+    return true;
+  }
+  if (typeof appliesDuring === "string") {
+    if (appliesDuring !== "dev" && appliesDuring !== "build") {
+      throw new TypeError(
+        `"appliesDuring" must be "dev" or "build", got ${appliesDuring}`,
+      );
+    }
+    if (kitchen.context[appliesDuring]) {
+      return true;
+    }
+    return false;
+  }
+  if (typeof appliesDuring === "object") {
+    for (const key of Object.keys(appliesDuring)) {
+      if (!appliesDuring[key] && kitchen.context[key]) {
+        return false;
+      }
+      if (appliesDuring[key] && kitchen.context[key]) {
+        return true;
+      }
+    }
+    return false;
+  }
+  throw new TypeError(
+    `"appliesDuring" must be an object or a string, got ${appliesDuring}`,
+  );
+};

package/src/plugins/protocol_file/jsenv_plugin_directory_listing.js

@@ -142,7 +142,7 @@ export const jsenvPluginDirectoryListing = ({
         };
       },
     },
-    devServerRoutes: [
+    serverRoutes: [
       {
         endpoint:
           "GET /.internal/directory_content.websocket?directory=:directory",

package/src/plugins/server_events/jsenv_plugin_server_events.js

@@ -90,7 +90,7 @@ export const jsenvPluginServerEvents = ({ clientAutoreload }) => {
         return stringifyHtmlAst(htmlAst);
       },
     },
-    devServerRoutes: [
+    serverRoutes: [
       {
         endpoint: "GET /.internal/events.websocket",
         description: `Jsenv dev server emit server events on this endpoint. When a file is saved the "reload" event is sent here.`,