Skip to content

Commit 90cca62

Browse files
rturnqrturnq
authored
fix: handle asset imports from cjs lib marko files (#120)
1 parent 799574b commit 90cca62

34 files changed

+350
-77
lines changed

‎.changeset/chilly-socks-smell.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@marko/vite": patch
3+
---
4+
5+
Allow importing assets from marko file in cjs libs

‎package-lock.json

+49
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"devDependencies": {
1616
"@changesets/changelog-github": "^0.5.0",
1717
"@changesets/cli": "^2.27.1",
18+
"@chialab/cjs-to-esm": "^0.18.0",
1819
"@marko/compiler": "^5.34.7",
1920
"@marko/fixture-snapshots": "^2.2.1",
2021
"@marko/testing-library": "^6.2.0",

‎src/__tests__/fixtures/isomorphic-commonjs-dir-import/__snapshots__/build.expected.loading.0.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
foo

‎src/__tests__/fixtures/isomorphic-commonjs-dir-import/__snapshots__/dev.expected.loading.0.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
foo

‎src/__tests__/fixtures/isomorphic-commonjs-dir-import/dev-server.mjs

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
// In dev we'll start a Vite dev server in middleware mode,
2+
// and forward requests to our http request handler.
3+
4+
import { createServer } from "vite";
5+
import path from "path";
6+
import url from "url";
7+
import { createRequire } from "module";
8+
9+
// change to import once marko-vite is updated to ESM
10+
const markoPlugin = createRequire(import.meta.url)("../../..").default;
11+
12+
const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
13+
14+
const devServer = await createServer({
15+
root: __dirname,
16+
appType: "custom",
17+
logLevel: "silent",
18+
plugins: [markoPlugin()],
19+
optimizeDeps: { force: true },
20+
server: {
21+
middlewareMode: true,
22+
watch: {
23+
ignored: ["**/node_modules/**", "**/dist/**", "**/__snapshots__/**"],
24+
},
25+
},
26+
});
27+
28+
export default devServer.middlewares.use(async (req, res, next) => {
29+
try {
30+
const { handler } = await devServer.ssrLoadModule(
31+
path.join(__dirname, "./src/index.js")
32+
);
33+
await handler(req, res, next);
34+
} catch (err) {
35+
devServer.ssrFixStacktrace(err);
36+
return next(err);
37+
}
38+
});

‎src/__tests__/fixtures/isomorphic-commonjs-dir-import/node_modules/test-package/package.json

+4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/__tests__/fixtures/isomorphic-commonjs-dir-import/node_modules/test-package/sub/index.js

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/__tests__/fixtures/isomorphic-commonjs-dir-import/node_modules/test-package/sub/package.json

+3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/__tests__/fixtures/isomorphic-commonjs-dir-import/package.json

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"name": "isomorphic-commonjs-dir-import",
3+
"type": "commonjs",
4+
"dependencies": {
5+
"test-package": "0.0.0"
6+
}
7+
}

‎src/__tests__/fixtures/isomorphic-commonjs-dir-import/server.mjs

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// In production, simply start up the http server.
2+
import path from 'path'
3+
import url from 'url';
4+
import { createServer } from "http";
5+
import serve from "serve-handler";
6+
import { handler } from "./dist/index.mjs";
7+
8+
const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
9+
const serveOpts = { public: path.resolve(__dirname, "dist") };
10+
11+
export default createServer(async (req, res) => {
12+
await handler(req, res);
13+
if (res.headersSent) return;
14+
await serve(req, res, serveOpts);
15+
});

‎src/__tests__/fixtures/isomorphic-commonjs-dir-import/src/components/layout-component.marko

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
static {
2+
if (typeof window === "object") {
3+
document.body.firstElementChild.append("Loaded Layout Component");
4+
}
5+
}
6+
7+
<!DOCTYPE html>
8+
<html lang="en">
9+
<head>
10+
<title>Hello World</title>
11+
</head>
12+
<body>
13+
<${input.renderBody}/>
14+
</body>
15+
</html>

‎src/__tests__/fixtures/isomorphic-commonjs-dir-import/src/index.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import template from "./template.marko";
2+
3+
export function handler(req, res) {
4+
if (req.url === "/") {
5+
res.statusCode = 200;
6+
res.setHeader("Content-Type", "text/html; charset=utf-8");
7+
template.render({}, res);
8+
}
9+
}

‎src/__tests__/fixtures/isomorphic-commonjs-dir-import/src/template.marko

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
// import addMonths from 'date-fns/addMonths';
2+
3+
import sub from "test-package/sub";
4+
style {
5+
div {
6+
color: green;
7+
}
8+
}
9+
10+
<layout-component>
11+
<div id="app">
12+
${sub}
13+
</div>
14+
</layout-component>

‎src/__tests__/fixtures/isomorphic-commonjs-dir-import/test.config.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const ssr = true;

‎src/__tests__/fixtures/isomorphic-commonjs-svg/__snapshots__/build.expected.loading.0.html

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<button>
2+
<img
3+
alt="icon"
4+
src="/assets/icon-[hash].svg"
5+
/>
6+
</button>

‎src/__tests__/fixtures/isomorphic-commonjs-svg/__snapshots__/dev.expected.loading.0.html

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<button>
2+
<img
3+
alt="icon"
4+
src="/node_modules/test-package/components/test-icon/icon.svg"
5+
/>
6+
</button>

‎src/__tests__/fixtures/isomorphic-commonjs-svg/dev-server.mjs

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
// In dev we'll start a Vite dev server in middleware mode,
2+
// and forward requests to our http request handler.
3+
4+
import { createServer } from "vite";
5+
import path from "path";
6+
import url from "url";
7+
import { createRequire } from "module";
8+
9+
// change to import once marko-vite is updated to ESM
10+
const markoPlugin = createRequire(import.meta.url)("../../..").default;
11+
12+
const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
13+
14+
const devServer = await createServer({
15+
root: __dirname,
16+
appType: "custom",
17+
logLevel: "silent",
18+
plugins: [markoPlugin()],
19+
optimizeDeps: { force: true },
20+
server: {
21+
middlewareMode: true,
22+
watch: {
23+
ignored: ["**/node_modules/**", "**/dist/**", "**/__snapshots__/**"],
24+
},
25+
},
26+
});
27+
28+
export default devServer.middlewares.use(async (req, res, next) => {
29+
try {
30+
const { handler } = await devServer.ssrLoadModule(
31+
path.join(__dirname, "./src/index.js"),
32+
);
33+
await handler(req, res, next);
34+
} catch (err) {
35+
try {
36+
devServer.ssrFixStacktrace(err);
37+
} catch (_) {}
38+
return next(err);
39+
}
40+
});

‎src/__tests__/fixtures/isomorphic-commonjs-svg/node_modules/test-package/components/test-button/index.marko

+3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/__tests__/fixtures/isomorphic-commonjs-svg/node_modules/test-package/components/test-icon/icon.svg

+1
Loading

‎src/__tests__/fixtures/isomorphic-commonjs-svg/node_modules/test-package/components/test-icon/index.marko

+3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/__tests__/fixtures/isomorphic-commonjs-svg/node_modules/test-package/marko.json

+3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/__tests__/fixtures/isomorphic-commonjs-svg/node_modules/test-package/package.json

+4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/__tests__/fixtures/isomorphic-commonjs-svg/package.json

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"name": "isomorphic-commonjs",
3+
"dependencies": {
4+
"test-package": "0.0.0"
5+
}
6+
}

‎src/__tests__/fixtures/isomorphic-commonjs-svg/server.mjs

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// In production, simply start up the http server.
2+
import path from 'path'
3+
import url from 'url';
4+
import { createServer } from "http";
5+
import serve from "serve-handler";
6+
import { handler } from "./dist/index.mjs";
7+
8+
const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
9+
const serveOpts = { public: path.resolve(__dirname, "dist") };
10+
11+
export default createServer(async (req, res) => {
12+
await handler(req, res);
13+
if (res.headersSent) return;
14+
await serve(req, res, serveOpts);
15+
});

‎src/__tests__/fixtures/isomorphic-commonjs-svg/src/components/class-component.marko

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
class {
2+
onCreate() {
3+
this.state = {
4+
clickCount: 0,
5+
mounted: false
6+
};
7+
}
8+
onMount() {
9+
this.state.mounted = true;
10+
}
11+
12+
handleClick() {
13+
this.state.clickCount++;
14+
}
15+
}
16+
17+
<test-button#clickable on-click("handleClick")>
18+
Mounted: ${state.mounted}
19+
Clicks: ${state.clickCount}
20+
</test-button>

‎src/__tests__/fixtures/isomorphic-commonjs-svg/src/components/implicit-component.marko

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
static {
2+
if (typeof window === "object") {
3+
document.body.firstElementChild.append("Loaded Implicit Component");
4+
}
5+
}
6+
7+
<div#implicit>
8+
<class-component/>
9+
</div>

‎src/__tests__/fixtures/isomorphic-commonjs-svg/src/components/layout-component.marko

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
static {
2+
if (typeof window === "object") {
3+
document.body.firstElementChild.append("Loaded Layout Component");
4+
}
5+
}
6+
7+
<!DOCTYPE html>
8+
<html lang="en">
9+
<head>
10+
<title>Hello World</title>
11+
</head>
12+
<body>
13+
<${input.renderBody}/>
14+
</body>
15+
</html>

‎src/__tests__/fixtures/isomorphic-commonjs-svg/src/index.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import template from "./template.marko";
2+
3+
export function handler(req, res) {
4+
if (req.url === "/") {
5+
res.statusCode = 200;
6+
res.setHeader("Content-Type", "text/html; charset=utf-8");
7+
template.render(
8+
{},
9+
{
10+
write(chunk) {
11+
res.write(chunk);
12+
},
13+
end(chunk) {
14+
res.end(chunk);
15+
},
16+
},
17+
);
18+
}
19+
}

‎src/__tests__/fixtures/isomorphic-commonjs-svg/src/template.marko

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div id="app">
2+
<test-button/>
3+
</div>

‎src/__tests__/fixtures/isomorphic-commonjs-svg/test.config.ts

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export const ssr = true;
2+
export async function steps() {}

0 commit comments

Comments
 (0)