feat: Add store option for linked mode builds (#40)

* feat: add store option for ssr-client state preservation

* fix: add test case

* fix: update readme

* fix: add store unit tests

* fix: remove non-supported entries option

* chore: add changeset

.changeset/dull-candles-brake.md

@@ -0,0 +1,5 @@
+---
+"@marko/vite": patch
+---
+
+Add store option for linked mode builds

README.md

@@ -118,6 +118,26 @@ marko({ runtimeId: "MY_MARKO_RUNTIME_ID" });
 
 Set this to `false` to opt out of [linked mode](#linked-mode). When this is false, the plugin will only handle resolving and transforming `.marko` files.
 
+### options.store
+
+Storage mechanism to preserve data between SSR and client builds when building in linked mode. Two implementations are available:
+
+- FileStore _(default)_
+
+  ```js
+  import { FileStore } from "@marko/vite";
+  const store = new FileStore();
+  ```
+
+  Reads/writes data to the file system. Use this when running the SSR and client builds in seperate processes such as when using Vite from the command line or npm scripts.
+
+- MemoryStore
+  ```js
+  import { MemoryStore } from "@marko/vite";
+  const store = new MemoryStore();
+  ```
+  Reads/writes data to memory. This option can be used when building with Vite programatically.
+
 ## Code of Conduct
 
 This project adheres to the [eBay Code of Conduct](./.github/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.

src/__tests__/fixtures/isomorphic-memory-store/__snapshots__/build.expected.loading.0.html

@@ -0,0 +1,9 @@
+<div
+  id="implicit"
+>
+  <div
+    id="clickable"
+  >
+    Mounted: false Clicks: 0
+  </div>
+</div>

src/__tests__/fixtures/isomorphic-memory-store/__snapshots__/build.expected.loading.1.html

@@ -0,0 +1,9 @@
+<div
+  id="implicit"
+>
+  <div
+    id="clickable"
+  >
+    Mounted: true Clicks: 0
+  </div>
+</div>

src/__tests__/fixtures/isomorphic-memory-store/__snapshots__/build.expected.step-0.0.html

@@ -0,0 +1,9 @@
+<div
+  id="implicit"
+>
+  <div
+    id="clickable"
+  >
+    Mounted: true Clicks: 1
+  </div>
+</div>

src/__tests__/fixtures/isomorphic-memory-store/__snapshots__/dev.expected.loading.0.html

@@ -0,0 +1,9 @@
+<div
+  id="implicit"
+>
+  <div
+    id="clickable"
+  >
+    Mounted: false Clicks: 0
+  </div>
+</div>

src/__tests__/fixtures/isomorphic-memory-store/__snapshots__/dev.expected.loading.1.html

@@ -0,0 +1,9 @@
+<div
+  id="implicit"
+>
+  <div
+    id="clickable"
+  >
+    Mounted: true Clicks: 0
+  </div>
+</div>

src/__tests__/fixtures/isomorphic-memory-store/__snapshots__/dev.expected.step-0.0.html

@@ -0,0 +1,9 @@
+<div
+  id="implicit"
+>
+  <div
+    id="clickable"
+  >
+    Mounted: true Clicks: 1
+  </div>
+</div>

src/__tests__/fixtures/isomorphic-memory-store/dev-server.js

@@ -0,0 +1,33 @@
+// In dev we'll start a Vite dev server in middleware mode,
+// and forward requests to our http request handler.
+
+const { createServer } = require("vite");
+const { join } = require("path");
+const markoPlugin = require("../../..").default;
+
+module.exports = (async () => {
+  const devServer = await createServer({
+    root: __dirname,
+    appType: "custom",
+    logLevel: "silent",
+    plugins: [markoPlugin()],
+    optimizeDeps: { force: true },
+    server: {
+      middlewareMode: true,
+      watch: {
+        ignored: ["**/node_modules/**", "**/dist/**", "**/__snapshots__/**"],
+      },
+    },
+  });
+  return devServer.middlewares.use(async (req, res, next) => {
+    try {
+      const { handler } = await devServer.ssrLoadModule(
+        join(__dirname, "./src/index.js")
+      );
+      await handler(req, res, next);
+    } catch (err) {
+      devServer.ssrFixStacktrace(err);
+      return next(err);
+    }
+  });
+})();

src/__tests__/fixtures/isomorphic-memory-store/server.js

@@ -0,0 +1,11 @@
+// In production, simply start up the http server.
+const path = require("path");
+const { createServer } = require("http");
+const serve = require("serve-handler");
+const { handler } = require("./dist/index.mjs");
+const serveOpts = { public: path.resolve(__dirname, "dist") };
+module.exports = createServer(async (req, res) => {
+  await handler(req, res);
+  if (res.headersSent) return;
+  await serve(req, res, serveOpts);
+});

src/__tests__/fixtures/isomorphic-memory-store/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++;
+  }
+}
+
+<div#clickable onClick("handleClick")>
+  Mounted: ${state.mounted}
+  Clicks: ${state.clickCount}
+</div>

src/__tests__/fixtures/isomorphic-memory-store/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>

src/__tests__/fixtures/isomorphic-memory-store/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>

src/__tests__/fixtures/isomorphic-memory-store/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);
+  }
+}

src/__tests__/fixtures/isomorphic-memory-store/src/template.marko

@@ -0,0 +1,9 @@
+style {
+  div { color: green }
+}
+
+<layout-component>
+  <div#app>
+    <implicit-component/>
+  </div>
+</layout-component>

src/__tests__/fixtures/isomorphic-memory-store/test.config.ts

@@ -0,0 +1,9 @@
+import { MemoryStore, type Options } from "../../..";
+
+export const ssr = true;
+export async function steps() {
+  await page.click("#clickable");
+}
+export const options: Options = {
+  store: new MemoryStore(),
+};

src/__tests__/main.test.ts

@@ -10,7 +10,7 @@ import { JSDOM } from "jsdom";
 import { createRequire } from "module";
 import * as playwright from "playwright";
 import { defaultNormalizer, defaultSerializer } from "@marko/fixture-snapshots";
-import markoPlugin from "..";
+import markoPlugin, { type Options } from "..";
 
 declare global {
   const page: playwright.Page;
@@ -84,6 +84,7 @@ for (const fixture of fs.readdirSync(FIXTURES)) {
     const config = requireCwd(path.join(dir, "test.config.ts")) as {
       ssr: boolean;
       steps?: Step | Step[];
+      options?: Options;
     };
     const steps: Step[] = config.steps
       ? Array.isArray(config.steps)
@@ -105,7 +106,7 @@ for (const fixture of fs.readdirSync(FIXTURES)) {
           root: dir,
           configFile: false,
           logLevel: "silent",
-          plugins: [markoPlugin()],
+          plugins: [markoPlugin(config.options)],
           build: {
             write: true,
             minify: false,
@@ -118,7 +119,7 @@ for (const fixture of fs.readdirSync(FIXTURES)) {
           root: dir,
           configFile: false,
           logLevel: "silent",
-          plugins: [markoPlugin()],
+          plugins: [markoPlugin(config.options)],
           build: {
             write: true,
             minify: false,
@@ -148,7 +149,7 @@ for (const fixture of fs.readdirSync(FIXTURES)) {
           },
           logLevel: "silent",
           optimizeDeps: { force: true },
-          plugins: [markoPlugin({ linked: false })],
+          plugins: [markoPlugin({ ...config.options, linked: false })],
         });
 
         devServer.listen(await getAvailablePort());
@@ -161,7 +162,7 @@ for (const fixture of fs.readdirSync(FIXTURES)) {
           root: dir,
           configFile: false,
           logLevel: "silent",
-          plugins: [markoPlugin({ linked: false })],
+          plugins: [markoPlugin({ ...config.options, linked: false })],
           build: {
             write: true,
             minify: false,