@vimpak/jsx 0.1.0

package/dist/context.d.ts

@@ -0,0 +1,12 @@
+export interface ContextToken<T> {
+    key: symbol;
+    factory: () => T;
+}
+export declare function createContextToken<T>(factory: () => T): ContextToken<T>;
+export declare class Context {
+    #private;
+    private constructor();
+    get<T>(token: ContextToken<T>): T;
+    set<T>(token: ContextToken<T>, value: T): Context;
+    reset<T>(token: ContextToken<T>): Context;
+}

package/dist/context.js

@@ -0,0 +1,37 @@
+export function createContextToken(factory) {
+    return { factory, key: Symbol() };
+}
+const contextCache = {};
+export class Context {
+    #map = {};
+    constructor(map) {
+        this.#map = map;
+    }
+    get(token) {
+        const items = this.#map[token.key];
+        if (!Array.isArray(items) || items.length === 0) {
+            if (!(token.key in contextCache)) {
+                contextCache[token.key] = token.factory();
+            }
+            return contextCache[token.key];
+        }
+        return items[items.length - 1].value;
+    }
+    set(token, value) {
+        const map = { ...this.#map };
+        if (!(token.key in map)) {
+            map[token.key] = [{ value }];
+        }
+        else {
+            map[token.key].push({ value });
+        }
+        return new Context(map);
+    }
+    reset(token) {
+        const map = { ...this.#map };
+        if (token.key in map) {
+            map[token.key].pop();
+        }
+        return new Context(map);
+    }
+}

package/dist/css.d.ts

@@ -0,0 +1 @@
+export declare function stringifyStyle(style: object | string, parts: string[]): void;

package/dist/css.js

@@ -0,0 +1,26 @@
+const hyphenateRegex = /[A-Z]|^ms/g;
+const styleNames = new Map();
+function processStyleName(name) {
+    if (name.charCodeAt(1) === 45) {
+        return name;
+    }
+    let out = styleNames.get(name);
+    if (!out) {
+        out = name.replace(hyphenateRegex, "-$&").toLowerCase();
+        styleNames.set(name, out);
+    }
+    return out;
+}
+export function stringifyStyle(style, parts) {
+    parts.push(` style="`);
+    if (typeof style === "string") {
+        parts.push(style);
+    }
+    else {
+        const css = style;
+        for (const key in css) {
+            parts.push(processStyleName(key), ":", css[key]);
+        }
+    }
+    parts.push(`"`);
+}

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { render } from "./render";

package/dist/index.js

@@ -0,0 +1 @@
+export { render } from "./render";

package/dist/jsx-dev-runtime.d.ts

@@ -0,0 +1 @@
+export { Fragment, jsxDEV } from "./jsx";

package/dist/jsx-dev-runtime.js

@@ -0,0 +1 @@
+export { Fragment, jsxDEV } from "./jsx";

package/dist/jsx-runtime.d.ts

@@ -0,0 +1 @@
+export { Fragment, jsx, jsxs } from "./jsx";

package/dist/jsx-runtime.js

@@ -0,0 +1 @@
+export { Fragment, jsx, jsxs } from "./jsx";

package/dist/jsx.d.ts

@@ -0,0 +1,32 @@
+export declare const Fragment: unique symbol;
+export type KiteKey = string | number | bigint;
+export type KiteFC<P> = (props: P, ctx: Kite.Context) => KiteNode | Promise<KiteNode>;
+export type KiteElementType<P = unknown, Tag extends keyof JSX.IntrinsicElements = keyof JSX.IntrinsicElements> = string | KiteFC<P> | typeof Fragment | {
+    [K in Tag]: P extends JSX.IntrinsicElements[K] ? K : never;
+}[Tag];
+export type KiteElement<P = unknown, Tag extends keyof JSX.IntrinsicElements = keyof JSX.IntrinsicElements> = {
+    props: P;
+    $$typeof: symbol;
+    key: string | null;
+    type: KiteElementType<P, Tag>;
+};
+export type KiteNode = null | boolean | number | string | KiteElement | KiteNode[];
+export declare function jsxDEV(type: KiteElementType, props: unknown, key: undefined | KiteKey): KiteElement;
+export declare function jsx(type: KiteElementType, props: unknown, key: undefined | KiteKey): KiteElement;
+export declare function jsxs(type: KiteElementType, props: unknown, key: undefined | KiteKey): KiteElement;
+declare global {
+    namespace Kite {
+        interface Context {
+        }
+    }
+    namespace JSX {
+        type Element = KiteElement;
+        type ElementType = keyof IntrinsicElements | KiteFC<any>;
+        interface IntrinsicElements {
+            [tag: string]: HtmlTag;
+        }
+        interface IntrinsicAttributes {
+            children?: KiteNode;
+        }
+    }
+}

package/dist/jsx.js

@@ -0,0 +1,33 @@
+export const Fragment = Symbol("fragment");
+const $$typeof = Symbol("");
+export function jsxDEV(type, props, key) {
+    return {
+        type,
+        props,
+        $$typeof,
+        key: buildKey(key),
+    };
+}
+export function jsx(type, props, key) {
+    return {
+        type,
+        props,
+        $$typeof,
+        key: buildKey(key),
+    };
+}
+export function jsxs(type, props, key) {
+    return {
+        type,
+        props,
+        $$typeof,
+        key: buildKey(key),
+    };
+}
+function buildKey(key) {
+    if (key === undefined)
+        return null;
+    if (typeof key === "string")
+        return key;
+    return key.toString();
+}

package/dist/render.d.ts

@@ -0,0 +1,2 @@
+import { KiteNode } from "./jsx";
+export declare function render(el: KiteNode, ctx?: null | Kite.Context): Promise<string>;

package/dist/render.js

@@ -0,0 +1,106 @@
+import { escapeHTML } from "bun";
+import { Fragment } from "./jsx";
+import { stringifyStyle } from "./css";
+const escape = escapeHTML;
+function renderNode(el, parts, ctx) {
+    if (typeof el === "string")
+        return parts.push(escape(el));
+    if (typeof el === "number")
+        return parts.push(el.toString());
+    if (el === true || !el)
+        return;
+    if (Array.isArray(el)) {
+        const length = el.length;
+        for (let i = 0; i < length; i++) {
+            renderNode(el[i], parts, ctx);
+        }
+        return;
+    }
+    const ke = el;
+    if (ke.type === Fragment) {
+        if (ke.props.children)
+            renderNode(ke.props.children, parts, ctx);
+        return;
+    }
+    if (typeof ke.type === "string")
+        return renderHtml(ke, parts, ctx);
+    if (typeof ke.type === "function") {
+        const it = ke.type(el.props, ctx);
+        if (it instanceof Promise)
+            return it.then((it) => renderNode(it, parts, ctx));
+        return renderNode(it, parts, ctx);
+    }
+    throw new Error("unknown type of element");
+}
+function renderHtml(el, parts, ctx) {
+    if (typeof el.type !== "string")
+        throw new Error();
+    const props = el.props;
+    parts.push("<", el.type);
+    propsToString(props, parts);
+    if (isVoidElement[el.type])
+        return parts.push("/>");
+    parts.push(">");
+    if (typeof props.safe === "string") {
+        if (typeof props.children !== "undefined") {
+            throw new Error("can not use children with safe");
+        }
+        parts.push(props.safe);
+    }
+    else {
+        const children = props.children;
+        if (typeof children !== "undefined")
+            renderNode(children, parts, ctx);
+    }
+    parts.push("</", el.type, ">");
+}
+function propsToString(props, parts) {
+    const keys = Object.keys(props);
+    const values = props;
+    const length = keys.length;
+    for (let i = 0; i < length; i++) {
+        const key = keys[i];
+        if (key === "children" || key === "safe")
+            continue;
+        const value = values[key];
+        if (!value)
+            continue;
+        if (key === "style") {
+            stringifyStyle(value, parts);
+            continue;
+        }
+        if (typeof value === "boolean") {
+            parts.push(" ", escape(key));
+            continue;
+        }
+        if (typeof value === "string") {
+            parts.push(" ", escape(key), `="`, escape(value), `"`);
+        }
+        else {
+            parts.push(" ", escape(key), `="`, escape(value.toString()), `"`);
+        }
+    }
+}
+export async function render(el, ctx = null) {
+    const parts = [];
+    await renderNode(el, parts, ctx);
+    return parts.join("");
+}
+const isVoidElement = {
+    meta: true,
+    link: true,
+    img: true,
+    br: true,
+    input: true,
+    hr: true,
+    area: true,
+    base: true,
+    col: true,
+    command: true,
+    embed: true,
+    keygen: true,
+    param: true,
+    source: true,
+    track: true,
+    wbr: true,
+};

package/dist/render.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/render.test.js

@@ -0,0 +1,65 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "src/jsx-runtime";
+import { describe, expect, test } from "bun:test";
+import { render } from "./render";
+describe("render", () => {
+    test("null", async () => {
+        expect(await render(null)).toBe("");
+    });
+    test("boolean", async () => {
+        expect(await render(true)).toBe("");
+        expect(await render(false)).toBe("");
+    });
+    test("number", async () => {
+        expect(await render(0)).toBe("0");
+        expect(await render(1000)).toBe("1000");
+    });
+    test("string", async () => {
+        expect(await render("")).toBe("");
+        expect(await render("hello world")).toBe("hello world");
+    });
+    test("array", async () => {
+        expect(await render([1, 2, 3])).toBe("123");
+    });
+    test("fragment", async () => {
+        expect(await render(_jsx(_Fragment, {}))).toBe("");
+        expect(await render(_jsx(_Fragment, { children: "123" }))).toBe("123");
+    });
+    describe("element", () => {
+        test("image", async () => {
+            expect(await render(_jsx("img", { src: "test.png" }))).toBe(`<img src="test.png"/>`);
+        });
+        test("escape", async () => {
+            expect(await render(_jsx("div", { children: "\"abc\"" }))).toBe(`<div>&quot;abc&quot;</div>`);
+        });
+        test("safe", async () => {
+            expect(await render(_jsx("div", { safe: `"abc"` }))).toBe(`<div>"abc"</div>`);
+        });
+    });
+    describe("function", () => {
+        function Test() {
+            return "Hello World";
+        }
+        test("01", async () => {
+            expect(await render(_jsx(Test, {}))).toBe("Hello World");
+        });
+        test("02", async () => {
+            async function TestAsync() {
+                return "Hello World";
+            }
+            expect(await render(_jsx(TestAsync, {}))).toBe("Hello World");
+        });
+        test("03", async () => {
+            expect(await render(_jsxs("div", { children: ["Test", _jsx(Test, {})] }))).toBe("<div>TestHello World</div>");
+        });
+        test("03", async () => {
+            class Context {
+            }
+            const ctx = new Context();
+            function Test(props, _ctx) {
+                expect(ctx).toBe(_ctx);
+                return "Hello " + props.name;
+            }
+            expect(await render(_jsx(Test, { name: "World" }), ctx)).toBe("Hello World");
+        });
+    });
+});

package/package.json

@@ -0,0 +1,24 @@
+{
+  "type": "module",
+  "name": "@vimpak/jsx",
+  "collaborators": [
+    "Sudesh Yadav <sudeshyadav955@gmail.com>"
+  ],
+  "files": [
+    "./dist"
+  ],
+  "main": "./dist/index.js",
+  "version": "0.1.0",
+  "scripts": {
+    "prettify": "prettier --write --ignore-unknown ."
+  },
+  "devDependencies": {
+    "prettier": "^3.2.5",
+    "typescript": "^5.4.5",
+    "vite": "^5.2.11"
+  },
+  "dependencies": {
+    "@types/bun": "^1.3.9",
+    "csstype": "^3.1.3"
+  }
+}