murasaki 0.0.4 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "murasaki",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "description": "The desktop framework for Next.js developers. Node-powered. WebView-thin. No Rust. No Chromium.",
   "keywords": [
     "desktop",
@@ -30,6 +30,18 @@
     ".": {
       "types": "./src/index.ts",
       "default": "./src/index.ts"
+    },
+    "./jsx": {
+      "types": "./src/jsx/index.ts",
+      "default": "./src/jsx/index.ts"
+    },
+    "./jsx-runtime": {
+      "types": "./src/jsx/jsx-runtime.ts",
+      "default": "./src/jsx/jsx-runtime.ts"
+    },
+    "./jsx-dev-runtime": {
+      "types": "./src/jsx/jsx-dev-runtime.ts",
+      "default": "./src/jsx/jsx-dev-runtime.ts"
     }
   },
   "files": [
@@ -47,15 +59,11 @@
   },
   "dependencies": {
     "@webviewjs/webview": "^0.3.2",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
     "tsx": "^4.22.4"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.5.1",
     "@types/node": "^26.0.1",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
     "typescript": "^6.0.3"
   }
 }

package/src/jsx/index.ts

@@ -0,0 +1,20 @@
+// Public surface for `import { ... } from 'murasaki/jsx'`.
+
+export {
+  createElement,
+  Fragment,
+  isJSXNode,
+  isValidElement,
+  JSXNode,
+  jsx,
+  renderToString,
+} from './runtime.ts'
+
+export type {
+  Child,
+  Component,
+  Element,
+  FC,
+  JSXNodeLike,
+  Props,
+} from './types.ts'

package/src/jsx/jsx-dev-runtime.ts

@@ -0,0 +1,6 @@
+// JSX dev runtime entry — used when tsconfig has `jsx: "react-jsxdev"`.
+// We don't (yet) track source locations or component stacks, so jsxDEV
+// behaves identically to jsx.
+
+export { Fragment, jsx as jsxDEV } from './runtime.ts'
+export type { JSX } from './types.ts'

package/src/jsx/jsx-runtime.ts

@@ -0,0 +1,10 @@
+// JSX automatic runtime entry — consumed by `tsx` / `esbuild` when the
+// user's tsconfig has `jsxImportSource: "murasaki"`.
+//
+// The transform emits calls like:
+//   jsx(Component, props, key?)
+//   jsxs(Component, propsWithChildrenArray, key?)
+//   <></> → jsx(Fragment, { children: [...] })
+
+export { Fragment, jsx, jsx as jsxs } from './runtime.ts'
+export type { JSX } from './types.ts'

package/src/jsx/runtime.ts

@@ -0,0 +1,278 @@
+// murasaki/jsx — SSR-only JSX runtime.
+//
+// Inspired by hono/jsx but trimmed for desktop-server use:
+//   - no hooks (the view is rendered once per HMR cycle, no client state)
+//   - no DOM renderer (we ship HTML to the OS WebView and that's it)
+//   - no streaming / Suspense (single render → loadHtml())
+//   - React-compatible enough to swap in for renderToStaticMarkup
+//
+// Two-step pipeline:
+//   1. jsx(tag, props) → JSXNode  (tree)
+//   2. JSXNode.toString() → HTML string
+//
+// User code that runs is the *user's* JSX (transformed to jsx() calls
+// by tsx/esbuild with `jsxImportSource: "murasaki"`).
+
+import type { Child, Component, JSXNodeLike, Props } from './types.ts'
+
+// ── HTML escape ──────────────────────────────────────────────────────
+const AMP = /&/g
+const LT = /</g
+const GT = />/g
+const QT = /"/g
+
+function escapeHtml(s: string): string {
+  return s.replace(AMP, '&amp;').replace(LT, '&lt;').replace(GT, '&gt;')
+}
+
+function escapeAttr(s: string): string {
+  return s.replace(AMP, '&amp;').replace(QT, '&quot;')
+}
+
+// ── Void elements (no closing tag) ────────────────────────────────────
+const VOID_ELEMENTS = new Set([
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'link',
+  'meta',
+  'source',
+  'track',
+  'wbr',
+])
+
+// ── Attribute name normalization (React → HTML) ───────────────────────
+const ATTR_ALIAS: Record<string, string> = {
+  className: 'class',
+  htmlFor: 'for',
+  charSet: 'charset',
+  crossOrigin: 'crossorigin',
+  httpEquiv: 'http-equiv',
+  itemProp: 'itemprop',
+  fetchPriority: 'fetchpriority',
+  noModule: 'nomodule',
+  formAction: 'formaction',
+  acceptCharset: 'accept-charset',
+  autoComplete: 'autocomplete',
+  autoFocus: 'autofocus',
+  autoPlay: 'autoplay',
+  contentEditable: 'contenteditable',
+  defaultValue: 'value',
+  defaultChecked: 'checked',
+  encType: 'enctype',
+  formMethod: 'formmethod',
+  formNoValidate: 'formnovalidate',
+  formTarget: 'formtarget',
+  maxLength: 'maxlength',
+  minLength: 'minlength',
+  noValidate: 'novalidate',
+  readOnly: 'readonly',
+  rowSpan: 'rowspan',
+  colSpan: 'colspan',
+  spellCheck: 'spellcheck',
+  tabIndex: 'tabindex',
+  useMap: 'usemap',
+  srcDoc: 'srcdoc',
+  srcSet: 'srcset',
+  hrefLang: 'hreflang',
+  dateTime: 'datetime',
+  enterKeyHint: 'enterkeyhint',
+  inputMode: 'inputmode',
+}
+
+function normalizeAttrName(k: string): string {
+  return ATTR_ALIAS[k] || k
+}
+
+// ── Style object → CSS string ─────────────────────────────────────────
+function camelToKebab(k: string): string {
+  // Leave already-kebab keys and CSS custom props (--foo) alone.
+  if (k[0] === '-' || !/[A-Z]/.test(k)) return k
+  return k.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)
+}
+
+// CSS properties that take unitless numbers (subset of React's list).
+const UNITLESS = new Set([
+  'animationIterationCount',
+  'borderImageOutset',
+  'borderImageSlice',
+  'borderImageWidth',
+  'boxFlex',
+  'boxFlexGroup',
+  'boxOrdinalGroup',
+  'columnCount',
+  'columns',
+  'flex',
+  'flexGrow',
+  'flexShrink',
+  'fontWeight',
+  'gridArea',
+  'gridColumn',
+  'gridColumnEnd',
+  'gridColumnStart',
+  'gridRow',
+  'gridRowEnd',
+  'gridRowStart',
+  'lineClamp',
+  'lineHeight',
+  'opacity',
+  'order',
+  'orphans',
+  'tabSize',
+  'widows',
+  'zIndex',
+  'zoom',
+])
+
+function styleObjToString(obj: Record<string, unknown>): string {
+  let out = ''
+  for (const [k, v] of Object.entries(obj)) {
+    if (v == null || v === false) continue
+    let value: string
+    if (typeof v === 'number') {
+      value = UNITLESS.has(k) ? String(v) : `${v}px`
+    } else if (typeof v === 'string') {
+      value = v
+    } else {
+      continue
+    }
+    out += `${out ? ';' : ''}${camelToKebab(k)}:${value}`
+  }
+  return out
+}
+
+// ── Attribute rendering ──────────────────────────────────────────────
+function renderAttrs(props: Props): string {
+  let out = ''
+  for (const k in props) {
+    if (k === 'children' || k === 'key' || k === 'ref' || k === '__source' || k === '__self')
+      continue
+    const v = props[k]
+    if (v == null || v === false) continue
+
+    const name = normalizeAttrName(k)
+
+    // Boolean attribute
+    if (v === true) {
+      out += ` ${name}`
+      continue
+    }
+
+    // Inline style object
+    if (k === 'style' && typeof v === 'object') {
+      const css = styleObjToString(v as Record<string, unknown>)
+      if (css) out += ` style="${escapeAttr(css)}"`
+      continue
+    }
+
+    // dangerouslySetInnerHTML is handled in JSXNode.toString(), skip here
+    if (k === 'dangerouslySetInnerHTML') continue
+
+    out += ` ${name}="${escapeAttr(String(v))}"`
+  }
+  return out
+}
+
+// ── Children rendering ───────────────────────────────────────────────
+function renderChild(c: Child): string {
+  if (c == null || c === false || c === true) return ''
+  if (typeof c === 'string') return escapeHtml(c)
+  if (typeof c === 'number' || typeof c === 'bigint') return String(c)
+  if (Array.isArray(c)) {
+    let s = ''
+    for (const item of c) s += renderChild(item)
+    return s
+  }
+  if (isJSXNode(c)) return c.toString()
+  return ''
+}
+
+// ── JSXNode ──────────────────────────────────────────────────────────
+export class JSXNode implements JSXNodeLike {
+  readonly __isJSXNode = true as const
+  tag: string | Component
+  props: Props
+  children: Child[]
+
+  constructor(tag: string | Component, props: Props, children: Child[]) {
+    this.tag = tag
+    this.props = props
+    this.children = children
+  }
+
+  toString(): string {
+    const { tag, props, children } = this
+
+    // Fragment / functional component
+    if (typeof tag === 'function') {
+      // Always pass children via props (React-compat)
+      const merged = { ...props, children: children.length === 1 ? children[0] : children }
+      const result = tag(merged)
+      return renderChild(result as Child)
+    }
+
+    // Intrinsic element
+    const attrs = renderAttrs(props)
+
+    // dangerouslySetInnerHTML overrides children
+    const dsi = props.dangerouslySetInnerHTML as { __html?: string } | undefined
+    if (dsi && typeof dsi.__html === 'string') {
+      return `<${tag}${attrs}>${dsi.__html}</${tag}>`
+    }
+
+    if (VOID_ELEMENTS.has(tag)) {
+      // Self-closing for void elements
+      return `<${tag}${attrs}/>`
+    }
+
+    let childHtml = ''
+    for (const c of children) childHtml += renderChild(c)
+
+    return `<${tag}${attrs}>${childHtml}</${tag}>`
+  }
+}
+
+export function isJSXNode(v: unknown): v is JSXNode {
+  return typeof v === 'object' && v !== null && (v as JSXNodeLike).__isJSXNode === true
+}
+
+// ── Public factory (React-compat: createElement / jsx) ────────────────
+export function jsx(
+  tag: string | Component,
+  props: Props | null,
+  ..._restChildren: unknown[]
+): JSXNode {
+  const p = props ?? {}
+  const rawChildren = (p as { children?: Child }).children
+  const children: Child[] = Array.isArray(rawChildren)
+    ? rawChildren
+    : rawChildren != null
+      ? [rawChildren]
+      : []
+  // Strip children from props (it's stored separately)
+  const { children: _drop, ...rest } = p as Props & { children?: Child }
+  return new JSXNode(tag, rest, children)
+}
+
+/** React-compatible alias. */
+export const createElement = jsx
+
+/** Fragment — renders children without a wrapper tag. */
+export function Fragment(props: { children?: Child }): Child {
+  return props.children ?? null
+}
+
+/** Check if something is a JSX element (React.isValidElement compat). */
+export function isValidElement(v: unknown): v is JSXNode {
+  return isJSXNode(v)
+}
+
+/** Convert any value (JSXNode, string, array, etc.) to an HTML string. */
+export function renderToString(value: Child): string {
+  return renderChild(value)
+}

package/src/jsx/types.ts

@@ -0,0 +1,36 @@
+// Public JSX types for murasaki/jsx.
+
+export type Props = Record<string, unknown>
+
+export type Child = string | number | bigint | boolean | null | undefined | JSXNodeLike | Child[]
+
+export interface JSXNodeLike {
+  readonly __isJSXNode: true
+  tag: string | Component
+  props: Props
+  children: Child[]
+  toString(): string
+}
+
+export type Component<P = Props> = (props: P & { children?: Child }) => Child
+
+/** React-compatible alias used by most user code. */
+export type FC<P = Props> = Component<P>
+
+/** For component refs / cloning. */
+export type Element = JSXNodeLike
+
+declare global {
+  namespace JSX {
+    type Element = JSXNodeLike
+    interface ElementChildrenAttribute {
+      children: object
+    }
+    // Loose intrinsic catalog — every HTML/SVG tag accepts any prop.
+    // (Tightening this to a real catalog is a follow-up; keeps the
+    //  runtime usable without bloating the type surface today.)
+    interface IntrinsicElements {
+      [tagName: string]: Record<string, unknown> & { children?: Child }
+    }
+  }
+}

package/src/runtime/load.ts

@@ -6,17 +6,17 @@ import { existsSync, readFileSync } from 'node:fs'
 import { pathToFileURL } from 'node:url'
 import { APP_PATH, GLOBALS_CSS, LAYOUT_PATH } from '../env.ts'
 import type { Metadata } from '../index.ts'
-import type { LayoutModule, ReactComponent } from '../types.ts'
+import type { AppComponent, LayoutModule } from '../types.ts'
 
 async function dynImport(path: string) {
   const url = pathToFileURL(path).href + `?v=${Date.now()}`
   return import(url)
 }
 
-export async function loadApp(): Promise<ReactComponent | null> {
+export async function loadApp(): Promise<AppComponent | null> {
   if (!existsSync(APP_PATH)) return null
   const mod = await dynImport(APP_PATH)
-  return mod.default as ReactComponent
+  return mod.default as AppComponent
 }
 
 export async function loadLayout(): Promise<LayoutModule> {
@@ -24,7 +24,7 @@ export async function loadLayout(): Promise<LayoutModule> {
   const mod = await dynImport(LAYOUT_PATH)
   if (!mod.default) return null
   return {
-    component: mod.default as ReactComponent,
+    component: mod.default as AppComponent,
     metadata: mod.metadata as Metadata | undefined,
   }
 }

package/src/runtime/render.tsx

@@ -1,8 +1,12 @@
 // Renders <Layout><App /></Layout> to an HTML string and injects
 // metadata (<title>, <meta description>) + src/globals.css.
+//
+// Uses murasaki/jsx (no React dependency).
+// The user's src/app.tsx / src/layout.tsx is transformed by tsx with
+// `jsxImportSource: "murasaki"` so their <div> calls into our jsx().
 
-import { createElement } from 'react'
-import { renderToStaticMarkup } from 'react-dom/server'
+import { jsx, renderToString } from '../jsx/runtime.ts'
+import type { Child, Component } from '../jsx/types.ts'
 import type { RenderResult } from '../types.ts'
 import { loadApp, loadGlobalsCss, loadLayout } from './load.ts'
 
@@ -25,9 +29,14 @@ export async function renderApp(): Promise<RenderResult> {
 
   const layoutData = await loadLayout()
   const metadata = layoutData?.metadata
-  const appEl = createElement(App)
-  const tree = layoutData ? createElement(layoutData.component, null, appEl) : appEl
-  let html = '<!doctype html>' + renderToStaticMarkup(tree)
+
+  // Build the tree: <Layout><App /></Layout> or just <App />
+  const appNode = jsx(App as Component, null)
+  const tree: Child = layoutData
+    ? jsx(layoutData.component as Component, { children: appNode })
+    : appNode
+
+  let html = '<!doctype html>' + renderToString(tree)
 
   const headInjects: string[] = []
   if (metadata?.title && !/<title>.*?<\/title>/i.test(html)) {

package/src/types.ts

@@ -1,12 +1,12 @@
 // Internal shared types (the public Metadata type is re-exported from index.ts).
 
-import type { ComponentType, ReactNode } from 'react'
 import type { Metadata } from './index.ts'
+import type { Component } from './jsx/types.ts'
 
-export type ReactComponent = ComponentType<{ children?: ReactNode }>
+export type AppComponent = Component
 
 export type LayoutModule = {
-  component: ReactComponent
+  component: AppComponent
   metadata?: Metadata
 } | null