@fragments-sdk/viewer 0.2.1 → 0.2.3

package/src/composition-renderer.ts

@@ -1,381 +0,0 @@
-/**
- * Composition Renderer
- *
- * Generates render scripts for multi-component compositions.
- * Takes a parsed JSX component tree and generates code that can
- * render the composition in an isolated browser context.
- */
-
-import type { ComponentNode } from "./jsx-parser.js";
-
-/**
- * Fragment file information for component lookup
- */
-export interface FragmentFileInfo {
-  absolutePath: string;
-  relativePath: string;
-  componentName: string;
-}
-
-/**
- * Options for generating a composition render script
- */
-export interface CompositionRenderOptions {
-  /** The parsed component tree */
-  tree: ComponentNode | ComponentNode[];
-  /** Map of component names to their fragment file paths */
-  componentPaths: Map<string, string>;
-  /** Optional theme ('light' or 'dark') */
-  theme?: "light" | "dark";
-}
-
-/**
- * Generate a render script for a composition.
- *
- * This generates JavaScript code that:
- * 1. Imports all required components in parallel
- * 2. Builds a component map
- * 3. Renders the nested composition using React.createElement
- *
- * @param options - The render options
- * @returns JavaScript code string ready to be injected into an HTML page
- */
-export function generateCompositionRenderScript(
-  options: CompositionRenderOptions
-): string {
-  const { tree, componentPaths, theme = "light" } = options;
-
-  // Extract all unique component names that need to be imported
-  const componentsToImport = getUniqueComponents(tree);
-
-  // Generate import statements
-  const imports = componentsToImport
-    .map((name) => {
-      const path = componentPaths.get(name);
-      if (!path) {
-        return `  // Component "${name}" not found - will use placeholder`;
-      }
-      return `  import("${path}").then(m => ({ name: "${name}", mod: m }))`;
-    })
-    .join(",\n");
-
-  // Generate the createElement tree
-  const createElementCode = generateCreateElementTree(tree);
-
-  return `
-import React from "react";
-import { createRoot } from "react-dom/client";
-
-async function render() {
-  const root = document.getElementById("render-root");
-
-  // Apply theme
-  document.documentElement.classList.toggle("dark", ${theme === "dark"});
-
-  try {
-    // Parallel import all needed components
-    const componentPromises = [
-${imports}
-    ].filter(Boolean);
-
-    const loadedComponents = await Promise.all(componentPromises);
-
-    // Build component map
-    const C = {};
-    for (const item of loadedComponents) {
-      if (item && item.mod) {
-        // Handle both default export and named component export
-        const fragment = item.mod.default;
-        if (fragment && fragment.component) {
-          C[item.name] = fragment.component;
-        } else if (typeof item.mod.default === "function") {
-          C[item.name] = item.mod.default;
-        }
-      }
-    }
-
-    // Placeholder component for missing components
-    const Placeholder = ({ name, children }) => {
-      return React.createElement("div", {
-        style: {
-          border: "2px dashed #e5e7eb",
-          borderRadius: "8px",
-          padding: "16px",
-          margin: "8px 0",
-          backgroundColor: "#f9fafb",
-          color: "#6b7280",
-          fontSize: "14px",
-          fontFamily: "system-ui, sans-serif",
-        }
-      },
-        React.createElement("div", { style: { fontWeight: 500, marginBottom: "4px" } }, "Missing: " + name),
-        children
-      );
-    };
-
-    // Helper to get component or placeholder
-    const getComponent = (name) => {
-      return C[name] || ((props) => React.createElement(Placeholder, { name, ...props }));
-    };
-
-    // Render composition
-    const reactRoot = createRoot(root);
-    const composition = ${createElementCode};
-    reactRoot.render(composition);
-
-    // Signal that rendering is complete
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        root.classList.add("ready");
-        window.__RENDER_READY__ = true;
-        window.__RENDER_COMPONENTS__ = ${JSON.stringify(componentsToImport)};
-      });
-    });
-  } catch (error) {
-    console.error("Composition render error:", error);
-    root.innerHTML = \`
-      <div class="render-error" style="
-        padding: 20px;
-        background: #fef2f2;
-        border: 1px solid #fecaca;
-        border-radius: 8px;
-        color: #991b1b;
-        font-family: system-ui, sans-serif;
-      ">
-        <strong style="display: block; margin-bottom: 8px;">Render Error</strong>
-        <pre style="
-          background: #fee2e2;
-          padding: 12px;
-          border-radius: 4px;
-          overflow: auto;
-          font-size: 13px;
-          margin: 0;
-        ">\${error.message}</pre>
-      </div>
-    \`;
-    root.classList.add("ready");
-    window.__RENDER_READY__ = true;
-    window.__RENDER_ERROR__ = error.message;
-  }
-}
-
-render();
-`;
-}
-
-/**
- * Get all unique component names from a tree
- */
-function getUniqueComponents(tree: ComponentNode | ComponentNode[]): string[] {
-  const components = new Set<string>();
-
-  const visit = (node: ComponentNode) => {
-    if (!node.isHtmlElement && node.name !== "Fragment") {
-      components.add(node.name);
-    }
-    for (const child of node.children) {
-      if (typeof child !== "string") {
-        visit(child);
-      }
-    }
-  };
-
-  if (Array.isArray(tree)) {
-    for (const node of tree) {
-      visit(node);
-    }
-  } else {
-    visit(tree);
-  }
-
-  return Array.from(components).sort();
-}
-
-/**
- * Generate React.createElement tree from parsed component tree
- */
-function generateCreateElementTree(
-  tree: ComponentNode | ComponentNode[]
-): string {
-  if (Array.isArray(tree)) {
-    if (tree.length === 0) {
-      return "null";
-    }
-    if (tree.length === 1) {
-      return generateCreateElementNode(tree[0]);
-    }
-    // Multiple root elements - wrap in Fragment
-    const children = tree.map(generateCreateElementNode).join(",\n      ");
-    return `React.createElement(React.Fragment, null,\n      ${children}\n    )`;
-  }
-
-  return generateCreateElementNode(tree);
-}
-
-/**
- * Generate a single React.createElement call
- */
-function generateCreateElementNode(node: ComponentNode): string {
-  const { name, isHtmlElement, props, children } = node;
-
-  // Determine the element type
-  let elementType: string;
-  if (isHtmlElement) {
-    elementType = `"${name}"`;
-  } else if (name === "Fragment") {
-    elementType = "React.Fragment";
-  } else {
-    elementType = `getComponent("${name}")`;
-  }
-
-  // Serialize props
-  const propsCode = serializeProps(props);
-
-  // Generate children
-  if (children.length === 0) {
-    return `React.createElement(${elementType}, ${propsCode})`;
-  }
-
-  const childrenCode = children
-    .map((child) => {
-      if (typeof child === "string") {
-        return JSON.stringify(child);
-      }
-      return generateCreateElementNode(child);
-    })
-    .join(",\n        ");
-
-  return `React.createElement(${elementType}, ${propsCode},\n        ${childrenCode}\n      )`;
-}
-
-/**
- * Serialize props object to JavaScript code
- */
-function serializeProps(props: Record<string, unknown>): string {
-  const entries = Object.entries(props);
-
-  if (entries.length === 0) {
-    return "null";
-  }
-
-  const propsStr = entries
-    .map(([key, value]) => {
-      const serializedValue = serializeValue(value);
-      // Use computed property name if key contains special characters
-      if (/^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key)) {
-        return `${key}: ${serializedValue}`;
-      }
-      return `${JSON.stringify(key)}: ${serializedValue}`;
-    })
-    .join(", ");
-
-  return `{ ${propsStr} }`;
-}
-
-/**
- * Serialize a value to JavaScript code
- */
-function serializeValue(value: unknown): string {
-  if (value === null) return "null";
-  if (value === undefined) return "undefined";
-  if (typeof value === "string") return JSON.stringify(value);
-  if (typeof value === "number") return String(value);
-  if (typeof value === "boolean") return String(value);
-
-  if (Array.isArray(value)) {
-    const items = value.map(serializeValue).join(", ");
-    return `[${items}]`;
-  }
-
-  if (typeof value === "object") {
-    const entries = Object.entries(value)
-      .map(([k, v]) => `${JSON.stringify(k)}: ${serializeValue(v)}`)
-      .join(", ");
-    return `{ ${entries} }`;
-  }
-
-  // For placeholders like [Function] or {variable}
-  if (typeof value === "string" && value.startsWith("[") && value.endsWith("]")) {
-    // Return a no-op function for function placeholders
-    if (value === "[Function]") {
-      return "() => {}";
-    }
-    return "null";
-  }
-
-  // For identifier references like {variable}
-  if (typeof value === "string" && value.startsWith("{") && value.endsWith("}")) {
-    return "null"; // Can't resolve variables in this context
-  }
-
-  return "undefined";
-}
-
-/**
- * Build a map of component names to their fragment file paths
- */
-export function buildComponentPathMap(
-  components: string[],
-  fragments: Array<{ path: string; name: string; absolutePath: string }>
-): Map<string, string> {
-  const map = new Map<string, string>();
-
-  for (const component of components) {
-    const fragment = fragments.find(
-      (s) => s.name.toLowerCase() === component.toLowerCase()
-    );
-    if (fragment) {
-      map.set(component, fragment.absolutePath);
-    }
-  }
-
-  return map;
-}
-
-/**
- * Generate a simple composition preview HTML
- */
-export function generateCompositionPreviewHTML(
-  jsx: string,
-  theme: "light" | "dark" = "light"
-): string {
-  return `
-<!DOCTYPE html>
-<html lang="en" class="${theme === "dark" ? "dark" : ""}">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Composition Preview</title>
-  <style>
-    * { box-sizing: border-box; margin: 0; padding: 0; }
-    body {
-      font-family: system-ui, -apple-system, sans-serif;
-      background: ${theme === "dark" ? "#1a1a1a" : "#ffffff"};
-      color: ${theme === "dark" ? "#ffffff" : "#000000"};
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 20px;
-    }
-    #render-root {
-      width: 100%;
-      max-width: 100%;
-    }
-    #render-root.ready { opacity: 1; }
-    .render-error {
-      padding: 20px;
-      background: #fef2f2;
-      border: 1px solid #fecaca;
-      border-radius: 8px;
-      color: #991b1b;
-    }
-  </style>
-</head>
-<body>
-  <div id="render-root"></div>
-  <!-- RENDER_SCRIPT_PLACEHOLDER -->
-</body>
-</html>
-`;
-}

package/src/constants/index.ts

@@ -1 +0,0 @@
-export * from './ui.js';

package/src/hooks/index.ts

@@ -1,2 +0,0 @@
-export * from './useHmrStatus.js';
-export * from './usePreviewBridge.js';

package/src/hooks/useHmrStatus.ts

@@ -1,109 +0,0 @@
-import { useState, useEffect, useCallback } from 'react';
-import type { HmrStatus } from '../constants/ui.js';
-
-/**
- * Hook to track Vite HMR connection status.
- * Returns the current connection status and any recent file changes.
- */
-export function useHmrStatus() {
-  const [status, setStatus] = useState<HmrStatus>('connected');
-  const [lastUpdate, setLastUpdate] = useState<string | null>(null);
-
-  useEffect(() => {
-    // Check if we're in a Vite environment
-    if (typeof import.meta.hot === 'undefined') {
-      return;
-    }
-
-    const hot = import.meta.hot;
-
-    // Listen for HMR connection status
-    // Vite emits these events on the WebSocket connection
-    const handleConnect = () => {
-      setStatus('connected');
-    };
-
-    const handleDisconnect = () => {
-      setStatus('disconnected');
-    };
-
-    const handleReconnecting = () => {
-      setStatus('reconnecting');
-    };
-
-    // Listen for module updates
-    const handleUpdate = (data: { type: string; path?: string }) => {
-      if (data.path) {
-        setLastUpdate(data.path);
-        // Clear the update notification after 3 seconds
-        setTimeout(() => setLastUpdate(null), 3000);
-      }
-    };
-
-    // Vite's HMR API
-    // @ts-expect-error Vite internal events
-    hot.on('vite:beforeUpdate', handleUpdate);
-
-    // Listen for WebSocket events via custom events
-    // These are dispatched by Vite's client
-    window.addEventListener('vite:ws-connect', handleConnect);
-    window.addEventListener('vite:ws-disconnect', handleDisconnect);
-
-    // For Vite 5+, we can use the connection status directly
-    // Check current status
-    try {
-      // @ts-expect-error Vite internal
-      if (hot.connection?.socket?.readyState === 1) {
-        setStatus('connected');
-      }
-    } catch {
-      // Ignore - may not be available
-    }
-
-    return () => {
-      window.removeEventListener('vite:ws-connect', handleConnect);
-      window.removeEventListener('vite:ws-disconnect', handleDisconnect);
-    };
-  }, []);
-
-  // Manual check for connection status every 5 seconds
-  useEffect(() => {
-    const checkConnection = () => {
-      if (typeof import.meta.hot === 'undefined') {
-        setStatus('disconnected');
-        return;
-      }
-
-      try {
-        // @ts-expect-error Vite internal
-        const socket = import.meta.hot.connection?.socket;
-        if (socket) {
-          switch (socket.readyState) {
-            case 0: // CONNECTING
-              setStatus('reconnecting');
-              break;
-            case 1: // OPEN
-              setStatus('connected');
-              break;
-            case 2: // CLOSING
-            case 3: // CLOSED
-              setStatus('disconnected');
-              break;
-          }
-        }
-      } catch {
-        // Ignore errors - HMR may not be available
-      }
-    };
-
-    // Initial check
-    checkConnection();
-
-    // Periodic check
-    const interval = setInterval(checkConnection, 5000);
-
-    return () => clearInterval(interval);
-  }, []);
-
-  return { status, lastUpdate };
-}

package/src/hooks/useScrollSpy.ts

@@ -1,78 +0,0 @@
-import { useState, useEffect, useRef } from 'react';
-
-interface UseScrollSpyOptions {
-  /** IDs of sections to observe */
-  sectionIds: string[];
-  /** Offset from top of viewport to consider section as active */
-  offset?: number;
-  /** Root element to observe within (default: document) */
-  root?: Element | null;
-}
-
-export function useScrollSpy({ sectionIds, offset = 100, root = null }: UseScrollSpyOptions) {
-  const [activeId, setActiveId] = useState<string | null>(sectionIds[0] ?? null);
-  const observerRef = useRef<IntersectionObserver | null>(null);
-
-  useEffect(() => {
-    const elements = sectionIds
-      .map((id) => document.getElementById(id))
-      .filter((el): el is HTMLElement => el !== null);
-
-    if (elements.length === 0) return;
-
-    // Track which sections are currently visible
-    const visibleSections = new Map<string, number>();
-
-    observerRef.current = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          const id = entry.target.id;
-          if (entry.isIntersecting) {
-            // Store the top position of visible sections
-            visibleSections.set(id, entry.boundingClientRect.top);
-          } else {
-            visibleSections.delete(id);
-          }
-        });
-
-        // Find the section closest to the top
-        if (visibleSections.size > 0) {
-          let closestId = '';
-          let closestDistance = Infinity;
-
-          visibleSections.forEach((top, id) => {
-            const distance = Math.abs(top - offset);
-            if (distance < closestDistance) {
-              closestDistance = distance;
-              closestId = id;
-            }
-          });
-
-          if (closestId) {
-            setActiveId(closestId);
-          }
-        }
-      },
-      {
-        root,
-        rootMargin: `-${offset}px 0px -50% 0px`,
-        threshold: [0, 0.25, 0.5, 0.75, 1],
-      }
-    );
-
-    elements.forEach((el) => observerRef.current?.observe(el));
-
-    return () => {
-      observerRef.current?.disconnect();
-    };
-  }, [sectionIds, offset, root]);
-
-  const scrollToSection = (id: string) => {
-    const element = document.getElementById(id);
-    if (element) {
-      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
-    }
-  };
-
-  return { activeId, scrollToSection };
-}