@flightdev/ui 2.0.0 → 4.0.0

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

@@ -1,214 +0,0 @@
-/**
- * @flightdev/ui - Stencil Adapter (Tier 2)
- *
- * Stencil Web Components SSR adapter with declarative shadow DOM.
- *
- * @module @flightdev/ui/stencil
- * @version 2.0.0
- */
-
-import { BaseUIAdapter } from '../../core/adapter.js';
-import type {
-    AdapterCapabilities,
-    Component,
-    RenderContext,
-    RenderResult,
-    Island,
-    IslandOptions,
-} from '../../core/types.js';
-
-// ============================================================================
-// Types
-// ============================================================================
-
-export interface StencilAdapterOptions {
-    /** Enable declarative shadow DOM */
-    declarativeShadowDom?: boolean;
-
-    /** Pretty print HTML output */
-    prettyHtml?: boolean;
-
-    /** Hydrate app ID */
-    hydrateAppId?: string;
-}
-
-// ============================================================================
-// Stencil Adapter
-// ============================================================================
-
-export class StencilAdapter extends BaseUIAdapter {
-    readonly id = 'stencil';
-    readonly name = 'Stencil';
-    readonly framework = 'stencil';
-    readonly frameworkVersion = '4+';
-    readonly tier = 'tier-2' as const;
-
-    override readonly capabilities: AdapterCapabilities = {
-        streaming: false,
-        partialHydration: true,
-        islands: true, // Web Components are natural islands
-        resumable: false,
-        ssg: true,
-        csr: true,
-        serverComponents: false,
-    };
-
-    constructor(private options: StencilAdapterOptions = {}) {
-        super();
-    }
-
-    async renderToString(
-        component: Component,
-        _context?: RenderContext
-    ): Promise<RenderResult> {
-        const startTime = performance.now();
-
-        try {
-            // Stencil provides a hydrate package
-            const hydrateModule = await import('@stencil/core/hydrate');
-            const { renderToString } = hydrateModule;
-
-            // Component can be a tag name string or a full HTML string
-            let htmlInput: string;
-
-            if (typeof component.component === 'string') {
-                const tagName = component.component;
-                const props = component.props ?? {};
-
-                // Build attributes from props
-                const attrs = Object.entries(props)
-                    .map(([key, value]) => {
-                        // Convert camelCase to kebab-case for attributes
-                        const attrName = key.replace(/([A-Z])/g, '-$1').toLowerCase();
-                        return `${attrName}="${this.escapeHtml(String(value))}"`;
-                    })
-                    .join(' ');
-
-                htmlInput = `<${tagName} ${attrs}></${tagName}>`;
-            } else {
-                throw new Error('Stencil components must be specified as tag name strings');
-            }
-
-            const results = await renderToString(htmlInput, {
-                fullDocument: false,
-                prettyHtml: this.options.prettyHtml ?? false,
-                serializeShadowRoot: this.options.declarativeShadowDom
-                    ? 'declarative-shadow-dom'
-                    : undefined,
-            });
-
-            return {
-                html: results.html,
-                hydrationData: {
-                    tagName: component.component,
-                    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 '@stencil/core/hydrate'")) {
-                throw new Error(
-                    '[Flight/Stencil] Stencil hydrate package not found.\n' +
-                    'Install required packages:\n' +
-                    '  npm install @stencil/core\n' +
-                    'And ensure your Stencil project has hydrate output configured.'
-                );
-            }
-
-            throw error;
-        }
-    }
-
-    /**
-     * Create an island from a Stencil Web Component
-     */
-    override createIsland(
-        component: unknown,
-        props?: Record<string, unknown>,
-        options?: IslandOptions
-    ): Island {
-        const tagName = component as string;
-        const id = this.generateId();
-
-        // Build attributes
-        const attrs = Object.entries(props ?? {})
-            .map(([key, value]) => {
-                const attrName = key.replace(/([A-Z])/g, '-$1').toLowerCase();
-                return `${attrName}="${this.escapeHtml(String(value))}"`;
-            })
-            .join(' ');
-
-        const placeholder = `
-<${tagName} 
-    ${attrs} 
-    data-flight-island="${id}"
-    data-flight-hydrate="${options?.hydrate ?? 'load'}"
-></${tagName}>
-        `.trim();
-
-        return {
-            id,
-            component,
-            props,
-            options: options ?? { hydrate: 'load' },
-            placeholder,
-        };
-    }
-
-    override getHydrationScript(result: RenderResult): string {
-        const data = this.serializeProps(result.hydrationData);
-        return `
-<script type="module">
-window.__FLIGHT_DATA__ = ${data};
-window.__FLIGHT_ADAPTER__ = 'stencil';
-// Stencil components self-hydrate via declarative shadow DOM or scripts
-</script>
-        `.trim();
-    }
-
-    override getClientEntry(): string {
-        return `
-// Stencil Client Entry
-// Web Components hydrate automatically when their scripts are loaded
-
-export function hydrate() {
-    // Stencil components hydrate automatically
-    // Just ensure the component scripts are loaded
-    console.log('[Flight/Stencil] Web Components are self-registering');
-}
-
-export function defineCustomElements(loader) {
-    // Load Stencil component definitions
-    if (loader && typeof loader.defineCustomElements === 'function') {
-        loader.defineCustomElements(window);
-    }
-}
-        `.trim();
-    }
-}
-
-// ============================================================================
-// Factory Function
-// ============================================================================
-
-/**
- * Create a Stencil UI adapter.
- *
- * @example
- * ```typescript
- * import { stencil } from '@flightdev/ui/stencil';
- * import { defineUI } from '@flightdev/ui';
- *
- * export default defineUI(stencil({
- *   declarativeShadowDom: true,
- * }));
- * ```
- */
-export function stencil(options?: StencilAdapterOptions): StencilAdapter {
-    return new StencilAdapter(options);
-}
-
-export default stencil;

package/src/adapters/tier-3/alpine.ts

@@ -1,218 +0,0 @@
-/**
- * @flightdev/ui - Alpine.js Adapter (Tier 3)
- *
- * Alpine.js adapter - lightweight reactive HTML enhancement.
- *
- * @module @flightdev/ui/alpine
- * @version 2.0.0
- */
-
-import { BaseUIAdapter } from '../../core/adapter.js';
-import type {
-    AdapterCapabilities,
-    Component,
-    RenderContext,
-    RenderResult,
-} from '../../core/types.js';
-
-// ============================================================================
-// Types
-// ============================================================================
-
-export type AlpinePlugin =
-    | 'mask'
-    | 'intersect'
-    | 'persist'
-    | 'focus'
-    | 'collapse'
-    | 'morph'
-    | 'sort'
-    | 'anchor';
-
-export interface AlpineAdapterOptions {
-    /** Alpine.js version */
-    version?: string;
-
-    /** Plugins to include */
-    plugins?: AlpinePlugin[];
-
-    /** Use CSP-safe build (no eval) */
-    csp?: boolean;
-
-    /** CDN base URL */
-    cdnBase?: string;
-}
-
-// ============================================================================
-// Alpine Adapter
-// ============================================================================
-
-export class AlpineAdapter extends BaseUIAdapter {
-    readonly id = 'alpine';
-    readonly name = 'Alpine.js';
-    readonly framework = 'alpine';
-    readonly frameworkVersion = '3.14+';
-    readonly tier = 'tier-3' as const;
-
-    override readonly capabilities: AdapterCapabilities = {
-        streaming: false,
-        partialHydration: false,
-        islands: false,
-        resumable: false,
-        ssg: true,
-        csr: true,
-        serverComponents: false,
-    };
-
-    constructor(private options: AlpineAdapterOptions = {}) {
-        super();
-    }
-
-    async renderToString(
-        component: Component,
-        _context?: RenderContext
-    ): Promise<RenderResult> {
-        const startTime = performance.now();
-
-        // Alpine components are HTML strings with x-data directives
-        let html: string;
-
-        if (typeof component.component === 'function') {
-            // Template function
-            html = (component.component as (props: unknown) => string)(component.props ?? {});
-        } else if (typeof component.component === 'string') {
-            // Raw HTML string
-            html = component.component;
-        } else {
-            throw new Error(
-                '[Flight/Alpine] Components must be HTML strings or template functions.\n' +
-                'Alpine uses declarative HTML with x-data, x-bind, etc.'
-            );
-        }
-
-        return {
-            html,
-            hydrationData: component.props,
-            timing: this.createTiming(startTime),
-        };
-    }
-
-    override getHydrationScript(_result: RenderResult): string {
-        const {
-            version = '3.14.3',
-            plugins = [],
-            csp = false,
-            cdnBase = 'https://cdn.jsdelivr.net/npm',
-        } = this.options;
-
-        // Build plugin script tags
-        const pluginScripts = plugins
-            .map((plugin) =>
-                `<script defer src="${cdnBase}/@alpinejs/${plugin}@${version}/dist/cdn.min.js"></script>`
-            )
-            .join('\n');
-
-        // Main Alpine script (CSP or regular)
-        const alpineScript = csp
-            ? `<script defer src="${cdnBase}/@alpinejs/csp@${version}/dist/cdn.min.js"></script>`
-            : `<script defer src="${cdnBase}/alpinejs@${version}/dist/cdn.min.js"></script>`;
-
-        return `
-<!-- Flight/Alpine.js -->
-${pluginScripts}
-${alpineScript}
-<script>
-window.__FLIGHT_ADAPTER__ = 'alpine';
-</script>
-        `.trim();
-    }
-
-    override getClientEntry(): string {
-        return `
-// Alpine.js Client Entry
-// Alpine initializes automatically via x-data directives in HTML
-
-export function hydrate() {
-    // Alpine auto-initializes when loaded
-    // No explicit hydration needed
-    console.log('[Flight/Alpine] Declarative reactivity active');
-}
-
-export function initWithPlugins(plugins = []) {
-    // Dynamically load plugins before Alpine
-    return Promise.all(
-        plugins.map(plugin => 
-            import(\`https://cdn.jsdelivr.net/npm/@alpinejs/\${plugin}/dist/cdn.min.js\`)
-        )
-    ).then(() => {
-        return import('alpinejs');
-    });
-}
-        `.trim();
-    }
-}
-
-// ============================================================================
-// Template Helpers
-// ============================================================================
-
-/**
- * Create an x-data component wrapper
- */
-export function xData(data: Record<string, unknown>, content: string): string {
-    const dataStr = JSON.stringify(data).replace(/"/g, "'");
-    return `<div x-data="${dataStr}">${content}</div>`;
-}
-
-/**
- * Create an x-for loop
- * @param expression - The for expression, e.g., 'item in items'
- * @param content - The content to repeat
- */
-export function xFor(expression: string, content: string): string {
-    return `<template x-for="${expression}">${content}</template>`;
-}
-
-/**
- * Create an x-if conditional
- */
-export function xIf(condition: string, content: string): string {
-    return `<template x-if="${condition}">${content}</template>`;
-}
-
-/**
- * Create x-bind shorthand
- */
-export function xBind(attr: string, value: string): string {
-    return `:${attr}="${value}"`;
-}
-
-/**
- * Create x-on shorthand
- */
-export function xOn(event: string, handler: string): string {
-    return `@${event}="${handler}"`;
-}
-
-// ============================================================================
-// Factory Function
-// ============================================================================
-
-/**
- * Create an Alpine.js UI adapter.
- *
- * @example
- * ```typescript
- * import { alpine } from '@flightdev/ui/alpine';
- * import { defineUI } from '@flightdev/ui';
- *
- * export default defineUI(alpine({
- *   plugins: ['intersect', 'persist'],
- * }));
- * ```
- */
-export function alpine(options?: AlpineAdapterOptions): AlpineAdapter {
-    return new AlpineAdapter(options);
-}
-
-export default alpine;

package/src/adapters/tier-3/hotwire.ts

@@ -1,254 +0,0 @@
-/**
- * @flightdev/ui - Hotwire Adapter (Tier 3)
- *
- * Hotwire (Turbo + Stimulus) adapter - Rails-style HTML streaming.
- *
- * @module @flightdev/ui/hotwire
- * @version 2.0.0
- */
-
-import { BaseUIAdapter } from '../../core/adapter.js';
-import type {
-    AdapterCapabilities,
-    Component,
-    RenderContext,
-    RenderResult,
-} from '../../core/types.js';
-
-// ============================================================================
-// Types
-// ============================================================================
-
-export interface HotwireAdapterOptions {
-    /** Enable Turbo Drive (page navigation) */
-    turboDrive?: boolean;
-
-    /** Enable Turbo Frames (partial page updates) */
-    turboFrames?: boolean;
-
-    /** Enable Turbo Streams (server-pushed updates) */
-    turboStreams?: boolean;
-
-    /** Include Stimulus */
-    stimulus?: boolean;
-
-    /** Turbo version */
-    turboVersion?: string;
-
-    /** Stimulus version */
-    stimulusVersion?: string;
-}
-
-// ============================================================================
-// Hotwire Adapter
-// ============================================================================
-
-export class HotwireAdapter extends BaseUIAdapter {
-    readonly id = 'hotwire';
-    readonly name = 'Hotwire';
-    readonly framework = 'hotwire';
-    readonly frameworkVersion = '8+';
-    readonly tier = 'tier-3' as const;
-
-    override readonly capabilities: AdapterCapabilities = {
-        streaming: false,
-        partialHydration: false,
-        islands: false,
-        resumable: false,
-        ssg: true,
-        csr: false, // Hotwire is server-driven
-        serverComponents: false,
-    };
-
-    constructor(private options: HotwireAdapterOptions = {}) {
-        super();
-    }
-
-    async renderToString(
-        component: Component,
-        _context?: RenderContext
-    ): Promise<RenderResult> {
-        const startTime = performance.now();
-
-        let html: string;
-
-        if (typeof component.component === 'function') {
-            html = (component.component as (props: unknown) => string)(component.props ?? {});
-        } else if (typeof component.component === 'string') {
-            html = component.component;
-        } else {
-            throw new Error(
-                '[Flight/Hotwire] Components must be HTML strings or template functions.\n' +
-                'Use turbo-frame, turbo-stream, and data-controller for interactivity.'
-            );
-        }
-
-        return {
-            html,
-            timing: this.createTiming(startTime),
-        };
-    }
-
-    override getHydrationScript(_result: RenderResult): string {
-        const {
-            turboDrive = true,
-            turboFrames = true,
-            turboStreams = true,
-            stimulus = true,
-            turboVersion = '8.0.4',
-            stimulusVersion = '3.2.2',
-        } = this.options;
-
-        let scripts = `
-<!-- Flight/Hotwire -->
-<script type="module">
-import * as Turbo from 'https://esm.sh/@hotwired/turbo@${turboVersion}';
-window.Turbo = Turbo;
-`;
-
-        if (!turboDrive) {
-            scripts += `Turbo.session.drive = false;\n`;
-        }
-
-        scripts += `
-window.__FLIGHT_ADAPTER__ = 'hotwire';
-console.log('[Flight/Hotwire] Turbo initialized');
-</script>
-`;
-
-        if (stimulus) {
-            scripts += `
-<script type="module">
-import { Application } from 'https://esm.sh/@hotwired/stimulus@${stimulusVersion}';
-
-window.Stimulus = Application.start();
-
-// Auto-register controllers via data-controller-url attribute
-document.querySelectorAll('[data-controller-url]').forEach(async (el) => {
-    const url = el.dataset.controllerUrl;
-    const name = el.dataset.controller;
-    if (url && name) {
-        const module = await import(url);
-        window.Stimulus.register(name, module.default);
-    }
-});
-</script>
-`;
-        }
-
-        return scripts.trim();
-    }
-
-    override getClientEntry(): string {
-        return `
-import * as Turbo from '@hotwired/turbo';
-import { Application } from '@hotwired/stimulus';
-
-// Initialize Turbo
-export function initTurbo(options = {}) {
-    if (options.drive === false) {
-        Turbo.session.drive = false;
-    }
-    return Turbo;
-}
-
-// Initialize Stimulus
-export function initStimulus() {
-    const application = Application.start();
-    window.Stimulus = application;
-    return application;
-}
-
-// Auto-register Stimulus controllers
-export function registerControllers(application, controllers) {
-    for (const [name, controller] of Object.entries(controllers)) {
-        application.register(name, controller);
-    }
-}
-
-// Default hydration
-export function hydrate() {
-    initTurbo();
-    initStimulus();
-    console.log('[Flight/Hotwire] Application ready');
-}
-        `.trim();
-    }
-}
-
-// ============================================================================
-// Template Helpers
-// ============================================================================
-
-/**
- * Create a Turbo Frame
- */
-export function turboFrame(id: string, content: string, options: {
-    src?: string;
-    loading?: 'eager' | 'lazy';
-    target?: string;
-} = {}): string {
-    const attrs = [`id="${id}"`];
-    if (options.src) attrs.push(`src="${options.src}"`);
-    if (options.loading) attrs.push(`loading="${options.loading}"`);
-    if (options.target) attrs.push(`target="${options.target}"`);
-
-    return `<turbo-frame ${attrs.join(' ')}>${content}</turbo-frame>`;
-}
-
-/**
- * Create a Turbo Stream action
- */
-export function turboStream(
-    action: 'append' | 'prepend' | 'replace' | 'update' | 'remove' | 'before' | 'after',
-    target: string,
-    content?: string
-): string {
-    if (action === 'remove') {
-        return `<turbo-stream action="remove" target="${target}"></turbo-stream>`;
-    }
-    return `
-<turbo-stream action="${action}" target="${target}">
-    <template>${content ?? ''}</template>
-</turbo-stream>
-    `.trim();
-}
-
-/**
- * Create a Stimulus controller element
- */
-export function stimulusController(
-    controller: string,
-    content: string,
-    values: Record<string, unknown> = {}
-): string {
-    const valueAttrs = Object.entries(values)
-        .map(([key, value]) => `data-${controller}-${key}-value="${value}"`)
-        .join(' ');
-
-    return `<div data-controller="${controller}" ${valueAttrs}>${content}</div>`;
-}
-
-// ============================================================================
-// Factory Function
-// ============================================================================
-
-/**
- * Create a Hotwire UI adapter.
- *
- * @example
- * ```typescript
- * import { hotwire } from '@flightdev/ui/hotwire';
- * import { defineUI } from '@flightdev/ui';
- *
- * export default defineUI(hotwire({
- *   turboStreams: true,
- *   stimulus: true,
- * }));
- * ```
- */
-export function hotwire(options?: HotwireAdapterOptions): HotwireAdapter {
-    return new HotwireAdapter(options);
-}
-
-export default hotwire;