@marko/vite 4.1.3 → 4.1.5

package/README.md

@@ -49,6 +49,12 @@ export default defineConfig({
 });
 ```
 
+# Base paths
+
+When deploying an application under a nested public path, use Vite's [`base` option](https://vitejs.dev/config/shared-options.html#base) to specify a path to prefix all assets. This option can also be specified with the `BASE_URL` environment variable.
+
+If the base path is not static, see the [basePathVar](#optionsbasepathvar) option for handling more advanced cases.
+
 # Browser asset references
 
 With @marko/vite when a _static relative path_ is used for certain native tag attributes, the relative asset will be imported and processed by Vite.
@@ -62,7 +68,7 @@ As an example, with the following template, the `logo.svg` will be imported and
 <img src="/assets/logo-TwEWmgMb.svg">
 ```
 
-You can see the list of elements and their attributes which are processed [here](./src/relative-assets-transform.ts).
+Most common image, media, and font filetypes are transformed automatically but some file types such as `.js` and `.css` files will not be. Generally these should be imported directly and not rendered as markup. To force the transformation of a path, add `?url` to it. You can see the list of elements and their attributes which are processed [here](./src/relative-assets-transform.ts).
 
 # Linked Mode
 

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

@@ -28,4 +28,5 @@ import type { PluginObj } from "@babel/core";
 export default function plugin(options: {
     extensions: string[];
     conditions: string[];
+    filter?: (path: string) => boolean;
 }): PluginObj;

package/dist/index.mjs

@@ -4,6 +4,7 @@ import path5 from "path";
 import crypto from "crypto";
 import anyMatch from "anymatch";
 import { pathToFileURL } from "url";
+import { transform as cjsToEsm } from "@chialab/cjs-to-esm";
 
 // src/server-entry-template.ts
 import path from "path";
@@ -447,7 +448,7 @@ function plugin(options) {
     name: "marko-import-interop",
     visitor: {
       ImportDeclaration(path6) {
-        if (!path6.node.specifiers.length || /\.(?:mjs|marko)$|\?/.test(path6.node.source.value)) {
+        if (!path6.node.specifiers.length || /\.(?:mjs|marko)$|\?/.test(path6.node.source.value) || options.filter?.(path6.node.source.value) === false) {
           return;
         }
         try {
@@ -527,10 +528,12 @@ function plugin(options) {
 
 // src/render-assets-transform.ts
 var render_assets_transform_default = (tag, t2) => {
-  const body = tag.get("body");
-  const tagName = tag.get("name").node.value;
-  body.unshiftContainer("body", renderAssetsCall(t2, `${tagName}-prepend`));
-  body.pushContainer("body", renderAssetsCall(t2, tagName));
+  if (tag.hub.file.markoOpts.markoViteLinked) {
+    const body = tag.get("body");
+    const tagName = tag.get("name").node.value;
+    body.unshiftContainer("body", renderAssetsCall(t2, `${tagName}-prepend`));
+    body.pushContainer("body", renderAssetsCall(t2, tagName));
+  }
 };
 function renderAssetsCall(t2, slot) {
   return t2.markoPlaceholder(
@@ -561,8 +564,10 @@ var assetAttrsByTag = /* @__PURE__ */ new Map([
   ["area", attrHref],
   ["link", attrHref],
   ["object", /* @__PURE__ */ new Set(["data"])],
-  ["body", /* @__PURE__ */ new Set(["background"])]
+  ["body", /* @__PURE__ */ new Set(["background"])],
+  ["script", /* @__PURE__ */ new Set(["src"])]
 ]);
+var assetFileReg = /(?:^\..*\.(?:a?png|jpe?g|jfif|pipeg|pjp|gif|svg|ico|web[pm]|avif|mp4|ogg|mp3|wav|flac|aac|opus|woff2?|eot|[ot]tf|webmanifest|pdf|txt)(\?|$)|\?url\b)/;
 function transform(tag, t2) {
   const { name, attributes } = tag.node;
   if (name.type !== "StringLiteral") {
@@ -575,9 +580,7 @@ function transform(tag, t2) {
   for (const attr of attributes) {
     if (attr.type === "MarkoAttribute" && attr.value.type === "StringLiteral" && assetAttrs.has(attr.name)) {
       const { value } = attr.value;
-      if (!(value[0] === "/" || // Ignore absolute paths.
-      !/\.[^.]+$/.test(value) || // Ignore paths without a file extension.
-      /^[a-z]{2,}:/i.test(value))) {
+      if (assetFileReg.test(value)) {
         const importedId = tag.scope.generateUid(value);
         attr.value = t2.identifier(importedId);
         tag.hub.file.path.unshiftContainer(
@@ -669,8 +672,7 @@ function markoPlugin(opts = {}) {
   let basePathVar;
   let baseConfig;
   let ssrConfig;
-  let ssrCjsBuildConfig;
-  let ssrCjsServeConfig;
+  let ssrCjsConfig;
   let domConfig;
   let hydrateConfig;
   const resolveVirtualDependency = (from, dep) => {
@@ -719,6 +721,9 @@ function markoPlugin(opts = {}) {
         compiler ??= await import(opts.compiler || "@marko/compiler");
         runtimeId = opts.runtimeId;
         basePathVar = opts.basePathVar;
+        if ("BASE_URL" in process.env && config.base == null) {
+          config.base = process.env.BASE_URL;
+        }
         baseConfig = {
           cache,
           optimize,
@@ -747,12 +752,9 @@ function markoPlugin(opts = {}) {
           resolveVirtualDependency,
           output: "html"
         };
-        ssrCjsServeConfig = {
-          ...ssrConfig,
-          ast: true,
-          code: false,
-          sourceMaps: false
-        };
+        if (linked) {
+          ssrConfig.markoViteLinked = linked;
+        }
         domConfig = {
           ...baseConfig,
           resolveVirtualDependency,
@@ -857,18 +859,28 @@ function markoPlugin(opts = {}) {
             }
           };
         }
+        return {
+          resolve: {
+            alias: [
+              {
+                find: /^~/,
+                replacement: ""
+              }
+            ]
+          }
+        };
       },
       configResolved(config) {
         basePath = config.base;
-        ssrCjsBuildConfig = {
+        ssrCjsConfig = {
           ...ssrConfig,
-          //modules: 'cjs'
           babelConfig: {
             ...ssrConfig.babelConfig,
             plugins: (ssrConfig.babelConfig.plugins || []).concat(
               plugin({
                 extensions: config.resolve.extensions,
-                conditions: config.resolve.conditions
+                conditions: config.resolve.conditions,
+                filter: isBuild ? void 0 : (path6) => !/^\./.test(path6)
               })
             )
           }
@@ -1065,6 +1077,12 @@ function markoPlugin(opts = {}) {
           }
         }
         if (!isMarkoFile(id)) {
+          if (!isBuild) {
+            const ext = path5.extname(id);
+            if (ext === ".cjs" || ext === ".js" && isCJSModule(id)) {
+              return cjsToEsm(source);
+            }
+          }
           return null;
         }
         if (isSSR) {
@@ -1076,74 +1094,13 @@ function markoPlugin(opts = {}) {
               const { code: code2, map: map2, meta: meta2 } = await compiler.compile(
                 source,
                 id,
-                getConfigForFileSystem(info, ssrCjsBuildConfig)
+                getConfigForFileSystem(info, ssrCjsConfig)
               );
               return {
                 code: code2,
                 map: map2,
                 meta: { arcSourceCode: source, arcScanIds: meta2.analyzedTags }
               };
-            } else {
-              const { ast } = await compiler.compile(
-                source,
-                id,
-                ssrCjsServeConfig
-              );
-              let namedExports = "";
-              let code2 = `import { createRequire } from "module";
-`;
-              code2 += `import "@marko/compiler/register.js";
-`;
-              code2 += `const mod = createRequire(import.meta.url)(${JSON.stringify(
-                id
-              )});
-`;
-              for (const child of ast.program.body) {
-                switch (child.type) {
-                  case "ExportAllDeclaration":
-                    code2 += `export * from ${JSON.stringify(
-                      child.source.value
-                    )};
-`;
-                    break;
-                  case "ExportNamedDeclaration":
-                    if (child.specifiers) {
-                      for (const specifier of child.specifiers) {
-                        if (specifier.exported.type === "Identifier") {
-                          namedExports += `${specifier.exported.name},`;
-                        } else {
-                          namedExports += `mod[${JSON.stringify(
-                            specifier.exported.value
-                          )}] as ${specifier.exported.value},`;
-                        }
-                      }
-                    }
-                    if (child.declaration) {
-                      if ("id" in child.declaration && child.declaration.id) {
-                        if (child.declaration.id.type === "Identifier") {
-                          namedExports += `${child.declaration.id.name},`;
-                        } else {
-                          namedExports += `mod[${JSON.stringify(
-                            child.declaration.id.value
-                          )}] as ${child.declaration.id.value},`;
-                        }
-                      }
-                      if ("declarations" in child.declaration) {
-                        for (const declaration of child.declaration.declarations) {
-                          if (declaration.id.type === "Identifier") {
-                            namedExports += `${declaration.id.name},`;
-                          }
-                        }
-                      }
-                    }
-                    break;
-                }
-              }
-              code2 += `export const { ${namedExports} } = mod;
-`;
-              code2 += `export default mod.default;
-`;
-              return code2;
             }
           }
         }
@@ -1152,7 +1109,7 @@ function markoPlugin(opts = {}) {
           id,
           getConfigForFileSystem(
             info,
-            isSSR ? ssrConfig : query === browserEntryQuery ? hydrateConfig : domConfig
+            isSSR ? isCJSModule(id) ? ssrCjsConfig : ssrConfig : query === browserEntryQuery ? hydrateConfig : domConfig
           )
         );
         const { map, meta } = compiled;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@marko/vite",
   "description": "A Marko plugin for Vite",
-  "version": "4.1.3",
+  "version": "4.1.5",
   "author": "Dylan Piercey <dpiercey@ebay.com>",
   "bugs": "https://github.com/marko-js/vite/issues",
   "dependencies": {
@@ -15,6 +15,7 @@
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",
     "@changesets/cli": "^2.27.1",
+    "@chialab/cjs-to-esm": "^0.18.0",
     "@marko/compiler": "^5.34.7",
     "@marko/fixture-snapshots": "^2.2.1",
     "@marko/testing-library": "^6.2.0",
@@ -33,6 +34,7 @@
     "fixpack": "^4.0.0",
     "husky": "^9.0.11",
     "jsdom": "^24.0.0",
+    "less": "^4.2.0",
     "lint-staged": "^15.2.2",
     "marko": "^5.32.13",
     "mocha": "^10.3.0",