@luna_ui/luna 0.3.4 → 0.4.0

package/src/jsx-dev-runtime.ts

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

package/src/jsx-runtime.ts

@@ -0,0 +1,398 @@
+// JSX Runtime for @luna_ui/luna
+// Usage: Configure tsconfig.json with:
+//   "jsx": "react-jsx",
+//   "jsxImportSource": "@luna_ui/luna"
+
+import { text, textDyn, createElement, Fragment as fragment } from "./index";
+
+// Types for reactive attributes (can be static value or accessor function)
+type MaybeAccessor<T> = T | (() => T);
+
+// Common HTML attributes with reactive support
+interface HTMLAttributes {
+  // Core attributes
+  id?: MaybeAccessor<string>;
+  className?: MaybeAccessor<string>;
+  class?: MaybeAccessor<string>;
+  style?: MaybeAccessor<string | Record<string, string | number>>;
+  title?: MaybeAccessor<string>;
+  tabIndex?: MaybeAccessor<number>;
+  hidden?: MaybeAccessor<boolean>;
+
+  // React-compatible innerHTML (use with caution)
+  // Static: dangerouslySetInnerHTML={{ __html: "<b>html</b>" }}
+  // Dynamic: dangerouslySetInnerHTML={() => ({ __html: htmlSignal() })}
+  dangerouslySetInnerHTML?: { __html: string } | (() => { __html: string });
+
+  // Form attributes
+  type?: MaybeAccessor<string>;
+  name?: MaybeAccessor<string>;
+  value?: MaybeAccessor<string | number>;
+  placeholder?: MaybeAccessor<string>;
+  disabled?: MaybeAccessor<boolean>;
+  checked?: MaybeAccessor<boolean>;
+  readonly?: MaybeAccessor<boolean>;
+  required?: MaybeAccessor<boolean>;
+  min?: MaybeAccessor<string | number>;
+  max?: MaybeAccessor<string | number>;
+  step?: MaybeAccessor<string | number>;
+  pattern?: MaybeAccessor<string>;
+
+  // Link/Media attributes
+  href?: MaybeAccessor<string>;
+  src?: MaybeAccessor<string>;
+  alt?: MaybeAccessor<string>;
+  target?: MaybeAccessor<string>;
+  rel?: MaybeAccessor<string>;
+
+  // ARIA attributes
+  role?: MaybeAccessor<string>;
+  "aria-label"?: MaybeAccessor<string>;
+  "aria-hidden"?: MaybeAccessor<boolean | "true" | "false">;
+  "aria-expanded"?: MaybeAccessor<boolean | "true" | "false">;
+  "aria-selected"?: MaybeAccessor<boolean | "true" | "false">;
+  "aria-disabled"?: MaybeAccessor<boolean | "true" | "false">;
+
+  // Data attributes
+  [key: `data-${string}`]: MaybeAccessor<string | number | boolean>;
+
+  // Event handlers
+  onClick?: (e: MouseEvent) => void;
+  onInput?: (e: Event) => void;
+  onChange?: (e: Event) => void;
+  onSubmit?: (e: Event) => void;
+  onKeyDown?: (e: KeyboardEvent) => void;
+  onKeyUp?: (e: KeyboardEvent) => void;
+  onKeyPress?: (e: KeyboardEvent) => void;
+  onFocus?: (e: FocusEvent) => void;
+  onBlur?: (e: FocusEvent) => void;
+  onMouseEnter?: (e: MouseEvent) => void;
+  onMouseLeave?: (e: MouseEvent) => void;
+  onMouseDown?: (e: MouseEvent) => void;
+  onMouseUp?: (e: MouseEvent) => void;
+  onMouseMove?: (e: MouseEvent) => void;
+  onTouchStart?: (e: TouchEvent) => void;
+  onTouchEnd?: (e: TouchEvent) => void;
+  onTouchMove?: (e: TouchEvent) => void;
+  onScroll?: (e: Event) => void;
+  onLoad?: (e: Event) => void;
+  onError?: (e: Event) => void;
+
+  // Ref callback
+  ref?: (el: HTMLElement) => void;
+
+  // Children
+  children?: JSX.Element | JSX.Element[] | string | number | (() => string | number);
+
+  // Allow any other attribute
+  [key: string]: unknown;
+}
+
+// Internal types for MoonBit interop
+interface Attr {
+  _0: string;
+  _1: AttrValue;
+}
+
+interface AttrValue {
+  $tag: 0 | 1 | 2;
+  _0: unknown;
+}
+
+// Convert style object to CSS string
+function styleToString(style: unknown): string {
+  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: Record<string, unknown> | null | undefined): Attr[] {
+  if (!props) return [];
+  const attrs: Attr[] = [];
+  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: AttrValue;
+
+    // Handle className -> class
+    if (key === "className") {
+      attrName = "class";
+    }
+
+    // Handle dangerouslySetInnerHTML (React-compatible)
+    if (key === "dangerouslySetInnerHTML") {
+      if (typeof value === "function") {
+        // Dynamic innerHTML
+        const getter = value as () => { __html: string };
+        attrValue = { $tag: 1, _0: () => getter().__html }; // AttrValue.Dynamic
+      } else if (value && typeof value === "object" && "__html" in value) {
+        // Static innerHTML
+        attrValue = { $tag: 0, _0: (value as { __html: string }).__html }; // AttrValue.Static
+      } else {
+        continue; // Invalid format, skip
+      }
+      attrs.push({ _0: "__innerHTML", _1: attrValue });
+      continue;
+    }
+
+    // Handle style object -> CSS string
+    if (key === "style") {
+      if (typeof value === "function") {
+        // Dynamic style
+        const getter = value as () => unknown;
+        attrValue = { $tag: 1, _0: () => styleToString(getter()) }; // AttrValue.Dynamic
+      } else {
+        attrValue = { $tag: 0, _0: styleToString(value) }; // AttrValue.Static
+      }
+      attrs.push({ _0: attrName, _1: attrValue });
+      continue;
+    }
+
+    // Handle ref callback
+    if (key === "ref" && typeof value === "function") {
+      attrName = "__ref";
+      attrValue = { $tag: 2, _0: value }; // AttrValue.Handler
+      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)
+    // For reactive props, pass the accessor function directly: class={className}
+    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;
+}
+
+type Child = string | number | JSX.Element | (() => unknown) | Child[];
+
+function convertChildren(children: unknown): unknown[] {
+  if (!children) return [];
+  let childArray: unknown[];
+  if (!Array.isArray(children)) {
+    childArray = [children];
+  } else {
+    childArray = children;
+  }
+  return childArray.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);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Component = (props: any) => JSX.Element;
+
+// JSX factory function
+export function jsx(type: string | Component, props: Record<string, unknown> | null): JSX.Element {
+  const { children, ...rest } = props || {};
+
+  // Function component - pass children as-is, don't convert
+  // This preserves functions like () => <Child /> for control flow components (Show, For, etc.)
+  if (typeof type === "function") {
+    return type({ ...rest, children });
+  }
+
+  // Element - convert children to DomNodes
+  if (typeof type === "string") {
+    const attrs = convertProps(rest);
+    const childNodes = convertChildren(children);
+    return createElement(type, attrs, childNodes) as JSX.Element;
+  }
+
+  throw new Error(`Invalid JSX type: ${type}`);
+}
+
+// jsxs is the same as jsx for our implementation
+export const jsxs = jsx;
+
+// Fragment wraps children in a DomNode fragment
+export function Fragment({ children }: { children?: unknown }): unknown {
+  const childNodes = convertChildren(children);
+  // Use MoonBit's fragment function to create a proper DomNode fragment
+  return fragment(childNodes);
+}
+
+// Export jsxDEV for development mode
+export const jsxDEV = jsx;
+
+// Import LunaNode type from index
+import type { LunaNode } from "./index";
+
+// JSX namespace for TypeScript
+export namespace JSX {
+  export type Element = LunaNode;
+  export interface IntrinsicElements {
+    // All HTML elements use HTMLAttributes with reactive support
+    a: HTMLAttributes;
+    abbr: HTMLAttributes;
+    address: HTMLAttributes;
+    area: HTMLAttributes;
+    article: HTMLAttributes;
+    aside: HTMLAttributes;
+    audio: HTMLAttributes;
+    b: HTMLAttributes;
+    base: HTMLAttributes;
+    bdi: HTMLAttributes;
+    bdo: HTMLAttributes;
+    blockquote: HTMLAttributes;
+    body: HTMLAttributes;
+    br: HTMLAttributes;
+    button: HTMLAttributes;
+    canvas: HTMLAttributes;
+    caption: HTMLAttributes;
+    cite: HTMLAttributes;
+    code: HTMLAttributes;
+    col: HTMLAttributes;
+    colgroup: HTMLAttributes;
+    data: HTMLAttributes;
+    datalist: HTMLAttributes;
+    dd: HTMLAttributes;
+    del: HTMLAttributes;
+    details: HTMLAttributes;
+    dfn: HTMLAttributes;
+    dialog: HTMLAttributes;
+    div: HTMLAttributes;
+    dl: HTMLAttributes;
+    dt: HTMLAttributes;
+    em: HTMLAttributes;
+    embed: HTMLAttributes;
+    fieldset: HTMLAttributes;
+    figcaption: HTMLAttributes;
+    figure: HTMLAttributes;
+    footer: HTMLAttributes;
+    form: HTMLAttributes;
+    h1: HTMLAttributes;
+    h2: HTMLAttributes;
+    h3: HTMLAttributes;
+    h4: HTMLAttributes;
+    h5: HTMLAttributes;
+    h6: HTMLAttributes;
+    head: HTMLAttributes;
+    header: HTMLAttributes;
+    hgroup: HTMLAttributes;
+    hr: HTMLAttributes;
+    html: HTMLAttributes;
+    i: HTMLAttributes;
+    iframe: HTMLAttributes;
+    img: HTMLAttributes;
+    input: HTMLAttributes;
+    ins: HTMLAttributes;
+    kbd: HTMLAttributes;
+    label: HTMLAttributes;
+    legend: HTMLAttributes;
+    li: HTMLAttributes;
+    link: HTMLAttributes;
+    main: HTMLAttributes;
+    map: HTMLAttributes;
+    mark: HTMLAttributes;
+    menu: HTMLAttributes;
+    meta: HTMLAttributes;
+    meter: HTMLAttributes;
+    nav: HTMLAttributes;
+    noscript: HTMLAttributes;
+    object: HTMLAttributes;
+    ol: HTMLAttributes;
+    optgroup: HTMLAttributes;
+    option: HTMLAttributes;
+    output: HTMLAttributes;
+    p: HTMLAttributes;
+    picture: HTMLAttributes;
+    pre: HTMLAttributes;
+    progress: HTMLAttributes;
+    q: HTMLAttributes;
+    rp: HTMLAttributes;
+    rt: HTMLAttributes;
+    ruby: HTMLAttributes;
+    s: HTMLAttributes;
+    samp: HTMLAttributes;
+    script: HTMLAttributes;
+    search: HTMLAttributes;
+    section: HTMLAttributes;
+    select: HTMLAttributes;
+    slot: HTMLAttributes;
+    small: HTMLAttributes;
+    source: HTMLAttributes;
+    span: HTMLAttributes;
+    strong: HTMLAttributes;
+    style: HTMLAttributes;
+    sub: HTMLAttributes;
+    summary: HTMLAttributes;
+    sup: HTMLAttributes;
+    table: HTMLAttributes;
+    tbody: HTMLAttributes;
+    td: HTMLAttributes;
+    template: HTMLAttributes;
+    textarea: HTMLAttributes;
+    tfoot: HTMLAttributes;
+    th: HTMLAttributes;
+    thead: HTMLAttributes;
+    time: HTMLAttributes;
+    title: HTMLAttributes;
+    tr: HTMLAttributes;
+    track: HTMLAttributes;
+    u: HTMLAttributes;
+    ul: HTMLAttributes;
+    var: HTMLAttributes;
+    video: HTMLAttributes;
+    wbr: HTMLAttributes;
+    // SVG elements
+    svg: HTMLAttributes;
+    path: HTMLAttributes;
+    circle: HTMLAttributes;
+    rect: HTMLAttributes;
+    line: HTMLAttributes;
+    polyline: HTMLAttributes;
+    polygon: HTMLAttributes;
+    ellipse: HTMLAttributes;
+    g: HTMLAttributes;
+    text: HTMLAttributes;
+    tspan: HTMLAttributes;
+    defs: HTMLAttributes;
+    use: HTMLAttributes;
+    image: HTMLAttributes;
+    // Allow any custom element
+    [key: string]: HTMLAttributes;
+  }
+  export interface ElementChildrenAttribute {
+    children: {};
+  }
+}