chore: refactor/combine runtime tests

package.json

@@ -56,7 +56,7 @@
     "size": "cross-env SIZE=1 rollup -c ./rollup.config.js && node ./utilities/sizes.js",
     "size:check": "cross-env CHECK=1 yarn size",
     "size:write": "cross-env WRITE=1 yarn size && git add .sizes.json",
-    "test": "cross-env MARKO_SOURCE_RUNTIME=1 TS_NODE_IGNORE='/node_modules/(?!@marko/)/' mocha --enable-source-maps -r ts-node/register --timeout 10000 packages/*/test/{*.test.ts,*/*.test.ts}",
+    "test": "cross-env MARKO_SOURCE_RUNTIME=1 TS_NODE_IGNORE='/node_modules/(?!@marko/)/' mocha --enable-source-maps -r ts-node/register --timeout 10000 packages/*/test/*.test.ts",
     "test:coverage": "nyc --reporter=text-summary yarn test",
     "test:watch": "yarn test --watch --watch-files '**/*.ts'"
   },

packages/runtime/test/dom/main.test.ts

@@ -1,26 +0,0 @@
-import fs from "fs";
-import path from "path";
-import snapshot from "../utils/snapshot";
-import renderAndTrackMutations from "./utils/render-and-track-mutations";
-
-const FIXTURES_DIR = path.join(__dirname, "./fixtures");
-
-process.on("unhandledRejection", (reason, p) => {
-  console.log("Unhandled Rejection at: Promise", p, "reason:", reason);
-});
-
-describe("DOM", () => {
-  fs.readdirSync(FIXTURES_DIR)
-    .filter(entry => !/\.skip$/.test(entry))
-    .map(entry => {
-      const testDir = path.join(FIXTURES_DIR, entry);
-      const testFile = path.join(testDir, "index.ts");
-      it(entry, async () => {
-        snapshot(
-          testDir,
-          "snapshot.md",
-          await renderAndTrackMutations(entry, testFile)
-        );
-      });
-    });
-});

packages/runtime/test/dom/utils/render-and-track-mutations.ts

@@ -1,114 +0,0 @@
-import createBrowser from "../../utils/create-browser";
-import createMutationTracker from "./track-mutations";
-import { wait, isWait } from "../../utils/resolve";
-
-const browser = createBrowser({
-  dir: __dirname,
-  html: ""
-});
-
-const window = browser.window;
-const document = window.document;
-
-const { createRenderFn, run } = browser.require(
-  "../../../src/dom/index"
-) as typeof import("../../../src/dom/index");
-
-interface Test {
-  wait?: number;
-  inputs: [
-    Record<string, unknown>,
-    ...Array<
-      | Record<string, unknown>
-      | ((container: Element) => void)
-      | ReturnType<typeof wait>
-    >
-  ];
-  default: ReturnType<typeof createRenderFn>;
-  html: string;
-  FAILS_HYDRATE?: boolean;
-}
-
-export default async function renderAndGetMutations(
-  id: string,
-  test: string
-): Promise<string> {
-  const { default: render, inputs } = browser.require(test) as Test;
-  const [firstInput] = inputs;
-  const container = Object.assign(document.createElement("div"), {
-    TEST_ROOT: true
-  });
-  const tracker = createMutationTracker(window, container);
-
-  document.body.appendChild(container);
-
-  try {
-    tracker.beginUpdate();
-
-    const instance = render(firstInput);
-    container.appendChild(instance);
-
-    // const initialHTML = container.innerHTML;
-    tracker.logUpdate(firstInput);
-
-    for (const update of inputs.slice(1)) {
-      if (isWait(update)) {
-        await update();
-      } else {
-        tracker.beginUpdate();
-        if (typeof update === "function") {
-          update(container);
-          run();
-        } else {
-          instance.update(update);
-        }
-        tracker.logUpdate(update);
-      }
-    }
-
-    // if (!FAILS_HYDRATE) {
-    //   const inputSignal = source(firstInput);
-    //   (window as any).M$c = [[0, id, dynamicKeys(inputSignal, renderer.input)]];
-    //   container.innerHTML = `<!M$0>${initialHTML}<!M$0/>`;
-    //   container.insertBefore(document.createTextNode(""), container.firstChild);
-    //   tracker.dropUpdate();
-    //   init();
-
-    //   tracker.logUpdate(firstInput);
-    //   const logs = tracker.getRawLogs();
-    //   logs[logs.length - 1] = "--- Hydrate ---\n" + logs[logs.length - 1];
-
-    //   // Hydrate should end up with the same html as client side render.
-    //   assert.equal(container.innerHTML, initialHTML);
-
-    //   // Run the same updates after hydrate and ensure the same mutations.
-    //   let resultIndex = 0;
-    //   for (const update of inputs.slice(1)) {
-    //     if (wait) {
-    //       await resolveAfter(null, wait);
-    //     }
-    //     if (typeof update === "function") {
-    //       update(container);
-    //     } else {
-    //       const batch = beginBatch();
-    //       set(inputSignal, update);
-    //       endBatch(batch);
-    //     }
-
-    //     assert.equal(
-    //       tracker.getUpdate(update),
-    //       tracker.getRawLogs()[++resultIndex]
-    //     );
-    //   }
-
-    //   if (wait) {
-    //     await resolveAfter(null, wait);
-    //   }
-    // }
-
-    return tracker.getLogs();
-  } finally {
-    tracker.cleanup();
-    document.body.removeChild(container);
-  }
-}

packages/runtime/test/end-to-end/main.test.ts

@@ -1,183 +0,0 @@
-import fs from "fs";
-import path from "path";
-import createBrowser from "../utils/create-browser";
-import { createRenderer } from "../../src/html/index";
-import reorderRuntime from "../../src/html/reorder-runtime";
-import { Writable } from "stream";
-import assert from "assert";
-import createTrackMutations from "../dom/utils/track-mutations";
-import snapshot from "../utils/snapshot";
-import { isWait } from "../utils/resolve";
-
-const FIXTURES_DIR = path.join(__dirname, "./fixtures");
-const runtimeId = "M";
-const reorderRuntimeString = String(reorderRuntime).replace(
-  "RUNTIME_ID",
-  runtimeId
-);
-
-describe("E2E", function () {
-  this.timeout(10000);
-  fs.readdirSync(FIXTURES_DIR)
-    .filter(entry => !/\.skip$/.test(entry))
-    .map(entry => {
-      const testDir = path.join(FIXTURES_DIR, entry);
-      const snapshotDir = path.join(testDir, "snapshots");
-      const serverFile = path.join(testDir, "server.ts");
-      const hydrateFile = path.join(testDir, "hydrate.ts");
-      const browserFile = path.join(testDir, "browser.ts");
-      const testFile = path.join(testDir, "test.ts");
-      describe(entry, () => {
-        let initialHTML: string;
-        let hydratedHTML: string;
-        it("server + hydrate", async () => {
-          const serverTemplate = require(serverFile);
-          const render = createRenderer(serverTemplate.default, true);
-
-          let buffer = "";
-          let flushCount = 0;
-
-          const browser = createBrowser({ dir: __dirname });
-          const test = browser.require(testFile);
-          const hydrateIndex = test.hydrateFlush;
-          const input = test.default[0];
-
-          const document = browser.window.document;
-
-          document.open();
-
-          const tracker = createTrackMutations(browser.window, document);
-
-          await render(input, {
-            write(data: string) {
-              buffer += data;
-              tracker.log(
-                `# Write\n${indent(
-                  data.replace(reorderRuntimeString, "REORDER_RUNTIME")
-                )}`
-              );
-            },
-            flush() {
-              if (hydrateIndex === flushCount++) {
-                browser.require(hydrateFile);
-                tracker.logUpdate("Hydrate");
-              }
-              // document.write(buffer);
-              // tracker.logUpdate("Flush");
-              // buffer = "";
-            },
-            end(data?: string) {
-              document.write(buffer + (data || ""));
-              document.close();
-              tracker.logUpdate("End");
-              if (hydrateIndex == null) {
-                browser.require(hydrateFile);
-                tracker.logUpdate("Hydrate");
-              }
-            },
-            emit(type, ...args: unknown[]) {
-              tracker.log(
-                `# Emit ${type}${args.map(arg => `\n${indent(arg)}`)}`
-              );
-            }
-          } as Writable & { flush(): void });
-
-          hydratedHTML = getNormalizedHtml(document.body);
-
-          const { run } = browser.require(
-            "../../src/dom/index"
-          ) as typeof import("../../src/dom/index");
-
-          for (const update of test.default) {
-            if (isWait(update)) {
-              await update();
-            } else if (typeof update === "function") {
-              update(document.documentElement);
-              run();
-              tracker.logUpdate(update);
-            }
-          }
-
-          snapshot(snapshotDir, "server-hydrate.md", tracker.getLogs());
-        });
-        it("client only", async () => {
-          const browser = createBrowser({ dir: __dirname });
-          const document = browser.window.document;
-          const test = browser.require(testFile);
-          const input = test.default[0];
-          const { run } = browser.require(
-            "../../src/dom/index"
-          ) as typeof import("../../src/dom/index");
-          const render = browser.require(browserFile).default;
-          const container = Object.assign(document.createElement("div"), {
-            TEST_ROOT: true
-          });
-          const tracker = createTrackMutations(browser.window, container);
-
-          document.body.appendChild(container);
-
-          const instance = await render(input);
-          container.appendChild(instance);
-
-          initialHTML = getNormalizedHtml(container);
-          tracker.logUpdate(input);
-
-          for (const update of test.default) {
-            if (isWait(update)) {
-              await update();
-            } else if (typeof update === "function") {
-              update(document.documentElement);
-              run();
-              tracker.logUpdate(update);
-            }
-          }
-
-          snapshot(snapshotDir, "client-only.md", tracker.getLogs());
-        });
-        it("hydrate = client", () => {
-          assert.strictEqual(hydratedHTML, initialHTML);
-        });
-      });
-    });
-});
-
-function indent(data: unknown) {
-  return String(data)
-    .split("\n")
-    .map(line => `  ${line}`)
-    .join("\n");
-}
-
-function getNormalizedHtml(container: Element) {
-  const clone = container.cloneNode(true) as Element;
-
-  const treeWalker = container.ownerDocument!.createTreeWalker(clone);
-  const nodesToRemove: ChildNode[] = [];
-
-  while (treeWalker.nextNode()) {
-    const node = treeWalker.currentNode;
-    if (node.nodeType === 8 || isIgnoredTag(node)) {
-      nodesToRemove.push(node as ChildNode);
-    } else if ((node as Element).tagName === "TEXTAREA") {
-      node.textContent = (node as HTMLTextAreaElement).value;
-    }
-  }
-
-  nodesToRemove.forEach(n => n.remove());
-  // clone.innerHTML = clone.innerHTML;
-  clone.normalize();
-
-  return clone.innerHTML.trim();
-}
-
-function isIgnoredTag(node) {
-  switch (node.tagName) {
-    case "LINK":
-    case "TITLE":
-    case "STYLE":
-    case "SCRIPT":
-      return true;
-    default:
-      return false;
-  }
-}

packages/runtime/test/fixtures/async-nested-resolve-in-order/server.ts

@@ -1,5 +1,5 @@
-import { write, fork } from "../../../../src/html/index";
-import { resolveAfter } from "../../../utils/resolve";
+import { write, fork } from "../../../src/html/index";
+import { resolveAfter } from "../../utils/resolve";
 
 const renderer = () => {
   write("a");

packages/runtime/test/fixtures/async-nested-resolve-in-order/snapshots/server-hydrate.expected.md

@@ -0,0 +1,41 @@
+# Write
+  <!M^ROOT>a
+
+
+# Write
+  b
+
+
+# Write
+  c
+
+
+# Write
+  defghi
+
+
+# Write
+  jkl<!M/ROOT>
+
+
+# Render "End"
+```html
+<!--M^ROOT-->
+<html>
+  <head />
+  <body>
+    abcdefghijkl
+    <!--M/ROOT-->
+  </body>
+</html>
+```
+
+# Mutations
+```
+inserted #document/#comment0
+inserted #document/html1
+inserted #document/html1/head0
+inserted #document/html1/body1
+inserted #document/html1/body1/#text0
+inserted #document/html1/body1/#comment1
+```

packages/runtime/test/fixtures/async-nested-resolve-in-order/test.ts

@@ -0,0 +1 @@
+export default [{}];

packages/runtime/test/fixtures/async-resolve-in-order/server.ts

@@ -1,5 +1,5 @@
-import { write, fork } from "../../../../src/html/index";
-import { resolveAfter } from "../../../utils/resolve";
+import { write, fork } from "../../../src/html/index";
+import { resolveAfter } from "../../utils/resolve";
 
 const renderer = () => {
   write("a");

packages/runtime/test/fixtures/async-resolve-in-order/snapshots/server-hydrate.expected.md

@@ -0,0 +1,33 @@
+# Write
+  <!M^ROOT>a
+
+
+# Write
+  bc
+
+
+# Write
+  de<!M/ROOT>
+
+
+# Render "End"
+```html
+<!--M^ROOT-->
+<html>
+  <head />
+  <body>
+    abcde
+    <!--M/ROOT-->
+  </body>
+</html>
+```
+
+# Mutations
+```
+inserted #document/#comment0
+inserted #document/html1
+inserted #document/html1/head0
+inserted #document/html1/body1
+inserted #document/html1/body1/#text0
+inserted #document/html1/body1/#comment1
+```

packages/runtime/test/fixtures/async-resolve-in-order/test.ts

@@ -0,0 +1 @@
+export default [{}];

packages/runtime/test/fixtures/async-resolve-out-of-order/server.ts

@@ -1,5 +1,5 @@
-import { write, fork } from "../../../../src/html/index";
-import { resolveAfter } from "../../../utils/resolve";
+import { write, fork } from "../../../src/html/index";
+import { resolveAfter } from "../../utils/resolve";
 
 const renderer = () => {
   write("a");

packages/runtime/test/fixtures/async-resolve-out-of-order/snapshots/server-hydrate.expected.md

@@ -0,0 +1,29 @@
+# Write
+  <!M^ROOT>a
+
+
+# Write
+  bcde<!M/ROOT>
+
+
+# Render "End"
+```html
+<!--M^ROOT-->
+<html>
+  <head />
+  <body>
+    abcde
+    <!--M/ROOT-->
+  </body>
+</html>
+```
+
+# Mutations
+```
+inserted #document/#comment0
+inserted #document/html1
+inserted #document/html1/head0
+inserted #document/html1/body1
+inserted #document/html1/body1/#text0
+inserted #document/html1/body1/#comment1
+```

packages/runtime/test/fixtures/async-resolve-out-of-order/test.ts

@@ -0,0 +1 @@
+export default [{}];

packages/runtime/test/fixtures/basic-counter/browser.ts

@@ -7,8 +7,8 @@ import {
   queue,
   write,
   bind
-} from "../../../../src/dom/index";
-import { get, next, open, close } from "../../../dom/utils/walks";
+} from "../../../src/dom/index";
+import { get, next, open, close } from "../../utils/walks";
 
 const enum Index {
   BUTTON = 0,
@@ -28,8 +28,7 @@ type scope = {
 export const template = `<button> </button>`;
 export const walks = open(3) + get + next(1) + get + next(1) + close;
 export const render = () => {
-  write(Index.CLICK_COUNT, 0);
-  renderClickCount();
+  renderClickCount(0);
   hydrate();
 };
 
@@ -37,19 +36,18 @@ export const hydrate = () => {
   on(Index.BUTTON, "click", bind(clickHandler));
 };
 
-const renderClickCount = () => {
-  data(Index.BUTTON_TEXT, read<scope, Index.CLICK_COUNT>(Index.CLICK_COUNT));
+const renderClickCount = value => {
+  if (write(Index.CLICK_COUNT, value)) {
+    data(Index.BUTTON_TEXT, value);
+  }
 };
 
 const clickHandler = () => {
-  if (
-    write(
-      Index.CLICK_COUNT,
-      read<scope, Index.CLICK_COUNT>(Index.CLICK_COUNT) + 1
-    )
-  ) {
-    queue(renderClickCount);
-  }
+  queue(
+    renderClickCount,
+    Index.CLICK_COUNT,
+    read<scope, Index.CLICK_COUNT>(Index.CLICK_COUNT) + 1
+  );
 };
 
 export default createRenderFn(template, walks, render, 0);

packages/runtime/test/fixtures/basic-counter/hydrate.ts

@@ -1,4 +1,4 @@
-import { init, register } from "../../../../src/dom/index";
+import { init, register } from "../../../src/dom/index";
 import { hydrate } from "./browser";
 
 register("counter", hydrate);

packages/runtime/test/fixtures/basic-counter/server.ts

@@ -1,5 +1,5 @@
-import { Scope } from "../../../../src/common/types";
-import { write, markScopeOffset, hydrateFunction } from "../../../../src/html";
+import { Scope } from "../../../src/common/types";
+import { write, markScopeOffset, hydrateFunction } from "../../../src/html";
 
 export default (
   _input: unknown,

packages/runtime/test/fixtures/batched-updates-cleanup/browser.ts

@@ -12,7 +12,7 @@ import {
   bind,
   readInOwner,
   queueInBranch
-} from "../../../../src/dom/index";
+} from "../../../src/dom/index";
 
 import { get, next, over, open, close } from "../../utils/walks";
 

packages/runtime/test/fixtures/batched-updates-cleanup/test.ts

@@ -0,0 +1,2 @@
+import { inputs } from "./browser";
+export default inputs;

packages/runtime/test/fixtures/batched-updates/browser.ts

@@ -8,7 +8,7 @@ import {
   bind,
   read,
   write
-} from "../../../../src/dom/index";
+} from "../../../src/dom/index";
 import { get, next, open, close } from "../../utils/walks";
 
 const click = (container: Element) => {

packages/runtime/test/fixtures/batched-updates/test.ts

@@ -0,0 +1,2 @@
+import { inputs } from "./browser";
+export default inputs;

packages/runtime/test/fixtures/catch-single-reject-async/server.ts

@@ -1,5 +1,5 @@
-import { tryCatch, write, fork } from "../../../../src/html/index";
-import { resolveAfter, rejectAfter } from "../../../utils/resolve";
+import { tryCatch, write, fork } from "../../../src/html/index";
+import { resolveAfter, rejectAfter } from "../../utils/resolve";
 
 const renderer = () => {
   write("a");

packages/runtime/test/fixtures/catch-single-reject-async/snapshots/server-hydrate.expected.md

@@ -0,0 +1,48 @@
+# Write
+  <!M^ROOT>a<!M$0>b
+
+
+# Write
+  d<!M$0/>efg<!M/ROOT>
+
+
+# Write
+  <t id="M$0">ERROR!</t><script>(M$r=REORDER_RUNTIME)(0)</script>
+
+
+# Render "End"
+```html
+<!--M^ROOT-->
+<html>
+  <head />
+  <body>
+    aERROR!efg
+    <!--M/ROOT-->
+  </body>
+</html>
+```
+
+# Mutations
+```
+inserted #document/#comment0
+inserted #document/html1
+inserted #document/html1/head0
+inserted #document/html1/body1
+inserted #document/html1/body1/#text0
+inserted #comment
+inserted #text
+inserted #comment
+inserted #document/html1/body1/#text2
+inserted #document/html1/body1/#comment3
+inserted t
+inserted #document/html1/body1/#text1
+inserted script
+inserted script/#text0
+removed #document/html1/body1/#text1 in t
+inserted #document/html1/body1/#text1
+removed script after t
+removed t after #document/html1/body1/#comment3
+removed #comment after #document/html1/body1/#text1
+removed #text after #document/html1/body1/#text1
+removed #comment after #document/html1/body1/#text1
+```

packages/runtime/test/fixtures/catch-single-reject-async/test.ts

@@ -0,0 +1 @@
+export default [{}];

packages/runtime/test/fixtures/catch-single-success-async/server.ts

@@ -1,5 +1,5 @@
-import { tryCatch, write, fork } from "../../../../src/html/index";
-import { resolveAfter } from "../../../utils/resolve";
+import { tryCatch, write, fork } from "../../../src/html/index";
+import { resolveAfter } from "../../utils/resolve";
 
 const renderer = () => {
   write("a");

packages/runtime/test/fixtures/catch-single-success-async/snapshots/server-hydrate.expected.md

@@ -0,0 +1,37 @@
+# Write
+  <!M^ROOT>a<!M$0>b
+
+
+# Write
+  cd<!M$0/>fgh<!M/ROOT>
+
+
+# Render "End"
+```html
+<!--M^ROOT-->
+<html>
+  <head />
+  <body>
+    a
+    <!--M$0-->
+    bcd
+    <!--M$0/-->
+    fgh
+    <!--M/ROOT-->
+  </body>
+</html>
+```
+
+# Mutations
+```
+inserted #document/#comment0
+inserted #document/html1
+inserted #document/html1/head0
+inserted #document/html1/body1
+inserted #document/html1/body1/#text0
+inserted #document/html1/body1/#comment1
+inserted #document/html1/body1/#text2
+inserted #document/html1/body1/#comment3
+inserted #document/html1/body1/#text4
+inserted #document/html1/body1/#comment5
+```

packages/runtime/test/fixtures/catch-single-success-async/test.ts

@@ -0,0 +1 @@
+export default [{}];

packages/runtime/test/fixtures/catch-single-success-sync/server.ts

@@ -1,4 +1,4 @@
-import { tryCatch, write } from "../../../../src/html/index";
+import { tryCatch, write } from "../../../src/html/index";
 
 const renderer = () => {
   write("a");

packages/runtime/test/fixtures/catch-single-success-sync/snapshots/server-hydrate.expected.md

@@ -0,0 +1,25 @@
+# Write
+  <!M^ROOT>abc<!M/ROOT>
+
+
+# Render "End"
+```html
+<!--M^ROOT-->
+<html>
+  <head />
+  <body>
+    abc
+    <!--M/ROOT-->
+  </body>
+</html>
+```
+
+# Mutations
+```
+inserted #document/#comment0
+inserted #document/html1
+inserted #document/html1/head0
+inserted #document/html1/body1
+inserted #document/html1/body1/#text0
+inserted #document/html1/body1/#comment1
+```

packages/runtime/test/fixtures/catch-single-success-sync/test.ts

@@ -0,0 +1 @@
+export default [{}];

packages/runtime/test/fixtures/catch-single-throw-sync/server.ts

@@ -1,4 +1,4 @@
-import { tryCatch, write } from "../../../../src/html/index";
+import { tryCatch, write } from "../../../src/html/index";
 
 const renderer = () => {
   write("a");

packages/runtime/test/fixtures/catch-single-throw-sync/snapshots/server-hydrate.expected.md

@@ -0,0 +1,25 @@
+# Write
+  <!M^ROOT>aERROR!d<!M/ROOT>
+
+
+# Render "End"
+```html
+<!--M^ROOT-->
+<html>
+  <head />
+  <body>
+    aERROR!d
+    <!--M/ROOT-->
+  </body>
+</html>
+```
+
+# Mutations
+```
+inserted #document/#comment0
+inserted #document/html1
+inserted #document/html1/head0
+inserted #document/html1/body1
+inserted #document/html1/body1/#text0
+inserted #document/html1/body1/#comment1
+```

packages/runtime/test/fixtures/catch-single-throw-sync/test.ts

@@ -0,0 +1 @@
+export default [{}];

packages/runtime/test/fixtures/component-markers-async.skip/server.ts

@@ -0,0 +1,21 @@
+import { write, fork } from "../../../src/html/index";
+import { resolveAfter } from "../../utils/resolve";
+
+const renderer = () => {
+  firstComponent();
+  secondComponent();
+};
+
+const firstComponent = () => {
+  write("x");
+  write("y");
+  write("z");
+};
+
+const secondComponent = () => {
+  write("a");
+  fork(resolveAfter("b", 1), write);
+  fork(resolveAfter("c", 2), write);
+};
+
+export default renderer;

packages/runtime/test/fixtures/component-markers-async.skip/test.ts

@@ -0,0 +1 @@
+export default [{}];

packages/runtime/test/fixtures/component-markers-placeholder.skip/server.ts

@@ -1,10 +1,5 @@
-import {
-  write,
-  fork,
-  tryPlaceholder,
-  register
-} from "../../../../src/html/index";
-import { resolveAfter } from "../../../utils/resolve";
+import { write, fork, tryPlaceholder } from "../../../src/html/index";
+import { resolveAfter } from "../../utils/resolve";
 
 const renderer = () => {
   firstComponent({});

packages/runtime/test/fixtures/component-markers-placeholder.skip/test.ts

@@ -0,0 +1 @@
+export default [{}];

packages/runtime/test/fixtures/component-markers-sibling-forks.skip/server.ts

@@ -1,5 +1,5 @@
-import { write, fork, register } from "../../../../src/html/index";
-import { resolveAfter } from "../../../utils/resolve";
+import { write, fork, register } from "../../../src/html/index";
+import { resolveAfter } from "../../utils/resolve";
 
 const renderer = () => {
   firstComponent({});

packages/runtime/test/fixtures/component-markers-sibling-forks.skip/test.ts

@@ -0,0 +1 @@
+export default [{}];

packages/runtime/test/fixtures/component-markers-sync.skip/server.ts

@@ -1,4 +1,4 @@
-import { write, register } from "../../../../src/html/index";
+import { write } from "../../../src/html/index";
 
 const renderer = () => {
   firstComponent({});

packages/runtime/test/fixtures/component-markers-sync.skip/test.ts

@@ -0,0 +1 @@
+export default [{}];

packages/runtime/test/fixtures/create-and-clear-rows-loop-from/browser.ts

@@ -5,7 +5,7 @@ import {
   createRenderFn,
   write,
   read
-} from "../../../../src/dom/index";
+} from "../../../src/dom/index";
 import { over, get, next, open, close, skip } from "../../utils/walks";
 
 export const inputs = [

packages/runtime/test/fixtures/create-and-clear-rows-loop-from/test.ts

@@ -0,0 +1,2 @@
+import { inputs } from "./browser";
+export default inputs;

packages/runtime/test/fixtures/create-and-clear-rows-loop-in/browser.ts

@@ -5,7 +5,7 @@ import {
   setLoopIn,
   createRenderer,
   createRenderFn
-} from "../../../../src/dom/index";
+} from "../../../src/dom/index";
 import { over, get, next, open, close, skip } from "../../utils/walks";
 
 export const inputs = [

packages/runtime/test/fixtures/create-and-clear-rows-loop-in/test.ts

@@ -0,0 +1,2 @@
+import { inputs } from "./browser";
+export default inputs;

packages/runtime/test/fixtures/create-and-clear-rows/browser.ts

@@ -5,7 +5,7 @@ import {
   setLoopOf,
   createRenderer,
   createRenderFn
-} from "../../../../src/dom/index";
+} from "../../../src/dom/index";
 import { next, over, get, open, close, skip } from "../../utils/walks";
 
 export const inputs = [

packages/runtime/test/fixtures/create-and-clear-rows/test.ts

@@ -0,0 +1,2 @@
+import { inputs } from "./browser";
+export default inputs;

packages/runtime/test/fixtures/dynamic-tag.skip/test.ts

@@ -0,0 +1,2 @@
+import { inputs } from "./browser";
+export default inputs;

packages/runtime/test/fixtures/error-async/server.ts

@@ -1,5 +1,5 @@
-import { write, fork } from "../../../../src/html/index";
-import { rejectAfter } from "../../../utils/resolve";
+import { write, fork } from "../../../src/html/index";
+import { rejectAfter } from "../../utils/resolve";
 
 const renderer = () => {
   write("a");

packages/runtime/test/fixtures/error-async/snapshots/server-hydrate.expected.md

@@ -0,0 +1,33 @@
+# Write
+  <!M^ROOT>a
+
+
+# Write
+  b<!M/ROOT>
+
+
+# Emit error
+  Error: ERROR!
+
+
+# Render "End"
+```html
+<!--M^ROOT-->
+<html>
+  <head />
+  <body>
+    ab
+    <!--M/ROOT-->
+  </body>
+</html>
+```
+
+# Mutations
+```
+inserted #document/#comment0
+inserted #document/html1
+inserted #document/html1/head0
+inserted #document/html1/body1
+inserted #document/html1/body1/#text0
+inserted #document/html1/body1/#comment1
+```

packages/runtime/test/fixtures/error-async/test.ts

@@ -0,0 +1 @@
+export default [{}];

packages/runtime/test/fixtures/error-sync/server.ts

@@ -1,4 +1,4 @@
-import { write } from "../../../../src/html/index";
+import { write } from "../../../src/html/index";
 
 const renderer = () => {
   write("a");

packages/runtime/test/fixtures/error-sync/snapshots/server-hydrate.expected.md

@@ -0,0 +1,27 @@
+# Write
+  <!M^ROOT>a
+
+
+# Emit error
+  Error: ERROR!
+
+
+# Render "End"
+```html
+<!--M^ROOT-->
+<html>
+  <head />
+  <body>
+    a
+  </body>
+</html>
+```
+
+# Mutations
+```
+inserted #document/#comment0
+inserted #document/html1
+inserted #document/html1/head0
+inserted #document/html1/body1
+inserted #document/html1/body1/#text0
+```

packages/runtime/test/fixtures/error-sync/test.ts

@@ -0,0 +1 @@
+export default [{}];

packages/runtime/test/fixtures/event-handler-read-mutation.skip/test.ts

@@ -0,0 +1,2 @@
+import { inputs } from "./browser";
+export default inputs;

packages/runtime/test/fixtures/event-handlers/browser.ts

@@ -1,6 +1,5 @@
 import {
   data,
-  register,
   createRenderFn,
   on,
   read,
@@ -8,7 +7,7 @@ import {
   queue,
   write,
   bind
-} from "../../../../src/dom/index";
+} from "../../../src/dom/index";
 import { get, next, open, close } from "../../utils/walks";
 
 const click = (container: Element) => {
@@ -20,13 +19,15 @@ export const inputs = [{}, click, click, click] as const;
 const enum Index {
   BUTTON = 0,
   BUTTON_TEXT = 1,
-  CLICK_COUNT = 2
+  CLICK_COUNT = 2,
+  EVENT_HANDLER = 3
 }
 
 type scope = {
   [Index.BUTTON]: HTMLButtonElement;
   [Index.BUTTON_TEXT]: Text;
   [Index.CLICK_COUNT]: number;
+  [Index.EVENT_HANDLER]: false | (() => void);
 };
 
 // <let/clickCount = 0/>
@@ -35,43 +36,36 @@ type scope = {
 export const template = `<button> </button>`;
 export const walks = open(3) + get + next(1) + get + next(1) + close;
 export const render = () => {
-  write(Index.CLICK_COUNT, 0);
-  renderClickCount();
-  hydrate();
+  execClickCount(0);
 };
 
-export const hydrate = register("", () => {
-  hydrateClickCount();
-});
-
-const renderClickCount = () => {
-  data(Index.BUTTON_TEXT, read<scope, Index.CLICK_COUNT>(Index.CLICK_COUNT));
+const execClickCount = (value: scope[Index.CLICK_COUNT]) => {
+  if (write(Index.CLICK_COUNT, value)) {
+    data(Index.BUTTON_TEXT, value);
+    execClickHandler(value <= 1 ? bind(clickHandler) : false);
+  }
 };
 
-const hydrateClickCount = () => {
+const execClickHandler = (value: scope[Index.EVENT_HANDLER]) => {
+  if (write(Index.EVENT_HANDLER, value)) {
+    attachEventHandler();
+  }
+};
+
+export const attachEventHandler = () => {
   on(
     Index.BUTTON,
     "click",
-    read<scope, Index.CLICK_COUNT>(Index.CLICK_COUNT) <= 1
-      ? bind(clickHandler)
-      : false
+    read<scope, Index.EVENT_HANDLER>(Index.EVENT_HANDLER)
   );
 };
 
-const execClickCount = () => {
-  renderClickCount();
-  hydrateClickCount();
-};
-
 const clickHandler = () => {
-  if (
-    write(
-      Index.CLICK_COUNT,
-      read<scope, Index.CLICK_COUNT>(Index.CLICK_COUNT) + 1
-    )
-  ) {
-    queue(execClickCount);
-  }
+  queue(
+    execClickCount as any,
+    Index.CLICK_COUNT,
+    read<scope, Index.CLICK_COUNT>(Index.CLICK_COUNT) + 1
+  );
 };
 
 export default createRenderFn(template, walks, render, 0);

packages/runtime/test/fixtures/event-handlers/test.ts

@@ -0,0 +1,2 @@
+import { inputs } from "./browser";
+export default inputs;

packages/runtime/test/fixtures/move-and-clear-children/browser.ts

@@ -5,7 +5,7 @@ import {
   setLoopOf,
   createRenderer,
   createRenderFn
-} from "../../../../src/dom/index";
+} from "../../../src/dom/index";
 import { open, close, get, next, over, skip } from "../../utils/walks";
 
 export const inputs = [

packages/runtime/test/fixtures/move-and-clear-children/test.ts

@@ -0,0 +1,2 @@
+import { inputs } from "./browser";
+export default inputs;

packages/runtime/test/fixtures/move-and-clear-top-level/browser.ts

@@ -5,7 +5,7 @@ import {
   setLoopOf,
   createRenderer,
   createRenderFn
-} from "../../../../src/dom/index";
+} from "../../../src/dom/index";
 import { open, close, next, over, get, skip } from "../../utils/walks";
 
 export const inputs = [

packages/runtime/test/fixtures/move-and-clear-top-level/test.ts

@@ -0,0 +1,2 @@
+import { inputs } from "./browser";
+export default inputs;

packages/runtime/test/fixtures/placeholder-context/server.ts

@@ -2,9 +2,9 @@ import {
   pushContext,
   popContext,
   getInContext
-} from "../../../../src/common/context";
-import { tryPlaceholder, write, fork } from "../../../../src/html/index";
-import { resolveAfter } from "../../../utils/resolve";
+} from "../../../src/common/context";
+import { tryPlaceholder, write, fork } from "../../../src/html/index";
+import { resolveAfter } from "../../utils/resolve";
 
 const k = "KEY";
 const renderer = () => {

packages/runtime/test/fixtures/placeholder-context/snapshots/server-hydrate.expected.md

@@ -0,0 +1,50 @@
+# Write
+  <!M^ROOT>a<!M$0>e...<!M$0/>f
+
+
+# Write
+  gh
+  context cleared<!M/ROOT>
+
+
+# Write
+  <t id="M$0">bc2d</t><script>(M$r=REORDER_RUNTIME)(0)</script>
+
+
+# Render "End"
+```html
+<!--M^ROOT-->
+<html>
+  <head />
+  <body>
+    abc2dfgh
+context cleared
+    <!--M/ROOT-->
+  </body>
+</html>
+```
+
+# Mutations
+```
+inserted #document/#comment0
+inserted #document/html1
+inserted #document/html1/head0
+inserted #document/html1/body1
+inserted #document/html1/body1/#text0
+inserted #comment
+inserted #text
+inserted #comment
+inserted #document/html1/body1/#text2
+inserted #document/html1/body1/#comment3
+inserted t
+inserted #document/html1/body1/#text1
+inserted script
+inserted script/#text0
+removed #document/html1/body1/#text1 in t
+inserted #document/html1/body1/#text1
+removed script after t
+removed t after #document/html1/body1/#comment3
+removed #comment after #document/html1/body1/#text1
+removed #text after #document/html1/body1/#text1
+removed #comment after #document/html1/body1/#text1
+```

packages/runtime/test/fixtures/placeholder-context/test.ts

@@ -0,0 +1 @@
+export default [{}];

packages/runtime/test/fixtures/placeholder-single/server.ts

@@ -1,5 +1,5 @@
-import { tryPlaceholder, write, fork } from "../../../../src/html/index";
-import { resolveAfter } from "../../../utils/resolve";
+import { tryPlaceholder, write, fork } from "../../../src/html/index";
+import { resolveAfter } from "../../utils/resolve";
 
 const renderer = () => {
   write("a");

packages/runtime/test/fixtures/placeholder-single/snapshots/server-hydrate.expected.md

@@ -0,0 +1,48 @@
+# Write
+  <!M^ROOT>a<!M$0>e...<!M$0/>f
+
+
+# Write
+  gh<!M/ROOT>
+
+
+# Write
+  <t id="M$0">bcd</t><script>(M$r=REORDER_RUNTIME)(0)</script>
+
+
+# Render "End"
+```html
+<!--M^ROOT-->
+<html>
+  <head />
+  <body>
+    abcdfgh
+    <!--M/ROOT-->
+  </body>
+</html>
+```
+
+# Mutations
+```
+inserted #document/#comment0
+inserted #document/html1
+inserted #document/html1/head0
+inserted #document/html1/body1
+inserted #document/html1/body1/#text0
+inserted #comment
+inserted #text
+inserted #comment
+inserted #document/html1/body1/#text2
+inserted #document/html1/body1/#comment3
+inserted t
+inserted #document/html1/body1/#text1
+inserted script
+inserted script/#text0
+removed #document/html1/body1/#text1 in t
+inserted #document/html1/body1/#text1
+removed script after t
+removed t after #document/html1/body1/#comment3
+removed #comment after #document/html1/body1/#text1
+removed #text after #document/html1/body1/#text1
+removed #comment after #document/html1/body1/#text1
+```

packages/runtime/test/fixtures/placeholder-single/test.ts

@@ -0,0 +1 @@
+export default [{}];

packages/runtime/test/fixtures/placeholder-skipped/server.ts

@@ -1,5 +1,5 @@
-import { tryPlaceholder, write, fork } from "../../../../src/html/index";
-import { resolveAfter } from "../../../utils/resolve";
+import { tryPlaceholder, write, fork } from "../../../src/html/index";
+import { resolveAfter } from "../../utils/resolve";
 
 const renderer = () => {
   write("a");

packages/runtime/test/fixtures/placeholder-skipped/snapshots/server-hydrate.expected.md

@@ -0,0 +1,29 @@
+# Write
+  <!M^ROOT>abd
+
+
+# Write
+  ef<!M/ROOT>
+
+
+# Render "End"
+```html
+<!--M^ROOT-->
+<html>
+  <head />
+  <body>
+    abdef
+    <!--M/ROOT-->
+  </body>
+</html>
+```
+
+# Mutations
+```
+inserted #document/#comment0
+inserted #document/html1
+inserted #document/html1/head0
+inserted #document/html1/body1
+inserted #document/html1/body1/#text0
+inserted #document/html1/body1/#comment1
+```

packages/runtime/test/fixtures/placeholder-skipped/test.ts

@@ -0,0 +1 @@
+export default [{}];

packages/runtime/test/fixtures/placeholders-nested/server.ts

@@ -1,5 +1,5 @@
-import { tryPlaceholder, write, fork } from "../../../../src/html/index";
-import { resolveAfter } from "../../../utils/resolve";
+import { tryPlaceholder, write, fork } from "../../../src/html/index";
+import { resolveAfter } from "../../utils/resolve";
 
 const renderer = () => {
   write("a");

packages/runtime/test/fixtures/placeholders-nested/snapshots/server-hydrate.expected.md

@@ -0,0 +1,72 @@
+# Write
+  <!M^ROOT>a<!M$1>i...<!M$1/>j
+
+
+# Write
+  kl<!M/ROOT>
+
+
+# Write
+  <t id="M$1">bcd<!M$0>h...<!M$0/></t><script>(M$r=REORDER_RUNTIME)(1)</script>
+
+
+# Write
+  <t id="M$0">efg</t><script>M$r(0)</script>
+
+
+# Render "End"
+```html
+<!--M^ROOT-->
+<html>
+  <head />
+  <body>
+    abcdefgjkl
+    <!--M/ROOT-->
+  </body>
+</html>
+```
+
+# Mutations
+```
+inserted #document/#comment0
+inserted #document/html1
+inserted #document/html1/head0
+inserted #document/html1/body1
+inserted #document/html1/body1/#text0
+inserted #comment
+inserted #text
+inserted #comment
+inserted #document/html1/body1/#text3
+inserted #document/html1/body1/#comment4
+inserted t
+inserted #document/html1/body1/#text1
+inserted #comment
+inserted #text
+inserted #comment
+inserted script
+inserted script/#text0
+removed #document/html1/body1/#text1 before #comment
+inserted #document/html1/body1/#text1
+removed #comment before #text
+inserted #comment
+removed #text before #comment
+inserted #text
+removed #comment in t
+inserted #comment
+removed script after t
+removed t after #document/html1/body1/#comment4
+removed #comment after #comment
+removed #text after #comment
+removed #comment after #comment
+inserted t
+inserted #document/html1/body1/#text2
+inserted script
+inserted script/#text0
+removed #document/html1/body1/#text2 in t
+inserted #document/html1/body1/#text2
+removed script after t
+removed t after #document/html1/body1/#comment4
+removed #comment after #document/html1/body1/#text2
+removed #text after #document/html1/body1/#text2
+removed #comment after #document/html1/body1/#text2
+```

packages/runtime/test/fixtures/placeholders-nested/test.ts

@@ -0,0 +1 @@
+export default [{}];

packages/runtime/test/fixtures/remove-and-add-rows/browser.ts

@@ -5,7 +5,7 @@ import {
   setLoopOf,
   createRenderer,
   createRenderFn
-} from "../../../../src/dom/index";
+} from "../../../src/dom/index";
 import { get, next, open, close, skip } from "../../utils/walks";
 
 export const inputs = [

packages/runtime/test/fixtures/remove-and-add-rows/test.ts

@@ -0,0 +1,2 @@
+import { inputs } from "./browser";
+export default inputs;

packages/runtime/test/fixtures/switch-adjacent-only-children/browser.ts

@@ -5,7 +5,7 @@ import {
   setLoopOf,
   createRenderer,
   createRenderFn
-} from "../../../../src/dom/index";
+} from "../../../src/dom/index";
 import { get, next, open, close, skip } from "../../utils/walks";
 
 export const inputs = [

packages/runtime/test/fixtures/switch-adjacent-only-children/test.ts

@@ -0,0 +1,2 @@
+import { inputs } from "./browser";
+export default inputs;

packages/runtime/test/fixtures/toggle-context.skip/test.ts

@@ -0,0 +1,2 @@
+import { inputs } from "./browser";
+export default inputs;