@flightdev/ui 2.0.0 → 4.0.0

package/src/adapters/tier-1/react.ts

@@ -1,330 +0,0 @@
-/**
- * @flightdev/ui - React Adapter (Tier 1)
- *
- * Full-featured React 18+ SSR adapter with streaming and hydration support.
- *
- * @module @flightdev/ui/react
- * @version 2.0.0
- */
-
-import { BaseUIAdapter } from '../../core/adapter.js';
-import type {
-    AdapterCapabilities,
-    Component,
-    RenderContext,
-    RenderResult,
-    StreamingOptions,
-    StreamingRenderResult,
-} from '../../core/types.js';
-
-// ============================================================================
-// Types
-// ============================================================================
-
-export interface ReactAdapterOptions {
-    /** Enable streaming SSR with renderToPipeableStream */
-    streaming?: boolean;
-
-    /** Enable React Server Components support */
-    serverComponents?: boolean;
-
-    /** Custom error handler for streaming */
-    onError?: (error: Error) => void;
-
-    /** Custom shell ready handler */
-    onShellReady?: () => void;
-}
-
-// ============================================================================
-// React Adapter
-// ============================================================================
-
-export class ReactAdapter extends BaseUIAdapter {
-    readonly id = 'react';
-    readonly name = 'React';
-    readonly framework = 'react';
-    readonly frameworkVersion = '18+';
-    readonly tier = 'tier-1' as const;
-
-    override readonly capabilities: AdapterCapabilities = {
-        streaming: true,
-        partialHydration: true,
-        islands: true,
-        resumable: false, // React 19 has some resumability features
-        ssg: true,
-        csr: true,
-        serverComponents: true,
-    };
-
-    constructor(private options: ReactAdapterOptions = {}) {
-        super();
-    }
-
-    async renderToString(
-        component: Component,
-        _context?: RenderContext
-    ): Promise<RenderResult> {
-        const startTime = performance.now();
-
-        // Dynamic imports for React SSR
-        const { renderToString } = await import('react-dom/server');
-        const { createElement } = await import('react');
-
-        // Create React element
-        const element = createElement(
-            component.component as React.ComponentType,
-            (component.props ?? {}) as Record<string, unknown>,
-            component.children as React.ReactNode
-        );
-
-        const html = renderToString(element);
-
-        return {
-            html,
-            hydrationData: {
-                props: component.props,
-                componentId: component.id ?? this.generateId(),
-            },
-            timing: this.createTiming(startTime),
-        };
-    }
-
-    /**
-     * Render to stream using React 18+ streaming SSR.
-     * 
-     * Uses `renderToReadableStream` (Web Streams API) which works in:
-     * - Node.js 18+ (with Web Streams support)
-     * - Deno
-     * - Cloudflare Workers
-     * - Vercel Edge Runtime
-     * - Other edge runtimes
-     * 
-     * Falls back to `renderToPipeableStream` for Node.js environments
-     * that require traditional streams.
-     */
-    renderToStream(
-        component: Component,
-        _context?: RenderContext,
-        options?: StreamingOptions
-    ): StreamingRenderResult {
-        let aborted = false;
-        let abortController: AbortController | null = null;
-        let resolvePromise: () => void;
-        let rejectPromise: (error: Error) => void;
-
-        const done = new Promise<void>((resolve, reject) => {
-            resolvePromise = resolve;
-            rejectPromise = reject;
-        });
-
-        const stream = new ReadableStream<Uint8Array>({
-            start: async (controller) => {
-                try {
-                    // Use renderToReadableStream - the Web Streams API version
-                    // This is the recommended approach for modern Node.js and edge runtimes
-                    const { renderToReadableStream } = await import('react-dom/server');
-                    const { createElement } = await import('react');
-
-                    // Create React element
-                    const element = createElement(
-                        component.component as React.ComponentType,
-                        (component.props ?? {}) as Record<string, unknown>,
-                        component.children as React.ReactNode
-                    );
-
-                    // Create abort controller for cancellation
-                    abortController = new AbortController();
-
-                    // Render to ReadableStream
-                    const reactStream = await renderToReadableStream(element, {
-                        signal: abortController.signal,
-                        onError(error: unknown) {
-                            const err = error instanceof Error ? error : new Error(String(error));
-                            options?.onError?.(err);
-                            // Don't reject here - let the stream handle it
-                        },
-                    });
-
-                    // Notify shell is ready
-                    options?.onShellReady?.();
-
-                    // Get reader from React's stream
-                    const reader = reactStream.getReader();
-
-                    // Read and forward chunks
-                    const pump = async (): Promise<void> => {
-                        try {
-                            while (true) {
-                                if (aborted) {
-                                    await reader.cancel();
-                                    controller.close();
-                                    resolvePromise();
-                                    return;
-                                }
-
-                                const { done: readerDone, value } = await reader.read();
-
-                                if (readerDone) {
-                                    controller.close();
-                                    options?.onAllReady?.();
-                                    resolvePromise();
-                                    return;
-                                }
-
-                                if (value) {
-                                    controller.enqueue(value);
-                                }
-                            }
-                        } catch (error) {
-                            const err = error instanceof Error ? error : new Error(String(error));
-                            options?.onError?.(err);
-                            controller.error(err);
-                            rejectPromise(err);
-                        }
-                    };
-
-                    // Start pumping data
-                    await pump();
-
-                } catch (error) {
-                    const err = error instanceof Error ? error : new Error(String(error));
-
-                    // Check if renderToReadableStream is not available (older Node.js)
-                    if (err.message.includes('renderToReadableStream')) {
-                        // Fallback to synchronous render for environments without Web Streams
-                        await this.fallbackStreamRender(component, controller, options, resolvePromise, rejectPromise);
-                        return;
-                    }
-
-                    options?.onShellError?.(err);
-                    options?.onError?.(err);
-                    controller.error(err);
-                    rejectPromise(err);
-                }
-            },
-        });
-
-        return {
-            stream,
-            done,
-            abort: () => {
-                aborted = true;
-                abortController?.abort();
-                resolvePromise();
-            },
-        };
-    }
-
-    /**
-     * Fallback render for environments without Web Streams support.
-     * Uses renderToString and emits as a single chunk.
-     */
-    private async fallbackStreamRender(
-        component: Component,
-        controller: ReadableStreamDefaultController<Uint8Array>,
-        options: StreamingOptions | undefined,
-        resolvePromise: () => void,
-        rejectPromise: (error: Error) => void
-    ): Promise<void> {
-        try {
-            const { renderToString } = await import('react-dom/server');
-            const { createElement } = await import('react');
-
-            const element = createElement(
-                component.component as React.ComponentType,
-                (component.props ?? {}) as Record<string, unknown>,
-                component.children as React.ReactNode
-            );
-
-            options?.onShellReady?.();
-
-            const html = renderToString(element);
-            const encoded = new TextEncoder().encode(html);
-
-            controller.enqueue(encoded);
-            controller.close();
-            options?.onAllReady?.();
-            resolvePromise();
-        } catch (error) {
-            const err = error instanceof Error ? error : new Error(String(error));
-            options?.onError?.(err);
-            controller.error(err);
-            rejectPromise(err);
-        }
-    }
-
-    override getHydrationScript(result: RenderResult): string {
-        const data = this.serializeProps(result.hydrationData);
-        return `
-<script type="module">
-window.__FLIGHT_DATA__ = ${data};
-window.__FLIGHT_ADAPTER__ = 'react';
-
-import { hydrateRoot } from 'react-dom/client';
-
-const container = document.getElementById('app');
-const App = window.__FLIGHT_APP__;
-
-if (container && App) {
-    const { props } = window.__FLIGHT_DATA__;
-    import('react').then(({ createElement }) => {
-        hydrateRoot(container, createElement(App, props));
-    });
-}
-</script>
-        `.trim();
-    }
-
-    override getClientEntry(): string {
-        return `
-import { hydrateRoot, createRoot } from 'react-dom/client';
-import { createElement } from 'react';
-
-export function hydrate() {
-    const container = document.getElementById('app');
-    const App = window.__FLIGHT_APP__;
-    const data = window.__FLIGHT_DATA__ ?? {};
-
-    if (!container || !App) {
-        console.warn('[Flight/React] Missing container or App');
-        return;
-    }
-
-    // Check if we have SSR content to hydrate
-    if (container.innerHTML.trim()) {
-        hydrateRoot(container, createElement(App, data.props));
-    } else {
-        // Fallback to client-side render
-        createRoot(container).render(createElement(App, data.props));
-    }
-}
-
-export function render(App, container, props = {}) {
-    const root = createRoot(container);
-    root.render(createElement(App, props));
-    return root;
-}
-        `.trim();
-    }
-}
-
-// ============================================================================
-// Factory Function
-// ============================================================================
-
-/**
- * Create a React UI adapter.
- *
- * @example
- * ```typescript
- * import { react } from '@flightdev/ui/react';
- * import { defineUI } from '@flightdev/ui';
- *
- * export default defineUI(react({ streaming: true }));
- * ```
- */
-export function react(options?: ReactAdapterOptions): ReactAdapter {
-    return new ReactAdapter(options);
-}
-
-export default react;

package/src/adapters/tier-1/solid.ts

@@ -1,222 +0,0 @@
-/**
- * @flightdev/ui - Solid Adapter (Tier 1)
- *
- * Full-featured SolidJS SSR adapter with streaming and hydration support.
- *
- * @module @flightdev/ui/solid
- * @version 2.0.0
- */
-
-import { BaseUIAdapter } from '../../core/adapter.js';
-import type {
-    AdapterCapabilities,
-    Component,
-    RenderContext,
-    RenderResult,
-    StreamingOptions,
-    StreamingRenderResult,
-} from '../../core/types.js';
-
-// ============================================================================
-// Types
-// ============================================================================
-
-export interface SolidAdapterOptions {
-    /** Enable streaming SSR */
-    streaming?: boolean;
-
-    /** Render timeout in milliseconds */
-    timeout?: number;
-}
-
-// ============================================================================
-// Solid Adapter
-// ============================================================================
-
-export class SolidAdapter extends BaseUIAdapter {
-    readonly id = 'solid';
-    readonly name = 'Solid';
-    readonly framework = 'solid';
-    readonly frameworkVersion = '1.8+';
-    readonly tier = 'tier-1' as const;
-
-    override readonly capabilities: AdapterCapabilities = {
-        streaming: true,
-        partialHydration: true,
-        islands: true,
-        resumable: false,
-        ssg: true,
-        csr: true,
-        serverComponents: false,
-    };
-
-    constructor(private options: SolidAdapterOptions = {}) {
-        super();
-    }
-
-    async renderToString(
-        component: Component,
-        _context?: RenderContext
-    ): Promise<RenderResult> {
-        const startTime = performance.now();
-
-        const { renderToString } = await import('solid-js/web');
-
-        const SolidComponent = component.component as () => unknown;
-        const props = component.props ?? {};
-
-        // Create a function that returns the component with props
-        const App = () => SolidComponent() as object;
-
-        const html = await renderToString(() => SolidComponent() as object);
-
-        return {
-            html,
-            hydrationData: {
-                props,
-                componentId: component.id ?? this.generateId(),
-            },
-            timing: this.createTiming(startTime),
-        };
-    }
-
-    renderToStream(
-        component: Component,
-        _context?: RenderContext,
-        options?: StreamingOptions
-    ): StreamingRenderResult {
-        let aborted = false;
-        let resolvePromise: () => void;
-        let rejectPromise: (error: Error) => void;
-
-        const done = new Promise<void>((resolve, reject) => {
-            resolvePromise = resolve;
-            rejectPromise = reject;
-        });
-
-        const stream = new ReadableStream<Uint8Array>({
-            async start(controller) {
-                try {
-                    const { renderToStream: solidRenderToStream } = await import('solid-js/web');
-
-                    const SolidComponent = component.component as () => object;
-                    const App = () => SolidComponent();
-
-                    const { readable } = solidRenderToStream(() => SolidComponent());
-                    const reader = readable.getReader();
-
-                    options?.onShellReady?.();
-
-                    while (true) {
-                        const { done: readerDone, value } = await reader.read();
-
-                        if (aborted) {
-                            reader.cancel();
-                            break;
-                        }
-
-                        if (readerDone) {
-                            controller.close();
-                            resolvePromise();
-                            options?.onAllReady?.();
-                            break;
-                        }
-
-                        // Convert string to Uint8Array if needed
-                        const chunk = typeof value === 'string'
-                            ? new TextEncoder().encode(value)
-                            : value;
-
-                        controller.enqueue(chunk);
-                    }
-                } catch (error) {
-                    const err = error instanceof Error ? error : new Error(String(error));
-                    options?.onError?.(err);
-                    controller.error(err);
-                    rejectPromise(err);
-                }
-            },
-        });
-
-        return {
-            stream,
-            done,
-            abort() {
-                aborted = true;
-                resolvePromise();
-            },
-        };
-    }
-
-    override getHydrationScript(result: RenderResult): string {
-        const data = this.serializeProps(result.hydrationData);
-        return `
-<script type="module">
-window.__FLIGHT_DATA__ = ${data};
-window.__FLIGHT_ADAPTER__ = 'solid';
-
-import { hydrate } from 'solid-js/web';
-
-const App = window.__FLIGHT_APP__;
-const container = document.getElementById('app');
-
-if (App && container) {
-    hydrate(() => App(window.__FLIGHT_DATA__.props), container);
-}
-</script>
-        `.trim();
-    }
-
-    override getClientEntry(): string {
-        return `
-import { hydrate, render } from 'solid-js/web';
-
-export function hydrateApp() {
-    const container = document.getElementById('app');
-    const App = window.__FLIGHT_APP__;
-    const data = window.__FLIGHT_DATA__ ?? {};
-
-    if (!container || !App) {
-        console.warn('[Flight/Solid] Missing container or App');
-        return;
-    }
-
-    // Check if we have SSR content to hydrate
-    if (container.innerHTML.trim()) {
-        return hydrate(() => App(data.props), container);
-    } else {
-        // Fallback to client-side render
-        return render(() => App(data.props), container);
-    }
-}
-
-export function renderApp(App, container, props = {}) {
-    return render(() => App(props), container);
-}
-
-// Export for Flight
-export { hydrateApp as hydrate };
-        `.trim();
-    }
-}
-
-// ============================================================================
-// Factory Function
-// ============================================================================
-
-/**
- * Create a Solid UI adapter.
- *
- * @example
- * ```typescript
- * import { solid } from '@flightdev/ui/solid';
- * import { defineUI } from '@flightdev/ui';
- *
- * export default defineUI(solid({ streaming: true }));
- * ```
- */
-export function solid(options?: SolidAdapterOptions): SolidAdapter {
-    return new SolidAdapter(options);
-}
-
-export default solid;