@flightdev/ui 2.0.0

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

@@ -0,0 +1,211 @@
+/**
+ * @flightdev/ui - Svelte Adapter (Tier 1)
+ *
+ * Full-featured Svelte 5 SSR adapter with hydration support.
+ *
+ * @module @flightdev/ui/svelte
+ * @version 2.0.0
+ */
+
+import { BaseUIAdapter } from '../../core/adapter.js';
+import type {
+    AdapterCapabilities,
+    Component,
+    RenderContext,
+    RenderResult,
+} from '../../core/types.js';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface SvelteAdapterOptions {
+    /** Svelte compile options */
+    compileOptions?: Record<string, unknown>;
+
+    /** Enable CSS extraction */
+    extractCss?: boolean;
+}
+
+// ============================================================================
+// Svelte Adapter
+// ============================================================================
+
+export class SvelteAdapter extends BaseUIAdapter {
+    readonly id = 'svelte';
+    readonly name = 'Svelte';
+    readonly framework = 'svelte';
+    readonly frameworkVersion = '5+';
+    readonly tier = 'tier-1' as const;
+
+    override readonly capabilities: AdapterCapabilities = {
+        streaming: false, // Svelte 5 doesn't have streaming SSR yet
+        partialHydration: true,
+        islands: true,
+        resumable: false,
+        ssg: true,
+        csr: true,
+        serverComponents: false,
+    };
+
+    constructor(private options: SvelteAdapterOptions = {}) {
+        super();
+    }
+
+    async renderToString(
+        component: Component,
+        _context?: RenderContext
+    ): Promise<RenderResult> {
+        const startTime = performance.now();
+
+        try {
+            // Svelte 5 uses the 'svelte/server' module
+            const { render } = await import('svelte/server');
+
+            const SvelteComponent = component.component as new (options: {
+                props?: Record<string, unknown>;
+            }) => unknown;
+
+            // Render the component
+            const { body, head } = render(SvelteComponent, {
+                props: component.props ?? {},
+            });
+
+            return {
+                html: body,
+                head,
+                hydrationData: {
+                    props: component.props,
+                    componentId: component.id ?? this.generateId(),
+                },
+                css: this.options.extractCss ? undefined : undefined, // CSS handled by bundler
+                timing: this.createTiming(startTime),
+            };
+        } catch (error) {
+            // Fallback for Svelte 4 compatibility
+            const message = error instanceof Error ? error.message : String(error);
+
+            if (message.includes("Cannot find module 'svelte/server'")) {
+                // Try Svelte 4 API
+                return this.renderSvelte4(component, startTime);
+            }
+
+            throw error;
+        }
+    }
+
+    /**
+     * Fallback render for Svelte 4
+     */
+    private async renderSvelte4(
+        component: Component,
+        startTime: number
+    ): Promise<RenderResult> {
+        // Svelte 4 component interface
+        const SvelteComponent = component.component as {
+            render: (props: Record<string, unknown>) => {
+                html: string;
+                head: string;
+                css: { code: string };
+            };
+        };
+
+        const result = SvelteComponent.render(component.props ?? {});
+
+        return {
+            html: result.html,
+            head: result.head,
+            css: result.css?.code,
+            hydrationData: {
+                props: component.props,
+                componentId: component.id ?? this.generateId(),
+            },
+            timing: this.createTiming(startTime),
+        };
+    }
+
+    override getHydrationScript(result: RenderResult): string {
+        const data = this.serializeProps(result.hydrationData);
+        return `
+<script type="module">
+window.__FLIGHT_DATA__ = ${data};
+window.__FLIGHT_ADAPTER__ = 'svelte';
+
+const App = window.__FLIGHT_APP__;
+const container = document.getElementById('app');
+
+if (App && container) {
+    const { props } = window.__FLIGHT_DATA__;
+    // Svelte 5 mount
+    import('svelte').then(({ mount, hydrate }) => {
+        if (container.innerHTML.trim()) {
+            hydrate(App, { target: container, props });
+        } else {
+            mount(App, { target: container, props });
+        }
+    });
+}
+</script>
+        `.trim();
+    }
+
+    override getClientEntry(): string {
+        return `
+// Svelte 5 client entry
+import { mount, hydrate } from 'svelte';
+
+export function hydrateApp() {
+    const container = document.getElementById('app');
+    const App = window.__FLIGHT_APP__;
+    const data = window.__FLIGHT_DATA__ ?? {};
+
+    if (!container || !App) {
+        console.warn('[Flight/Svelte] Missing container or App');
+        return;
+    }
+
+    // Check if we have SSR content to hydrate
+    if (container.innerHTML.trim()) {
+        return hydrate(App, {
+            target: container,
+            props: data.props ?? {},
+        });
+    } else {
+        // Fallback to client-side render
+        return mount(App, {
+            target: container,
+            props: data.props ?? {},
+        });
+    }
+}
+
+export function render(App, container, props = {}) {
+    return mount(App, { target: container, props });
+}
+
+// Export for Flight
+export { hydrateApp as hydrate };
+        `.trim();
+    }
+}
+
+// ============================================================================
+// Factory Function
+// ============================================================================
+
+/**
+ * Create a Svelte UI adapter.
+ *
+ * @example
+ * ```typescript
+ * import { svelte } from '@flightdev/ui/svelte';
+ * import { defineUI } from '@flightdev/ui';
+ *
+ * export default defineUI(svelte());
+ * ```
+ */
+export function svelte(options?: SvelteAdapterOptions): SvelteAdapter {
+    return new SvelteAdapter(options);
+}
+
+export default svelte;

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

@@ -0,0 +1,234 @@
+/**
+ * @flightdev/ui - Vue 3 Adapter (Tier 1)
+ *
+ * Full-featured Vue 3 SSR adapter with streaming and hydration support.
+ *
+ * @module @flightdev/ui/vue
+ * @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 VueAdapterOptions {
+    /** Enable streaming SSR with renderToWebStream */
+    streaming?: boolean;
+
+    /** Vue app configuration callback */
+    configureApp?: (app: unknown) => void;
+
+    /** Enable teleports rendering */
+    renderTeleports?: boolean;
+}
+
+// ============================================================================
+// Vue Adapter
+// ============================================================================
+
+export class VueAdapter extends BaseUIAdapter {
+    readonly id = 'vue';
+    readonly name = 'Vue';
+    readonly framework = 'vue';
+    readonly frameworkVersion = '3+';
+    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: VueAdapterOptions = {}) {
+        super();
+    }
+
+    async renderToString(
+        component: Component,
+        _context?: RenderContext
+    ): Promise<RenderResult> {
+        const startTime = performance.now();
+
+        const { createSSRApp } = await import('vue');
+        const { renderToString } = await import('vue/server-renderer');
+
+        // Create Vue SSR app
+        const app = createSSRApp(
+            component.component as import('vue').Component,
+            component.props ?? {}
+        );
+
+        // Apply custom configuration
+        if (this.options.configureApp) {
+            this.options.configureApp(app);
+        }
+
+        const html = await renderToString(app);
+
+        return {
+            html,
+            hydrationData: {
+                props: component.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 { createSSRApp } = await import('vue');
+                    const { renderToWebStream } = await import('vue/server-renderer');
+
+                    const app = createSSRApp(
+                        component.component as import('vue').Component,
+                        component.props ?? {}
+                    );
+
+                    const webStream = renderToWebStream(app);
+                    const reader = webStream.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;
+                        }
+
+                        controller.enqueue(value);
+                    }
+                } 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__ = 'vue';
+
+import { createApp } from 'vue';
+
+const container = document.getElementById('app');
+const App = window.__FLIGHT_APP__;
+
+if (container && App) {
+    const { props } = window.__FLIGHT_DATA__;
+    const app = createApp(App, props);
+    app.mount(container);
+}
+</script>
+        `.trim();
+    }
+
+    override getClientEntry(): string {
+        return `
+import { createApp, createSSRApp } from 'vue';
+
+export function hydrate() {
+    const container = document.getElementById('app');
+    const App = window.__FLIGHT_APP__;
+    const data = window.__FLIGHT_DATA__ ?? {};
+
+    if (!container || !App) {
+        console.warn('[Flight/Vue] Missing container or App');
+        return;
+    }
+
+    // Check if we have SSR content to hydrate
+    if (container.innerHTML.trim()) {
+        const app = createSSRApp(App, data.props);
+        app.mount(container);
+        return app;
+    } else {
+        // Fallback to client-side render
+        const app = createApp(App, data.props);
+        app.mount(container);
+        return app;
+    }
+}
+
+export function render(App, container, props = {}) {
+    const app = createApp(App, props);
+    app.mount(container);
+    return app;
+}
+        `.trim();
+    }
+}
+
+// ============================================================================
+// Factory Function
+// ============================================================================
+
+/**
+ * Create a Vue 3 UI adapter.
+ *
+ * @example
+ * ```typescript
+ * import { vue } from '@flightdev/ui/vue';
+ * import { defineUI } from '@flightdev/ui';
+ *
+ * export default defineUI(vue({ streaming: true }));
+ * ```
+ */
+export function vue(options?: VueAdapterOptions): VueAdapter {
+    return new VueAdapter(options);
+}
+
+export default vue;

package/src/adapters/tier-2/index.ts

@@ -0,0 +1,12 @@
+/**
+ * @flightdev/ui - Tier 2 Adapters Index
+ *
+ * Re-exports all Tier 2 (Standard Support) adapters.
+ */
+
+export { marko, MarkoAdapter, type MarkoAdapterOptions, type MarkoTemplate } from './marko.js';
+export { stencil, StencilAdapter, type StencilAdapterOptions } from './stencil.js';
+export { preact, PreactAdapter, type PreactAdapterOptions } from './preact.js';
+export { lit, LitAdapter, type LitAdapterOptions } from './lit.js';
+export { mithril, MithrilAdapter, type MithrilAdapterOptions } from './mithril.js';
+export { inferno, InfernoAdapter, type InfernoAdapterOptions } from './inferno.js';

package/src/adapters/tier-2/inferno.ts

@@ -0,0 +1,149 @@
+/**
+ * @flightdev/ui - Inferno Adapter (Tier 2)
+ *
+ * Inferno adapter - blazingly fast React-like library.
+ *
+ * @module @flightdev/ui/inferno
+ * @version 2.0.0
+ */
+
+import { BaseUIAdapter } from '../../core/adapter.js';
+import type {
+    AdapterCapabilities,
+    Component,
+    RenderContext,
+    RenderResult,
+} from '../../core/types.js';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface InfernoAdapterOptions {
+    /** Enable JSX compatibility mode */
+    jsxCompat?: boolean;
+}
+
+// ============================================================================
+// Inferno Adapter
+// ============================================================================
+
+export class InfernoAdapter extends BaseUIAdapter {
+    readonly id = 'inferno';
+    readonly name = 'Inferno';
+    readonly framework = 'inferno';
+    readonly frameworkVersion = '8+';
+    readonly tier = 'tier-2' as const;
+
+    override readonly capabilities: AdapterCapabilities = {
+        streaming: false,
+        partialHydration: false,
+        islands: false,
+        resumable: false,
+        ssg: true,
+        csr: true,
+        serverComponents: false,
+    };
+
+    constructor(private options: InfernoAdapterOptions = {}) {
+        super();
+    }
+
+    async renderToString(
+        component: Component,
+        _context?: RenderContext
+    ): Promise<RenderResult> {
+        const startTime = performance.now();
+
+        try {
+            const { renderToString } = await import('inferno-server');
+            const { createElement } = await import('inferno-create-element');
+
+            const InfernoComponent = component.component as inferno.Component;
+            const element = createElement(InfernoComponent, component.props ?? {});
+
+            const html = renderToString(element);
+
+            return {
+                html,
+                hydrationData: {
+                    props: component.props,
+                    componentId: component.id ?? this.generateId(),
+                },
+                timing: this.createTiming(startTime),
+            };
+        } catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+
+            if (message.includes("Cannot find module 'inferno-server'")) {
+                throw new Error(
+                    '[Flight/Inferno] Inferno SSR package not found.\n' +
+                    'Install required packages:\n' +
+                    '  npm install inferno inferno-server inferno-create-element'
+                );
+            }
+
+            throw error;
+        }
+    }
+
+    override getHydrationScript(result: RenderResult): string {
+        const data = this.serializeProps(result.hydrationData);
+        return `
+<script type="module">
+window.__FLIGHT_DATA__ = ${data};
+window.__FLIGHT_ADAPTER__ = 'inferno';
+
+import { hydrate } from 'inferno-hydrate';
+import { createElement } from 'inferno-create-element';
+
+const App = window.__FLIGHT_APP__;
+const container = document.getElementById('app');
+
+if (App && container) {
+    hydrate(
+        createElement(App, window.__FLIGHT_DATA__.props),
+        container
+    );
+}
+</script>
+        `.trim();
+    }
+
+    override getClientEntry(): string {
+        return `
+import { hydrate } from 'inferno-hydrate';
+import { render } from 'inferno';
+import { createElement } from 'inferno-create-element';
+
+export function hydrateApp() {
+    const container = document.getElementById('app');
+    const App = window.__FLIGHT_APP__;
+    const data = window.__FLIGHT_DATA__ ?? {};
+
+    if (!container || !App) {
+        console.warn('[Flight/Inferno] Missing container or App');
+        return;
+    }
+
+    if (container.innerHTML.trim()) {
+        hydrate(createElement(App, data.props), container);
+    } else {
+        render(createElement(App, data.props), container);
+    }
+}
+
+export { hydrateApp as hydrate };
+        `.trim();
+    }
+}
+
+// ============================================================================
+// Factory Function
+// ============================================================================
+
+export function inferno(options?: InfernoAdapterOptions): InfernoAdapter {
+    return new InfernoAdapter(options);
+}
+
+export default inferno;