@druid-ui/component 1.0.0-next.1

package/dist/index.js

@@ -0,0 +1,108 @@
+// src/index.ts
+import { d as dfunc } from "druid:ui/ui";
+
+// src/utils.ts
+import { log, rerender, setHook } from "druid:ui/ui";
+var callbackMap = {};
+function emit(nodeid, event, e) {
+  log(`Emit called for nodeid: ${nodeid}, event: ${event}`);
+  const callbacks = callbackMap[nodeid];
+  callbacks?.[event]?.(e);
+}
+var registerHooks = (id, fnresult) => {
+  switch (true) {
+    case !!fnresult.init:
+      setHook(id, "init");
+      callbackMap[id] = {
+        ...callbackMap[id],
+        init: fnresult.init
+      };
+      break;
+  }
+};
+var createDFunc = (dfunc2) => {
+  return (tag, props, ...children) => {
+    children = children.flat();
+    if (typeof tag !== "string") {
+      if (typeof tag === "function") {
+        const fnresult = tag(props);
+        if (fnresult?.view) {
+          const id3 = fnresult.view(props);
+          registerHooks(id3, fnresult);
+          return id3;
+        } else {
+          return tag(props);
+        }
+      }
+      const id2 = tag.view(props);
+      registerHooks(id2, tag);
+      return id2;
+    }
+    const ps = { prop: [], on: [] };
+    const cbObj = {};
+    if (props) {
+      for (const [key, value] of Object.entries(props)) {
+        if (value instanceof Function) {
+          const eventKey = key.startsWith("on") ? key.slice(2).toLowerCase() : key;
+          cbObj[eventKey] = value;
+          ps.on.push(eventKey);
+        } else {
+          if (typeof value === "boolean") {
+            if (value) {
+              ps.prop.push({ key, value: "true" });
+            }
+            continue;
+          }
+          ps.prop.push({ key, value });
+        }
+      }
+    }
+    const id = dfunc2(
+      tag,
+      ps,
+      children.filter((c) => typeof c !== "boolean").map((c) => c?.toString())
+    );
+    callbackMap[id] = {
+      ...callbackMap[id],
+      ...cbObj
+    };
+    return id;
+  };
+};
+var pendingOperations = /* @__PURE__ */ new Map();
+var asyncCallback = (id, result) => {
+  log(`Async callback received for id: ${id} with result: ${result.tag}`);
+  const pending = pendingOperations.get(id);
+  if (pending) {
+    if (result.tag === "ok") {
+      pending.resolve(result.val);
+    } else {
+      pending.reject(new Error(result.val));
+    }
+    pendingOperations.delete(id);
+    rerender();
+  }
+};
+var rawAsyncToPromise = (fn) => (...args) => {
+  return new Promise((resolve, reject) => {
+    const asyncId = fn(...args);
+    pendingOperations.set(asyncId, { resolve, reject });
+  });
+};
+var createComponent = (j) => ({
+  init: (ctx) => j(ctx),
+  emit,
+  asyncComplete: asyncCallback
+});
+
+// src/index.ts
+import { Event } from "druid:ui/utils";
+import { log as log2 } from "druid:ui/ui";
+var d2 = createDFunc(dfunc);
+export {
+  Event,
+  createComponent,
+  d2 as d,
+  log2 as log,
+  rawAsyncToPromise
+};

package/dist/raw.js

@@ -0,0 +1,106 @@
+// src/utils.ts
+import { log, rerender, setHook } from "druid:ui/ui";
+var callbackMap = {};
+function emit(nodeid, event, e) {
+  log(`Emit called for nodeid: ${nodeid}, event: ${event}`);
+  const callbacks = callbackMap[nodeid];
+  callbacks?.[event]?.(e);
+}
+var registerHooks = (id, fnresult) => {
+  switch (true) {
+    case !!fnresult.init:
+      setHook(id, "init");
+      callbackMap[id] = {
+        ...callbackMap[id],
+        init: fnresult.init
+      };
+      break;
+  }
+};
+var createDFunc = (dfunc2) => {
+  return (tag, props, ...children) => {
+    children = children.flat();
+    if (typeof tag !== "string") {
+      if (typeof tag === "function") {
+        const fnresult = tag(props);
+        if (fnresult?.view) {
+          const id3 = fnresult.view(props);
+          registerHooks(id3, fnresult);
+          return id3;
+        } else {
+          return tag(props);
+        }
+      }
+      const id2 = tag.view(props);
+      registerHooks(id2, tag);
+      return id2;
+    }
+    const ps = { prop: [], on: [] };
+    const cbObj = {};
+    if (props) {
+      for (const [key, value] of Object.entries(props)) {
+        if (value instanceof Function) {
+          const eventKey = key.startsWith("on") ? key.slice(2).toLowerCase() : key;
+          cbObj[eventKey] = value;
+          ps.on.push(eventKey);
+        } else {
+          if (typeof value === "boolean") {
+            if (value) {
+              ps.prop.push({ key, value: "true" });
+            }
+            continue;
+          }
+          ps.prop.push({ key, value });
+        }
+      }
+    }
+    const id = dfunc2(
+      tag,
+      ps,
+      children.filter((c) => typeof c !== "boolean").map((c) => c?.toString())
+    );
+    callbackMap[id] = {
+      ...callbackMap[id],
+      ...cbObj
+    };
+    return id;
+  };
+};
+var pendingOperations = /* @__PURE__ */ new Map();
+var asyncCallback = (id, result) => {
+  log(`Async callback received for id: ${id} with result: ${result.tag}`);
+  const pending = pendingOperations.get(id);
+  if (pending) {
+    if (result.tag === "ok") {
+      pending.resolve(result.val);
+    } else {
+      pending.reject(new Error(result.val));
+    }
+    pendingOperations.delete(id);
+    rerender();
+  }
+};
+var rawAsyncToPromise = (fn) => (...args) => {
+  return new Promise((resolve, reject) => {
+    const asyncId = fn(...args);
+    pendingOperations.set(asyncId, { resolve, reject });
+  });
+};
+var createComponent = (j) => ({
+  init: (ctx) => j(ctx),
+  emit,
+  asyncComplete: asyncCallback
+});
+
+// src/raw.ts
+var dfunc = window["druid-ui"]?.d || (() => {
+  throw new Error("druid.d function not defined");
+});
+var d2 = createDFunc(dfunc);
+var log2 = (msg) => console.log("UI LOG:", msg);
+export {
+  createComponent,
+  d2 as d,
+  log2 as log,
+  rawAsyncToPromise
+};

package/dist/types/druid-ui.d.ts

@@ -0,0 +1,47 @@
+/// <reference path="./interfaces/druid-ui-component.d.ts" />
+/// <reference path="./interfaces/druid-ui-ui.d.ts" />
+/// <reference path="./interfaces/druid-ui-utils.d.ts" />
+declare module 'druid:ui/druid-ui' {
+  import type * as DruidUiUi from 'druid:ui/ui'; // druid:ui/ui
+  import type * as DruidUiUtils from 'druid:ui/utils'; // druid:ui/utils
+  import type * as DruidUiComponent from 'druid:ui/component'; // druid:ui/component
+  export interface ImportObject {
+    'druid:ui/ui': typeof DruidUiUi,
+    'druid:ui/utils': typeof DruidUiUtils,
+  }
+  export interface DruidUi {
+    'druid:ui/component': typeof DruidUiComponent,
+    component: typeof DruidUiComponent,
+  }
+  
+  /**
+  * Instantiates this component with the provided imports and
+  * returns a map of all the exports of the component.
+  *
+  * This function is intended to be similar to the
+  * `WebAssembly.instantiate` function. The second `imports`
+  * argument is the "import object" for wasm, except here it
+  * uses component-model-layer types instead of core wasm
+  * integers/numbers/etc.
+  *
+  * The first argument to this function, `getCoreModule`, is
+  * used to compile core wasm modules within the component.
+  * Components are composed of core wasm modules and this callback
+  * will be invoked per core wasm module. The caller of this
+  * function is responsible for reading the core wasm module
+  * identified by `path` and returning its compiled
+  * `WebAssembly.Module` object. This would use `compileStreaming`
+  * on the web, for example.
+  */
+  export function instantiate(
+  getCoreModule: (path: string) => WebAssembly.Module,
+  imports: ImportObject,
+  instantiateCore?: (module: WebAssembly.Module, imports: Record<string, any>) => WebAssembly.Instance
+  ): DruidUi;
+  export function instantiate(
+  getCoreModule: (path: string) => WebAssembly.Module | Promise<WebAssembly.Module>,
+  imports: ImportObject,
+  instantiateCore?: (module: WebAssembly.Module, imports: Record<string, any>) => WebAssembly.Instance | Promise<WebAssembly.Instance>
+  ): DruidUi | Promise<DruidUi>;
+  
+}

package/dist/types/index.d.ts

@@ -0,0 +1,14 @@
+export { Event, type Context } from "druid:ui/utils";
+export { log } from "druid:ui/ui";
+export declare const d: (tag: string | {
+    view: (props?: any) => string;
+    init?: () => void;
+} | ((props?: any) => void) | ((props?: any) => {
+    view: (props?: any) => string;
+    init?: () => void;
+}), props?: Record<string, any>, ...children: string[] | Array<string[]>) => string | void | {
+    view: (props?: any) => string;
+    init?: () => void;
+};
+export { createComponent, rawAsyncToPromise } from "./utils";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,EAAE,KAAK,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC,eAAO,MAAM,CAAC;gBAEy3B,CAAC;QAAsB,CAAC;WAA8B,CAAC,yBAA+B,CAAC;gBAAwB,CAAC;QAAsB,CAAC;;gBAAxB,CAAC;;CAFp9B,CAAC;AACpC,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC"}

package/dist/types/interfaces/druid-ui-component.d.ts

@@ -0,0 +1,9 @@
+/// <reference path="./druid-ui-utils.d.ts" />
+declare module 'druid:ui/component' {
+  export function init(ctx: Context): string;
+  export function emit(nodeid: string, event: string, e: Event): void;
+  export function asyncComplete(id: string, value: Result<string, void>): void;
+  export type Event = import('druid:ui/utils').Event;
+  export type Context = import('druid:ui/utils').Context;
+  export type Result<T, E> = { tag: 'ok', val: T } | { tag: 'err', val: E };
+}

package/dist/types/interfaces/druid-ui-ui.d.ts

@@ -0,0 +1,16 @@
+declare module 'druid:ui/ui' {
+  export function d(element: string, props: Props, children: Children): string;
+  export function log(msg: string): void;
+  export function setHook(id: AsyncId, hook: string): void;
+  export function rerender(): void;
+  export interface Prop {
+    key: string,
+    value: string,
+  }
+  export interface Props {
+    prop: Array<Prop>,
+    on: Array<string>,
+  }
+  export type AsyncId = string;
+  export type Children = Array<string> | undefined;
+}

package/dist/types/interfaces/druid-ui-utils.d.ts

@@ -0,0 +1,14 @@
+declare module 'druid:ui/utils' {
+  export interface Context {
+    path: string,
+  }
+  
+  export class Event implements Disposable {
+    constructor(value: string, checked: boolean)
+    preventDefault(): void;
+    stopPropagation(): void;
+    value(): string;
+    checked(): boolean;
+    [Symbol.dispose](): void;
+  }
+}

package/dist/types/raw.d.ts

@@ -0,0 +1,13 @@
+export declare const d: (tag: string | {
+    view: (props?: any) => string;
+    init?: () => void;
+} | ((props?: any) => void) | ((props?: any) => {
+    view: (props?: any) => string;
+    init?: () => void;
+}), props?: Record<string, any>, ...children: string[] | Array<string[]>) => string | void | {
+    view: (props?: any) => string;
+    init?: () => void;
+};
+export declare const log: (msg: string) => void;
+export { createComponent, rawAsyncToPromise } from "./utils";
+//# sourceMappingURL=raw.d.ts.map

package/dist/types/raw.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"raw.d.ts","sourceRoot":"","sources":["../../src/raw.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,CAAC;gBAKouB,CAAC;QAAsB,CAAC;WAA8B,CAAC,yBAA+B,CAAC;gBAAwB,CAAC;QAAsB,CAAC;;gBAAxB,CAAC;;CAL/zB,CAAC;AAEpC,eAAO,MAAM,GAAG,GAAI,KAAK,MAAM,SAAgC,CAAC;AAEhE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC"}

package/dist/types/utils.d.ts

@@ -0,0 +1,30 @@
+import { d } from "druid:ui/ui";
+import type { Event } from "@druid-ui/host";
+import type { Context } from "druid:ui/component";
+export declare function fnv1aHash(str: string): string;
+export declare const callbackMap: Record<string, Record<string, Function>>;
+export declare function emit(nodeid: string, event: string, e: Event): void;
+export declare const createDFunc: (dfunc: typeof d) => (tag: string | {
+    view: (props?: any) => string;
+    init?: () => void;
+} | ((props?: any) => void) | ((props?: any) => {
+    view: (props?: any) => string;
+    init?: () => void;
+}), props?: Record<string, any>, ...children: string[] | Array<string[]>) => string | void | {
+    view: (props?: any) => string;
+    init?: () => void;
+};
+export declare const asyncCallback: (id: string, result: {
+    tag: "ok" | "err";
+    val: any;
+}) => void;
+export declare const rawAsyncToPromise: <T>(fn: (...args: any[]) => any) => (...args: any[]) => Promise<T>;
+export declare const createComponent: (j: (ctx: Context) => string | JSX.Element) => {
+    init: (ctx: Context) => string | JSX.Element;
+    emit: typeof emit;
+    asyncComplete: (id: string, result: {
+        tag: "ok" | "err";
+        val: any;
+    }) => void;
+};
+//# sourceMappingURL=utils.d.ts.map

package/dist/types/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAiB,CAAC,EAAW,MAAM,aAAa,CAAC;AACxD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAElD,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,UAQpC;AAED,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAM,CAAC;AAExE,wBAAgB,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,QAI3D;AAoBD,eAAO,MAAM,WAAW,GAAI,OAAO,OAAO,CAAC,MAEvC,KACI,MAAM,GACN;IAAE,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,GACpD,CAAC,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC,GACvB,CAAC,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK;IAAE,IAAI,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC,EAC3E,QAAQ,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAC3B,GAAG,UAAU,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC;UAFT,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,MAAM;WAAS,MAAM,IAAI;CAyD3E,CAAC;AAQF,eAAO,MAAM,aAAa,GACxB,IAAI,MAAM,EACV,QAAQ;IAAE,GAAG,EAAE,IAAI,GAAG,KAAK,CAAC;IAAC,GAAG,EAAE,GAAG,CAAA;CAAE,SAaxC,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAC3B,CAAC,EAAE,IAAI,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,MAC9B,GAAG,MAAM,GAAG,EAAE,eAKd,CAAC;AAEJ,eAAO,MAAM,eAAe,GAAI,GAAG,CAAC,GAAG,EAAE,OAAO,KAAK,MAAM,GAAG,GAAG,CAAC,OAAO;gBAC3D,OAAO;;wBA1Bf,MAAM,UACF;QAAE,GAAG,EAAE,IAAI,GAAG,KAAK,CAAC;QAAC,GAAG,EAAE,GAAG,CAAA;KAAE;CA4BvC,CAAC"}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@druid-ui/component",
+  "version": "1.0.0-next.1",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./raw": {
+      "types": "./dist/types/raw.d.ts",
+      "import": "./dist/raw.js",
+      "default": "./dist/raw.js"
+    },
+    "./jsx": {
+      "types": "./src/jsx.d.ts"
+    },
+    "./types": {
+      "types": "./dist/types/druid-ui.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "npm run build:types-ui && npm run build:lib && npm run build:raw && npm run build:types",
+    "build:lib": "esbuild src/index.ts --bundle --outfile=dist/index.js --format=esm --external:druid:ui/ui --external:druid:ui/utils --external:druid:ui/component --external:@druid-ui/host",
+    "build:raw": "esbuild src/raw.ts --bundle --outfile=dist/raw.js --format=esm --external:@druid-ui/host --external:druid:ui/ui --external:druid:ui/utils --external:druid:ui/component",
+    "build:types": "tsc --emitDeclarationOnly --outDir dist/types",
+    "build:types-ui": "druid-ui-gen-types druid-ui --out-dir=dist/types"
+  },
+  "dependencies": {
+    "@druid-ui/build": "1.0.0-next.1",
+    "@druid-ui/host": "1.0.0-next.1"
+  },
+  "devDependencies": {
+    "esbuild": "^0.25.11",
+    "typescript": "~5.8.3"
+  }
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+import { d as dfunc } from "druid:ui/ui";
+import { createDFunc } from "./utils";
+
+export { Event, type Context } from "druid:ui/utils";
+export { log } from "druid:ui/ui";
+
+export const d = createDFunc(dfunc);
+export { createComponent, rawAsyncToPromise } from "./utils";

package/src/jsx.d.ts

@@ -0,0 +1,23 @@
+type DruidComponent<T = any> = () => {
+  init?: () => void;
+  view: (props: T) => JSX.Element;
+};
+type DruidFC<T = any> = (props: T) => JSX.Element;
+
+declare namespace JSX {
+  interface Element {}
+
+  interface ElementAttributesProperty {
+    view: any; // TS will infer props from `view`
+  }
+
+  interface IntrinsicElements {
+    [key: string]: any;
+  }
+
+  interface ElementChildrenAttribute {
+    children: {};
+  }
+
+  type ElementType = string | DruidFC | DruidComponent;
+}

package/src/raw.ts

@@ -0,0 +1,14 @@
+//this file fully works in the browser, this hopefully can be remvoved in the future and unified with
+import { createDFunc } from "./utils";
+
+const dfunc =
+  window["druid-ui"]?.d ||
+  (() => {
+    throw new Error("druid.d function not defined");
+  });
+
+export const d = createDFunc(dfunc);
+
+export const log = (msg: string) => console.log("UI LOG:", msg);
+
+export { createComponent, rawAsyncToPromise } from "./utils";

package/src/utils.d.ts

@@ -0,0 +1,22 @@
+import type { Props } from "druid:ui/ui";
+import type { Event } from "../types";
+import type { Context } from "druid:ui/component";
+export declare function fnv1aHash(str: string): string;
+export declare const eventMap: Record<string, Record<string, Function>>;
+export declare function emit(nodeid: string, event: string, e: Event): void;
+export declare const createDFunc: (dfunc: (element: string, props: Props, children: string[]) => string) => (tag: string | {
+    view: (props?: any) => void;
+} | ((props?: any) => void), props?: Record<string, any>, ...children: string[]) => string | void;
+export declare const asyncCallback: (id: string, result: {
+    tag: "ok" | "err";
+    val: any;
+}) => void;
+export declare const rawAsyncToPromise: <T>(fn: (...args: any[]) => any) => (...args: any[]) => Promise<T>;
+export declare const createComponent: (j: (ctx: Context) => string | JSX.Element) => {
+    init: (ctx: Context) => string | JSX.Element;
+    emit: typeof emit;
+    asyncComplete: (id: string, result: {
+        tag: "ok" | "err";
+        val: any;
+    }) => void;
+};

package/src/utils.ts

@@ -0,0 +1,143 @@
+import type { Prop, Props } from "druid:ui/ui";
+import { log, rerender, d, setHook } from "druid:ui/ui";
+import type { Event } from "@druid-ui/host";
+import type { Context } from "druid:ui/component";
+
+export function fnv1aHash(str: string) {
+  let hash = 0x811c9dc5; // FNV offset basis
+  for (let i = 0; i < str.length; i++) {
+    hash ^= str.charCodeAt(i);
+    hash +=
+      (hash << 1) + (hash << 4) + (hash << 7) + (hash << 8) + (hash << 24);
+  }
+  return (hash >>> 0).toString(36);
+}
+
+export const callbackMap: Record<string, Record<string, Function>> = {};
+
+export function emit(nodeid: string, event: string, e: Event) {
+  log(`Emit called for nodeid: ${nodeid}, event: ${event}`);
+  const callbacks = callbackMap[nodeid];
+  callbacks?.[event]?.(e);
+}
+
+const registerHooks = (
+  id: string,
+  fnresult: {
+    view: (props?: any) => string;
+    init?: () => void;
+  },
+) => {
+  switch (true) {
+    case !!fnresult.init:
+      setHook(id, "init");
+      callbackMap[id] = {
+        ...callbackMap[id],
+        init: fnresult.init,
+      };
+      break;
+  }
+};
+
+export const createDFunc = (dfunc: typeof d) => {
+  return (
+    tag:
+      | string
+      | { view: (props?: any) => string; init?: () => void }
+      | ((props?: any) => void)
+      | ((props?: any) => { view: (props?: any) => string; init?: () => void }),
+    props?: Record<string, any>,
+    ...children: string[] | Array<string[]>
+  ) => {
+    //flatten children, e.g. .map(...) returns array of arrays
+    children = children.flat();
+    if (typeof tag !== "string") {
+      if (typeof tag === "function") {
+        const fnresult = tag(props);
+        if (fnresult?.view) {
+          const id = fnresult.view(props);
+          registerHooks(id, fnresult);
+          return id;
+        } else {
+          return tag(props);
+        }
+      }
+      const id = tag.view(props);
+      registerHooks(id, tag);
+      return id;
+    }
+
+    const ps: Props = { prop: [] as Prop[], on: [] };
+    const cbObj: Record<string, Function> = {};
+    if (props) {
+      for (const [key, value] of Object.entries(props)) {
+        if (value instanceof Function) {
+          const eventKey = key.startsWith("on")
+            ? key.slice(2).toLowerCase()
+            : key;
+
+          cbObj[eventKey] = value;
+
+          ps.on.push(eventKey);
+        } else {
+          if (typeof value === "boolean") {
+            //e.g. disabled, checked does not have a "false"
+            if (value) {
+              ps.prop.push({ key, value: "true" });
+            }
+            continue;
+          }
+          ps.prop.push({ key, value });
+        }
+      }
+    }
+    const id = dfunc(
+      tag,
+      ps,
+      children.filter((c) => typeof c !== "boolean").map((c) => c?.toString()),
+    );
+    callbackMap[id] = {
+      ...callbackMap[id],
+      ...cbObj,
+    };
+    return id;
+  };
+};
+
+// Module-level map that tracks pending async operations initiated through wrappers
+const pendingOperations = new Map<
+  string,
+  { resolve: (value: any) => void; reject: (error: any) => void }
+>();
+
+export const asyncCallback = (
+  id: string,
+  result: { tag: "ok" | "err"; val: any },
+) => {
+  log(`Async callback received for id: ${id} with result: ${result.tag}`);
+  const pending = pendingOperations.get(id);
+  if (pending) {
+    if (result.tag === "ok") {
+      pending.resolve(result.val);
+    } else {
+      pending.reject(new Error(result.val));
+    }
+    pendingOperations.delete(id);
+    rerender();
+  }
+};
+
+export const rawAsyncToPromise =
+  <T>(fn: (...args: any[]) => any) =>
+  (...args: any[]) => {
+    return new Promise<T>((resolve, reject) => {
+      const asyncId = fn(...args);
+      pendingOperations.set(asyncId, { resolve, reject });
+    });
+  };
+
+export const createComponent = (j: (ctx: Context) => string | JSX.Element) => ({
+  init: (ctx: Context) => j(ctx),
+  emit: emit,
+  asyncComplete: asyncCallback,
+});