marko-js · rturnq · Apr 11, 2024 · Apr 11, 2024
diff --git a/.changeset/chilly-socks-smell.md b/.changeset/chilly-socks-smell.md
@@ -0,0 +1,5 @@
+---
+"@marko/vite": patch
+---
+
+Allow importing assets from marko file in cjs libs
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -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",

diff --git a/...sts__/fixtures/isomorphic-commonjs-dir-import/__snapshots__/build.expected.loading.0.html b/...sts__/fixtures/isomorphic-commonjs-dir-import/__snapshots__/build.expected.loading.0.html
@@ -0,0 +1 @@
+foo
diff --git a/...tests__/fixtures/isomorphic-commonjs-dir-import/__snapshots__/dev.expected.loading.0.html b/...tests__/fixtures/isomorphic-commonjs-dir-import/__snapshots__/dev.expected.loading.0.html
@@ -0,0 +1 @@
+foo
diff --git a/src/__tests__/fixtures/isomorphic-commonjs-dir-import/dev-server.mjs b/src/__tests__/fixtures/isomorphic-commonjs-dir-import/dev-server.mjs
@@ -0,0 +1,38 @@
+// In dev we'll start a Vite dev server in middleware mode,
+// and forward requests to our http request handler.
+
+import { createServer } from "vite";
+import path from "path";
+import url from "url";
+import { createRequire } from "module";
+
+// change to import once marko-vite is updated to ESM
+const markoPlugin = createRequire(import.meta.url)("../../..").default;
+
+const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
+
+const devServer = await createServer({
+  root: __dirname,
+  appType: "custom",
+  logLevel: "silent",
+  plugins: [markoPlugin()],
+  optimizeDeps: { force: true },
+  server: {
+    middlewareMode: true,
+    watch: {
+      ignored: ["**/node_modules/**", "**/dist/**", "**/__snapshots__/**"],
+    },
+  },
+});
+
+export default devServer.middlewares.use(async (req, res, next) => {
+  try {
+    const { handler } = await devServer.ssrLoadModule(
+      path.join(__dirname, "./src/index.js")
+    );
+    await handler(req, res, next);
+  } catch (err) {
+    devServer.ssrFixStacktrace(err);
+    return next(err);
+  }
+});
diff --git a/src/__tests__/fixtures/isomorphic-commonjs-dir-import/node_modules/test-package/package.json b/src/__tests__/fixtures/isomorphic-commonjs-dir-import/node_modules/test-package/package.json
diff --git a/src/__tests__/fixtures/isomorphic-commonjs-dir-import/node_modules/test-package/sub/index.js b/src/__tests__/fixtures/isomorphic-commonjs-dir-import/node_modules/test-package/sub/index.js
diff --git a/...ests__/fixtures/isomorphic-commonjs-dir-import/node_modules/test-package/sub/package.json b/...ests__/fixtures/isomorphic-commonjs-dir-import/node_modules/test-package/sub/package.json
diff --git a/src/__tests__/fixtures/isomorphic-commonjs-dir-import/package.json b/src/__tests__/fixtures/isomorphic-commonjs-dir-import/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "isomorphic-commonjs-dir-import",
+  "type": "commonjs",
+  "dependencies": {
+    "test-package": "0.0.0"
+  }
+}
diff --git a/src/__tests__/fixtures/isomorphic-commonjs-dir-import/server.mjs b/src/__tests__/fixtures/isomorphic-commonjs-dir-import/server.mjs
@@ -0,0 +1,15 @@
+// In production, simply start up the http server.
+import path from 'path'
+import url from 'url';
+import { createServer } from "http";
+import serve from "serve-handler";
+import { handler } from "./dist/index.mjs";
+
+const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
+const serveOpts = { public: path.resolve(__dirname, "dist") };
+
+export default createServer(async (req, res) => {
+  await handler(req, res);
+  if (res.headersSent) return;
+  await serve(req, res, serveOpts);
+});
diff --git a/src/__tests__/fixtures/isomorphic-commonjs-dir-import/src/components/layout-component.marko b/src/__tests__/fixtures/isomorphic-commonjs-dir-import/src/components/layout-component.marko
@@ -0,0 +1,15 @@
+static {
+  if (typeof window === "object") {
+    document.body.firstElementChild.append("Loaded Layout Component");
+  }
+}
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Hello World</title>
+</head>
+<body>
+  <${input.renderBody}/>
+</body>
+</html>
diff --git a/src/__tests__/fixtures/isomorphic-commonjs-dir-import/src/index.js b/src/__tests__/fixtures/isomorphic-commonjs-dir-import/src/index.js
@@ -0,0 +1,9 @@
+import template from "./template.marko";
+
+export function handler(req, res) {
+  if (req.url === "/") {
+    res.statusCode = 200;
+    res.setHeader("Content-Type", "text/html; charset=utf-8");
+    template.render({}, res);
+  }
+}
diff --git a/src/__tests__/fixtures/isomorphic-commonjs-dir-import/src/template.marko b/src/__tests__/fixtures/isomorphic-commonjs-dir-import/src/template.marko
@@ -0,0 +1,14 @@
+// import addMonths from 'date-fns/addMonths';
+
+import sub from "test-package/sub";
+style {
+  div {
+    color: green;
+  }
+}
+
+<layout-component>
+  <div id="app">
+    ${sub}
+  </div>
+</layout-component>
diff --git a/src/__tests__/fixtures/isomorphic-commonjs-dir-import/test.config.ts b/src/__tests__/fixtures/isomorphic-commonjs-dir-import/test.config.ts
@@ -0,0 +1 @@
+export const ssr = true;
diff --git a/src/__tests__/fixtures/isomorphic-commonjs-svg/__snapshots__/build.expected.loading.0.html b/src/__tests__/fixtures/isomorphic-commonjs-svg/__snapshots__/build.expected.loading.0.html
@@ -0,0 +1,6 @@
+<button>
+  <img
+    alt="icon"
+    src="/assets/icon-[hash].svg"
+  />
+</button>
diff --git a/src/__tests__/fixtures/isomorphic-commonjs-svg/__snapshots__/dev.expected.loading.0.html b/src/__tests__/fixtures/isomorphic-commonjs-svg/__snapshots__/dev.expected.loading.0.html
@@ -0,0 +1,6 @@
+<button>
+  <img
+    alt="icon"
+    src="/node_modules/test-package/components/test-icon/icon.svg"
+  />
+</button>
diff --git a/src/__tests__/fixtures/isomorphic-commonjs-svg/dev-server.mjs b/src/__tests__/fixtures/isomorphic-commonjs-svg/dev-server.mjs
@@ -0,0 +1,40 @@
+// In dev we'll start a Vite dev server in middleware mode,
+// and forward requests to our http request handler.
+
+import { createServer } from "vite";
+import path from "path";
+import url from "url";
+import { createRequire } from "module";
+
+// change to import once marko-vite is updated to ESM
+const markoPlugin = createRequire(import.meta.url)("../../..").default;
+
+const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
+
+const devServer = await createServer({
+  root: __dirname,
+  appType: "custom",
+  logLevel: "silent",
+  plugins: [markoPlugin()],
+  optimizeDeps: { force: true },
+  server: {
+    middlewareMode: true,
+    watch: {
+      ignored: ["**/node_modules/**", "**/dist/**", "**/__snapshots__/**"],
+    },
+  },
+});
+
+export default devServer.middlewares.use(async (req, res, next) => {
+  try {
+    const { handler } = await devServer.ssrLoadModule(
+      path.join(__dirname, "./src/index.js"),
+    );
+    await handler(req, res, next);
+  } catch (err) {
+    try {
+      devServer.ssrFixStacktrace(err);
+    } catch (_) {}
+    return next(err);
+  }
+});
diff --git a/...ures/isomorphic-commonjs-svg/node_modules/test-package/components/test-button/index.marko b/...ures/isomorphic-commonjs-svg/node_modules/test-package/components/test-button/index.marko
diff --git a/...isomorphic-commonjs-svg/node_modules/test-package/components/test-icon/icon.svg b/...isomorphic-commonjs-svg/node_modules/test-package/components/test-icon/icon.svg
diff --git a/...xtures/isomorphic-commonjs-svg/node_modules/test-package/components/test-icon/index.marko b/...xtures/isomorphic-commonjs-svg/node_modules/test-package/components/test-icon/index.marko
diff --git a/src/__tests__/fixtures/isomorphic-commonjs-svg/node_modules/test-package/marko.json b/src/__tests__/fixtures/isomorphic-commonjs-svg/node_modules/test-package/marko.json
diff --git a/src/__tests__/fixtures/isomorphic-commonjs-svg/node_modules/test-package/package.json b/src/__tests__/fixtures/isomorphic-commonjs-svg/node_modules/test-package/package.json
diff --git a/src/__tests__/fixtures/isomorphic-commonjs-svg/package.json b/src/__tests__/fixtures/isomorphic-commonjs-svg/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "isomorphic-commonjs",
+  "dependencies": {
+    "test-package": "0.0.0"
+  }
+}
diff --git a/src/__tests__/fixtures/isomorphic-commonjs-svg/server.mjs b/src/__tests__/fixtures/isomorphic-commonjs-svg/server.mjs
@@ -0,0 +1,15 @@
+// In production, simply start up the http server.
+import path from 'path'
+import url from 'url';
+import { createServer } from "http";
+import serve from "serve-handler";
+import { handler } from "./dist/index.mjs";
+
+const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
+const serveOpts = { public: path.resolve(__dirname, "dist") };
+
+export default createServer(async (req, res) => {
+  await handler(req, res);
+  if (res.headersSent) return;
+  await serve(req, res, serveOpts);
+});
diff --git a/src/__tests__/fixtures/isomorphic-commonjs-svg/src/components/class-component.marko b/src/__tests__/fixtures/isomorphic-commonjs-svg/src/components/class-component.marko
@@ -0,0 +1,20 @@
+class {
+  onCreate() {
+    this.state = {
+      clickCount: 0,
+      mounted: false
+    };
+  }
+  onMount() {
+    this.state.mounted = true;
+  }
+
+  handleClick() {
+    this.state.clickCount++;
+  }
+}
+
+<test-button#clickable on-click("handleClick")>
+  Mounted: ${state.mounted}
+  Clicks: ${state.clickCount}
+</test-button>
diff --git a/src/__tests__/fixtures/isomorphic-commonjs-svg/src/components/implicit-component.marko b/src/__tests__/fixtures/isomorphic-commonjs-svg/src/components/implicit-component.marko
@@ -0,0 +1,9 @@
+static {
+  if (typeof window === "object") {
+    document.body.firstElementChild.append("Loaded Implicit Component");
+  }
+}
+
+<div#implicit>
+  <class-component/>
+</div>
diff --git a/src/__tests__/fixtures/isomorphic-commonjs-svg/src/components/layout-component.marko b/src/__tests__/fixtures/isomorphic-commonjs-svg/src/components/layout-component.marko
@@ -0,0 +1,15 @@
+static {
+  if (typeof window === "object") {
+    document.body.firstElementChild.append("Loaded Layout Component");
+  }
+}
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Hello World</title>
+</head>
+<body>
+  <${input.renderBody}/>
+</body>
+</html>
diff --git a/src/__tests__/fixtures/isomorphic-commonjs-svg/src/index.js b/src/__tests__/fixtures/isomorphic-commonjs-svg/src/index.js
@@ -0,0 +1,19 @@
+import template from "./template.marko";
+
+export function handler(req, res) {
+  if (req.url === "/") {
+    res.statusCode = 200;
+    res.setHeader("Content-Type", "text/html; charset=utf-8");
+    template.render(
+      {},
+      {
+        write(chunk) {
+          res.write(chunk);
+        },
+        end(chunk) {
+          res.end(chunk);
+        },
+      },
+    );
+  }
+}
diff --git a/src/__tests__/fixtures/isomorphic-commonjs-svg/src/template.marko b/src/__tests__/fixtures/isomorphic-commonjs-svg/src/template.marko
@@ -0,0 +1,3 @@
+<div id="app">
+  <test-button/>
+</div>
diff --git a/src/__tests__/fixtures/isomorphic-commonjs-svg/test.config.ts b/src/__tests__/fixtures/isomorphic-commonjs-svg/test.config.ts
@@ -0,0 +1,2 @@
+export const ssr = true;
+export async function steps() {}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const ssr = true;
		export async function steps() {}