diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.loading.0.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.loading.0.html
new file mode 100644
index 0000000..5325fc5
--- /dev/null
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.loading.0.html
@@ -0,0 +1,6 @@
+
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.loading.1.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.loading.1.html
new file mode 100644
index 0000000..2284b57
--- /dev/null
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.loading.1.html
@@ -0,0 +1,21 @@
+
+
+
+ Mounted: false Clicks: 0
+
+
+ Mounted: false Clicks: 0
+
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.loading.2.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.loading.2.html
new file mode 100644
index 0000000..48471e3
--- /dev/null
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.loading.2.html
@@ -0,0 +1,21 @@
+
+
+
+ Mounted: true Clicks: 0
+
+
+ Mounted: true Clicks: 0
+
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.loading.3.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.loading.3.html
new file mode 100644
index 0000000..44c04cf
--- /dev/null
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.loading.3.html
@@ -0,0 +1,32 @@
+
+
+
+ Mounted: true Clicks: 0
+
+
+
+
+ Mounted: true Clicks: 0
+
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.step-0.0.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.step-0.0.html
new file mode 100644
index 0000000..efe58aa
--- /dev/null
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.step-0.0.html
@@ -0,0 +1,21 @@
+
+
+
+ Mounted: true Clicks: 1
+
+
+ Mounted: true Clicks: 0
+
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.0.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.0.html
new file mode 100644
index 0000000..bbd199f
--- /dev/null
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.0.html
@@ -0,0 +1,8 @@
+
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.1.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.1.html
new file mode 100644
index 0000000..9f8122c
--- /dev/null
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.1.html
@@ -0,0 +1,13 @@
+
+
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.10.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.10.html
new file mode 100644
index 0000000..9cb6983
--- /dev/null
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.10.html
@@ -0,0 +1,33 @@
+
+
+ Mounted: true Clicks: 0
+
+
+
+
+
+ Mounted: true Clicks: 0
+
+
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.2.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.2.html
new file mode 100644
index 0000000..44229a2
--- /dev/null
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.2.html
@@ -0,0 +1,23 @@
+
+
+
+ Mounted: false Clicks: 0
+
+
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.3.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.3.html
new file mode 100644
index 0000000..7baf2c7
--- /dev/null
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.3.html
@@ -0,0 +1,28 @@
+
+
+
+ Mounted: false Clicks: 0
+
+
+
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.4.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.4.html
new file mode 100644
index 0000000..44f8e5a
--- /dev/null
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.4.html
@@ -0,0 +1,36 @@
+
+
+
+ Mounted: false Clicks: 0
+
+
+
+
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.5.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.5.html
new file mode 100644
index 0000000..cc227ea
--- /dev/null
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.5.html
@@ -0,0 +1,41 @@
+
+
+
+ Mounted: false Clicks: 0
+
+
+
+
+
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.6.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.6.html
new file mode 100644
index 0000000..9fea173
--- /dev/null
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.6.html
@@ -0,0 +1,46 @@
+
+
+
+ Mounted: false Clicks: 0
+
+
+
+
+
+
+ Mounted: false Clicks: 0
+
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.7.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.7.html
new file mode 100644
index 0000000..6667f64
--- /dev/null
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.7.html
@@ -0,0 +1,20 @@
+
+ Mounted: false Clicks: 0
+
+
+
+
+ Mounted: false Clicks: 0
+
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.8.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.8.html
new file mode 100644
index 0000000..f43e2cb
--- /dev/null
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.8.html
@@ -0,0 +1,20 @@
+
+ Mounted: true Clicks: 0
+
+
+
+
+ Mounted: true Clicks: 0
+
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.9.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.9.html
new file mode 100644
index 0000000..1cb91a7
--- /dev/null
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.9.html
@@ -0,0 +1,33 @@
+
+
+ Mounted: false Clicks: 0
+
+
+
+
+
+ Mounted: false Clicks: 0
+
+
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.step-0.0.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.step-0.0.html
new file mode 100644
index 0000000..2229265
--- /dev/null
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.step-0.0.html
@@ -0,0 +1,20 @@
+
+ Mounted: true Clicks: 1
+
+
+
+
+ Mounted: true Clicks: 0
+
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/dev-server.mjs b/src/__tests__/fixtures/isomorphic-bundle-splitting/dev-server.mjs
new file mode 100644
index 0000000..64b889d
--- /dev/null
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/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-bundle-splitting/server.mjs b/src/__tests__/fixtures/isomorphic-bundle-splitting/server.mjs
new file mode 100644
index 0000000..410eee8
--- /dev/null
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/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-bundle-splitting/src/components/class-component.marko b/src/__tests__/fixtures/isomorphic-bundle-splitting/src/components/class-component.marko
new file mode 100644
index 0000000..9579382
--- /dev/null
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/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++;
+ }
+}
+
+
+ Mounted: ${state.mounted}
+ Clicks: ${state.clickCount}
+
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/src/components/implicit-component.marko b/src/__tests__/fixtures/isomorphic-bundle-splitting/src/components/implicit-component.marko
new file mode 100644
index 0000000..3eba545
--- /dev/null
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/src/components/implicit-component.marko
@@ -0,0 +1,4 @@
+import { classComponent } from "./split-bundle-map";
+
+<${classComponent}/>
+<${classComponent}/>
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/src/components/layout-component.marko b/src/__tests__/fixtures/isomorphic-bundle-splitting/src/components/layout-component.marko
new file mode 100644
index 0000000..8d60022
--- /dev/null
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/src/components/layout-component.marko
@@ -0,0 +1,15 @@
+static {
+ if (typeof window === "object") {
+ document.body.firstElementChild.append("Loaded Layout Component");
+ }
+}
+
+
+
+
+ Hello World
+
+
+ <${input.renderBody}/>
+
+
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/src/components/split-bundle-map.js b/src/__tests__/fixtures/isomorphic-bundle-splitting/src/components/split-bundle-map.js
new file mode 100644
index 0000000..1964224
--- /dev/null
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/src/components/split-bundle-map.js
@@ -0,0 +1,3 @@
+import classComponent from "./class-component.marko";
+
+export { classComponent };
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/src/index.js b/src/__tests__/fixtures/isomorphic-bundle-splitting/src/index.js
new file mode 100644
index 0000000..d3f5422
--- /dev/null
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/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-bundle-splitting/src/template.marko b/src/__tests__/fixtures/isomorphic-bundle-splitting/src/template.marko
new file mode 100644
index 0000000..2c5af41
--- /dev/null
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/src/template.marko
@@ -0,0 +1,9 @@
+style {
+ div { color: green }
+}
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/test.config.ts b/src/__tests__/fixtures/isomorphic-bundle-splitting/test.config.ts
new file mode 100644
index 0000000..9e9a321
--- /dev/null
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/test.config.ts
@@ -0,0 +1,4 @@
+export const ssr = true;
+export async function steps() {
+ await page.click("#clickable");
+}
diff --git a/src/render-assets-runtime.ts b/src/render-assets-runtime.ts
index 1b2b983..1c74913 100644
--- a/src/render-assets-runtime.ts
+++ b/src/render-assets-runtime.ts
@@ -15,14 +15,15 @@ export function addAssets(g, newEntries) {
const entries = g.___viteEntries;
if (entries) {
g.___viteEntries = entries.concat(newEntries);
- } else {
- g.___viteEntries = newEntries;
- g.___viteRenderAssets = renderAssets;
- g.___viteInjectAttrs = g.cspNonce
- ? \` nonce="\${g.cspNonce.replace(/"/g, "'")}"\`
- : "";
- ${opts.runtimeId ? `g.runtimeId = ${JSON.stringify(opts.runtimeId)};` : ""}
+ return true;
}
+ g.___viteEntries = newEntries;
+ g.___viteRenderAssets = renderAssets;
+ g.___viteInjectAttrs = g.cspNonce
+ ? \` nonce="\${g.cspNonce.replace(/"/g, "'")}"\`
+ : "";
+ g.___viteSeenIds = new Set();
+ ${opts.runtimeId ? `g.runtimeId = ${JSON.stringify(opts.runtimeId)};` : ""}
}
function renderAssets(slot) {
@@ -30,6 +31,7 @@ function renderAssets(slot) {
let html = "";
if (entries) {
+ const seenIds = this.___viteSeenIds;
const slotWrittenEntriesKey = \`___viteWrittenEntries-\${slot}\`;
const lastWrittenEntry = this[slotWrittenEntriesKey] || 0;
const writtenEntries = (this[slotWrittenEntriesKey] = entries.length);
@@ -72,13 +74,29 @@ function renderAssets(slot) {
const parts = entry[slot];
if (parts) {
- for (const part of parts) {
- html +=
- part === 0 /** InjectType.AssetAttrs */
- ? this.___viteInjectAttrs
- : part === 1 /** InjectType.PublicPath */
- ? base
- : part;
+ for (let i = 0; i < parts.length; i++) {
+ const part = parts[i];
+ switch (part) {
+ case 0: /** InjectType.AssetAttrs */
+ html += this.___viteInjectAttrs;
+ break;
+ case 1: /** InjectType.PublicPath */
+ html += base;
+ break;
+ case 2: /** InjectType.Dedupe */ {
+ const id = parts[++i];
+ const skipParts = parts[++i];
+ if (seenIds.has(id)) {
+ i += skipParts;
+ } else {
+ seenIds.add(id);
+ }
+ break;
+ }
+ default:
+ html += part;
+ break;
+ }
}
}
}
diff --git a/src/serializer.ts b/src/serializer.ts
index a95ee7b..e935a08 100644
--- a/src/serializer.ts
+++ b/src/serializer.ts
@@ -4,6 +4,7 @@ import type { Node, Element, Comment, Text } from "domhandler";
enum InjectType {
AssetAttrs = 0,
PublicPath = 1,
+ Dedupe = 2,
}
const voidElements = new Set([
@@ -40,19 +41,40 @@ export default function serialize(
const tag = node as Element;
const { name } = tag;
let urlAttr: undefined | string;
- curString += `<${name}`;
+ let isDedupe = 0;
switch (tag.tagName) {
case "script":
- parts.push(curString, InjectType.AssetAttrs);
- urlAttr = "src";
+ if (tag.attribs.src) {
+ if (curString) {
+ parts.push(curString);
+ curString = "";
+ }
+ isDedupe = parts.push(InjectType.Dedupe, tag.attribs.src, 0) - 1;
+ }
+ parts.push(`${curString}<${name}`, InjectType.AssetAttrs);
curString = "";
+ urlAttr = "src";
break;
case "style":
- parts.push(curString, InjectType.AssetAttrs);
+ parts.push(`${curString}<${name}`, InjectType.AssetAttrs);
curString = "";
break;
case "link":
+ if (tag.attribs.href) {
+ if (curString) {
+ parts.push(curString);
+ curString = "";
+ }
+ isDedupe =
+ parts.push(
+ InjectType.Dedupe,
+ [tag.attribs.rel || "", tag.attribs.href, tag.attribs.as]
+ .filter((it) => it != null)
+ .join("#"),
+ 0,
+ ) - 1;
+ }
urlAttr = "href";
if (
tag.attribs.rel === "stylesheet" ||
@@ -60,10 +82,15 @@ export default function serialize(
tag.attribs.as === "style" ||
tag.attribs.as === "script"
) {
- parts.push(curString, InjectType.AssetAttrs);
+ parts.push(`${curString}<${name}`, InjectType.AssetAttrs);
curString = "";
+ } else {
+ curString += `<${name}`;
}
break;
+ default:
+ curString += `<${name}`;
+ break;
}
for (const attr of tag.attributes) {
@@ -99,6 +126,13 @@ export default function serialize(
if (!voidElements.has(name)) {
curString += ``;
}
+ if (isDedupe) {
+ if (curString) {
+ parts.push(curString);
+ curString = "";
+ }
+ parts[isDedupe] = parts.length - isDedupe - 1;
+ }
break;
}
diff --git a/src/server-entry-template.ts b/src/server-entry-template.ts
index 95ac225..92ecb87 100644
--- a/src/server-entry-template.ts
+++ b/src/server-entry-template.ts
@@ -12,22 +12,36 @@ export * from ${fileNameStr};
import { addAssets } from "${renderAssetsRuntimeId}";
$ const g = out.global;
-$ addAssets(g, [${opts.entryData.join(",")}]);
+$ const writeSync = addAssets(g, [${opts.entryData.join(",")}]);
-<__flush_here_and_after__>
+
$!{
g.___viteRenderAssets("head-prepend") +
g.___viteRenderAssets("head") +
g.___viteRenderAssets("body-prepend")
}
-
+
+
+ <__flush_here_and_after__>
+ $!{
+ g.___viteRenderAssets("head-prepend") +
+ g.___viteRenderAssets("head") +
+ g.___viteRenderAssets("body-prepend")
+ }
+
+
<\${template} ...input/>
-<__flush_here_and_after__>
+
$!{g.___viteRenderAssets("body")}
-
+
+
+ <__flush_here_and_after__>
+ $!{g.___viteRenderAssets("body")}
+
+
`;
};