@lukekaalim/act-web 4.0.0 → 5.1.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @lukekaalim/act-web
 
+## 5.1.0
+
+### Minor Changes
+
+- Improve debugger support
+
+### Patch Changes
+
+- Updated dependencies
+  - @lukekaalim/act-recon@4.0.0
+  - @lukekaalim/act@4.2.0
+  - @lukekaalim/act-backstage@3.1.1
+
+## 5.0.0
+
+### Major Changes
+
+- bcbd299: SSR API for @lukekaalim/act-web
+
+### Minor Changes
+
+- beec21c: Fixed Web text element rehydration, remove nodejs dependencies from dehydration
+
+### Patch Changes
+
+- Updated dependencies [bcbd299]
+- Updated dependencies [beec21c]
+  - @lukekaalim/act-backstage@3.1.0
+  - @lukekaalim/act-recon@3.1.0
+  - @lukekaalim/act@4.1.0
+
 ## 4.0.0
 
 ### Major Changes

package/dehydrate.ts

@@ -0,0 +1,107 @@
+import { Reconciler2, Scheduler } from '@lukekaalim/act-recon';
+import { Root } from 'hast';
+import { createHASTBuilder } from './hast';
+import { RenderSpace2 } from '@lukekaalim/act-backstage';
+import { ContextID, createElement, Element, h, Node, primitiveNodeTypes, specialNodeTypes } from '@lukekaalim/act';
+import { HTML } from './space';
+import { createTickScheduler } from './nodejs/TickScheduler';
+import {
+  DehydratedCommit, RehydratableComponent, RehydratableProps, 
+  serializeSSRContext, SSRContext, ssrSymbolToStringMap
+} from './ssr';
+
+export const dehydrate = async (
+  node: Node,
+  scheduler: Scheduler,
+  targets: { [key: string]: RehydratableComponent }
+) => {
+  const reverseTargetMap = new Map<RehydratableComponent, string>(
+    Object.entries(targets).map(([key, component]) => [component, key])
+  )
+
+  const root: Root = { type: 'root', children: [] }
+
+  const reconciler = new Reconciler2(scheduler);
+  const space = new RenderSpace2(reconciler.tree, createHASTBuilder(root));
+  reconciler.bus = space.bus;
+
+  const ssrContext: SSRContext = {
+    components: new Map(),
+    contexts: new Map(),
+    commits: new Map(),
+    commitIdRemap: new Map(),
+    mounts: [],
+
+    mode: 'server',
+    contextCommitID: null,
+    readyForServer() {}
+  };
+  const readyPromise = new Promise<void>(resolve => {
+    ssrContext.readyForServer = resolve
+  });
+  reconciler.mount(createElement(HTML, {}, h(SSRContext.Provider, { value: ssrContext }, node)));
+
+  // Either use the user-provided promise,
+  // or just wait until we finish rendering
+  await readyPromise;
+  
+  const serializeElementType = (element: Element) => {
+    switch (typeof element.type) {
+      case 'symbol':
+        return ssrSymbolToStringMap[element.type] || 'special:unknown';
+      case 'function':
+        if (reverseTargetMap.has(element.type as RehydratableComponent))
+          return 'special:target:' + reverseTargetMap.get(element.type as RehydratableComponent) as string;
+        return 'special:placeholder';
+      case 'string':
+        return element.type;
+      default:
+        throw new Error(`Cannot serialize element type "${typeof element.type}"`);
+    }
+  }
+
+  for (const commit of  reconciler.tree.commits.values()) {
+    const dehydrated: DehydratedCommit = {
+      id: commit.ref.id,
+      elementType: serializeElementType(commit.element),
+      parent: commit.ref.parent && commit.ref.parent.id || null,
+      key: commit.element.props['key'] as string || null,
+      children: commit.children.map(ref => ref.id),
+      distance: commit.ref.length,
+      props: [],
+    };
+    if (commit.element.type === specialNodeTypes.render) {
+      dehydrated.props.push(['type', commit.element.props.type as string])
+    }
+    switch (commit.element.type) {
+      case primitiveNodeTypes.number:
+      case primitiveNodeTypes.string:
+      case primitiveNodeTypes.null:
+      case primitiveNodeTypes.boolean:
+        dehydrated.props.push(['value', commit.element.props.value as string])
+        break;
+      default:
+        break;
+    }
+    if (commit.element.type === specialNodeTypes.provider) {
+      if (commit.element.props.id as ContextID === SSRContext.id) {
+        ssrContext.contextCommitID = commit.ref.id;
+      }
+    }
+    if (reverseTargetMap.has(commit.element.type as RehydratableComponent)) {
+      const name = reverseTargetMap.get(commit.element.type as RehydratableComponent) as string;
+
+      dehydrated.elementType = `special:mount:${name}`
+      const props = commit.element.props as RehydratableProps;
+      for (const [key, value] of Object.entries(props)) {
+        dehydrated.props.push([key, value])
+      }
+    }
+
+    ssrContext.commits.set(dehydrated.id, dehydrated);
+  }
+
+  const payload = serializeSSRContext(ssrContext);
+
+  return { payload, root };
+}

package/{server.ts → hast.ts}

@@ -1,8 +1,7 @@
 import { h, s } from 'hastscript';
-import { Element, Nodes as HNode, Root } from 'hast';
-import { NodeBuilder, RenderSpace2 } from "@lukekaalim/act-backstage";
+import { Element, ElementContent, Nodes as HNode, Root } from 'hast';
+import { NodeBuilder, setPropObject } from "@lukekaalim/act-backstage";
 import { primitiveNodeTypes } from '@lukekaalim/act';
-import { CommitTree2 } from '@lukekaalim/act-recon';
 
 export const createHASTBuilder = (root: Root): NodeBuilder<HNode, 'web:html' | 'web:svg'> => ({
   roots: new Set(['web:html', 'web:svg']),
@@ -57,13 +56,37 @@ export const createHASTBuilder = (root: Root): NodeBuilder<HNode, 'web:html' | '
         root.children.push(child);
     }
   },
-  update(el, next, prev) {
+  update(el, next, prev, ref) {
     switch (el.type) {
       case 'text':
         el.value = (next.props.value as number | string | boolean).toString()
         return;
       case 'element':
+        el.properties['data-commit-id'] = ref.id;
+        setPropObject(el.properties, next.props, prev?.props || {}, (prop, next, prev) => {
+          // event handlers not supported
+          if (prop.startsWith('on'))
+            return true;
 
+          switch (prop) {
+            case 'style':
+              const style = Object.entries(next as {}).map(([key, value]) => `${key}: ${value};`).join(' ');
+              el.properties['style'] = style;
+              return true;
+            default:
+              // complex objects not supported
+              switch (typeof next) {
+                case 'object':
+                case 'function':
+                case 'undefined':
+                case 'symbol':
+                  return true;
+              }
+              el.properties[prop as string] = next as string;
+              return true;
+          }
+        })
+        return;
     }
   },
   unlink(child, parent) {
@@ -73,19 +96,15 @@ export const createHASTBuilder = (root: Root): NodeBuilder<HNode, 'web:html' | '
   },
   sort(el, children) {
     if ("children" in el) {
-      el.children = children as Element[];
+      el.children.length = 0;
+      for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+        (el.children as ElementContent[]).push(child as Element);
+        const nextChild = children[i + 1];
+        if (child.type === 'text' && nextChild && nextChild.type === 'text') {
+          el.children.push({ type: 'comment', value: '' })
+        }
+      }
     }
   },
-}) 
-
-type DehydratedRender = {
-  
-}
-
-export const dehydrate = (tree: CommitTree2, renderer: RenderSpace2<HNode, string | symbol>) => {
-
-}
-
-export const rehydrate = () => {
-
-}
+})

package/mod.ts

@@ -3,4 +3,9 @@ export * from './element.ts';
 export * from './props.ts';
 export * from './render.ts';
 export * from './scheduler.ts';
-export * from './server.ts';
+
+export * from './rehydrate.ts';
+export * from './dehydrate.ts';
+
+export * from './hast.ts';
+export * from './ssr.ts';

package/nodejs/TickScheduler.ts

@@ -0,0 +1,35 @@
+import { Scheduler } from '@lukekaalim/act-recon';
+import { nextTick } from 'node:process';
+
+export const createTickScheduler = (): Scheduler => {
+  let needs_callback = false;
+  let callback_pending = false;
+  let callback = () => {};
+
+  const run = () => {
+    while (needs_callback) {
+      needs_callback = false;
+      callback();
+    }
+    callback_pending = false
+  }
+
+  return {
+    setCallbackFunc(nextCallback) {
+      callback = nextCallback;
+    },
+    requestCallback() {
+      needs_callback = true;
+      if (!callback_pending) {
+        callback_pending = true;
+        nextTick(run)
+      }
+    },
+    cancelCallback() {
+      needs_callback = false;
+    },
+    isCallbackPending() {
+      return needs_callback;
+    },
+  }
+}

package/nodejs/index.ts

@@ -0,0 +1 @@
+export * from './TickScheduler.ts';

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@lukekaalim/act-web",
-  "version": "4.0.0",
+  "version": "5.1.0",
   "type": "module",
   "main": "mod.ts",
+  "exports": {
+    ".": "./mod.ts",
+    "./node": "./nodejs/index.ts"
+  },
   "dependencies": {
-    "@lukekaalim/act": "^4.0.0",
-    "@lukekaalim/act-backstage": "^3.0.0",
-    "@lukekaalim/act-recon": "^3.0.0",
+    "@lukekaalim/act": "^4.2.0",
+    "@lukekaalim/act-backstage": "^3.1.1",
+    "@lukekaalim/act-recon": "^4.0.0",
     "@types/hast": "^3.0.4",
     "hast-util-to-html": "^9.0.5",
     "hastscript": "^9.0.1",

package/rehydrate.ts

@@ -0,0 +1,144 @@
+import { createId, Element, ElementType, h, primitiveNodeTypes, specialNodeTypes } from "@lukekaalim/act";
+import { Commit2, CommitID, CommitRef2, Reconciler2 } from "@lukekaalim/act-recon";
+import { deserializeSSRPayload, RehydratableComponent, SSRContext, SSRPayload, ssrStringToSymbolMap } from "./ssr";
+import { RenderSpace2 } from "@lukekaalim/act-backstage";
+import { recon } from "../three/deps";
+
+
+export const rehydrate = (
+  targets: { [key: string]: RehydratableComponent },
+  reconciler: Reconciler2,
+  space: RenderSpace2<HTMLElement | SVGElement | Text, 'web:html' | 'web:svg'>,
+  payload: SSRPayload
+) => {
+  const context = deserializeSSRPayload(payload, "client", () => {});
+
+  const refs = new Map<CommitID, CommitRef2>();
+  const elements = new Map<CommitID, Element>();
+  const roots = [] as CommitRef2[]
+  const targetRefs = [] as CommitRef2[]
+
+  for (const commit of context.commits.values()) {
+    const ref = CommitRef2.rehydrate(createId("CommitID"), commit.distance);
+    refs.set(commit.id, ref);
+    context.commitIdRemap.set(ref.id, commit.id);
+
+    if (commit.elementType.startsWith('special:mount:')) {
+      const targetName = commit.elementType.slice('special:mount:'.length);
+      const target = targets[targetName];
+
+      const props = Object.fromEntries(commit.props);
+      const element = h(target, props);
+      elements.set(commit.id, element);
+
+      targetRefs.push(ref);
+    } else {
+      const elementType = (ssrStringToSymbolMap[commit.elementType]
+        || commit.elementType
+        || specialNodeTypes.placeholder) as string | symbol
+
+      switch (elementType) {
+        case specialNodeTypes.provider:
+          if (commit.id === context.contextCommitID) {
+            elements.set(commit.id, h(specialNodeTypes.provider, { id: SSRContext.id, value: context }));
+            reconciler.tree.contexts.set(ref.id, {
+              id: ref.id,
+              contextId: SSRContext.id,
+              value: context,
+              consumers: new Map()
+            });
+            continue;
+          }
+        default:
+          const props = Object.fromEntries(commit.props);
+          elements.set(commit.id, h(elementType, props));
+          continue;
+      }
+    }
+  }
+
+  const primitiveCommits: Commit2[] = []
+
+  for (const dehydratedCommit of context.commits.values()) {
+    const ref = refs.get(dehydratedCommit.id) as CommitRef2;
+    ref.parent = (dehydratedCommit.parent && refs.get(dehydratedCommit.parent)) || null;
+
+    const children = dehydratedCommit.children.map(c => refs.get(c)).filter(x => !!x);
+    const element = elements.get(dehydratedCommit.id) as Element;
+    element.children = children.map(c => elements.get(c.id) as Element)
+
+    if (!ref.parent) {
+      roots.push(ref);
+    }
+
+    const commit = new Commit2(ref,
+      element,
+      children
+    );
+
+    switch (commit.element.type) {
+      case primitiveNodeTypes.string:
+      case primitiveNodeTypes.boolean:
+      case primitiveNodeTypes.number:
+        primitiveCommits.push(commit);
+    }
+
+    const node = document.querySelector(`[data-commit-id="${dehydratedCommit.id}"]`)
+    if (node instanceof HTMLElement) {
+      space.nodeByCommit.set(commit.ref.id, node);
+      space.commitByNode.set(node, commit);
+    }
+    if (commit.element.type === specialNodeTypes.render) {
+      space.roots.set(commit.ref.id, commit);
+    }
+
+    reconciler.tree.commits.set(commit.ref.id, commit)
+  }
+
+  const primitiveParent = new Map<CommitID, Commit2>();
+
+  for (const primitiveCommit of primitiveCommits) {
+    const parent = space.findParent(primitiveCommit.ref)
+    if (parent.node && parent.commit) {
+      primitiveParent.set(parent.commit.ref.id, parent.commit)
+    }
+  }
+
+  for (const [id, commit] of primitiveParent) {
+    const node = space.nodeByCommit.get(id);
+    if (!node)
+      continue;
+
+    const textElements = [...node.childNodes]
+      .filter((x): x is Text => x instanceof Text)
+
+  
+    let queue = [...commit.children];
+    let index = 0;
+
+    let subject: CommitRef2 | undefined;
+    while (subject = queue.shift()) {
+      const commit = reconciler.tree.commits.get(subject.id) as Commit2;
+      if (space.nodeByCommit.has(commit.ref.id))
+        continue;
+
+      switch (commit.element.type) {
+        case primitiveNodeTypes.string:
+        case primitiveNodeTypes.boolean:
+        case primitiveNodeTypes.number:
+          space.nodeByCommit.set(commit.ref.id, textElements[index]);
+          index++;
+          continue;
+      }
+      queue.unshift(...commit.children)
+    }
+  }
+
+  reconciler.bus.render = (delta) => {
+    space.bus.render(delta)
+  };
+
+  for (const ref of targetRefs.sort((left, right) => left.length - right.length)) {
+    reconciler.render(ref);
+  }
+}

package/render.ts

@@ -9,6 +9,7 @@ import { Reconciler2 } from "@lukekaalim/act-recon";
  */
 type Options = {
   window?: Window;
+  Reconciler?: typeof Reconciler2,
 }
 
 /**
@@ -22,7 +23,7 @@ type Options = {
  */
 export const render = (node: Node, root: HTMLElement, options: Options = {}) => {
   const scheduler = createDOMScheduler();
-  const reconciler = new Reconciler2(scheduler);
+  const reconciler = new (options.Reconciler || Reconciler2)(scheduler);
   const space = new RenderSpace2(reconciler.tree, createWebNodeBuilder(root, options.window));
 
   reconciler.bus = space.bus;

package/scheduler.ts

@@ -1,7 +1,7 @@
 import { Scheduler } from "@lukekaalim/act-recon";
 
 export const createDOMScheduler = (): Scheduler => {
-  let id: number | null = null;
+  let id: number | null | NodeJS.Timeout = null;
   let callbackFunc = () => console.error(`DOMScheduler got callback before callback function was configured`)
   let synccall_available = false;
   let synccall_requested = false;
@@ -42,12 +42,12 @@ export const createDOMScheduler = (): Scheduler => {
         synccall_requested = true;
       }
       else if (!id) {
-        id = window.setTimeout(onTimeout, 0);
+        id = globalThis.setTimeout(onTimeout, 0);
       }
     },
     cancelCallback() {
       if (id !== null)
-        window.clearTimeout(id);
+        globalThis.clearTimeout(id);
     },
   }
 }

package/space.ts

@@ -6,7 +6,7 @@ import { NodeBuilder } from '@lukekaalim/act-backstage';
 export const HTML: act.Component = ({ children }) => act.h(act.renderNodeType, { type: 'web:html' }, children);
 export const SVG: act.Component = ({ children }) => act.h(act.renderNodeType, { type: 'web:svg' }, children);
 
-const defaultWindow = window;
+const defaultWindow = (globalThis.window);
 
 export const createWebNodeBuilder = (
   root: HTMLElement,
@@ -67,6 +67,10 @@ export const createWebNodeBuilder = (
   sort(el, newChildren) {
     if (el instanceof Text)
       return;
+
+    for (const child of el.childNodes)
+      if (!newChildren.includes(child as HTMLElement))
+
     if (newChildren.length < 2)
       return;
 

package/ssr.ts

@@ -0,0 +1,278 @@
+import {
+  calculateDepsChange,
+  Component, Context, createContext, EffectConstructor, h, primitiveNodeTypes, runUpdater, specialNodeTypes, StateSetter, Updater,
+  useContext, useEffect, useMemo, useRef, useState, ValueOrCalculator
+} from "@lukekaalim/act";
+
+import { CommitID, ComponentState, HookID, useInternalComponentState } from "@lukekaalim/act-recon";
+
+export type SSRComponentData = {
+  id: CommitID,
+  values: Map<HookID, JSONValue>,
+  deps: Map<HookID, PrimitiveJSONValue[]>,
+};
+
+export type SSRContext = {
+  components: Map<CommitID, SSRComponentData>,
+  contexts: Map<CommitID, JSONValue>,
+
+  commits: Map<CommitID, DehydratedCommit>,
+  commitIdRemap: Map<CommitID, CommitID>,
+
+  mounts: CommitID[],
+
+  contextCommitID: CommitID | null,
+
+  mode: 'server' | 'client',
+
+  readyForServer(): void
+};
+// the serializable form of the SSR context
+export type SSRPayload = {
+  contextCommitID: CommitID | null,
+  commits: DehydratedCommit[],
+  mounts: CommitID[],
+  components: SSRComponentPayload[],
+  contexts: [CommitID, JSONValue][],
+  commitIdRemap: [CommitID, CommitID][]
+}
+export type SSRComponentPayload = {
+  id: CommitID,
+  values: [HookID, JSONValue][],
+  deps: [HookID, PrimitiveJSONValue[]][],
+}
+export const serializeSSRContext = (context: SSRContext): SSRPayload => {
+  return {
+    contextCommitID: context.contextCommitID,
+    commits: [...context.commits.values()],
+    mounts: context.mounts,
+    commitIdRemap: [...context.commitIdRemap.entries()],
+    components: [...context.components.values()].map(component => {
+      return {
+        id: component.id,
+        values: [...component.values.entries()],
+        deps: [...component.deps.entries()],
+      } as SSRComponentPayload
+    }),
+    contexts: [...context.contexts.entries()]
+  }
+}
+
+export const deserializeSSRPayload = (payload: SSRPayload, mode: 'server' | 'client', readyForServer: () => void): SSRContext => {
+  return {
+    contextCommitID: payload.contextCommitID,
+    mode,
+    readyForServer,
+    commitIdRemap: new Map(payload.commitIdRemap),
+    commits: new Map(payload.commits.map(c => [c.id, c])),
+    mounts: payload.mounts,
+    components: new Map(payload.components.map(c => ([c.id, {
+      id: c.id,
+      values: new Map(c.values),
+      deps: new Map(c.deps),
+    } as SSRComponentData]))),
+    contexts: new Map(payload.contexts)
+  }
+}
+
+export const SSRContext = createContext<SSRContext | null>(null);
+
+const useSSRComponentState = (data: SSRContext, state: ComponentState) => {
+  return useMemo(() => {
+    let id: CommitID;
+    if (data.mode === 'client') {
+      const remappedId = data.commitIdRemap.get(state.ref.id);
+      if (!remappedId)
+        throw new Error(`Missing map from Server CommitID => Client CommitID for ${state.ref.id}`);
+      id = remappedId;
+    } else {
+      id = state.ref.id;
+    }
+
+    let ssrComponentState = data.components.get(id);
+    if (!ssrComponentState) {
+      ssrComponentState = {
+        id,
+        values: new Map(),
+        deps: new Map(),
+      }
+      data.components.set(id, ssrComponentState);
+    }
+
+    return ssrComponentState;
+  }, []);
+}
+
+export const ssr = {
+  useState<T extends JSONValue>(initialValue: ValueOrCalculator<T>): [value: T, setter: StateSetter<T>] {
+    const state = useInternalComponentState();
+    const ssrData = ssr.useSSRContext();
+    const ssrComponentState = useSSRComponentState(ssrData, state);
+
+    // this value will literally change
+    // as we go down these other hooks,
+    // but should stay "relatively" stable
+    const hookIndex = state.hookIndex;
+
+    // If we are a client, try to get the server's copy of the value
+    const initialServerValue = useMemo(() => {
+      if (ssrData.mode === 'server')
+        return initialValue;
+
+      if (!ssrComponentState.values.has(hookIndex))
+        return initialValue;
+
+      return ssrComponentState.values.get(hookIndex) as ValueOrCalculator<T>;
+    }, [])
+
+    // The inner setState
+    const [value, innerSetter] = useState<T>(initialServerValue);
+
+    const setter = useMemo(() => {
+      if (ssrData.mode === 'client')
+        return innerSetter;
+      
+      // intercept updates on server to write to SSRComponentData
+      return (updater: Updater<T>) => {
+        innerSetter(prevValue => {
+          const nextValue = runUpdater<T>(prevValue, updater);
+          ssrComponentState.values.set(hookIndex, nextValue);
+          return nextValue;
+        });
+      }
+    }, []);
+
+    return [value, setter]
+  },
+  useEffect(effect: EffectConstructor, deps: PrimitiveJSONValue[]) {
+    const liveState = useInternalComponentState();
+    const ssrData = ssr.useSSRContext();
+    const ssrComponentState = useSSRComponentState(ssrData, liveState);
+
+    const hookIndex = liveState.hookIndex;
+
+    let firstRun = useRef(true);
+
+    useMemo(() => {
+      if (ssrData.mode === 'client')
+        return;
+
+      // record the last server set of deps
+      ssrComponentState.deps.set(hookIndex, deps);
+    }, deps)
+
+    useEffect(() => {
+      if (!firstRun.current || ssrData.mode === 'server')
+        return effect();
+
+      firstRun.current = false;
+
+      // for the very first run on a client, check against
+      // the server props to see if we need to re-render
+      const prevDeps = ssrComponentState.deps.get(hookIndex);
+      
+      // only run the effect if the deps change (or if we don't have a copy of past deps anyway)
+      if (!prevDeps || calculateDepsChange(prevDeps, deps)) {
+        return effect();
+      }
+    }, deps);
+
+  },
+  // This needs special rehydration efforts to restore
+  createContext<T extends JSONValue>(defaultValue: T): Context<T> {
+    const innerContext = createContext(defaultValue);
+
+    return {
+      ...innerContext,
+      Provider({ value, children }) {
+        const liveState = useInternalComponentState();
+        const ssrData = ssr.useSSRContext();
+
+        useMemo(() => {
+          if (ssrData.mode === "client")
+            return;
+          // record the value
+          ssrData.contexts.set(liveState.ref.id, value);
+        }, [value]);
+
+        return h(specialNodeTypes.provider, { id: innerContext.id, value }, children);
+      },
+    }
+  },
+  useSSRReady() {
+    const ssrData = ssr.useSSRContext();
+
+    return ssrData.readyForServer;
+  },
+  useSSRContext() {
+    const ssrContext = useContext(SSRContext);
+    if (!ssrContext)
+      throw new Error('Missing SSR Bundle Context!')
+    return ssrContext;
+  },
+};
+
+
+export type DehydratedCommit = {
+  id: CommitID,
+  elementType: string,
+  parent: CommitID | null,
+  distance: number,
+  key: string | null,
+  children: CommitID[],
+  props: [string, JSONValue][],
+}
+
+export type DehydratedTree = {
+  commits: DehydratedCommit[],
+  mounts: CommitID[],
+}
+
+export type PrimitiveJSONValue =
+  | string
+  | number
+  | boolean
+  | null
+
+export type CompoundJSONValue =
+  | ReadonlyArray<JSONValue>
+  | { readonly [key: string]: JSONValue }
+
+export type JSONValue =
+  | PrimitiveJSONValue
+  | CompoundJSONValue;
+
+export type RehydratableProps = { [key: string]: JSONValue };
+
+export type RehydratableComponent = Component<RehydratableProps>;
+
+export const ssrStringToSymbolMap: Record<string, symbol> = {
+  'primitive:string': primitiveNodeTypes.string,
+  'primitive:number': primitiveNodeTypes.number,
+  'primitive:null': primitiveNodeTypes.null,
+  'primitive:boolean': primitiveNodeTypes.boolean,
+  'primitive:array': primitiveNodeTypes.array,
+
+
+  [primitiveNodeTypes.string]:  'primitive:string',
+  [primitiveNodeTypes.number]:  'primitive:number',
+  [primitiveNodeTypes.null]:    'primitive:null',
+  [primitiveNodeTypes.boolean]: 'primitive:boolean',
+  [primitiveNodeTypes.array]:   'primitive:array',
+
+  'special:placeholder': specialNodeTypes.placeholder,
+  'special:boundary': specialNodeTypes.boundary,
+  'special:fallback': specialNodeTypes.fallback,
+  'special:provider': specialNodeTypes.provider,
+  'special:suspend': specialNodeTypes.suspend,
+  'special:render': specialNodeTypes.render,
+
+  [specialNodeTypes.placeholder]: 'special:placeholder',
+  [specialNodeTypes.boundary]: 'special:boundary',
+  [specialNodeTypes.fallback]: 'special:fallback',
+  [specialNodeTypes.provider]: 'special:provider',
+  [specialNodeTypes.suspend]: 'special:suspend',
+  [specialNodeTypes.render]: 'special:render',
+}
+export const ssrSymbolToStringMap: Record<symbol, string> = Object.fromEntries(Object.entries(ssrStringToSymbolMap)
+  .map(([key, value]) => [value, key]))