@ccheever/exact-renderer 0.1.0

package/src/solid.ts

@@ -0,0 +1,490 @@
+/**
+ * Exact Solid Renderer
+ *
+ * This module provides the Solid adapter for the Exact runtime.
+ * It uses solid-js/universal's createRenderer to map Solid's rendering
+ * operations to Exact's host operations.
+ *
+ * Usage:
+ * ```tsx
+ * import { render } from './renderer/solid';
+ * import App from './solid-app';
+ *
+ * render(() => <App />);
+ * ```
+ *
+ * Note: Solid JSX must be compiled with babel-preset-solid configured for
+ * universal rendering. See vite.config.solid.ts.
+ */
+
+import './jsx-augmentations.js';
+
+import { createRenderer } from 'solid-js/universal';
+import { createSignal } from 'solid-js';
+import type { JSX } from 'solid-js';
+
+import {
+  __setActiveWindowRenderer,
+  subscribeToRootWindowState,
+} from '@exact/core';
+import {
+  // Types
+  type ElementNode,
+  type TextNode,
+  type RootNode,
+  
+  // Instance creation
+  createInstance,
+  createTextInstance,
+  createRoot,
+  
+  // Tree operations
+  appendChild,
+  insertBefore,
+  removeChild,
+  
+  // Updates
+  updateInstanceProps,
+  updateTextContent,
+  commitBatch,
+  destroyRoot,
+  syncRootWindowState,
+  
+  // Node operations
+  NodeKind,
+
+  // Handler registry
+  _clearHandlers,
+} from './host-ops.js';
+
+// =============================================================================
+// Development Mode Flag
+// =============================================================================
+
+const __DEV__ = process.env.NODE_ENV !== 'production';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+type ExactNode = ElementNode | TextNode;
+type SolidNode = ExactNode | RootNode;
+type RootParent = ElementNode | RootNode;
+type OptionalWindowRendererKind = 'solid' | 'vue';
+
+interface WindowRendererRoot {
+  render(content: unknown): void;
+  unmount(): void;
+}
+
+interface RootState {
+  container: RootNode;
+  dispose: (() => void) | null;
+  claimed: boolean;
+  code: (() => JSX.Element) | null;
+  windowVersion: (() => number) | null;
+  bumpWindowVersion: (() => void) | null;
+  unsubscribeWindowState: (() => void) | null;
+}
+
+function getRootContainerForNode(node: SolidNode | null | undefined): RootNode | null {
+  let current = node;
+  while (current) {
+    if (current.kind === NodeKind.Root) {
+      return current;
+    }
+    current = current.parent as SolidNode | null;
+  }
+  return null;
+}
+
+function commitNodeRoot(node: SolidNode | null | undefined): void {
+  const root = getRootContainerForNode(node);
+  if (root) {
+    commitBatch(root);
+  }
+}
+
+const rootStates = new Map<number, RootState>();
+
+function registerOptionalWindowRenderer(
+  renderer: OptionalWindowRendererKind,
+  createRoot: (rootId: number) => WindowRendererRoot,
+): void {
+  const globalScope = globalThis as typeof globalThis & {
+    __exactOptionalWindowRenderers?:
+      Partial<Record<OptionalWindowRendererKind, (rootId: number) => WindowRendererRoot>>;
+  };
+  const registry = globalScope.__exactOptionalWindowRenderers ??= {};
+  registry[renderer] = createRoot;
+}
+
+function getOrCreateRootState(rootId: number): RootState {
+  let rootState = rootStates.get(rootId);
+  if (!rootState) {
+    const [windowVersion, setWindowVersion] = createSignal(0);
+    rootState = {
+      container: createRoot(rootId, 'solid'),
+      dispose: null,
+      claimed: false,
+      code: null,
+      windowVersion,
+      bumpWindowVersion: () => {
+        setWindowVersion((value) => value + 1);
+      },
+      unsubscribeWindowState: null,
+    };
+    rootState.unsubscribeWindowState =
+      typeof subscribeToRootWindowState === 'function'
+        ? subscribeToRootWindowState(rootId, () => {
+            if (rootState?.bumpWindowVersion) {
+              rootState.bumpWindowVersion();
+            }
+            syncRootWindowState(rootState.container);
+          })
+        : null;
+    rootStates.set(rootId, rootState);
+  }
+  return rootState;
+}
+
+// =============================================================================
+// Solid Universal Renderer
+// =============================================================================
+
+/**
+ * Create the Solid universal renderer with Exact host operations.
+ *
+ * The createRenderer function from solid-js/universal returns rendering
+ * primitives that Solid's compiled JSX will use.
+ */
+const renderer = createRenderer<SolidNode>({
+  /**
+   * Create a new element node.
+   */
+  createElement(type: string): ElementNode {
+    return createInstance(type, {});
+  },
+
+  /**
+   * Create a new text node.
+   */
+  createTextNode(value: string): TextNode {
+    return createTextInstance(value);
+  },
+
+  /**
+   * Update a text node's content.
+   */
+  replaceText(textNode: TextNode, value: string): void {
+    updateTextContent(textNode, value);
+    commitNodeRoot(textNode);
+  },
+
+  /**
+   * Check if a node is a text node.
+   */
+  isTextNode(node: SolidNode): node is TextNode {
+    return node.kind === NodeKind.Text;
+  },
+
+  /**
+   * Set a property on an element.
+   */
+  setProperty(node: SolidNode, name: string, value: unknown, prev?: unknown): void {
+    if (node.kind !== NodeKind.Element) {
+      return;
+    }
+
+    const element = node as ElementNode;
+
+    // Build new props object with the updated property
+    const newProps = { ...element.originalProps, [name]: value };
+
+    // Use the shared updateInstanceProps
+    updateInstanceProps(element, element.originalProps || {}, newProps);
+    commitNodeRoot(element);
+  },
+
+  /**
+   * Insert a node into a parent.
+   * If `anchor` is provided, insert before it; otherwise append.
+   */
+  insertNode(parent: SolidNode, node: SolidNode, anchor?: SolidNode | null): void {
+    if (
+      node.kind === NodeKind.Root ||
+      parent.kind !== NodeKind.Element && parent.kind !== NodeKind.Root
+    ) {
+      return;
+    }
+
+    const parentNode = parent as RootParent;
+    if (anchor) {
+      if (anchor.kind === NodeKind.Root) {
+        return;
+      }
+      insertBefore(parentNode, node, anchor);
+    } else {
+      appendChild(parentNode, node);
+    }
+    commitNodeRoot(parentNode);
+  },
+
+  /**
+   * Remove a node from its parent.
+   */
+  removeNode(parent: SolidNode, node: SolidNode): void {
+    if (
+      node.kind === NodeKind.Root ||
+      parent.kind !== NodeKind.Element && parent.kind !== NodeKind.Root
+    ) {
+      return;
+    }
+
+    const parentNode = parent as RootParent;
+    removeChild(parentNode, node);
+    commitNodeRoot(parentNode);
+  },
+
+  /**
+   * Get the parent node.
+   * Note: We track parent in our node structure.
+   */
+  getParentNode(node: SolidNode): SolidNode | undefined {
+    return node.parent as SolidNode | undefined;
+  },
+
+  /**
+   * Get the first child of a node.
+   */
+  getFirstChild(node: SolidNode): ExactNode | undefined {
+    if (node.kind === NodeKind.Element || node.kind === NodeKind.Root) {
+      const parentNode = node as RootParent;
+      return parentNode.children[0] as ExactNode | undefined;
+    }
+    return undefined;
+  },
+
+  /**
+   * Get the next sibling of a node.
+   */
+  getNextSibling(node: SolidNode): ExactNode | undefined {
+    const parent = node.parent;
+    if (!parent || (parent.kind !== NodeKind.Element && parent.kind !== NodeKind.Root)) {
+      return undefined;
+    }
+    
+    const parentElement = parent as RootParent;
+    const index = parentElement.children.indexOf(node as ElementNode);
+    if (index >= 0 && index < parentElement.children.length - 1) {
+      return parentElement.children[index + 1] as ExactNode;
+    }
+    return undefined;
+  },
+});
+
+// Extract all the render primitives that Solid's JSX compiler expects
+const {
+  render: solidRender,
+  effect,
+  memo,
+  createComponent,
+  createElement,
+  createTextNode,
+  insertNode,
+  insert,
+  spread,
+  setProp,
+  mergeProps,
+} = renderer;
+
+// =============================================================================
+// Public API
+// =============================================================================
+
+/**
+ * Render a Solid component tree to the Exact runtime.
+ *
+ * @param code - A function returning the Solid component tree
+ * @returns A dispose function to unmount the tree
+ *
+ * @example
+ * ```tsx
+ * import { render } from './renderer/solid';
+ *
+ * function App() {
+ *   const [count, setCount] = createSignal(0);
+ *   return (
+ *     <div style={{ flex: 1, backgroundColor: '#fff' }}>
+ *       Count: {count()}
+ *     </div>
+ *   );
+ * }
+ *
+ * const dispose = render(() => <App />);
+ * ```
+ */
+export function render(code: () => JSX.Element): () => void {
+  __setActiveWindowRenderer?.('solid');
+  const rootState = getOrCreateRootState(0);
+  rootState.code = code;
+
+  // Dispose previous render if any
+  if (rootState.dispose) {
+    rootState.dispose();
+  }
+
+  // Render the Solid component tree
+  rootState.dispose = solidRender(
+    (() => {
+      // The read forces Solid to revisit the full tree when root window state
+      // changes. That keeps hook-level/window-dependent computations fresh.
+      rootState.windowVersion?.();
+      return code();
+    }) as unknown as () => SolidNode,
+    rootState.container as unknown as ExactNode,
+  );
+
+  // Commit the initial batch to native
+  commitBatch(rootState.container);
+
+  return () => {
+    if (rootState.dispose) {
+      rootState.dispose();
+      rootState.dispose = null;
+    }
+    rootState.code = null;
+  };
+}
+
+export interface ExactRoot {
+  readonly rootId: number;
+  render(code: () => JSX.Element): void;
+  unmount(): void;
+}
+
+export function createExactRoot(rootId: number): ExactRoot {
+  if (rootId === 0) {
+    throw new Error('createExactRoot: rootId must be > 0. Use render() for the default root.');
+  }
+
+  const rootState = getOrCreateRootState(rootId);
+  if (rootState.claimed) {
+    throw new Error(`createExactRoot: rootId ${rootId} is already in use.`);
+  }
+  rootState.claimed = true;
+
+  return {
+    rootId,
+
+    render(code: () => JSX.Element): void {
+      __setActiveWindowRenderer?.('solid');
+      rootState.code = code;
+      if (rootState.dispose) {
+        rootState.dispose();
+      }
+      rootState.dispose = solidRender(
+        (() => {
+          rootState.windowVersion?.();
+          return code();
+        }) as unknown as () => SolidNode,
+        rootState.container as unknown as ExactNode,
+      );
+      commitBatch(rootState.container);
+    },
+
+    unmount(): void {
+      if (rootState.dispose) {
+        rootState.dispose();
+        rootState.dispose = null;
+      }
+      rootState.code = null;
+      rootState.unsubscribeWindowState?.();
+      rootState.unsubscribeWindowState = null;
+      rootState.claimed = false;
+      rootStates.delete(rootId);
+      destroyRoot(rootId);
+    },
+  };
+}
+
+registerOptionalWindowRenderer(
+  'solid',
+  createExactRoot as (rootId: number) => WindowRendererRoot,
+);
+
+/**
+ * Unmount the current Solid tree.
+ */
+export function unmount(): void {
+  const rootState = rootStates.get(0);
+  if (rootState?.dispose) {
+    rootState.dispose();
+    rootState.dispose = null;
+  }
+  if (rootState) {
+    rootState.code = null;
+  }
+}
+
+/**
+ * Fully reset the renderer state.
+ */
+export function reset(): void {
+  for (const [rootId, rootState] of rootStates) {
+    if (rootState.dispose) {
+      rootState.dispose();
+      rootState.dispose = null;
+    }
+    rootState.code = null;
+    rootState.unsubscribeWindowState?.();
+    rootState.unsubscribeWindowState = null;
+    destroyRoot(rootId);
+  }
+  rootStates.clear();
+  _clearHandlers();
+}
+
+// =============================================================================
+// Re-exports for Solid components
+// =============================================================================
+
+// Export Solid primitives for use in components and JSX compilation
+export {
+  effect,
+  memo,
+  createComponent,
+  createElement,
+  createTextNode,
+  insertNode,
+  insert,
+  spread,
+  setProp,
+  mergeProps,
+};
+
+// Re-export solid-js core APIs
+export {
+  createSignal,
+  createEffect,
+  createMemo,
+  createResource,
+  onMount,
+  onCleanup,
+  batch,
+  untrack,
+  on,
+  children,
+  Show,
+  For,
+  Index,
+  Switch,
+  Match,
+  ErrorBoundary,
+  Suspense,
+} from 'solid-js';
+
+export { Dynamic } from 'solid-js/web';
+
+// Re-export component types
+export type { Component, JSX } from 'solid-js';

package/src/style/color.js

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

package/src/style/color.ts

@@ -0,0 +1,15 @@
+/**
+ * Color Parsing
+ *
+ * Relocated to `@exact/core` per LLP 0157 F0 so framework-neutral packages
+ * (`@exact/facet-core`) can share one color implementation. This module
+ * re-exports the relocated functions for back-compat with renderer-relative
+ * imports.
+ */
+
+export {
+  colorToHex,
+  colorToRgba,
+  isValidColor,
+  parseColor,
+} from '@exact/core/style/color';

package/src/style/index.js

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

package/src/style/index.ts

@@ -0,0 +1,22 @@
+/**
+ * Style Normalization - Public Exports
+ *
+ * This module re-exports the style normalization utilities.
+ */
+
+export {
+  parseColor,
+  isValidColor,
+  colorToHex,
+  colorToRgba,
+} from './color.js';
+
+export {
+  parseDimension,
+  parseFontWeight,
+  extractTransforms,
+  normalizeTransition,
+  normalizeStyle,
+  transitionsEqual,
+  stylesEqual,
+} from './normalize.js';

package/src/style/normalize.js

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