@flightdev/ui 2.0.0

package/dist/chunk-4PZDNFL7.js

@@ -0,0 +1,148 @@
+import { BaseUIAdapter } from './chunk-2SNQ6PTM.js';
+
+// src/adapters/tier-3/hotwire.ts
+var HotwireAdapter = class extends BaseUIAdapter {
+  constructor(options = {}) {
+    super();
+    this.options = options;
+  }
+  id = "hotwire";
+  name = "Hotwire";
+  framework = "hotwire";
+  frameworkVersion = "8+";
+  tier = "tier-3";
+  capabilities = {
+    streaming: false,
+    partialHydration: false,
+    islands: false,
+    resumable: false,
+    ssg: true,
+    csr: false,
+    // Hotwire is server-driven
+    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/Hotwire] Components must be HTML strings or template functions.\nUse turbo-frame, turbo-stream, and data-controller for interactivity."
+      );
+    }
+    return {
+      html,
+      timing: this.createTiming(startTime)
+    };
+  }
+  getHydrationScript(_result) {
+    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;
+`;
+    }
+    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();
+  }
+  getClientEntry() {
+    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();
+  }
+};
+function turboFrame(id, content, options = {}) {
+  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>`;
+}
+function turboStream(action, target, content) {
+  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();
+}
+function stimulusController(controller, content, values = {}) {
+  const valueAttrs = Object.entries(values).map(([key, value]) => `data-${controller}-${key}-value="${value}"`).join(" ");
+  return `<div data-controller="${controller}" ${valueAttrs}>${content}</div>`;
+}
+function hotwire(options) {
+  return new HotwireAdapter(options);
+}
+var hotwire_default = hotwire;
+
+export { HotwireAdapter, hotwire, hotwire_default, stimulusController, turboFrame, turboStream };

package/dist/chunk-5IBLFTYL.js

@@ -0,0 +1,114 @@
+import { BaseUIAdapter } from './chunk-2SNQ6PTM.js';
+
+// src/adapters/tier-2/marko.ts
+var MarkoAdapter = class extends BaseUIAdapter {
+  constructor(options = {}) {
+    super();
+    this.options = options;
+  }
+  id = "marko";
+  name = "Marko";
+  framework = "marko";
+  frameworkVersion = "5+";
+  tier = "tier-2";
+  capabilities = {
+    streaming: true,
+    // Marko pioneered streaming SSR!
+    partialHydration: true,
+    islands: true,
+    resumable: false,
+    ssg: true,
+    csr: true,
+    serverComponents: false
+  };
+  async renderToString(component, _context) {
+    const startTime = performance.now();
+    const template = component.component;
+    const input = {
+      ...this.options.globalData,
+      ...component.props
+    };
+    const html = await template.renderToString(input);
+    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 template = component.component;
+    const input = {
+      ...this.options.globalData,
+      ...component.props
+    };
+    const stream = new ReadableStream({
+      start(controller) {
+        const out = template.render(input);
+        options?.onShellReady?.();
+        out.on("data", (chunk) => {
+          if (!aborted) {
+            controller.enqueue(new Uint8Array(chunk));
+          }
+        });
+        out.on("end", () => {
+          if (!aborted) {
+            controller.close();
+            resolvePromise();
+            options?.onAllReady?.();
+          }
+        });
+        out.on("error", (error) => {
+          options?.onError?.(error);
+          controller.error(error);
+          rejectPromise(error);
+        });
+      }
+    });
+    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__ = 'marko';
+// Marko handles hydration via inline component scripts
+</script>
+        `.trim();
+  }
+  getClientEntry() {
+    return `
+// Marko Client Entry
+// Marko components are self-hydrating
+
+export function hydrate() {
+    // Marko components automatically hydrate themselves
+    // No additional client-side setup needed
+    console.log('[Flight/Marko] Components are self-hydrating');
+}
+        `.trim();
+  }
+};
+function marko(options) {
+  return new MarkoAdapter(options);
+}
+var marko_default = marko;
+
+export { MarkoAdapter, marko, marko_default };

package/dist/chunk-64JZJ7OK.js

@@ -0,0 +1,142 @@
+import { BaseUIAdapter } from './chunk-2SNQ6PTM.js';
+
+// src/adapters/tier-1/solid.ts
+var SolidAdapter = class extends BaseUIAdapter {
+  constructor(options = {}) {
+    super();
+    this.options = options;
+  }
+  id = "solid";
+  name = "Solid";
+  framework = "solid";
+  frameworkVersion = "1.8+";
+  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 { renderToString } = await import('solid-js/web');
+    const SolidComponent = component.component;
+    const props = component.props ?? {};
+    const html = await renderToString(() => SolidComponent());
+    return {
+      html,
+      hydrationData: {
+        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 { renderToStream: solidRenderToStream } = await import('solid-js/web');
+          const SolidComponent = component.component;
+          const App = () => SolidComponent();
+          const { readable } = solidRenderToStream(() => SolidComponent());
+          const reader = readable.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;
+            }
+            const chunk = typeof value === "string" ? new TextEncoder().encode(value) : value;
+            controller.enqueue(chunk);
+          }
+        } 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__ = 'solid';
+
+import { hydrate } from 'solid-js/web';
+
+const App = window.__FLIGHT_APP__;
+const container = document.getElementById('app');
+
+if (App && container) {
+    hydrate(() => App(window.__FLIGHT_DATA__.props), container);
+}
+</script>
+        `.trim();
+  }
+  getClientEntry() {
+    return `
+import { hydrate, render } from 'solid-js/web';
+
+export function hydrateApp() {
+    const container = document.getElementById('app');
+    const App = window.__FLIGHT_APP__;
+    const data = window.__FLIGHT_DATA__ ?? {};
+
+    if (!container || !App) {
+        console.warn('[Flight/Solid] Missing container or App');
+        return;
+    }
+
+    // Check if we have SSR content to hydrate
+    if (container.innerHTML.trim()) {
+        return hydrate(() => App(data.props), container);
+    } else {
+        // Fallback to client-side render
+        return render(() => App(data.props), container);
+    }
+}
+
+export function renderApp(App, container, props = {}) {
+    return render(() => App(props), container);
+}
+
+// Export for Flight
+export { hydrateApp as hydrate };
+        `.trim();
+  }
+};
+function solid(options) {
+  return new SolidAdapter(options);
+}
+var solid_default = solid;
+
+export { SolidAdapter, solid, solid_default };

package/dist/chunk-7ZJI3QU2.js

@@ -0,0 +1,132 @@
+import { BaseUIAdapter } from './chunk-2SNQ6PTM.js';
+
+// src/adapters/tier-3/htmx.ts
+var HTMXAdapter = class extends BaseUIAdapter {
+  constructor(options = {}) {
+    super();
+    this.options = options;
+  }
+  id = "htmx";
+  name = "HTMX";
+  framework = "htmx";
+  frameworkVersion = "2.0+";
+  tier = "tier-3";
+  capabilities = {
+    streaming: false,
+    partialHydration: false,
+    islands: false,
+    resumable: false,
+    ssg: true,
+    csr: false,
+    // HTMX is server-driven
+    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/HTMX] Components must be HTML strings or template functions.\nHTMX is server-driven - use hx-* attributes for interactivity."
+      );
+    }
+    return {
+      html,
+      // No hydration data - HTMX is server-driven
+      timing: this.createTiming(startTime)
+    };
+  }
+  getHydrationScript(_result) {
+    const {
+      version = "2.0.2",
+      extensions = [],
+      websocket = false,
+      sse = false,
+      cdnBase = "https://unpkg.com",
+      headSupport = false
+    } = this.options;
+    const allExtensions = [
+      ...extensions,
+      ...websocket ? ["ws"] : [],
+      ...sse ? ["sse"] : [],
+      ...headSupport ? ["head-support"] : []
+    ];
+    const extScripts = allExtensions.map(
+      (ext) => `<script src="${cdnBase}/htmx.org@${version}/dist/ext/${ext}.js"></script>`
+    ).join("\n");
+    return `
+<!-- Flight/HTMX -->
+<script src="${cdnBase}/htmx.org@${version}"></script>
+${extScripts}
+<script>
+window.__FLIGHT_ADAPTER__ = 'htmx';
+// HTMX is ready - server-driven UI active
+</script>
+        `.trim();
+  }
+  getClientEntry() {
+    return `
+// HTMX Client Entry
+// HTMX requires no explicit client-side initialization
+
+export function hydrate() {
+    // HTMX auto-initializes via script tag
+    // No JavaScript framework needed
+    console.log('[Flight/HTMX] Server-driven UI ready');
+}
+
+// HTMX event helpers
+export function onLoad(callback) {
+    document.addEventListener('htmx:load', callback);
+}
+
+export function onAfterSwap(callback) {
+    document.addEventListener('htmx:afterSwap', callback);
+}
+
+export function onBeforeRequest(callback) {
+    document.addEventListener('htmx:beforeRequest', callback);
+}
+        `.trim();
+  }
+};
+function hxGet(url, options = {}) {
+  const attrs = { "hx-get": url };
+  if (options.target) attrs["hx-target"] = options.target;
+  if (options.swap) attrs["hx-swap"] = options.swap;
+  if (options.trigger) attrs["hx-trigger"] = options.trigger;
+  return attrs;
+}
+function hxPost(url, options = {}) {
+  const attrs = { "hx-post": url };
+  if (options.target) attrs["hx-target"] = options.target;
+  if (options.swap) attrs["hx-swap"] = options.swap;
+  if (options.trigger) attrs["hx-trigger"] = options.trigger;
+  return attrs;
+}
+function hxDelete(url, options = {}) {
+  const attrs = { "hx-delete": url };
+  if (options.target) attrs["hx-target"] = options.target;
+  if (options.swap) attrs["hx-swap"] = options.swap;
+  if (options.confirm) attrs["hx-confirm"] = options.confirm;
+  return attrs;
+}
+function attrsToString(attrs) {
+  return Object.entries(attrs).map(([k, v]) => `${k}="${v}"`).join(" ");
+}
+function hx(tag, attrs, content) {
+  const attrStr = attrsToString(attrs);
+  if (content !== void 0) {
+    return `<${tag} ${attrStr}>${content}</${tag}>`;
+  }
+  return `<${tag} ${attrStr} />`;
+}
+function htmx(options) {
+  return new HTMXAdapter(options);
+}
+var htmx_default = htmx;
+
+export { HTMXAdapter, attrsToString, htmx, htmx_default, hx, hxDelete, hxGet, hxPost };

package/dist/chunk-CE4FJHQJ.js

@@ -0,0 +1,133 @@
+import { BaseUIAdapter } from './chunk-2SNQ6PTM.js';
+
+// src/adapters/tier-3/stimulus.ts
+var StimulusAdapter = class extends BaseUIAdapter {
+  constructor(options = {}) {
+    super();
+    this.options = options;
+  }
+  id = "stimulus";
+  name = "Stimulus";
+  framework = "stimulus";
+  frameworkVersion = "3+";
+  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/Stimulus] Components must be HTML strings or template functions.\nUse data-controller and data-action for interactivity."
+      );
+    }
+    return {
+      html,
+      hydrationData: component.props,
+      timing: this.createTiming(startTime)
+    };
+  }
+  getHydrationScript(_result) {
+    const {
+      version = "3.2.2",
+      debug = false
+    } = this.options;
+    return `
+<!-- Flight/Stimulus -->
+<script type="module">
+import { Application } from 'https://esm.sh/@hotwired/stimulus@${version}';
+
+window.Stimulus = Application.start();
+${debug ? "window.Stimulus.debug = true;" : ""}
+
+window.__FLIGHT_ADAPTER__ = 'stimulus';
+console.log('[Flight/Stimulus] Application started');
+</script>
+        `.trim();
+  }
+  getClientEntry() {
+    return `
+import { Application, Controller } from '@hotwired/stimulus';
+
+// Start Stimulus application
+export const application = Application.start();
+
+// Export Controller for extension
+export { Controller };
+
+// Register controller helper
+export function register(name, controller) {
+    application.register(name, controller);
+}
+
+// Bulk register controllers
+export function registerControllers(controllers) {
+    for (const [name, controller] of Object.entries(controllers)) {
+        register(name, controller);
+    }
+}
+
+// Dynamic controller loading via import.meta.glob (Vite)
+export function eagerLoadControllers(controllerModules) {
+    for (const [path, module] of Object.entries(controllerModules)) {
+        const match = path.match(/\\/([^/]+)_controller\\.[jt]s$/);
+        if (match && module.default) {
+            const name = match[1].replace(/_/g, '-');
+            register(name, module.default);
+        }
+    }
+}
+
+// Default hydration
+export function hydrate() {
+    console.log('[Flight/Stimulus] Controllers ready');
+}
+        `.trim();
+  }
+};
+function controller(name, content, options = {}) {
+  const attrs = [`data-controller="${name}"`];
+  if (options.values) {
+    for (const [key, value] of Object.entries(options.values)) {
+      attrs.push(`data-${name}-${toKebab(key)}-value="${value}"`);
+    }
+  }
+  if (options.classes) {
+    for (const [key, value] of Object.entries(options.classes)) {
+      attrs.push(`data-${name}-${toKebab(key)}-class="${value}"`);
+    }
+  }
+  if (options.outlets) {
+    for (const [key, selector] of Object.entries(options.outlets)) {
+      attrs.push(`data-${name}-${toKebab(key)}-outlet="${selector}"`);
+    }
+  }
+  return `<div ${attrs.join(" ")}>${content}</div>`;
+}
+function action(controller2, method, event) {
+  const eventPart = event ? `${event}->` : "";
+  return `data-action="${eventPart}${controller2}#${method}"`;
+}
+function target(controller2, name) {
+  return `data-${controller2}-target="${name}"`;
+}
+function toKebab(str) {
+  return str.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+function stimulus(options) {
+  return new StimulusAdapter(options);
+}
+var stimulus_default = stimulus;
+
+export { StimulusAdapter, action, controller, stimulus, stimulus_default, target };