@flightdev/ui 2.0.0

package/package.json

@@ -0,0 +1,229 @@
+{
+  "name": "@flightdev/ui",
+  "version": "2.0.0",
+  "description": "Flight Universal UI Adapters - SSR/hydration for 18+ frameworks: React, Vue, Angular, Svelte, Solid, Qwik, Marko, Lit, HTMX, Alpine.js, Stencil, and more",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./core": {
+      "types": "./dist/core/index.d.ts",
+      "import": "./dist/core/index.js"
+    },
+    "./react": {
+      "types": "./dist/adapters/tier-1/react.d.ts",
+      "import": "./dist/adapters/tier-1/react.js"
+    },
+    "./vue": {
+      "types": "./dist/adapters/tier-1/vue.d.ts",
+      "import": "./dist/adapters/tier-1/vue.js"
+    },
+    "./angular": {
+      "types": "./dist/adapters/tier-1/angular.d.ts",
+      "import": "./dist/adapters/tier-1/angular.js"
+    },
+    "./svelte": {
+      "types": "./dist/adapters/tier-1/svelte.d.ts",
+      "import": "./dist/adapters/tier-1/svelte.js"
+    },
+    "./solid": {
+      "types": "./dist/adapters/tier-1/solid.d.ts",
+      "import": "./dist/adapters/tier-1/solid.js"
+    },
+    "./qwik": {
+      "types": "./dist/adapters/tier-1/qwik.d.ts",
+      "import": "./dist/adapters/tier-1/qwik.js"
+    },
+    "./preact": {
+      "types": "./dist/adapters/tier-2/preact.d.ts",
+      "import": "./dist/adapters/tier-2/preact.js"
+    },
+    "./lit": {
+      "types": "./dist/adapters/tier-2/lit.d.ts",
+      "import": "./dist/adapters/tier-2/lit.js"
+    },
+    "./marko": {
+      "types": "./dist/adapters/tier-2/marko.d.ts",
+      "import": "./dist/adapters/tier-2/marko.js"
+    },
+    "./stencil": {
+      "types": "./dist/adapters/tier-2/stencil.d.ts",
+      "import": "./dist/adapters/tier-2/stencil.js"
+    },
+    "./mithril": {
+      "types": "./dist/adapters/tier-2/mithril.d.ts",
+      "import": "./dist/adapters/tier-2/mithril.js"
+    },
+    "./inferno": {
+      "types": "./dist/adapters/tier-2/inferno.d.ts",
+      "import": "./dist/adapters/tier-2/inferno.js"
+    },
+    "./htmx": {
+      "types": "./dist/adapters/tier-3/htmx.d.ts",
+      "import": "./dist/adapters/tier-3/htmx.js"
+    },
+    "./alpine": {
+      "types": "./dist/adapters/tier-3/alpine.d.ts",
+      "import": "./dist/adapters/tier-3/alpine.js"
+    },
+    "./hotwire": {
+      "types": "./dist/adapters/tier-3/hotwire.d.ts",
+      "import": "./dist/adapters/tier-3/hotwire.js"
+    },
+    "./stimulus": {
+      "types": "./dist/adapters/tier-3/stimulus.d.ts",
+      "import": "./dist/adapters/tier-3/stimulus.js"
+    },
+    "./petite-vue": {
+      "types": "./dist/adapters/tier-3/petite-vue.d.ts",
+      "import": "./dist/adapters/tier-3/petite-vue.js"
+    },
+    "./vanilla": {
+      "types": "./dist/adapters/tier-3/vanilla.d.ts",
+      "import": "./dist/adapters/tier-3/vanilla.js"
+    },
+    "./tier-1": {
+      "types": "./dist/adapters/tier-1/index.d.ts",
+      "import": "./dist/adapters/tier-1/index.js"
+    },
+    "./tier-2": {
+      "types": "./dist/adapters/tier-2/index.d.ts",
+      "import": "./dist/adapters/tier-2/index.js"
+    },
+    "./tier-3": {
+      "types": "./dist/adapters/tier-3/index.d.ts",
+      "import": "./dist/adapters/tier-3/index.js"
+    }
+  },
+  "keywords": [
+    "flight",
+    "ui",
+    "ssr",
+    "hydration",
+    "streaming",
+    "islands",
+    "react",
+    "vue",
+    "angular",
+    "svelte",
+    "solid",
+    "qwik",
+    "preact",
+    "lit",
+    "marko",
+    "stencil",
+    "htmx",
+    "alpine",
+    "hotwire",
+    "stimulus",
+    "web-components",
+    "universal",
+    "framework-agnostic"
+  ],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "@vitest/coverage-v8": "^2.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.7.0",
+    "vitest": "^2.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "vue": ">=3.0.0",
+    "@angular/core": ">=17.0.0",
+    "@angular/platform-server": ">=17.0.0",
+    "@angular/platform-browser": ">=17.0.0",
+    "svelte": ">=4.0.0",
+    "solid-js": ">=1.0.0",
+    "@builder.io/qwik": ">=1.0.0",
+    "preact": ">=10.0.0",
+    "lit": ">=3.0.0",
+    "@lit-labs/ssr": ">=3.0.0",
+    "marko": ">=5.0.0",
+    "@stencil/core": ">=4.0.0",
+    "mithril": ">=2.0.0",
+    "inferno": ">=8.0.0",
+    "@hotwired/turbo": ">=8.0.0",
+    "@hotwired/stimulus": ">=3.0.0",
+    "petite-vue": ">=0.4.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "@angular/core": {
+      "optional": true
+    },
+    "@angular/platform-server": {
+      "optional": true
+    },
+    "@angular/platform-browser": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "solid-js": {
+      "optional": true
+    },
+    "@builder.io/qwik": {
+      "optional": true
+    },
+    "preact": {
+      "optional": true
+    },
+    "lit": {
+      "optional": true
+    },
+    "@lit-labs/ssr": {
+      "optional": true
+    },
+    "marko": {
+      "optional": true
+    },
+    "@stencil/core": {
+      "optional": true
+    },
+    "mithril": {
+      "optional": true
+    },
+    "inferno": {
+      "optional": true
+    },
+    "@hotwired/turbo": {
+      "optional": true
+    },
+    "@hotwired/stimulus": {
+      "optional": true
+    },
+    "petite-vue": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "lint": "eslint src test"
+  }
+}

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

@@ -0,0 +1,223 @@
+/**
+ * @flightdev/ui - Angular Adapter (Tier 1)
+ *
+ * Full-featured Angular 17+ SSR adapter with hydration and incremental hydration support.
+ *
+ * @module @flightdev/ui/angular
+ * @version 2.0.0
+ */
+
+import { BaseUIAdapter } from '../../core/adapter.js';
+import type {
+    AdapterCapabilities,
+    Component,
+    RenderContext,
+    RenderResult,
+} from '../../core/types.js';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+/**
+ * Angular bootstrap function type
+ */
+export type AngularBootstrapFn = (document: string, url: string) => Promise<unknown>;
+
+export interface AngularAdapterOptions {
+    /** Enable incremental hydration (Angular 17+) */
+    incrementalHydration?: boolean;
+
+    /** Enable event replay during hydration */
+    eventReplay?: boolean;
+
+    /** Document template for SSR */
+    documentTemplate?: string;
+
+    /** Custom providers for SSR */
+    providers?: unknown[];
+}
+
+// ============================================================================
+// Angular Adapter
+// ============================================================================
+
+export class AngularAdapter extends BaseUIAdapter {
+    readonly id = 'angular';
+    readonly name = 'Angular';
+    readonly framework = 'angular';
+    readonly frameworkVersion = '17+';
+    readonly tier = 'tier-1' as const;
+
+    override readonly capabilities: AdapterCapabilities = {
+        streaming: true,
+        partialHydration: true,
+        islands: false, // Angular doesn't have traditional islands
+        resumable: false,
+        ssg: true,
+        csr: true,
+        serverComponents: false,
+    };
+
+    private documentTemplate: string;
+
+    constructor(private options: AngularAdapterOptions = {}) {
+        super();
+        this.documentTemplate = options.documentTemplate ?? this.getDefaultDocumentTemplate();
+    }
+
+    async renderToString(
+        component: Component,
+        context?: RenderContext
+    ): Promise<RenderResult> {
+        const startTime = performance.now();
+
+        try {
+            // Dynamic import of Angular platform-server
+            const { renderApplication } = await import('@angular/platform-server');
+            const { provideClientHydration, withIncrementalHydration, withEventReplay } =
+                await import('@angular/platform-browser');
+
+            // Build hydration providers based on options
+            const hydrationFeatures: unknown[] = [];
+
+            if (this.options.incrementalHydration) {
+                hydrationFeatures.push(withIncrementalHydration());
+            }
+
+            if (this.options.eventReplay) {
+                hydrationFeatures.push(withEventReplay());
+            }
+
+            // The component should be an Angular bootstrap function
+            const bootstrap = component.component as AngularBootstrapFn;
+            const url = context?.url ?? '/';
+
+            // Render the application
+            const html = await renderApplication(bootstrap, {
+                document: this.documentTemplate,
+                url,
+            });
+
+            return {
+                html,
+                hydrationData: {
+                    props: component.props,
+                    url,
+                    componentId: component.id ?? this.generateId(),
+                },
+                timing: this.createTiming(startTime),
+            };
+        } catch (error) {
+            // Handle missing Angular dependencies gracefully
+            const message = error instanceof Error ? error.message : String(error);
+
+            if (message.includes("Cannot find module '@angular/platform-server'")) {
+                throw new Error(
+                    '[Flight/Angular] Angular SSR dependencies not found.\n' +
+                    'Install required packages:\n' +
+                    '  npm install @angular/core @angular/platform-server @angular/platform-browser'
+                );
+            }
+
+            throw error;
+        }
+    }
+
+    override getHydrationScript(result: RenderResult): string {
+        const data = this.serializeProps(result.hydrationData);
+
+        // Angular handles hydration differently - it's built into the render output
+        // This script is for passing additional Flight-specific data
+        return `
+<script type="module">
+window.__FLIGHT_DATA__ = ${data};
+window.__FLIGHT_ADAPTER__ = 'angular';
+// Angular hydration is automatic when provideClientHydration is configured
+</script>
+        `.trim();
+    }
+
+    override getClientEntry(): string {
+        return `
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideClientHydration } from '@angular/platform-browser';
+
+export async function hydrate() {
+    const App = window.__FLIGHT_APP__;
+    const data = window.__FLIGHT_DATA__ ?? {};
+
+    if (!App) {
+        console.warn('[Flight/Angular] No App component found');
+        return;
+    }
+
+    try {
+        const appRef = await bootstrapApplication(App, {
+            providers: [
+                provideClientHydration(),
+                // Additional providers can be added here
+            ],
+        });
+        
+        console.log('[Flight/Angular] Application bootstrapped');
+        return appRef;
+    } catch (error) {
+        console.error('[Flight/Angular] Bootstrap failed:', error);
+        throw error;
+    }
+}
+
+export async function render(AppComponent, providers = []) {
+    return bootstrapApplication(AppComponent, {
+        providers: [
+            ...providers,
+        ],
+    });
+}
+        `.trim();
+    }
+
+    /**
+     * Get the default document template for SSR
+     */
+    private getDefaultDocumentTemplate(): string {
+        return `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Flight App</title>
+</head>
+<body>
+    <app-root></app-root>
+</body>
+</html>
+        `.trim();
+    }
+}
+
+// ============================================================================
+// Factory Function
+// ============================================================================
+
+/**
+ * Create an Angular UI adapter.
+ *
+ * @example
+ * ```typescript
+ * import { angular } from '@flightdev/ui/angular';
+ * import { defineUI } from '@flightdev/ui';
+ *
+ * export default defineUI(angular({
+ *   incrementalHydration: true,
+ *   eventReplay: true,
+ * }));
+ * ```
+ */
+export function angular(options?: AngularAdapterOptions): AngularAdapter {
+    return new AngularAdapter(options);
+}
+
+export default angular;

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

@@ -0,0 +1,12 @@
+/**
+ * @flightdev/ui - Tier 1 Adapters Index
+ *
+ * Re-exports all Tier 1 (Full Support) adapters.
+ */
+
+export { react, ReactAdapter, type ReactAdapterOptions } from './react.js';
+export { vue, VueAdapter, type VueAdapterOptions } from './vue.js';
+export { angular, AngularAdapter, type AngularAdapterOptions, type AngularBootstrapFn } from './angular.js';
+export { svelte, SvelteAdapter, type SvelteAdapterOptions } from './svelte.js';
+export { solid, SolidAdapter, type SolidAdapterOptions } from './solid.js';
+export { qwik, QwikAdapter, type QwikAdapterOptions } from './qwik.js';

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

@@ -0,0 +1,177 @@
+/**
+ * @flightdev/ui - Qwik Adapter (Tier 1)
+ *
+ * Qwik adapter with resumable hydration - zero JavaScript until interaction.
+ *
+ * @module @flightdev/ui/qwik
+ * @version 2.0.0
+ */
+
+import { BaseUIAdapter } from '../../core/adapter.js';
+import type {
+    AdapterCapabilities,
+    Component,
+    RenderContext,
+    RenderResult,
+} from '../../core/types.js';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface QwikAdapterOptions {
+    /** Enable prefetching */
+    prefetch?: boolean;
+
+    /** Prefetch strategy */
+    prefetchStrategy?: 'hover' | 'viewport' | 'idle';
+
+    /** Container tag name */
+    containerTagName?: string;
+}
+
+// ============================================================================
+// Qwik Adapter
+// ============================================================================
+
+export class QwikAdapter extends BaseUIAdapter {
+    readonly id = 'qwik';
+    readonly name = 'Qwik';
+    readonly framework = 'qwik';
+    readonly frameworkVersion = '1.0+';
+    readonly tier = 'tier-1' as const;
+
+    override readonly capabilities: AdapterCapabilities = {
+        streaming: true,
+        partialHydration: true,
+        islands: true,
+        resumable: true, // Qwik's killer feature!
+        ssg: true,
+        csr: true,
+        serverComponents: false,
+    };
+
+    constructor(private options: QwikAdapterOptions = {}) {
+        super();
+    }
+
+    async renderToString(
+        component: Component,
+        _context?: RenderContext
+    ): Promise<RenderResult> {
+        const startTime = performance.now();
+
+        try {
+            const { renderToString } = await import('@builder.io/qwik/server');
+
+            const QwikComponent = component.component as () => unknown;
+            const containerTagName = this.options.containerTagName ?? 'div';
+
+            const result = await renderToString(QwikComponent, {
+                containerTagName,
+                // Qwik serializes state automatically
+            });
+
+            return {
+                html: result.html,
+                hydrationData: {
+                    // Qwik doesn't need explicit hydration data
+                    // State is serialized in the HTML
+                    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 '@builder.io/qwik/server'")) {
+                throw new Error(
+                    '[Flight/Qwik] Qwik dependencies not found.\n' +
+                    'Install required packages:\n' +
+                    '  npm install @builder.io/qwik'
+                );
+            }
+
+            throw error;
+        }
+    }
+
+    /**
+     * Serialize state for resumability (Qwik's specialty)
+     */
+    override serializeState(state: unknown): string {
+        // Qwik handles serialization internally via qwik/serialization
+        return JSON.stringify(state);
+    }
+
+    /**
+     * Resume from serialized state
+     */
+    override resumeFromState(_serialized: string): unknown {
+        // Qwik automatically resumes from HTML-embedded state
+        // This is called by the client-side Qwik runtime
+        return null;
+    }
+
+    override getHydrationScript(_result: RenderResult): string {
+        // Qwik doesn't need traditional hydration scripts
+        // It uses resumability - the state is in the HTML
+        const prefetchStrategy = this.options.prefetchStrategy ?? 'idle';
+
+        return `
+<script type="module">
+window.__FLIGHT_ADAPTER__ = 'qwik';
+// Qwik handles resumability automatically
+// No hydration script needed - Qwik resumes from HTML state
+// Prefetch strategy: ${prefetchStrategy}
+</script>
+        `.trim();
+    }
+
+    override getClientEntry(): string {
+        return `
+// Qwik Client Entry
+// Qwik uses resumability - no traditional hydration needed
+
+export function hydrate() {
+    // Qwik automatically resumes from HTML-serialized state
+    // This function is a no-op for Qwik
+    console.log('[Flight/Qwik] Resumability enabled - no hydration needed');
+}
+
+export function prefetch() {
+    // Trigger Qwik prefetching
+    if ('requestIdleCallback' in window) {
+        requestIdleCallback(() => {
+            const qwikLoader = document.querySelector('[q\\\\:container]');
+            if (qwikLoader) {
+                // Qwik prefetches automatically based on container attributes
+            }
+        });
+    }
+}
+        `.trim();
+    }
+}
+
+// ============================================================================
+// Factory Function
+// ============================================================================
+
+/**
+ * Create a Qwik UI adapter.
+ *
+ * @example
+ * ```typescript
+ * import { qwik } from '@flightdev/ui/qwik';
+ * import { defineUI } from '@flightdev/ui';
+ *
+ * // Qwik's resumability means zero JS until interaction!
+ * export default defineUI(qwik({ prefetchStrategy: 'idle' }));
+ * ```
+ */
+export function qwik(options?: QwikAdapterOptions): QwikAdapter {
+    return new QwikAdapter(options);
+}
+
+export default qwik;