@marko/vite 5.3.8 → 5.4.0

package/dist/cjs-interop-translate.d.ts

@@ -0,0 +1,38 @@
+import { types as t } from "@marko/compiler";
+/**
+ * This plugin is designed to transform imports within Marko files to interop between ESM and CJS.
+ * In Node, ESM files cannot reliably use named imports and default imports from CJS files.
+ * Additionally, modules which are transpiled from ESM to CJS will use a `__esModule` property to
+ * signal that the consuming ESM code should treat `exports.default` as the default import.
+ * This plugin only modifies imports it determined to be for CJS modules.
+ *
+ * Examples:
+ *   1. Named imports:
+ *      Source:  import { bar as baz } from 'foo';
+ *      Becomes: import * as _foo from 'foo';
+ *               const { bar: baz } = importNS(_foo);
+ *
+ *   2. Default imports:
+ *      Source:  import myFoo from 'foo';
+ *      Becomes: import * as _myFoo from 'foo';
+ *               const { default: myFoo } = importDefault(_myFoo);
+ *
+ *   3. Namespace imports:
+ *      Source:  import * as nsFoo from 'foo';
+ *      Becomes: import * as _nsFoo from 'foo';
+ *               const nsFoo = importNS(_nsFoo);
+ *
+ *   4. Default and named imports:
+ *      Source:  import myFoo, { bar as baz } from 'foo';
+ *      Becomes: import * as _foo from 'foo';
+ *               const { default: myFoo } = importDefault(_foo);
+ *               const { bar: baz } = importNS(_foo);
+ */
+export declare const cjsInteropHelpersId = "\0marko-cjs-interop.js";
+export declare const cjsInteropHelpersCode = "export const importNS = m => m && (m.default === void 0 || m.__esModule ? m : m.default);\nexport const importDefault = m => m?.default?.__esModule ? m.default : m;\n";
+declare const _default: {
+    Program: {
+        exit(program: t.NodePath<t.Program>): void;
+    };
+};
+export default _default;

package/dist/index.mjs

@@ -7,8 +7,9 @@ import fs4 from "fs";
 import { createRequire } from "module";
 import path6 from "path";
 
-// src/babel-plugin-cjs-interop.ts
-import * as t from "@babel/types";
+// src/cjs-interop-translate.ts
+import { types as t } from "@marko/compiler";
+import { importNamed } from "@marko/compiler/babel-utils";
 
 // src/resolve.ts
 import fs from "fs";
@@ -52,134 +53,107 @@ function isCJSModule(id, fromFile) {
   return isCJS;
 }
 
-// src/babel-plugin-cjs-interop.ts
-function plugin(options) {
-  return {
-    name: "marko-import-interop",
-    visitor: {
-      ImportDeclaration(path7) {
-        if (!path7.node.specifiers.length || /\.(?:mjs|marko)$|\?/.test(path7.node.source.value) || options.filter?.(path7.node.source.value) === false || !isCJSModule(
-          path7.node.source.value,
-          path7.hub.file.opts.filename
-        )) {
-          return;
-        }
-        let namespaceId;
-        let defaultImportId;
-        let imports;
-        for (const s of path7.node.specifiers) {
-          if (t.isImportSpecifier(s)) {
-            (imports ||= []).push({
-              name: t.isStringLiteral(s.imported) ? s.imported.value : s.imported.name,
-              alias: s.local.name
-            });
-          } else if (t.isImportDefaultSpecifier(s)) {
-            defaultImportId = s.local;
-          } else if (t.isImportNamespaceSpecifier(s)) {
-            namespaceId = s.local;
-          }
-        }
-        const rawImport = path7.scope.generateUidIdentifier(
-          namespaceId?.name || defaultImportId?.name || path7.node.source.value
-        );
-        path7.node.specifiers = [t.importNamespaceSpecifier(rawImport)];
-        if (defaultImportId) {
-          path7.insertAfter(
-            t.variableDeclaration("const", [
-              t.variableDeclarator(
-                t.objectPattern([
-                  t.objectProperty(t.identifier("default"), defaultImportId)
-                ]),
-                t.conditionalExpression(
-                  t.optionalMemberExpression(
-                    t.memberExpression(rawImport, t.identifier("default")),
-                    t.identifier("__esModule"),
-                    false,
-                    true
-                  ),
-                  t.memberExpression(rawImport, t.identifier("default")),
-                  rawImport
-                )
-              )
-            ])
-          );
-        }
-        if (namespaceId) {
-          path7.insertAfter(
-            t.variableDeclaration("const", [
-              t.variableDeclarator(
-                namespaceId,
-                t.conditionalExpression(
-                  t.logicalExpression(
-                    "||",
-                    t.binaryExpression(
-                      "===",
-                      t.optionalMemberExpression(
-                        rawImport,
-                        t.identifier("default"),
-                        false,
-                        true
-                      ),
-                      t.unaryExpression("void", t.numericLiteral(0), true)
-                    ),
-                    t.optionalMemberExpression(
-                      rawImport,
-                      t.identifier("__esModule"),
-                      false,
-                      true
-                    )
-                  ),
-                  rawImport,
-                  t.memberExpression(rawImport, t.identifier("default"))
-                )
-              )
-            ])
-          );
-        }
-        if (imports) {
-          path7.insertAfter(
-            t.variableDeclaration("const", [
-              t.variableDeclarator(
-                t.objectPattern(
-                  imports.map(
-                    ({ name, alias }) => t.objectProperty(
-                      t.identifier(name),
-                      t.identifier(alias),
-                      false,
-                      name === alias
-                    )
-                  )
-                ),
-                t.conditionalExpression(
-                  t.logicalExpression(
-                    "||",
-                    t.binaryExpression(
-                      "===",
-                      t.optionalMemberExpression(
-                        rawImport,
-                        t.identifier("default"),
-                        false,
-                        true
-                      ),
-                      t.unaryExpression("void", t.numericLiteral(0), true)
-                    ),
-                    t.optionalMemberExpression(
-                      rawImport,
-                      t.identifier("__esModule"),
-                      false,
-                      true
-                    )
-                  ),
-                  rawImport,
-                  t.memberExpression(rawImport, t.identifier("default"))
-                )
-              )
-            ])
-          );
+// src/cjs-interop-translate.ts
+var cjsInteropHelpersId = "\0marko-cjs-interop.js";
+var cjsInteropHelpersCode = `export const importNS = m => m && (m.default === void 0 || m.__esModule ? m : m.default);
+export const importDefault = m => m?.default?.__esModule ? m.default : m;
+`;
+var cjs_interop_translate_default = {
+  Program: {
+    exit(program) {
+      const { cjsInteropMarkoVite } = program.hub.file.markoOpts;
+      if (!cjsInteropMarkoVite) return;
+      const { filter } = cjsInteropMarkoVite;
+      const children = program.get("body");
+      for (let i = children.length; i--; ) {
+        const child = children[i];
+        if (child.isImportDeclaration()) {
+          translateImport(child, filter);
         }
       }
     }
-  };
+  }
+};
+function translateImport(importDecl, filter) {
+  if (!importDecl.node.specifiers.length || /\.(?:mjs|marko)$|\?/.test(importDecl.node.source.value) || filter?.(importDecl.node.source.value) === false || !isCJSModule(
+    importDecl.node.source.value,
+    importDecl.hub.file.opts.filename
+  )) {
+    return;
+  }
+  let namespaceId;
+  let defaultImportId;
+  let imports;
+  for (const s of importDecl.node.specifiers) {
+    if (t.isImportSpecifier(s)) {
+      (imports ||= []).push({
+        name: t.isStringLiteral(s.imported) ? s.imported.value : s.imported.name,
+        alias: s.local.name
+      });
+    } else if (t.isImportDefaultSpecifier(s)) {
+      defaultImportId = s.local;
+    } else if (t.isImportNamespaceSpecifier(s)) {
+      namespaceId = s.local;
+    }
+  }
+  const rawImport = importDecl.scope.generateUidIdentifier(
+    namespaceId?.name || defaultImportId?.name || importDecl.node.source.value
+  );
+  importDecl.node.specifiers = [t.importNamespaceSpecifier(rawImport)];
+  if (defaultImportId) {
+    importDecl.insertAfter(
+      t.variableDeclaration("const", [
+        t.variableDeclarator(
+          t.objectPattern([
+            t.objectProperty(t.identifier("default"), defaultImportId)
+          ]),
+          t.callExpression(
+            importNamed(
+              importDecl.hub.file,
+              cjsInteropHelpersId,
+              "importDefault"
+            ),
+            [rawImport]
+          )
+        )
+      ])
+    );
+  }
+  if (namespaceId) {
+    importDecl.insertAfter(
+      t.variableDeclaration("const", [
+        t.variableDeclarator(
+          namespaceId,
+          t.callExpression(
+            importNamed(importDecl.hub.file, cjsInteropHelpersId, "importNS"),
+            [rawImport]
+          )
+        )
+      ])
+    );
+  }
+  if (imports) {
+    importDecl.insertAfter(
+      t.variableDeclaration("const", [
+        t.variableDeclarator(
+          t.objectPattern(
+            imports.map(
+              ({ name, alias }) => t.objectProperty(
+                t.identifier(name),
+                t.identifier(alias),
+                false,
+                name === alias
+              )
+            )
+          ),
+          t.callExpression(
+            importNamed(importDecl.hub.file, cjsInteropHelpersId, "importNS"),
+            [rawImport]
+          )
+        )
+      ])
+    );
+  }
 }
 
 // src/esbuild-plugin.ts
@@ -290,9 +264,9 @@ import { relativeImportPath } from "relative-import-path";
 var programGlobImports = /* @__PURE__ */ new WeakMap();
 var glob_import_transform_default = {
   MetaProperty(tag) {
-    const memberExpression2 = tag.parentPath;
-    if (memberExpression2.node.type === "MemberExpression" && memberExpression2.node.property.type === "Identifier" && memberExpression2.node.property.name === "glob") {
-      const callExpression = memberExpression2.parentPath;
+    const memberExpression = tag.parentPath;
+    if (memberExpression.node.type === "MemberExpression" && memberExpression.node.property.type === "Identifier" && memberExpression.node.property.name === "glob") {
+      const callExpression = memberExpression.parentPath;
       if (callExpression?.node.type === "CallExpression") {
         const args = callExpression.get("arguments").map((arg) => arg.evaluate().value);
         if (args[1]?.eager) {
@@ -913,6 +887,20 @@ function markoPlugin(opts = {}) {
       name: "marko-vite:pre",
       enforce: "pre",
       // Must be pre to allow us to resolve assets before vite.
+      sharedDuringBuild: true,
+      async buildApp(builder) {
+        const { ssr, client } = builder.environments;
+        if (!ssr || !client) {
+          return;
+        }
+        if (builder.config?.builder?.buildApp) {
+          return;
+        }
+        if (linked) {
+          await builder.build(ssr);
+        }
+        await builder.build(client);
+      },
       async config(config, env) {
         let optimize = env.mode === "production";
         isTest = env.mode === "test";
@@ -963,28 +951,23 @@ function markoPlugin(opts = {}) {
         if (linked) {
           baseConfig.markoViteLinked = linked;
         }
-        const getCJSInteropBabelConfig = () => ({
-          ...baseConfig.babelConfig,
-          plugins: (baseConfig.babelConfig.plugins || []).concat(
-            plugin({
-              filter: isBuild || isTest ? void 0 : (path7) => !/^\./.test(path7)
-            })
-          )
-        });
+        const cjsInteropMarkoVite = {
+          filter: isBuild || isTest ? void 0 : (path7) => !/^\./.test(path7)
+        };
         ssrConfig = {
           ...baseConfig,
           output: "html"
         };
         ssrCjsConfig = {
           ...ssrConfig,
-          babelConfig: getCJSInteropBabelConfig()
+          cjsInteropMarkoVite
         };
         domConfig = {
           ...baseConfig,
           output: "dom"
         };
         if (isTest) {
-          domConfig.babelConfig = getCJSInteropBabelConfig();
+          domConfig.cjsInteropMarkoVite = cjsInteropMarkoVite;
         }
         hydrateConfig = {
           ...baseConfig,
@@ -1015,6 +998,7 @@ function markoPlugin(opts = {}) {
         if (!registeredTagLib) {
           registeredTagLib = true;
           compiler2.taglib.register("@marko/vite", {
+            translate: cjs_interop_translate_default,
             transform: glob_import_transform_default,
             "<head>": { transformer: render_assets_transform_default },
             "<body>": { transformer: render_assets_transform_default },
@@ -1079,6 +1063,10 @@ function markoPlugin(opts = {}) {
           config.build.commonjsOptions ??= {};
           config.build.commonjsOptions.esmExternals = (id) => !isCJSModule(id, rootResolveFile);
         }
+        if (linked && !isSSRBuild) {
+          config.build ??= {};
+          config.build.emptyOutDir = false;
+        }
         if (basePathVar) {
           config.experimental ??= {};
           if (config.experimental.renderBuiltUrl) {
@@ -1123,12 +1111,48 @@ function markoPlugin(opts = {}) {
           }
         };
       },
+      configEnvironment(name, options) {
+        if (name === "ssr") {
+          options.resolve ??= {};
+          const { noExternal } = options.resolve;
+          if (noExternal !== true) {
+            const noExternalReg = /\.marko$/;
+            if (noExternal) {
+              if (Array.isArray(noExternal)) {
+                options.resolve.noExternal = [...noExternal, noExternalReg];
+              } else {
+                options.resolve.noExternal = [noExternal, noExternalReg];
+              }
+            } else {
+              options.resolve.noExternal = noExternalReg;
+            }
+          }
+          options.build ??= {};
+          options.build.emptyOutDir = true;
+          if (!options.build?.rollupOptions?.output) {
+            options.build.rollupOptions ??= {};
+            options.build.rollupOptions.output = {
+              chunkFileNames: `[name]-[hash].js`
+            };
+          }
+          if (!options.build?.commonjsOptions?.esmExternals) {
+            options.build.commonjsOptions ??= {};
+            options.build.commonjsOptions.esmExternals = (id) => !isCJSModule(id, rootResolveFile);
+          }
+        } else {
+          if (linked) {
+            options.build ??= {};
+            options.build.emptyOutDir = false;
+          }
+        }
+        return options;
+      },
       configResolved(config) {
         basePath = config.base;
         cacheDir = config.cacheDir && normalizePath(config.cacheDir);
         getMarkoAssetFns = void 0;
-        for (const plugin2 of config.plugins) {
-          const fn = plugin2.api?.getMarkoAssetCodeForEntry;
+        for (const plugin of config.plugins) {
+          const fn = plugin.api?.getMarkoAssetCodeForEntry;
           if (fn) {
             if (getMarkoAssetFns) {
               getMarkoAssetFns.push(fn);
@@ -1180,7 +1204,7 @@ function markoPlugin(opts = {}) {
       },
       async options(inputOptions) {
         if (linked && isBuild) {
-          if (isSSRBuild) {
+          if (isSSRBuild || this.environment?.name === "ssr") {
             serverManifest = {
               entries: {},
               entrySources: {},
@@ -1212,7 +1236,7 @@ function markoPlugin(opts = {}) {
         }
       },
       async buildStart() {
-        if (isBuild && linked && !isSSRBuild) {
+        if (isBuild && linked && !isSSRBuild && this.environment?.name !== "ssr") {
           for (const assetId of serverManifest.ssrAssetIds) {
             this.load({
               id: normalizePath(path6.resolve(root, assetId)),
@@ -1222,6 +1246,9 @@ function markoPlugin(opts = {}) {
         }
       },
       async resolveId(importee, importer, importOpts, ssr = importOpts.ssr) {
+        if (importee === cjsInteropHelpersId) {
+          return cjsInteropHelpersId;
+        }
         if (virtualFiles.has(importee)) {
           return importee;
         }
@@ -1282,6 +1309,9 @@ function markoPlugin(opts = {}) {
       },
       async load(rawId) {
         const id = stripViteQueries(rawId);
+        if (id === cjsInteropHelpersId) {
+          return cjsInteropHelpersCode;
+        }
         if (id === renderAssetsRuntimeId) {
           return renderAssetsRuntimeCode;
         }
@@ -1450,7 +1480,8 @@ if (import.meta.hot) import.meta.hot.accept(() => {});`;
       name: "marko-vite:post",
       apply: "build",
       enforce: "post",
-      // We use a "post" plugin to allow us to read the final generated `.html` from vite.
+      // We use a "post" plugin to allow us to read the final generated `.html` from vite.,
+      sharedDuringBuild: true,
       transform(_source, id, opts2) {
         if (!opts2?.ssr && /\.module\.[^.]+(?:\?|$)/.test(id)) {
           return {
@@ -1467,7 +1498,7 @@ if (import.meta.hot) import.meta.hot.accept(() => {});`;
             `Linked builds are currently only supported when in "write" mode.`
           );
         }
-        if (isSSRBuild) {
+        if (isSSRBuild || this.environment?.name === "ssr") {
           const dir = outputOptions.dir ? path6.resolve(outputOptions.dir) : path6.resolve(outputOptions.file, "..");
           for (const fileName in bundle) {
             const chunk = bundle[fileName];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marko/vite",
-  "version": "5.3.8",
+  "version": "5.4.0",
   "description": "A Marko plugin for Vite",
   "keywords": [
     "loader",

package/dist/babel-plugin-cjs-interop.d.ts

@@ -1,31 +0,0 @@
-import type { PluginObj } from "@babel/core";
-/**
- * This plugin is designed to transform imports within Marko files to interop between ESM and CJS.
- * In Node, ESM files cannot reliably use named imports and default imports from CJS files.
- * Additionally, modules which are transpiled from ESM to CJS will use a `__esModule` property to
- * signal that the consuming ESM code should treat `exports.default` as the default import.
- * This plugin only modifies imports it determined to be for CJS modules
- *
- * Examples
- *   1. Source: ```import { bar as baz } from 'foo';```
- *      Becomes:```
- *        import * as _foo from 'foo';
- *        const { bar: baz } = _foo?.default === void 0 || _foo?.__esModule ? _foo : _foo.default;
- *      ```
- *
- *   2. Source:  ```import myFoo from 'foo';```
- *      Becomes: ```
- *        import * as _myFoo from 'foo';
- *        const { default: myFoo } = _myFoo?.__esModule ? _myFoo.default : _myFoo;
- *      ```
- *
- *   3. Source:  ```import foo, * as nsFoo from 'foo';```
- *      Becomes: ```
- *        import * as _nsFoo from 'foo';
- *        const nsFoo = _nsFoo?.default === void 0 || _nsFoo?.__esModule ? _nsFoo : _nsFoo.default
- *        const { default: myFoo } = _nsFoo?.__esModule ? _nsFoo.default : _nsFoo
- *      ```
- */
-export default function plugin(options: {
-    filter?: (path: string) => boolean;
-}): PluginObj;