@druid-ui/host 1.0.0-next.1

package/src/file-loader.ts

@@ -0,0 +1,113 @@
+interface AuthOptions {
+  type: "bearer" | "basic" | "api-key";
+  token?: string;
+  username?: string;
+  password?: string;
+  apiKey?: string;
+  apiKeyHeader?: string;
+}
+
+interface FileLoaderOptions {
+  auth?: AuthOptions;
+  headers?: Record<string, string>;
+  cache?: boolean;
+}
+
+interface HttpResponse {
+  buffer: ArrayBuffer;
+  headers: Record<string, string>;
+  contentType: string | null;
+}
+
+export interface FileLoader {
+  load(path: string, options?: FileLoaderOptions): Promise<HttpResponse>;
+}
+
+export class HttpFileLoader {
+  private authOptions?: AuthOptions | undefined;
+  private defaultHeaders?: Record<string, string> | undefined;
+
+  private baseUrl?: string | undefined;
+
+  constructor(
+    baseUrl?: string,
+    authOptions?: AuthOptions,
+    defaultHeaders?: Record<string, string>
+  ) {
+    this.baseUrl = baseUrl;
+    this.authOptions = authOptions;
+    this.defaultHeaders = defaultHeaders;
+  }
+
+  protected async loadHttp(
+    path: string,
+    options?: FileLoaderOptions
+  ): Promise<HttpResponse> {
+    const headers: Record<string, string> = {
+      ...this.defaultHeaders,
+      ...options?.headers,
+    };
+
+    // Use instance auth options if no options provided, or merge with provided options
+    const authToUse = options?.auth || this.authOptions;
+
+    // Add authentication headers
+    if (authToUse) {
+      switch (authToUse.type) {
+        case "bearer":
+          if (authToUse.token) {
+            headers["Authorization"] = `Bearer ${authToUse.token}`;
+          }
+          break;
+        case "basic":
+          if (authToUse.username && authToUse.password) {
+            const credentials = btoa(
+              `${authToUse.username}:${authToUse.password}`
+            );
+            headers["Authorization"] = `Basic ${credentials}`;
+          }
+          break;
+        case "api-key":
+          if (authToUse.apiKey) {
+            const headerName = authToUse.apiKeyHeader || "X-API-Key";
+            headers[headerName] = authToUse.apiKey;
+          }
+          break;
+      }
+    }
+
+    const res = await fetch(path, {
+      headers,
+      cache: options?.cache === false ? "no-store" : "default",
+    });
+
+    if (!res.ok) {
+      throw new Error(`Failed to load file: ${path}, status: ${res.status}`);
+    }
+
+    // Extract all fetch-specific data
+    const text = await res.arrayBuffer();
+
+    const responseHeaders: Record<string, string> = {};
+    // Handle both real Headers object and mocked headers
+    if (res.headers && typeof res.headers.forEach === "function") {
+      res.headers.forEach((value, key) => {
+        responseHeaders[key] = value;
+      });
+    }
+
+    const contentType = res.headers.get("Content-Type");
+
+    return {
+      buffer: text,
+      headers: responseHeaders,
+      contentType,
+    };
+  }
+
+  async load(path: string, options?: FileLoaderOptions) {
+    const filePath = this.baseUrl ? `${this.baseUrl}/${path}` : path;
+    const response = await this.loadHttp(filePath, options);
+    return response;
+  }
+}

package/src/host-functions.ts

@@ -0,0 +1,106 @@
+import hyperid from "hyperid";
+import type { Props } from "druid:ui/ui";
+import { h, type VNode, type VNodeChildren, type VNodeData } from "snabbdom";
+import { Event } from "./types";
+
+const nodes = new Map<
+  string,
+  {
+    element: string;
+    props?: Props;
+    children?: Array<string>;
+    hooks?: string[];
+  }
+>();
+
+export function setHook(id: string, callback: string) {
+  console.debug(`Setting hook for id ${id} with callback ${callback}`);
+  const node = nodes.get(id);
+  if (node) {
+    node.hooks = node.hooks || [];
+    node.hooks.push(callback);
+  } else {
+    console.warn(`setHook: No node found for id ${id}`);
+  }
+}
+
+export function dfunc(element: string, props: Props, children: string[]) {
+  console.debug("Creating DOM node:", element, props, children);
+  const id = hyperid();
+
+  nodes.set(id.uuid, { element, props, children });
+  return id.uuid;
+}
+
+export function logfunc(msg: string) {
+  console.debug("UI LOG:", msg);
+}
+
+export function createDomFromIdRec(
+  id: string,
+  rerender: () => void,
+  emitEvent: (id: string, eventType: string, event: Event) => void,
+  navigate?: (href: string) => void
+): VNode | String {
+  const node = nodes.get(id);
+  //it is a bit strange to do it like that, in theory we want to better distinguish between text nodes and element nodes
+  if (!node) {
+    console.debug("Creating text node for id:", id);
+    return id;
+  }
+
+  const data: VNodeData = {};
+
+  // Set properties
+  if (node.props) {
+    data.props = {};
+    for (const prop of node.props.prop) {
+      data.props[prop.key] = prop.value;
+    }
+    data.on = {};
+    for (const eventType of node.props.on) {
+      data.on[eventType] = (e) => {
+        console.debug("Emitting event:", id, eventType, e);
+        emitEvent(
+          id,
+          eventType,
+          new Event(e?.currentTarget?.value, e?.currentTarget?.checked)
+        );
+        rerender();
+      };
+    }
+    const href = data.props["href"];
+    if (href && !data.on["click"]) {
+      if (navigate) {
+        data.on.click = (e) => {
+          e.preventDefault();
+          navigate(href);
+        };
+      }
+    }
+
+    if (node.hooks) {
+      data.hook = {};
+      for (const hookName of node.hooks) {
+        data.hook[hookName as keyof typeof data.hook] = () => {
+          emitEvent(id, hookName, new Event());
+        };
+      }
+    }
+  }
+
+  const ch: VNodeChildren = [];
+  if (node.children) {
+    for (const childId of node.children) {
+      const childEl = createDomFromIdRec(
+        childId,
+        rerender,
+        emitEvent,
+        navigate
+      );
+      ch.push(childEl);
+    }
+  }
+
+  return h(node.element, data, ch);
+}

package/src/index.ts

@@ -0,0 +1,10 @@
+// Re-export everything for easy access
+export * from "./ui";
+export * from "./types";
+export * from "./file-loader";
+export * from "./routing-strategy";
+export * from "./transpile";
+export * from "./utils";
+
+// Global Window augmentation (side-effect import for declaration output)
+import "./window";

package/src/routing-strategy.ts

@@ -0,0 +1,36 @@
+export interface RoutingStrategy {
+  getCurrentPath(): string;
+  navigateTo(path: string): void;
+}
+
+export class HistoryRoutingStrategy implements RoutingStrategy {
+  getCurrentPath(): string {
+    return window.location.pathname;
+  }
+
+  navigateTo(path: string): void {
+    window.history.pushState({}, "", path);
+  }
+}
+
+export class CustomRoutingStrategy implements RoutingStrategy {
+  private currentPath: string = "/";
+
+  getCurrentPath(): string {
+    return this.currentPath;
+  }
+
+  navigateTo(path: string): void {
+    this.currentPath = path;
+  }
+}
+
+export const createRoutingStrategy = (
+  mode: "history" | "custom"
+): RoutingStrategy => {
+  if (mode === "custom") {
+    return new CustomRoutingStrategy();
+  } else {
+    return new HistoryRoutingStrategy();
+  }
+};

package/src/setup-snabbdom.ts

@@ -0,0 +1,15 @@
+import {
+  init,
+  classModule,
+  propsModule,
+  styleModule,
+  eventListenersModule,
+} from "snabbdom";
+
+export const patch = init([
+  // Init patch function with chosen modules
+  classModule, // makes it easy to toggle classes
+  propsModule, // for setting properties on DOM elements
+  styleModule, // handles styling on elements with support for animations
+  eventListenersModule, // attaches event listeners
+]);

package/src/transpile.ts

@@ -0,0 +1,143 @@
+import type { FileLoader } from "./file-loader";
+
+interface TranspileResult {
+  files: Array<[string, Uint8Array]>;
+}
+
+interface CacheEntry {
+  jsUrl: string;
+  fileUrls: Record<string, string>;
+}
+
+const CACHE_KEY_PREFIX = "transpile_cache_";
+
+// Helper functions for localStorage caching
+const getCachedEntry = (file: string): CacheEntry | null => {
+  try {
+    const cached = localStorage.getItem(CACHE_KEY_PREFIX + file);
+    if (cached) {
+      return JSON.parse(cached);
+    }
+  } catch (e) {
+    console.warn("Failed to read from cache:", e);
+  }
+  return null;
+};
+
+const setCachedEntry = (file: string, entry: CacheEntry): void => {
+  try {
+    localStorage.setItem(CACHE_KEY_PREFIX + file, JSON.stringify(entry));
+  } catch (e) {
+    console.warn("Failed to write to cache:", e);
+  }
+};
+
+const transpileInWorker = async (
+  buffer: ArrayBuffer,
+  name: string,
+): Promise<TranspileResult> => {
+  return new Promise((resolve, reject) => {
+    const worker = new Worker(
+      new URL("./transpile.worker.ts", import.meta.url),
+      { type: "module" },
+    );
+
+    worker.onmessage = (event: MessageEvent) => {
+      worker.terminate();
+      if (event.data.success) {
+        resolve(event.data.data);
+      } else {
+        reject(new Error(event.data.error));
+      }
+    };
+
+    worker.onerror = (error) => {
+      worker.terminate();
+      reject(error);
+    };
+
+    // Transfer the buffer ownership to the worker (zero-copy)
+    worker.postMessage({ buffer, name }, [buffer]);
+  });
+};
+
+export const loadTranspile = async (
+  file: string,
+  fileLoader: FileLoader,
+): Promise<[string, (filename: string) => Promise<WebAssembly.Module>]> => {
+  // Check cache first
+  const cached = getCachedEntry(file);
+  if (cached) {
+    // Verify URLs are still valid
+    try {
+      await fetch(cached.jsUrl, { method: "HEAD" });
+      return [
+        cached.jsUrl,
+        async (filename: string) => {
+          const url = cached.fileUrls[filename];
+          if (!url) {
+            throw new Error(`File ${filename} not found in transpiled output.`);
+          }
+          const wasmResponse = await fetch(url);
+          const wasmBuffer = await wasmResponse.arrayBuffer();
+          return await WebAssembly.compile(wasmBuffer);
+        },
+      ];
+    } catch (e) {
+      // Cache is stale, proceed with transpilation
+      console.warn("Cached URLs are stale, re-transpiling");
+    }
+  }
+
+  const response = await fileLoader.load(file);
+  if (!response) {
+    throw new Error(`Failed to load file: ${file}`);
+  }
+  const files: Record<string, string> = {};
+  const t = await transpileInWorker(response.buffer, "test");
+
+  for (const file of t.files) {
+    const [f, content] = file as [string, Uint8Array];
+
+    let blob: Blob | null = null;
+    if (f.endsWith(".js")) {
+      blob = new Blob([new Uint8Array(content)], {
+        type: "application/javascript",
+      });
+    } else if (f.endsWith(".wasm")) {
+      blob = new Blob([new Uint8Array(content)], {
+        type: "application/wasm",
+      });
+    }
+    if (blob) {
+      const url = URL.createObjectURL(blob);
+      files[f] = url;
+    }
+  }
+  const jsFileEntry = Object.entries(files).find(([filename]) =>
+    filename.endsWith(".js"),
+  );
+  if (!jsFileEntry) {
+    throw new Error("No JavaScript file found in transpiled output.");
+  }
+
+  // Cache the result
+  const cacheEntry: CacheEntry = {
+    jsUrl: jsFileEntry[1],
+    fileUrls: files,
+  };
+  setCachedEntry(file, cacheEntry);
+
+  return [
+    jsFileEntry[1],
+    async (filename: string) => {
+      const url = files[filename];
+      if (!url) {
+        throw new Error(`File ${filename} not found in transpiled output.`);
+      }
+      const wasmResponse = await fetch(url);
+      const wasmBuffer = await wasmResponse.arrayBuffer();
+      return await WebAssembly.compile(wasmBuffer);
+    },
+  ];
+};

package/src/transpile.worker.ts

@@ -0,0 +1,33 @@
+import { transpile } from "@bytecodealliance/jco";
+
+interface TranspileRequest {
+  buffer: ArrayBuffer;
+  name: string;
+}
+
+interface TranspileResponse {
+  files: Array<[string, Uint8Array]>;
+}
+
+self.onmessage = async (event: MessageEvent<TranspileRequest>) => {
+  const { buffer, name } = event.data;
+
+  try {
+    const result = (await transpile(buffer, {
+      name,
+      instantiation: { tag: "async" },
+    })) as TranspileResponse;
+
+    // Transfer the file buffers back to the main thread (zero-copy)
+    const transferables = result.files.map(([, content]) => content.buffer);
+    self.postMessage(
+      { success: true, data: result },
+      { transfer: transferables }
+    );
+  } catch (error) {
+    self.postMessage({
+      success: false,
+      error: error instanceof Error ? error.message : String(error),
+    });
+  }
+};

package/src/types.ts

@@ -0,0 +1,18 @@
+export class Event {
+  private _value: string;
+  private _checked: boolean;
+
+  constructor(_value: string = "", _checked: boolean = false) {
+    this._value = _value;
+    this._checked = _checked;
+  }
+
+  preventDefault() {}
+  stopPropagation() {}
+  value() {
+    return this._value;
+  }
+  checked() {
+    return this._checked;
+  }
+}