@mizchi/luna 0.1.4

package/jsx-dev-runtime.d.ts

@@ -0,0 +1,2 @@
+// JSX Dev Runtime types - re-export from jsx-runtime
+export { jsx, jsxs, jsxDEV, Fragment, JSX } from "./jsx-runtime.js";

package/jsx-dev-runtime.js

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

package/jsx-runtime.d.ts

@@ -0,0 +1,123 @@
+/**
+ * JSX Runtime types for @mizchi/ui
+ */
+
+import type { Node, AttrValue } from "./dom";
+
+export namespace JSX {
+  type Element = Node;
+
+  interface IntrinsicElements {
+    // Block elements
+    div: HTMLAttributes;
+    p: HTMLAttributes;
+    form: HTMLAttributes & FormAttributes;
+
+    // Heading elements
+    h1: HTMLAttributes;
+    h2: HTMLAttributes;
+    h3: HTMLAttributes;
+
+    // List elements
+    ul: HTMLAttributes;
+    ol: HTMLAttributes;
+    li: HTMLAttributes;
+
+    // Inline elements
+    span: HTMLAttributes;
+    a: HTMLAttributes & AnchorAttributes;
+    button: HTMLAttributes & ButtonAttributes;
+    label: HTMLAttributes & LabelAttributes;
+
+    // Form elements
+    input: HTMLAttributes & InputAttributes;
+    textarea: HTMLAttributes & TextareaAttributes;
+
+    // Media elements
+    img: HTMLAttributes & ImageAttributes;
+
+    // Other elements
+    br: {};
+    hr: HTMLAttributes;
+  }
+
+  interface HTMLAttributes {
+    // Core attributes
+    id?: string;
+    className?: string | (() => string);
+    class?: string | (() => string);
+    style?: Record<string, string> | (() => [string, string][]);
+
+    // Event handlers
+    onClick?: (event: MouseEvent) => void;
+    onInput?: (event: InputEvent) => void;
+    onChange?: (event: Event) => void;
+    onSubmit?: (event: Event) => void;
+    onKeyDown?: (event: KeyboardEvent) => void;
+    onKeyUp?: (event: KeyboardEvent) => void;
+    onFocus?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+    onMouseEnter?: (event: MouseEvent) => void;
+    onMouseLeave?: (event: MouseEvent) => void;
+
+    // Children
+    children?: Node | Node[] | string | number | (Node | string | number)[];
+
+    // Allow any other attributes
+    [key: string]: unknown;
+  }
+
+  interface InputAttributes {
+    type?: string;
+    placeholder?: string;
+    value?: string | (() => string);
+    disabled?: boolean | (() => boolean);
+  }
+
+  interface TextareaAttributes {
+    placeholder?: string;
+    value?: string | (() => string);
+    disabled?: boolean | (() => boolean);
+  }
+
+  interface AnchorAttributes {
+    href?: string;
+  }
+
+  interface ImageAttributes {
+    src?: string;
+    alt?: string;
+  }
+
+  interface ButtonAttributes {
+    type?: string;
+    disabled?: boolean | (() => boolean);
+  }
+
+  interface FormAttributes {
+    action?: string;
+    method?: string;
+  }
+
+  interface LabelAttributes {
+    htmlFor?: string;
+  }
+
+  interface ElementChildrenAttribute {
+    children: {};
+  }
+}
+
+export function jsx(
+  type: string | ((props: any) => Node),
+  props: Record<string, unknown> | null
+): Node;
+
+export function jsxs(
+  type: string | ((props: any) => Node),
+  props: Record<string, unknown> | null
+): Node;
+
+export function Fragment(props: { children?: Node | Node[] }): Node[];
+
+export const jsxDEV: typeof jsx;

package/jsx-runtime.js

@@ -0,0 +1,119 @@
+// JSX Runtime for @mizchi/ui
+// Usage: Configure tsconfig.json with:
+//   "jsx": "react-jsx",
+//   "jsxImportSource": "@mizchi/ui"
+
+import { text, textDyn, createElement } from "./dom.js";
+
+// Convert style object to CSS string
+function styleToString(style) {
+  if (typeof style === "string") return style;
+  if (typeof style !== "object" || style === null) return "";
+  return Object.entries(style)
+    .map(([key, value]) => {
+      // Convert camelCase to kebab-case
+      const cssKey = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+      return `${cssKey}: ${value}`;
+    })
+    .join("; ");
+}
+
+// Convert JSX props to createElement attrs format
+function convertProps(props) {
+  if (!props) return [];
+  const attrs = [];
+  for (const [key, value] of Object.entries(props)) {
+    if (key === "children") continue;
+
+    // Map JSX prop names to DOM attribute format
+    let attrName = key;
+    let attrValue;
+
+    // Handle className -> class
+    if (key === "className") {
+      attrName = "class";
+    }
+
+    // Handle style object -> CSS string
+    if (key === "style") {
+      const cssString = styleToString(value);
+      attrValue = { $tag: 0, _0: cssString }; // AttrValue.Static
+      attrs.push({ _0: attrName, _1: attrValue });
+      continue;
+    }
+
+    // Handle event handlers (onClick -> click for addEventListener)
+    if (key.startsWith("on") && typeof value === "function") {
+      // Remove "on" prefix and lowercase first char: onClick -> click
+      attrName = key.slice(2).toLowerCase();
+      attrValue = { $tag: 2, _0: value }; // AttrValue.Handler
+      attrs.push({ _0: attrName, _1: attrValue });
+      continue;
+    }
+
+    // Handle dynamic values (functions)
+    if (typeof value === "function") {
+      attrValue = { $tag: 1, _0: value }; // AttrValue.Dynamic
+    } else {
+      attrValue = { $tag: 0, _0: String(value) }; // AttrValue.Static
+    }
+
+    attrs.push({ _0: attrName, _1: attrValue });
+  }
+  return attrs;
+}
+
+function convertChildren(children) {
+  if (!children) return [];
+  if (!Array.isArray(children)) {
+    children = [children];
+  }
+  return children.flat().map((child) => {
+    if (typeof child === "string") {
+      return text(child);
+    }
+    if (typeof child === "number") {
+      return text(String(child));
+    }
+    // Handle functions:
+    // - No args (length === 0): signal accessor -> textDyn
+    // - With args (length > 0): render function -> pass through
+    if (typeof child === "function") {
+      if (child.length === 0) {
+        return textDyn(() => String(child()));
+      }
+      // Render function, pass through as-is
+      return child;
+    }
+    return child;
+  }).filter(Boolean);
+}
+
+// JSX factory function
+export function jsx(type, props) {
+  const { children, ...rest } = props || {};
+  const attrs = convertProps(rest);
+  const childNodes = convertChildren(children);
+
+  if (typeof type === "string") {
+    return createElement(type, attrs, childNodes);
+  }
+
+  // Function component
+  if (typeof type === "function") {
+    return type({ ...rest, children });
+  }
+
+  throw new Error(`Invalid JSX type: ${type}`);
+}
+
+// jsxs is the same as jsx for our implementation
+export const jsxs = jsx;
+
+// Fragment just returns children as-is (flattened)
+export function Fragment({ children }) {
+  return convertChildren(children);
+}
+
+// Export jsxDEV for development mode
+export const jsxDEV = jsx;

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@mizchi/luna",
+  "version": "0.1.4",
+  "description": "Fine-grained reactive UI library for Moonbit/JS",
+  "type": "module",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    },
+    "./jsx-runtime": {
+      "types": "./jsx-runtime.d.ts",
+      "import": "./jsx-runtime.js"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./jsx-runtime.d.ts",
+      "import": "./jsx-runtime.js"
+    }
+  },
+  "scripts": {
+    "test": "vitest run"
+  },
+  "devDependencies": {
+    "global-jsdom": "^27.0.0",
+    "jsdom": "^27.3.0"
+  },
+  "repository": {
+    "directory": "js/luna",
+    "url": "https://github.com/mizchi/luna.mbt"
+  },
+  "files": [
+    "*.js",
+    "*.d.ts"
+  ]
+}