@flightdev/ui 2.0.0

package/dist/chunk-DTCAUBH5.js

@@ -0,0 +1,87 @@
+import { BaseUIAdapter } from './chunk-2SNQ6PTM.js';
+
+// src/adapters/tier-2/preact.ts
+var PreactAdapter = class extends BaseUIAdapter {
+  constructor(options = {}) {
+    super();
+    this.options = options;
+  }
+  id = "preact";
+  name = "Preact";
+  framework = "preact";
+  frameworkVersion = "10+";
+  tier = "tier-2";
+  capabilities = {
+    streaming: false,
+    partialHydration: true,
+    islands: true,
+    resumable: false,
+    ssg: true,
+    csr: true,
+    serverComponents: false
+  };
+  async renderToString(component, _context) {
+    const startTime = performance.now();
+    const renderToString = await import('preact-render-to-string').then((m) => m.default || m.renderToString);
+    const { h } = await import('preact');
+    const PreactComponent = component.component;
+    const element = h(PreactComponent, component.props ?? {});
+    const html = renderToString(element);
+    return {
+      html,
+      hydrationData: {
+        props: component.props,
+        componentId: component.id ?? this.generateId()
+      },
+      timing: this.createTiming(startTime)
+    };
+  }
+  getHydrationScript(result) {
+    const data = this.serializeProps(result.hydrationData);
+    return `
+<script type="module">
+window.__FLIGHT_DATA__ = ${data};
+window.__FLIGHT_ADAPTER__ = 'preact';
+
+import { h, hydrate } from 'preact';
+
+const App = window.__FLIGHT_APP__;
+const container = document.getElementById('app');
+
+if (App && container) {
+    hydrate(h(App, window.__FLIGHT_DATA__.props), container);
+}
+</script>
+        `.trim();
+  }
+  getClientEntry() {
+    return `
+import { h, hydrate, render } from 'preact';
+
+export function hydrateApp() {
+    const container = document.getElementById('app');
+    const App = window.__FLIGHT_APP__;
+    const data = window.__FLIGHT_DATA__ ?? {};
+
+    if (!container || !App) {
+        console.warn('[Flight/Preact] Missing container or App');
+        return;
+    }
+
+    if (container.innerHTML.trim()) {
+        hydrate(h(App, data.props), container);
+    } else {
+        render(h(App, data.props), container);
+    }
+}
+
+export { hydrateApp as hydrate };
+        `.trim();
+  }
+};
+function preact(options) {
+  return new PreactAdapter(options);
+}
+var preact_default = preact;
+
+export { PreactAdapter, preact, preact_default };

package/dist/chunk-NTASPOHG.js

@@ -0,0 +1,106 @@
+import { BaseUIAdapter } from './chunk-2SNQ6PTM.js';
+
+// src/adapters/tier-1/qwik.ts
+var QwikAdapter = class extends BaseUIAdapter {
+  constructor(options = {}) {
+    super();
+    this.options = options;
+  }
+  id = "qwik";
+  name = "Qwik";
+  framework = "qwik";
+  frameworkVersion = "1.0+";
+  tier = "tier-1";
+  capabilities = {
+    streaming: true,
+    partialHydration: true,
+    islands: true,
+    resumable: true,
+    // Qwik's killer feature!
+    ssg: true,
+    csr: true,
+    serverComponents: false
+  };
+  async renderToString(component, _context) {
+    const startTime = performance.now();
+    try {
+      const { renderToString } = await import('@builder.io/qwik/server');
+      const QwikComponent = component.component;
+      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.\nInstall required packages:\n  npm install @builder.io/qwik"
+        );
+      }
+      throw error;
+    }
+  }
+  /**
+   * Serialize state for resumability (Qwik's specialty)
+   */
+  serializeState(state) {
+    return JSON.stringify(state);
+  }
+  /**
+   * Resume from serialized state
+   */
+  resumeFromState(_serialized) {
+    return null;
+  }
+  getHydrationScript(_result) {
+    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();
+  }
+  getClientEntry() {
+    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();
+  }
+};
+function qwik(options) {
+  return new QwikAdapter(options);
+}
+var qwik_default = qwik;
+
+export { QwikAdapter, qwik, qwik_default };

package/dist/chunk-OI2AMQLG.js

@@ -0,0 +1,152 @@
+import { BaseUIAdapter } from './chunk-2SNQ6PTM.js';
+
+// src/adapters/tier-3/vanilla.ts
+var VanillaAdapter = class extends BaseUIAdapter {
+  constructor(options = {}) {
+    super();
+    this.options = options;
+  }
+  id = "vanilla";
+  name = "Vanilla Web Components";
+  framework = "vanilla";
+  frameworkVersion = "ES2022+";
+  tier = "tier-3";
+  capabilities = {
+    streaming: false,
+    partialHydration: false,
+    islands: true,
+    // Web Components ARE islands
+    resumable: false,
+    ssg: true,
+    csr: true,
+    serverComponents: false
+  };
+  async renderToString(component, _context) {
+    const startTime = performance.now();
+    let html;
+    if (typeof component.component === "string") {
+      const tagName = component.component;
+      const props = component.props ?? {};
+      const attrs = Object.entries(props).map(([key, value]) => {
+        const attrName = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+        return `${attrName}="${this.escapeHtml(String(value))}"`;
+      }).join(" ");
+      html = `<${tagName} ${attrs}></${tagName}>`;
+    } else if (typeof component.component === "function") {
+      html = component.component(component.props ?? {});
+    } else {
+      throw new Error(
+        "[Flight/Vanilla] Components must be tag names or template functions."
+      );
+    }
+    return {
+      html,
+      hydrationData: {
+        props: component.props,
+        componentId: component.id ?? this.generateId()
+      },
+      timing: this.createTiming(startTime)
+    };
+  }
+  createIsland(component, props, options) {
+    const tagName = component;
+    const id = this.generateId();
+    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
+    };
+  }
+  getHydrationScript(_result) {
+    const { polyfill = false } = this.options;
+    let scripts = `
+<!-- Flight/Vanilla Web Components -->
+<script>
+window.__FLIGHT_ADAPTER__ = 'vanilla';
+</script>
+`;
+    if (polyfill) {
+      scripts += `
+<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.8.0/webcomponents-loader.js"></script>
+`;
+    }
+    return scripts.trim();
+  }
+  getClientEntry() {
+    return `
+// Vanilla Web Components Client Entry
+// Components self-register when their scripts are loaded
+
+export function hydrate() {
+    // Web Components auto-upgrade when defined
+    console.log('[Flight/Vanilla] Web Components ready');
+}
+
+// Helper to define a custom element
+export function define(tagName, elementClass) {
+    if (!customElements.get(tagName)) {
+        customElements.define(tagName, elementClass);
+    }
+}
+
+// Wait for a component to be defined
+export function whenDefined(tagName) {
+    return customElements.whenDefined(tagName);
+}
+
+// Upgrade all elements matching a selector
+export function upgradeAll(selector = '*') {
+    document.querySelectorAll(selector).forEach(el => {
+        customElements.upgrade(el);
+    });
+}
+        `.trim();
+  }
+};
+function shadowRoot(content, mode = "open") {
+  return `<template shadowrootmode="${mode}">${content}</template>`;
+}
+function slot(name) {
+  return name ? `<slot name="${name}"></slot>` : "<slot></slot>";
+}
+function createElementClass(tagName, options = {}) {
+  const className = tagName.split("-").map((s) => s.charAt(0).toUpperCase() + s.slice(1)).join("");
+  return `
+class ${className} extends HTMLElement {
+    ${options.observedAttributes ? `static observedAttributes = ${JSON.stringify(options.observedAttributes)};` : ""}
+    
+    constructor() {
+        super();
+        ${options.template ? `
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = \`${options.template}\`;
+        ` : ""}
+    }
+    
+    connectedCallback() {
+        ${options.connectedCallback ?? ""}
+    }
+}
+
+customElements.define('${tagName}', ${className});
+    `.trim();
+}
+function vanilla(options) {
+  return new VanillaAdapter(options);
+}
+var vanilla_default = vanilla;
+
+export { VanillaAdapter, createElementClass, shadowRoot, slot, vanilla, vanilla_default };

package/dist/chunk-Q7HUE44H.js

@@ -0,0 +1,106 @@
+import { BaseUIAdapter } from './chunk-2SNQ6PTM.js';
+
+// src/adapters/tier-3/alpine.ts
+var AlpineAdapter = class extends BaseUIAdapter {
+  constructor(options = {}) {
+    super();
+    this.options = options;
+  }
+  id = "alpine";
+  name = "Alpine.js";
+  framework = "alpine";
+  frameworkVersion = "3.14+";
+  tier = "tier-3";
+  capabilities = {
+    streaming: false,
+    partialHydration: false,
+    islands: false,
+    resumable: false,
+    ssg: true,
+    csr: true,
+    serverComponents: false
+  };
+  async renderToString(component, _context) {
+    const startTime = performance.now();
+    let html;
+    if (typeof component.component === "function") {
+      html = component.component(component.props ?? {});
+    } else if (typeof component.component === "string") {
+      html = component.component;
+    } else {
+      throw new Error(
+        "[Flight/Alpine] Components must be HTML strings or template functions.\nAlpine uses declarative HTML with x-data, x-bind, etc."
+      );
+    }
+    return {
+      html,
+      hydrationData: component.props,
+      timing: this.createTiming(startTime)
+    };
+  }
+  getHydrationScript(_result) {
+    const {
+      version = "3.14.3",
+      plugins = [],
+      csp = false,
+      cdnBase = "https://cdn.jsdelivr.net/npm"
+    } = this.options;
+    const pluginScripts = plugins.map(
+      (plugin) => `<script defer src="${cdnBase}/@alpinejs/${plugin}@${version}/dist/cdn.min.js"></script>`
+    ).join("\n");
+    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();
+  }
+  getClientEntry() {
+    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();
+  }
+};
+function xData(data, content) {
+  const dataStr = JSON.stringify(data).replace(/"/g, "'");
+  return `<div x-data="${dataStr}">${content}</div>`;
+}
+function xFor(expression, content) {
+  return `<template x-for="${expression}">${content}</template>`;
+}
+function xIf(condition, content) {
+  return `<template x-if="${condition}">${content}</template>`;
+}
+function xBind(attr, value) {
+  return `:${attr}="${value}"`;
+}
+function xOn(event, handler) {
+  return `@${event}="${handler}"`;
+}
+function alpine(options) {
+  return new AlpineAdapter(options);
+}
+var alpine_default = alpine;
+
+export { AlpineAdapter, alpine, alpine_default, xBind, xData, xFor, xIf, xOn };

package/dist/chunk-QH3LOWXU.js

@@ -0,0 +1,155 @@
+import { BaseUIAdapter } from './chunk-2SNQ6PTM.js';
+
+// src/adapters/tier-1/vue.ts
+var VueAdapter = class extends BaseUIAdapter {
+  constructor(options = {}) {
+    super();
+    this.options = options;
+  }
+  id = "vue";
+  name = "Vue";
+  framework = "vue";
+  frameworkVersion = "3+";
+  tier = "tier-1";
+  capabilities = {
+    streaming: true,
+    partialHydration: true,
+    islands: true,
+    resumable: false,
+    ssg: true,
+    csr: true,
+    serverComponents: false
+  };
+  async renderToString(component, _context) {
+    const startTime = performance.now();
+    const { createSSRApp } = await import('vue');
+    const { renderToString } = await import('vue/server-renderer');
+    const app = createSSRApp(
+      component.component,
+      component.props ?? {}
+    );
+    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, _context, options) {
+    let aborted = false;
+    let resolvePromise;
+    let rejectPromise;
+    const done = new Promise((resolve, reject) => {
+      resolvePromise = resolve;
+      rejectPromise = reject;
+    });
+    const stream = new ReadableStream({
+      async start(controller) {
+        try {
+          const { createSSRApp } = await import('vue');
+          const { renderToWebStream } = await import('vue/server-renderer');
+          const app = createSSRApp(
+            component.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();
+      }
+    };
+  }
+  getHydrationScript(result) {
+    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();
+  }
+  getClientEntry() {
+    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();
+  }
+};
+function vue(options) {
+  return new VueAdapter(options);
+}
+var vue_default = vue;
+
+export { VueAdapter, vue, vue_default };

package/dist/chunk-QIVAK6BH.js

@@ -0,0 +1,103 @@
+import { BaseUIAdapter } from './chunk-2SNQ6PTM.js';
+
+// src/adapters/tier-2/inferno.ts
+var InfernoAdapter = class extends BaseUIAdapter {
+  constructor(options = {}) {
+    super();
+    this.options = options;
+  }
+  id = "inferno";
+  name = "Inferno";
+  framework = "inferno";
+  frameworkVersion = "8+";
+  tier = "tier-2";
+  capabilities = {
+    streaming: false,
+    partialHydration: false,
+    islands: false,
+    resumable: false,
+    ssg: true,
+    csr: true,
+    serverComponents: false
+  };
+  async renderToString(component, _context) {
+    const startTime = performance.now();
+    try {
+      const { renderToString } = await import('inferno-server');
+      const { createElement } = await import('inferno-create-element');
+      const InfernoComponent = component.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.\nInstall required packages:\n  npm install inferno inferno-server inferno-create-element"
+        );
+      }
+      throw error;
+    }
+  }
+  getHydrationScript(result) {
+    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();
+  }
+  getClientEntry() {
+    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();
+  }
+};
+function inferno(options) {
+  return new InfernoAdapter(options);
+}
+var inferno_default = inferno;
+
+export { InfernoAdapter, inferno, inferno_default };