@flightdev/ui 2.0.0 → 4.0.0

package/src/index.ts

@@ -1,263 +0,0 @@
-/**
- * @flightdev/ui - Universal UI Framework Layer
- *
- * Universal SSR and hydration for 18+ UI frameworks.
- * From React to Angular, Vue to HTMX, Svelte to Web Components.
- *
- * @module @flightdev/ui
- * @version 2.0.0
- *
- * @example Basic Usage
- * ```typescript
- * import { defineUI } from '@flightdev/ui';
- * import { react } from '@flightdev/ui/react';
- *
- * export default defineUI(react());
- * ```
- *
- * @example With Streaming SSR
- * ```typescript
- * import { defineUI } from '@flightdev/ui';
- * import { react } from '@flightdev/ui/react';
- *
- * export default defineUI(react(), {
- *   streaming: true,
- *   hydration: 'progressive',
- * });
- * ```
- *
- * @example Using Adapter Registry
- * ```typescript
- * import { adapterRegistry } from '@flightdev/ui';
- *
- * // Get adapter dynamically
- * const adapter = await adapterRegistry.get('vue');
- *
- * // List all by tier
- * const tier1 = adapterRegistry.listByTier('tier-1');
- * ```
- */
-
-// ============================================================================
-// Core Types & Utilities
-// ============================================================================
-
-export type {
-    // Capability System
-    AdapterCapabilities,
-    AdapterTier,
-    TierInfo,
-
-    // Component & Rendering
-    Component,
-    ComponentProps,
-    RenderContext,
-    RenderResult,
-    RenderTiming,
-
-    // Streaming
-    StreamingOptions,
-    StreamingRenderResult,
-
-    // Islands Architecture
-    IslandHydrationStrategy,
-    IslandOptions,
-    Island,
-
-    // Adapter Interfaces
-    UIAdapterV2,
-    UIAdapterV1,
-    UIAdapter,
-    UIConfig,
-
-    // Utility Types
-    HasCapability,
-} from './core/types.js';
-
-export {
-    DEFAULT_CAPABILITIES,
-    TIER_INFO,
-} from './core/types.js';
-
-// Base Adapter & Utilities
-export {
-    BaseUIAdapter,
-    wrapV1Adapter,
-    isV2Adapter,
-    hasCapability,
-    getCapabilities,
-} from './core/adapter.js';
-
-// Registry
-export type {
-    AdapterLoader,
-    AdapterMetadata,
-    RegistryQueryOptions,
-} from './core/registry.js';
-
-export {
-    adapterRegistry,
-    registerBuiltinAdapters,
-} from './core/registry.js';
-
-// ============================================================================
-// Factory Function
-// ============================================================================
-
-import type { UIAdapterV2, UIAdapterV1, UIConfig, IslandHydrationStrategy } from './core/types.js';
-
-/**
- * Define UI configuration for Flight.
- *
- * @example
- * ```typescript
- * import { defineUI } from '@flightdev/ui';
- * import { react } from '@flightdev/ui/react';
- *
- * export const ui = defineUI(react(), {
- *   streaming: true,
- *   hydration: 'progressive',
- * });
- * ```
- */
-export function defineUI(
-    adapter: UIAdapterV2 | UIAdapterV1,
-    options: {
-        streaming?: boolean;
-        hydration?: 'full' | 'partial' | 'progressive' | 'none';
-        islands?: boolean;
-        defaultIslandStrategy?: IslandHydrationStrategy;
-    } = {}
-): UIConfig {
-    return {
-        adapter,
-        streaming: options.streaming ?? false,
-        hydration: options.hydration ?? 'full',
-        islands: options.islands ?? false,
-        defaultIslandStrategy: options.defaultIslandStrategy ?? 'idle',
-    };
-}
-
-// ============================================================================
-// Render Utilities
-// ============================================================================
-
-import type { Component, RenderResult, RenderContext } from './core/types.js';
-import { isV2Adapter } from './core/adapter.js';
-
-/**
- * Render a page with the configured UI adapter.
- */
-export async function renderPage(
-    config: UIConfig,
-    component: Component,
-    context?: RenderContext
-): Promise<RenderResult> {
-    const result = await config.adapter.renderToString(component, context);
-
-    // Add hydration script if needed
-    if (config.hydration !== 'none') {
-        const hydrationScript = config.adapter.getHydrationScript(result);
-        result.scripts = [...(result.scripts ?? []), hydrationScript];
-    }
-
-    return result;
-}
-
-/**
- * Render a page as a stream (if adapter supports streaming).
- */
-export function renderPageStream(
-    config: UIConfig,
-    component: Component,
-    context?: RenderContext
-): ReadableStream<Uint8Array> | null {
-    if (!isV2Adapter(config.adapter) || !config.adapter.capabilities.streaming) {
-        return null;
-    }
-
-    const streamResult = config.adapter.renderToStream?.(component, context);
-    return streamResult?.stream ?? null;
-}
-
-/**
- * Generate full HTML document from render result.
- */
-export function toHTML(
-    result: RenderResult,
-    options: {
-        lang?: string;
-        title?: string;
-        meta?: Record<string, string>;
-        charset?: string;
-        viewport?: string;
-    } = {}
-): string {
-    const {
-        lang = 'en',
-        title = 'Flight App',
-        meta = {},
-        charset = 'UTF-8',
-        viewport = 'width=device-width, initial-scale=1.0',
-    } = options;
-
-    const metaTags = Object.entries(meta)
-        .map(([name, content]) => `<meta name="${name}" content="${content}">`)
-        .join('\n    ');
-
-    const scripts = result.scripts
-        ?.map((s) => (s.startsWith('<script') ? s : `<script>${s}</script>`))
-        .join('\n    ') ?? '';
-
-    return `<!DOCTYPE html>
-<html lang="${lang}">
-  <head>
-    <meta charset="${charset}">
-    <meta name="viewport" content="${viewport}">
-    <title>${title}</title>
-    ${metaTags}
-    ${result.head ?? ''}
-    ${result.css ? `<style>${result.css}</style>` : ''}
-  </head>
-  <body>
-    <div id="app">${result.html}</div>
-    ${scripts}
-  </body>
-</html>`;
-}
-
-// ============================================================================
-// Convenience Re-exports (Backward Compatibility)
-// ============================================================================
-
-// These maintain backward compatibility with v1 imports
-// e.g., import { react } from '@flightdev/ui'
-
-// Note: For tree-shaking, prefer deep imports:
-// import { react } from '@flightdev/ui/react'
-
-// ============================================================================
-// Version & Info
-// ============================================================================
-
-/**
- * Package version
- */
-export const VERSION = '2.0.0';
-
-/**
- * Get information about the UI package
- */
-export function getPackageInfo() {
-    return {
-        name: '@flightdev/ui',
-        version: VERSION,
-        description: 'Universal UI Framework Layer - SSR/hydration for 18+ frameworks',
-        tiers: {
-            'tier-1': ['react', 'vue', 'angular', 'svelte', 'solid', 'qwik'],
-            'tier-2': ['preact', 'lit', 'marko', 'stencil', 'mithril', 'inferno'],
-            'tier-3': ['htmx', 'alpine', 'hotwire', 'stimulus', 'petite-vue', 'vanilla'],
-        },
-        totalAdapters: 18,
-    };
-}

package/test/__mocks__/stencil-core.ts

@@ -1,19 +0,0 @@
-/**
- * Mock for @stencil/core
- * Provides minimal stubs for Stencil components to allow tests to run
- * without the actual @stencil/core package installed.
- */
-
-export const Component = () => (target: unknown) => target;
-export const Prop = () => (target: unknown, key: string) => { };
-export const h = (tag: string, props?: unknown, ...children: unknown[]) => ({
-    tag,
-    props,
-    children,
-});
-
-export default {
-    Component,
-    Prop,
-    h,
-};

package/test/__mocks__/stencil-hydrate.ts

@@ -1,15 +0,0 @@
-/**
- * Mock for @stencil/core/hydrate
- * Used during tests when the actual package is not available
- */
-
-export async function renderToString(
-    _html: string,
-    _options?: {
-        fullDocument?: boolean;
-        prettyHtml?: boolean;
-        serializeShadowRoot?: string;
-    }
-): Promise<{ html: string }> {
-    return { html: '<mock-stencil>Mocked Stencil Output</mock-stencil>' };
-}

package/test/adapters/tier-1.test.ts

@@ -1,206 +0,0 @@
-/**
- * @flightdev/ui - Tier 1 Adapter Tests
- *
- * Tests for full-support adapters: React, Vue, Angular, Svelte, Solid, Qwik.
- * These adapters have the most complete feature sets.
- */
-
-import { describe, it, expect, vi } from 'vitest';
-import { runAdapterContractTests } from '../contracts/adapter.contract.js';
-
-// ============================================================================
-// Tier 1 Adapter Imports
-// ============================================================================
-
-import { react, ReactAdapter } from '../../src/adapters/tier-1/react.js';
-import { vue, VueAdapter } from '../../src/adapters/tier-1/vue.js';
-import { angular, AngularAdapter } from '../../src/adapters/tier-1/angular.js';
-import { svelte, SvelteAdapter } from '../../src/adapters/tier-1/svelte.js';
-import { solid, SolidAdapter } from '../../src/adapters/tier-1/solid.js';
-import { qwik, QwikAdapter } from '../../src/adapters/tier-1/qwik.js';
-
-// ============================================================================
-// Contract Tests
-// ============================================================================
-
-// Note: We skip render tests for Tier 1 adapters because they require
-// actual framework installations. Contract tests verify the interface.
-
-describe('Tier 1 Adapters', () => {
-    runAdapterContractTests(() => react(), 'React', { skipRenderTest: true });
-    runAdapterContractTests(() => vue(), 'Vue', { skipRenderTest: true });
-    runAdapterContractTests(() => angular(), 'Angular', { skipRenderTest: true });
-    runAdapterContractTests(() => svelte(), 'Svelte', { skipRenderTest: true });
-    runAdapterContractTests(() => solid(), 'Solid', { skipRenderTest: true });
-    runAdapterContractTests(() => qwik(), 'Qwik', { skipRenderTest: true });
-});
-
-// ============================================================================
-// React Specific Tests
-// ============================================================================
-
-describe('React Adapter - Specific', () => {
-    it('creates adapter with default options', () => {
-        const adapter = react();
-        expect(adapter).toBeInstanceOf(ReactAdapter);
-        expect(adapter.id).toBe('react');
-        expect(adapter.tier).toBe('tier-1');
-    });
-
-    it('supports streaming capability', () => {
-        const adapter = react();
-        expect(adapter.capabilities.streaming).toBe(true);
-    });
-
-    it('supports server components capability', () => {
-        const adapter = react();
-        expect(adapter.capabilities.serverComponents).toBe(true);
-    });
-
-    it('accepts streaming option', () => {
-        const adapter = react({ streaming: true });
-        expect(adapter).toBeDefined();
-    });
-
-    it('accepts serverComponents option', () => {
-        const adapter = react({ serverComponents: true });
-        expect(adapter).toBeDefined();
-    });
-
-    it('getHydrationScript includes react-dom/client import', () => {
-        const adapter = react();
-        const script = adapter.getHydrationScript({ html: '', hydrationData: {} });
-        expect(script).toContain('react-dom/client');
-    });
-});
-
-// ============================================================================
-// Vue Specific Tests
-// ============================================================================
-
-describe('Vue Adapter - Specific', () => {
-    it('creates adapter with default options', () => {
-        const adapter = vue();
-        expect(adapter).toBeInstanceOf(VueAdapter);
-        expect(adapter.id).toBe('vue');
-        expect(adapter.tier).toBe('tier-1');
-    });
-
-    it('supports streaming capability', () => {
-        const adapter = vue();
-        expect(adapter.capabilities.streaming).toBe(true);
-    });
-
-    it('does not support server components', () => {
-        const adapter = vue();
-        expect(adapter.capabilities.serverComponents).toBe(false);
-    });
-
-    it('getHydrationScript includes vue import', () => {
-        const adapter = vue();
-        const script = adapter.getHydrationScript({ html: '', hydrationData: {} });
-        expect(script).toContain('vue');
-    });
-});
-
-// ============================================================================
-// Angular Specific Tests
-// ============================================================================
-
-describe('Angular Adapter - Specific', () => {
-    it('creates adapter with default options', () => {
-        const adapter = angular();
-        expect(adapter).toBeInstanceOf(AngularAdapter);
-        expect(adapter.id).toBe('angular');
-        expect(adapter.tier).toBe('tier-1');
-    });
-
-    it('supports streaming capability', () => {
-        const adapter = angular();
-        expect(adapter.capabilities.streaming).toBe(true);
-    });
-
-    it('accepts incrementalHydration option', () => {
-        const adapter = angular({ incrementalHydration: true });
-        expect(adapter).toBeDefined();
-    });
-
-    it('accepts eventReplay option', () => {
-        const adapter = angular({ eventReplay: true });
-        expect(adapter).toBeDefined();
-    });
-});
-
-// ============================================================================
-// Svelte Specific Tests
-// ============================================================================
-
-describe('Svelte Adapter - Specific', () => {
-    it('creates adapter with default options', () => {
-        const adapter = svelte();
-        expect(adapter).toBeInstanceOf(SvelteAdapter);
-        expect(adapter.id).toBe('svelte');
-        expect(adapter.tier).toBe('tier-1');
-    });
-
-    it('does not support streaming (Svelte 5 limitation)', () => {
-        const adapter = svelte();
-        expect(adapter.capabilities.streaming).toBe(false);
-    });
-
-    it('supports islands architecture', () => {
-        const adapter = svelte();
-        expect(adapter.capabilities.islands).toBe(true);
-    });
-});
-
-// ============================================================================
-// Solid Specific Tests
-// ============================================================================
-
-describe('Solid Adapter - Specific', () => {
-    it('creates adapter with default options', () => {
-        const adapter = solid();
-        expect(adapter).toBeInstanceOf(SolidAdapter);
-        expect(adapter.id).toBe('solid');
-        expect(adapter.tier).toBe('tier-1');
-    });
-
-    it('supports streaming capability', () => {
-        const adapter = solid();
-        expect(adapter.capabilities.streaming).toBe(true);
-    });
-
-    it('supports islands architecture', () => {
-        const adapter = solid();
-        expect(adapter.capabilities.islands).toBe(true);
-    });
-});
-
-// ============================================================================
-// Qwik Specific Tests
-// ============================================================================
-
-describe('Qwik Adapter - Specific', () => {
-    it('creates adapter with default options', () => {
-        const adapter = qwik();
-        expect(adapter).toBeInstanceOf(QwikAdapter);
-        expect(adapter.id).toBe('qwik');
-        expect(adapter.tier).toBe('tier-1');
-    });
-
-    it('supports resumable hydration (unique to Qwik)', () => {
-        const adapter = qwik();
-        expect(adapter.capabilities.resumable).toBe(true);
-    });
-
-    it('supports streaming capability', () => {
-        const adapter = qwik();
-        expect(adapter.capabilities.streaming).toBe(true);
-    });
-
-    it('accepts prefetchStrategy option', () => {
-        const adapter = qwik({ prefetchStrategy: 'idle' });
-        expect(adapter).toBeDefined();
-    });
-});

package/test/adapters/tier-2.test.ts

@@ -1,175 +0,0 @@
-/**
- * @flightdev/ui - Tier 2 Adapter Tests
- *
- * Tests for standard-support adapters: Preact, Lit, Marko, Stencil, Mithril, Inferno.
- */
-
-import { describe, it, expect } from 'vitest';
-import { runAdapterContractTests } from '../contracts/adapter.contract.js';
-
-// ============================================================================
-// Tier 2 Adapter Imports
-// ============================================================================
-
-import { preact, PreactAdapter } from '../../src/adapters/tier-2/preact.js';
-import { lit, LitAdapter } from '../../src/adapters/tier-2/lit.js';
-import { marko, MarkoAdapter } from '../../src/adapters/tier-2/marko.js';
-// Stencil requires @stencil/core which may not be available in CI
-// import { stencil, StencilAdapter } from '../../src/adapters/tier-2/stencil.js';
-import { mithril, MithrilAdapter } from '../../src/adapters/tier-2/mithril.js';
-import { inferno, InfernoAdapter } from '../../src/adapters/tier-2/inferno.js';
-
-// ============================================================================
-// Contract Tests
-// ============================================================================
-
-describe('Tier 2 Adapters', () => {
-    runAdapterContractTests(() => preact(), 'Preact', { skipRenderTest: true });
-    runAdapterContractTests(() => lit(), 'Lit', { skipRenderTest: true });
-    runAdapterContractTests(() => marko(), 'Marko', { skipRenderTest: true });
-    runAdapterContractTests(() => mithril(), 'Mithril', { skipRenderTest: true });
-    runAdapterContractTests(() => inferno(), 'Inferno', { skipRenderTest: true });
-    // Stencil skipped - requires @stencil/core peer dependency
-    // runAdapterContractTests(() => stencil(), 'Stencil', { skipRenderTest: true });
-});
-
-// ============================================================================
-// Preact Specific Tests
-// ============================================================================
-
-describe('Preact Adapter - Specific', () => {
-    it('creates adapter with default options', () => {
-        const adapter = preact();
-        expect(adapter).toBeInstanceOf(PreactAdapter);
-        expect(adapter.id).toBe('preact');
-        expect(adapter.tier).toBe('tier-2');
-    });
-
-    it('is classified as tier-2', () => {
-        const adapter = preact();
-        expect(adapter.tier).toBe('tier-2');
-    });
-
-    it('supports islands architecture', () => {
-        const adapter = preact();
-        expect(adapter.capabilities.islands).toBe(true);
-    });
-
-    it('does not support streaming', () => {
-        const adapter = preact();
-        expect(adapter.capabilities.streaming).toBe(false);
-    });
-});
-
-// ============================================================================
-// Lit Specific Tests
-// ============================================================================
-
-describe('Lit Adapter - Specific', () => {
-    it('creates adapter with default options', () => {
-        const adapter = lit();
-        expect(adapter).toBeInstanceOf(LitAdapter);
-        expect(adapter.id).toBe('lit');
-        expect(adapter.tier).toBe('tier-2');
-    });
-
-    it('supports islands (Web Components are natural islands)', () => {
-        const adapter = lit();
-        expect(adapter.capabilities.islands).toBe(true);
-    });
-
-    it('accepts declarativeShadowDom option', () => {
-        const adapter = lit({ declarativeShadowDom: true });
-        expect(adapter).toBeDefined();
-    });
-
-    it('supports createIsland method', () => {
-        const adapter = lit();
-        expect(typeof adapter.createIsland).toBe('function');
-    });
-});
-
-// ============================================================================
-// Marko Specific Tests
-// ============================================================================
-
-describe('Marko Adapter - Specific', () => {
-    it('creates adapter with default options', () => {
-        const adapter = marko();
-        expect(adapter).toBeInstanceOf(MarkoAdapter);
-        expect(adapter.id).toBe('marko');
-        expect(adapter.tier).toBe('tier-2');
-    });
-
-    it('supports streaming SSR (Marko pioneered this)', () => {
-        const adapter = marko();
-        expect(adapter.capabilities.streaming).toBe(true);
-    });
-
-    it('supports islands architecture', () => {
-        const adapter = marko();
-        expect(adapter.capabilities.islands).toBe(true);
-    });
-});
-
-// ============================================================================
-// Stencil Specific Tests - Skipped (requires @stencil/core peer dependency)
-// ============================================================================
-
-describe.skip('Stencil Adapter - Specific', () => {
-    it('creates adapter with default options', () => {
-        // Skipped - @stencil/core not available in CI
-    });
-});
-
-// ============================================================================
-// Mithril Specific Tests
-// ============================================================================
-
-describe('Mithril Adapter - Specific', () => {
-    it('creates adapter with default options', () => {
-        const adapter = mithril();
-        expect(adapter).toBeInstanceOf(MithrilAdapter);
-        expect(adapter.id).toBe('mithril');
-        expect(adapter.tier).toBe('tier-2');
-    });
-
-    it('does not support streaming', () => {
-        const adapter = mithril();
-        expect(adapter.capabilities.streaming).toBe(false);
-    });
-
-    it('does not support islands', () => {
-        const adapter = mithril();
-        expect(adapter.capabilities.islands).toBe(false);
-    });
-
-    it('supports SSG', () => {
-        const adapter = mithril();
-        expect(adapter.capabilities.ssg).toBe(true);
-    });
-});
-
-// ============================================================================
-// Inferno Specific Tests
-// ============================================================================
-
-describe('Inferno Adapter - Specific', () => {
-    it('creates adapter with default options', () => {
-        const adapter = inferno();
-        expect(adapter).toBeInstanceOf(InfernoAdapter);
-        expect(adapter.id).toBe('inferno');
-        expect(adapter.tier).toBe('tier-2');
-    });
-
-    it('does not support streaming', () => {
-        const adapter = inferno();
-        expect(adapter.capabilities.streaming).toBe(false);
-    });
-
-    it('supports SSG and CSR', () => {
-        const adapter = inferno();
-        expect(adapter.capabilities.ssg).toBe(true);
-        expect(adapter.capabilities.csr).toBe(true);
-    });
-});