@bindtty/jsx-runtime 0.1.0-alpha.1

package/README.md

@@ -0,0 +1,5 @@
+# @bindtty/jsx-runtime
+
+JSX runtime for BindTTY.
+
+It converts TypeScript automatic JSX runtime calls into `@bindtty/vnode` `ViewTemplate` values.

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { Fragment, jsx, jsxs } from "./jsx-runtime.js";
+export { jsxDEV } from "./jsx-dev-runtime.js";
+export type { JSX } from "./jsx-runtime.js";
+export type { ElementProps, ForProps, JsxProps, JsxType, ShowProps } from "./types.js";

package/dist/index.js

@@ -0,0 +1,2 @@
+export { Fragment, jsx, jsxs } from "./jsx-runtime.js";
+export { jsxDEV } from "./jsx-dev-runtime.js";

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

@@ -0,0 +1,3 @@
+export { Fragment, jsx, jsxs } from "./jsx-runtime.js";
+export { jsx as jsxDEV } from "./jsx-runtime.js";
+export type { JSX } from "./jsx-runtime.js";

package/dist/jsx-dev-runtime.js

@@ -0,0 +1,2 @@
+export { Fragment, jsx, jsxs } from "./jsx-runtime.js";
+export { jsx as jsxDEV } from "./jsx-runtime.js";

package/dist/jsx-runtime.d.ts

@@ -0,0 +1,113 @@
+import type { PublicTextWrapMode } from "@bindtty/text";
+import type { BindingValue, MountedElementRefHandler, Template, TemplateChildren } from "@bindtty/vnode";
+import type { JsxProps, JsxType } from "./types.js";
+export declare const Fragment: unique symbol;
+type InteractionFocusChangeReason = "initial" | "next" | "previous" | "programmatic" | "clear" | "refresh";
+interface InteractionNodeFocusChangeEvent {
+    id: string;
+    node: unknown;
+    focused: boolean;
+    reason: InteractionFocusChangeReason;
+}
+interface InteractionKeyEvent {
+    input: string;
+    name?: string;
+    ctrl: boolean;
+    meta: boolean;
+    shift: boolean;
+    sequence?: string;
+}
+interface InteractionKeyContext {
+    node: unknown;
+    isFocused: true;
+}
+type InteractionKeyHandler = (event: InteractionKeyEvent, context: InteractionKeyContext) => boolean | void;
+type InteractionKeyBinding = boolean | InteractionKeyHandler | null | undefined;
+interface IntrinsicInteractionProps {
+    id?: BindingValue<string | number>;
+    ref?: MountedElementRefHandler | null | undefined;
+    onKey?: BindingValue<InteractionKeyBinding>;
+    onFocusChange?: (event: InteractionNodeFocusChangeEvent) => void;
+}
+interface IntrinsicPaintProps {
+    color?: BindingValue<string>;
+    background?: BindingValue<string>;
+    bold?: BindingValue<boolean>;
+}
+type IntrinsicYogaAlignItems = "stretch" | "flex-start" | "center" | "flex-end" | "baseline";
+type IntrinsicYogaJustifyContent = "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+type IntrinsicYogaFlexWrap = "nowrap" | "wrap" | "wrap-reverse";
+interface IntrinsicYogaItemProps {
+    flexGrow?: BindingValue<number>;
+    "flex-grow"?: BindingValue<number>;
+    flexShrink?: BindingValue<number>;
+    "flex-shrink"?: BindingValue<number>;
+}
+interface IntrinsicYogaContainerProps {
+    gap?: BindingValue<number>;
+    flexWrap?: BindingValue<IntrinsicYogaFlexWrap>;
+    "flex-wrap"?: BindingValue<IntrinsicYogaFlexWrap>;
+    alignItems?: BindingValue<IntrinsicYogaAlignItems>;
+    "align-items"?: BindingValue<IntrinsicYogaAlignItems>;
+    justifyContent?: BindingValue<IntrinsicYogaJustifyContent>;
+    "justify-content"?: BindingValue<IntrinsicYogaJustifyContent>;
+}
+interface IntrinsicBoxStyleProps {
+    border?: BindingValue<boolean | number>;
+    padding?: BindingValue<number>;
+    height?: BindingValue<number>;
+    width?: BindingValue<number>;
+    overflow?: BindingValue<"visible" | "clip">;
+    scrollX?: BindingValue<number>;
+    scrollY?: BindingValue<number>;
+}
+export declare function jsx(type: JsxType, rawProps: JsxProps | null, jsxKey?: unknown): Template;
+export declare const jsxs: typeof jsx;
+export declare namespace JSX {
+    type Element = Template;
+    interface IntrinsicElements {
+        screen: IntrinsicInteractionProps & IntrinsicYogaItemProps & IntrinsicYogaContainerProps & {
+            children?: TemplateChildren;
+        };
+        box: IntrinsicInteractionProps & IntrinsicBoxStyleProps & IntrinsicPaintProps & IntrinsicYogaItemProps & IntrinsicYogaContainerProps & {
+            children?: TemplateChildren;
+        };
+        vstack: IntrinsicInteractionProps & IntrinsicYogaItemProps & IntrinsicYogaContainerProps & {
+            children?: TemplateChildren;
+        };
+        hstack: IntrinsicInteractionProps & IntrinsicYogaItemProps & IntrinsicYogaContainerProps & {
+            children?: TemplateChildren;
+        };
+        text: IntrinsicInteractionProps & IntrinsicPaintProps & IntrinsicYogaItemProps & {
+            value: BindingValue<string | number>;
+            wrap?: BindingValue<PublicTextWrapMode>;
+            children?: never;
+        };
+        button: IntrinsicInteractionProps & IntrinsicYogaItemProps & {
+            value: BindingValue<string | number>;
+            disabled?: BindingValue<boolean>;
+            onPress?: () => void;
+            children?: never;
+        };
+        input: IntrinsicInteractionProps & IntrinsicYogaItemProps & {
+            value?: BindingValue<string>;
+            placeholder?: BindingValue<string>;
+            children?: never;
+        };
+        spacer: IntrinsicInteractionProps & IntrinsicYogaItemProps & {
+            size?: BindingValue<number>;
+            children?: never;
+        };
+        show: {
+            when: BindingValue<boolean>;
+            fallback?: Template;
+            children?: TemplateChildren;
+        };
+        for: {
+            each: BindingValue<readonly unknown[]>;
+            key?: (item: unknown, index: number) => string | number;
+            children: (item: unknown, index: number) => Template;
+        };
+    }
+}
+export {};

package/dist/jsx-runtime.js

@@ -0,0 +1,70 @@
+import { componentTemplate, elementSchemas, elementTemplate, forTemplate, fragmentTemplate, showTemplate } from "@bindtty/vnode";
+export const Fragment = Symbol.for("bindtty.fragment");
+export function jsx(type, rawProps, jsxKey) {
+    const props = normalizeProps(rawProps);
+    if (type === Fragment) {
+        return fragmentTemplate(props.children);
+    }
+    if (typeof type === "function") {
+        return componentTemplate(type, props);
+    }
+    if (type === "show") {
+        return createShowTemplate(props);
+    }
+    if (type === "for") {
+        if (jsxKey !== undefined && !("key" in props)) {
+            props.key = jsxKey;
+        }
+        return createForTemplate(props);
+    }
+    if (typeof type === "string") {
+        return createElementTemplate(type, props);
+    }
+    throw new TypeError("Unsupported JSX type.");
+}
+export const jsxs = jsx;
+function normalizeProps(rawProps) {
+    return rawProps ? { ...rawProps } : {};
+}
+function takeChildren(props) {
+    const children = props.children;
+    delete props.children;
+    return children;
+}
+function createElementTemplate(type, props) {
+    if (!isIntrinsicElementTag(type)) {
+        throw new TypeError(`Unknown intrinsic element <${type}>.`);
+    }
+    const children = takeChildren(props);
+    return elementTemplate(type, props, children);
+}
+function createShowTemplate(props) {
+    if (!("when" in props)) {
+        throw new TypeError("<show> requires prop \"when\".");
+    }
+    const showProps = props;
+    const children = takeChildren(showProps);
+    return showTemplate({
+        when: showProps.when,
+        fallback: showProps.fallback,
+        children: children
+    });
+}
+function createForTemplate(props) {
+    if (!("each" in props)) {
+        throw new TypeError("<for> requires prop \"each\".");
+    }
+    const forProps = props;
+    const children = takeChildren(forProps);
+    if (typeof children !== "function") {
+        throw new TypeError("<for> children must be a render function.");
+    }
+    return forTemplate({
+        each: forProps.each,
+        key: forProps.key,
+        renderItem: children
+    });
+}
+function isIntrinsicElementTag(type) {
+    return type in elementSchemas;
+}

package/dist/types.d.ts

@@ -0,0 +1,16 @@
+import type { BindingValue, Template, TemplateChildren, TemplateProps } from "@bindtty/vnode";
+export type JsxType = string | symbol | ((props: Record<string, unknown>) => Template);
+export type JsxProps = Record<string, unknown>;
+export interface ShowProps extends JsxProps {
+    when: BindingValue<boolean>;
+    fallback?: Template;
+    children?: TemplateChildren;
+}
+export interface ForProps<T = unknown> extends JsxProps {
+    each: BindingValue<readonly T[]>;
+    key?: (item: T, index: number) => string | number;
+    children: (item: T, index: number) => Template;
+}
+export type ElementProps = TemplateProps & {
+    children?: TemplateChildren;
+};

package/dist/types.js

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

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@bindtty/jsx-runtime",
+  "version": "0.1.0-alpha.1",
+  "type": "module",
+  "description": "JSX runtime for BindTTY ViewTemplate.",
+  "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",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "prepublishOnly": "npm run build",
+    "test": "npm run build --workspace @bindtty/text && npm run build --workspace @bindtty/vnode && npm run build && tsc -p test/tsconfig.json && tsc -p test/tsconfig.runtime.json && node --test test/dist/*.test.js"
+  },
+  "dependencies": {
+    "@bindtty/text": "0.1.0-alpha.1",
+    "@bindtty/vnode": "0.1.0-alpha.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0",
+    "typescript": "^5.5.0"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/lithdoo/BindTTY.git",
+    "directory": "packages/jsx-runtime"
+  },
+  "bugs": {
+    "url": "https://github.com/lithdoo/BindTTY/issues"
+  },
+  "homepage": "https://github.com/lithdoo/BindTTY/tree/main/packages/jsx-runtime#readme"
+}