rask-ui 0.1.0

package/dist/render.js

@@ -0,0 +1,65 @@
+import { init, classModule, propsModule, styleModule, eventListenersModule, attributesModule, h, } from "snabbdom";
+import { createComponent } from "./component";
+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
+    attributesModule,
+]);
+export function render(vnode, container) {
+    const style = document.createElement("style");
+    style.innerHTML = "component { display: contents; }";
+    document.head.appendChild(style);
+    patch(container, vnode);
+}
+export function jsx(type, props, children) {
+    let flatChildren = children.flat();
+    if (typeof type === "string") {
+        const data = {};
+        for (const key in props) {
+            if (key === "key") {
+                data[key] = props[key];
+                continue;
+            }
+            if (key === "hook") {
+                data[key] = props[key];
+                continue;
+            }
+            if (key === "style") {
+                data.style = props[key];
+                continue;
+            }
+            if (key === "ref") {
+                data.hook = data.hook || {};
+                const existingInsertHook = data.hook?.insert;
+                data.hook.insert = (vnode) => {
+                    existingInsertHook?.(vnode);
+                    props.ref(vnode.elm || null);
+                };
+                continue;
+            }
+            if (key.startsWith("on")) {
+                data.on = data.on || {};
+                data.on[key.substring(2).toLocaleLowerCase()] = props[key];
+                continue;
+            }
+            if (key.startsWith("data-") || key.startsWith("aria-")) {
+                data.attrs = data.attrs || {};
+                data.attrs[key] = props[key];
+                continue;
+            }
+            if (type === "svg") {
+                data.attrs = data.attrs || {};
+                data.attrs[key] = props[key];
+                continue;
+            }
+            data.props = data.props || {};
+            data.props[key] = props[key];
+        }
+        return h(type, data, flatChildren);
+    }
+    const maybeSingleChild = flatChildren.length === 1 ? flatChildren[0] : flatChildren;
+    return createComponent(type, props, maybeSingleChild);
+}

package/dist/suspense.d.ts

@@ -0,0 +1,25 @@
+import { VNode } from "snabbdom";
+export declare function createSuspense<T extends Record<string, Promise<any>>>(promises: T): {
+    [K in keyof T]: Awaited<T[K]>;
+};
+export declare function Suspense(props: {
+    fallback: VNode;
+    children: VNode | VNode[];
+}): () => VNode | VNode[];
+type SuspensePromiseState<T> = {
+    status: "pending";
+    value: null;
+    error: null;
+} | {
+    status: "resolved";
+    value: T;
+    error: null;
+} | {
+    status: "rejected";
+    value: null;
+    error: string;
+};
+export type SuspensePromise<T> = Promise<T> & SuspensePromiseState<T>;
+export declare function createSuspensePromise<T>(promise: Promise<T>): SuspensePromise<T>;
+export {};
+//# sourceMappingURL=suspense.d.ts.map

package/dist/suspense.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"suspense.d.ts","sourceRoot":"","sources":["../src/suspense.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAKjC,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,EACnE,QAAQ,EAAE,CAAC,GACV;KACA,CAAC,IAAI,MAAM,CAAC,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CAC9B,CAuBA;AAQD,wBAAgB,QAAQ,CAAC,KAAK,EAAE;IAC9B,QAAQ,EAAE,KAAK,CAAC;IAChB,QAAQ,EAAE,KAAK,GAAG,KAAK,EAAE,CAAC;CAC3B,yBAmBA;AAED,KAAK,oBAAoB,CAAC,CAAC,IACvB;IACE,MAAM,EAAE,SAAS,CAAC;IAClB,KAAK,EAAE,IAAI,CAAC;IACZ,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,IAAI,CAAC;CACb,GACD;IACE,MAAM,EAAE,UAAU,CAAC;IACnB,KAAK,EAAE,IAAI,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEN,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,GAAG,oBAAoB,CAAC,CAAC,CAAC,CAAC;AAEtE,wBAAgB,qBAAqB,CAAC,CAAC,EACrC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,GAClB,eAAe,CAAC,CAAC,CAAC,CAgEpB"}

package/dist/suspense.js

@@ -0,0 +1,97 @@
+import { getCurrentComponent } from "./component";
+import { createState } from "./createState";
+import { getCurrentObserver, Signal } from "./observation";
+export function createSuspense(promises) {
+    let currentComponent = getCurrentComponent();
+    if (!currentComponent) {
+        throw new Error("createSuspense must be used in the setup of a component");
+    }
+    const proxy = {};
+    for (const key in promises) {
+        const promise = promises[key];
+        const suspensePromise = isSuspensePromise(promise)
+            ? promise
+            : createSuspensePromise(promise);
+        currentComponent.notifyAsync(suspensePromise);
+        Object.defineProperty(proxy, key, {
+            get() {
+                return suspensePromise.value;
+            },
+        });
+    }
+    return proxy;
+}
+function isSuspensePromise(promise) {
+    return "status" in promise;
+}
+export function Suspense(props) {
+    const currentComponent = getCurrentComponent();
+    const state = createState({
+        suspendingPromises: [],
+    });
+    currentComponent.onAsync((promise) => {
+        state.suspendingPromises = state.suspendingPromises.concat(promise);
+    });
+    return () => {
+        const isAllResolved = state.suspendingPromises.every((promise) => promise.status === "resolved");
+        console.log(isAllResolved);
+        return isAllResolved ? props.children : props.fallback;
+    };
+}
+export function createSuspensePromise(promise) {
+    const signal = new Signal();
+    const state = {
+        error: null,
+        status: "pending",
+        value: null,
+    };
+    Object.defineProperty(promise, "value", {
+        get() {
+            const observer = getCurrentObserver();
+            if (observer) {
+                observer.subscribeSignal(signal);
+            }
+            return state.value;
+        },
+        set(newValue) {
+            state.value = newValue;
+            signal.notify();
+        },
+    });
+    Object.defineProperty(promise, "error", {
+        get() {
+            const observer = getCurrentObserver();
+            if (observer) {
+                observer.subscribeSignal(signal);
+            }
+            return state.error;
+        },
+    });
+    Object.defineProperty(promise, "status", {
+        get() {
+            const observer = getCurrentObserver();
+            if (observer) {
+                observer.subscribeSignal(signal);
+            }
+            return state.status;
+        },
+    });
+    promise
+        .then((value) => {
+        Object.assign(state, {
+            value,
+            error: null,
+            status: "resolved",
+        });
+        signal.notify();
+    })
+        .catch((error) => {
+        Object.assign(state, {
+            value: null,
+            error: String(error),
+            status: "rejected",
+        });
+        signal.notify();
+    });
+    return promise;
+}

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "rask-ui",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./jsx-runtime": {
+      "types": "./dist/jsx-runtime.d.ts",
+      "import": "./dist/jsx-runtime.js"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./dist/jsx-dev-runtime.d.ts",
+      "import": "./dist/jsx-dev-runtime.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc && cp src/jsx.d.ts dist/",
+    "dev": "tsc --watch",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:run": "vitest run"
+  },
+  "devDependencies": {
+    "@vitest/ui": "^4.0.7",
+    "happy-dom": "^20.0.10",
+    "jsdom": "^27.1.0",
+    "typescript": "^5.7.3",
+    "vitest": "^4.0.7"
+  },
+  "dependencies": {
+    "snabbdom": "^3.6.3"
+  }
+}