@fluixi/jsx 1.0.0-alpha.100

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ibrahima Touré
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,123 @@
+<p align="center">
+  <img src="https://raw.githubusercontent.com/fluixi/assets/main/logos/128x128.png" alt="Fluixi" width="120" height="120" />
+</p>
+
+# @fluixi/jsx
+
+**The JSX runtime and types Fluixi compiles against.**
+
+[![License: MIT](https://img.shields.io/badge/License-MIT-22c55e.svg)](./LICENSE)
+![TypeScript](https://img.shields.io/badge/TypeScript-strict-3178c6?logo=typescript&logoColor=white)
+[![npm](https://img.shields.io/npm/v/@fluixi/jsx?logo=npm)](https://www.npmjs.com/package/@fluixi/jsx)
+![JSX](https://img.shields.io/badge/JSX-runtime-f7df1e?logo=javascript&logoColor=black)
+
+---
+
+This is the `jsxImportSource` for Fluixi: the `jsx`/`jsxs`/`Fragment` factories, the element
+helpers, and the JSX type definitions that give intrinsic elements and their attributes real
+types.
+
+It is a small package with a narrow job. **Most Fluixi code never imports it** — the compiler
+turns JSX into direct DOM calls, so the factories are a fallback for anything it did not
+compile. Components, control flow, rendering and reactivity live elsewhere; see
+[Where things actually live](#where-things-actually-live).
+
+## Installation
+
+```bash
+pnpm add @fluixi/jsx @fluixi/dom
+```
+
+## Setup
+
+Point TypeScript at this package and let the Vite plugin compile:
+
+```json
+{
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "@fluixi/jsx"
+  }
+}
+```
+
+```ts
+// vite.config.ts
+import { fluixi } from '@fluixi/vite-plugin';
+
+export default { plugins: [fluixi()] };
+```
+
+`npm create fluixi` wires both for you.
+
+## What it exports
+
+| Export | Purpose |
+| --- | --- |
+| `jsx`, `jsxs`, `Fragment` | The automatic-runtime factories |
+| `jsxDEV` | The development factory |
+| `createElement`, `cloneElement`, `isValidElement` | Classic element helpers |
+| `createRef`, `forwardRef` | Refs |
+| `renderToString` | String rendering |
+| `mergeProps` | Merge prop objects, keeping getters live |
+| `delegateEvents` | Register delegated event types |
+| `createReactiveJSX`, `jsxComponent`, `defineComponent`, `memo`, `hydrate` | Lower-level integration seams |
+
+Types: `JSXElement`, `JSXComponent`, `JSXProps`, `RefCallback`, `RefObject`, plus the global
+`JSX` namespace with intrinsic elements.
+
+## Where things actually live
+
+This package is a runtime, not a framework façade. Reaching for it directly is usually a sign
+you want one of these instead:
+
+| You want | Import from |
+| --- | --- |
+| `Show`, `For`, `Index`, `Switch`, `Match`, `Portal`, `Dynamic`, `ErrorBoundary` | `@fluixi/core` or `@fluixi/dom` |
+| `render`, `hydrate` (app entry) | `@fluixi/core` |
+| `signal`, `memo`, `effect`, `store` | `@fluixi/reactive` |
+| Server rendering | `@fluixi/server`, or `@fluixi/start` for the whole thing |
+| The JSX → DOM compile | `@fluixi/compiler`, `@fluixi/vite-plugin` |
+
+## Typing an element
+
+The `JSX` namespace types intrinsic elements and their attributes, so a misspelled attribute
+or a wrong event handler is an error rather than a silent no-op:
+
+```tsx
+const el = <input type="text" onInput={(e) => console.log(e.currentTarget.value)} />;
+//                            ^ typed as InputEvent on HTMLInputElement
+```
+
+Reactive attributes accept an accessor as well as a value, which is what lets the compiler
+wire a binding without changing your types:
+
+```tsx
+const count = $signal(0);
+<div title={() => `count: ${count()}`} data-count={count()} />;
+```
+
+## Refs
+
+```tsx
+import { createRef } from '@fluixi/jsx';
+
+function Field() {
+  const input = createRef<HTMLInputElement>();
+  onMount(() => input.current?.focus());
+  return <input ref={input} />;
+}
+```
+
+A callback ref works too — `ref={(el) => …}` — and both forms are typed bivariantly, so a
+component that takes `HTMLElement` accepts a more specific ref.
+
+## License
+
+MIT
+
+## Links
+
+- [Fluixi docs](https://docs.fluixi.com)
+- [npm](https://www.npmjs.com/package/@fluixi/jsx)
+- [Repository](https://github.com/fluixi/core)

package/dist/index.cjs

@@ -0,0 +1,189 @@
+/*! @fluixi/jsx v1.0.0-alpha.100 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Fragment: () => Fragment,
+  cloneElement: () => cloneElement,
+  createElement: () => createElement,
+  createReactiveJSX: () => createReactiveJSX,
+  createRef: () => createRef,
+  defineComponent: () => defineComponent,
+  delegateEvents: () => import_dom3.delegateEvents,
+  forwardRef: () => forwardRef,
+  hydrate: () => hydrate,
+  isValidElement: () => isValidElement,
+  jsx: () => jsx,
+  jsxComponent: () => jsxComponent,
+  jsxDEV: () => jsxDEV,
+  jsxs: () => jsxs,
+  memo: () => memo,
+  mergeProps: () => mergeProps,
+  renderToString: () => renderToString
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/lib/jsx-runtime.ts
+var import_dom = require("@fluixi/dom");
+var import_dom2 = require("@fluixi/dom");
+var import_signal = require("@fluixi/reactive/signal");
+var Fragment = /* @__PURE__ */ Symbol.for("fluixi.fragment");
+var isSSR = typeof window === "undefined";
+function normalizeChildren(children) {
+  if (children === void 0 || children === null || children === false) return null;
+  if (Array.isArray(children)) {
+    return children.map(normalizeChildren).flat();
+  }
+  return children;
+}
+function jsx(type, props, key) {
+  if (type == null) return null;
+  const p = props || {};
+  if (key !== void 0) p.key = key;
+  if (type === Fragment) {
+    return (0, import_signal.createMemo)(() => (0, import_dom.asComponent)(normalizeChildren(p.children)));
+  }
+  if (typeof type === "function") {
+    const { type: renderType } = (0, import_dom.checkRenderType)(type);
+    if (type.$$typeof === /* @__PURE__ */ Symbol.for("react.provider") || renderType === "provider") {
+      return type(p);
+    }
+    if (isSSR) return { type, props: p };
+    return (0, import_signal.createMemo)(() => (0, import_dom2.createComponent)(type, p), void 0, { name: "jsx component" });
+  }
+  if (typeof type === "string" && type.trim().length > 0) {
+    return createNativeElement(type, p);
+  }
+  return null;
+}
+var jsxs = jsx;
+function createNativeElement(tag, props) {
+  if (isSSR) return { type: tag, props: props || {} };
+  return (0, import_dom2.createDynamicElement)(tag, props);
+}
+function createElement(type, props, ...children) {
+  const p = { ...props };
+  if (children.length > 0) p.children = children.length === 1 ? children[0] : children;
+  return jsx(type, p);
+}
+function isValidElement(object) {
+  return typeof object === "object" && object !== null && "type" in object;
+}
+function cloneElement(element, props, ...children) {
+  return jsx(element.type, {
+    ...element.props,
+    ...props,
+    children: children.length ? children : element.props.children
+  });
+}
+function createRef(initialValue) {
+  return { current: initialValue || null };
+}
+function mergeProps(...sources) {
+  const target = {};
+  for (const source of sources) {
+    if (!source) continue;
+    const descriptors = Object.getOwnPropertyDescriptors(source);
+    Object.defineProperties(target, descriptors);
+  }
+  return target;
+}
+function forwardRef(fn) {
+  return (props) => fn(props, props.ref);
+}
+async function renderToString(element) {
+  throw new Error("renderToString should be imported from server module");
+}
+
+// src/lib/jsx-dev-runtime.ts
+function jsxDEV(type, props, key, isStaticChildren, source, self) {
+  return jsx(type, props, key);
+}
+
+// src/lib/index.ts
+var import_dom3 = require("@fluixi/dom");
+var import_dom4 = require("@fluixi/dom");
+var import_signal2 = require("@fluixi/reactive/signal");
+function createReactiveJSX(config) {
+  (0, import_dom4.initializeIntegration)({
+    signalSystem: config.signalSystem
+  });
+  return {
+    jsx,
+    jsxs,
+    jsxDEV,
+    Fragment,
+    render: (element, container) => {
+      if (!container) return;
+      (0, import_signal2.batch)(() => {
+        while (container.firstChild) {
+          container.removeChild(container.firstChild);
+        }
+        if (element instanceof Node) {
+          container.appendChild(element);
+        } else if (Array.isArray(element)) {
+          element.forEach((el) => {
+            if (el instanceof Node) {
+              container.appendChild(el);
+            }
+          });
+        }
+      });
+    },
+    batch: import_signal2.batch
+  };
+}
+function jsxComponent(fn) {
+  return fn;
+}
+function defineComponent(name, fn) {
+  Object.defineProperty(fn, "name", { value: name });
+  return fn;
+}
+function memo(component, equals) {
+  let lastProps;
+  let lastResult;
+  return (props) => {
+    if (lastProps !== void 0) {
+      if (equals ? equals(lastProps, props) : shallowEqual(lastProps, props)) {
+        return lastResult;
+      }
+    }
+    lastProps = props;
+    lastResult = component(props);
+    return lastResult;
+  };
+}
+function shallowEqual(a, b) {
+  if (a === b) return true;
+  if (typeof a !== "object" || typeof b !== "object") return false;
+  if (a === null || b === null) return false;
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  for (const key of keysA) {
+    if (a[key] !== b[key]) return false;
+  }
+  return true;
+}
+function hydrate(element, container) {
+  return (0, import_dom4.render)(element, container);
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+export * from './lib/index.js';

package/dist/index.mjs

@@ -0,0 +1,170 @@
+/*! @fluixi/jsx v1.0.0-alpha.100 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+
+// src/lib/jsx-runtime.ts
+import {
+  asComponent,
+  checkRenderType
+} from "@fluixi/dom";
+import { createComponent, createDynamicElement } from "@fluixi/dom";
+import { createSignal, createMemo } from "@fluixi/reactive/signal";
+var Fragment = /* @__PURE__ */ Symbol.for("fluixi.fragment");
+var isSSR = typeof window === "undefined";
+function normalizeChildren(children) {
+  if (children === void 0 || children === null || children === false) return null;
+  if (Array.isArray(children)) {
+    return children.map(normalizeChildren).flat();
+  }
+  return children;
+}
+function jsx(type, props, key) {
+  if (type == null) return null;
+  const p = props || {};
+  if (key !== void 0) p.key = key;
+  if (type === Fragment) {
+    return createMemo(() => asComponent(normalizeChildren(p.children)));
+  }
+  if (typeof type === "function") {
+    const { type: renderType } = checkRenderType(type);
+    if (type.$$typeof === /* @__PURE__ */ Symbol.for("react.provider") || renderType === "provider") {
+      return type(p);
+    }
+    if (isSSR) return { type, props: p };
+    return createMemo(() => createComponent(type, p), void 0, { name: "jsx component" });
+  }
+  if (typeof type === "string" && type.trim().length > 0) {
+    return createNativeElement(type, p);
+  }
+  return null;
+}
+var jsxs = jsx;
+function createNativeElement(tag, props) {
+  if (isSSR) return { type: tag, props: props || {} };
+  return createDynamicElement(tag, props);
+}
+function createElement(type, props, ...children) {
+  const p = { ...props };
+  if (children.length > 0) p.children = children.length === 1 ? children[0] : children;
+  return jsx(type, p);
+}
+function isValidElement(object) {
+  return typeof object === "object" && object !== null && "type" in object;
+}
+function cloneElement(element, props, ...children) {
+  return jsx(element.type, {
+    ...element.props,
+    ...props,
+    children: children.length ? children : element.props.children
+  });
+}
+function createRef(initialValue) {
+  return { current: initialValue || null };
+}
+function mergeProps(...sources) {
+  const target = {};
+  for (const source of sources) {
+    if (!source) continue;
+    const descriptors = Object.getOwnPropertyDescriptors(source);
+    Object.defineProperties(target, descriptors);
+  }
+  return target;
+}
+function forwardRef(fn) {
+  return (props) => fn(props, props.ref);
+}
+async function renderToString(element) {
+  throw new Error("renderToString should be imported from server module");
+}
+
+// src/lib/jsx-dev-runtime.ts
+function jsxDEV(type, props, key, isStaticChildren, source, self) {
+  return jsx(type, props, key);
+}
+
+// src/lib/index.ts
+import { delegateEvents as delegateEvents2 } from "@fluixi/dom";
+import { createPortal, initializeIntegration, render } from "@fluixi/dom";
+import { batch } from "@fluixi/reactive/signal";
+function createReactiveJSX(config) {
+  initializeIntegration({
+    signalSystem: config.signalSystem
+  });
+  return {
+    jsx,
+    jsxs,
+    jsxDEV,
+    Fragment,
+    render: (element, container) => {
+      if (!container) return;
+      batch(() => {
+        while (container.firstChild) {
+          container.removeChild(container.firstChild);
+        }
+        if (element instanceof Node) {
+          container.appendChild(element);
+        } else if (Array.isArray(element)) {
+          element.forEach((el) => {
+            if (el instanceof Node) {
+              container.appendChild(el);
+            }
+          });
+        }
+      });
+    },
+    batch
+  };
+}
+function jsxComponent(fn) {
+  return fn;
+}
+function defineComponent(name, fn) {
+  Object.defineProperty(fn, "name", { value: name });
+  return fn;
+}
+function memo(component, equals) {
+  let lastProps;
+  let lastResult;
+  return (props) => {
+    if (lastProps !== void 0) {
+      if (equals ? equals(lastProps, props) : shallowEqual(lastProps, props)) {
+        return lastResult;
+      }
+    }
+    lastProps = props;
+    lastResult = component(props);
+    return lastResult;
+  };
+}
+function shallowEqual(a, b) {
+  if (a === b) return true;
+  if (typeof a !== "object" || typeof b !== "object") return false;
+  if (a === null || b === null) return false;
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  for (const key of keysA) {
+    if (a[key] !== b[key]) return false;
+  }
+  return true;
+}
+function hydrate(element, container) {
+  return render(element, container);
+}
+export {
+  Fragment,
+  cloneElement,
+  createElement,
+  createReactiveJSX,
+  createRef,
+  defineComponent,
+  delegateEvents2 as delegateEvents,
+  forwardRef,
+  hydrate,
+  isValidElement,
+  jsx,
+  jsxComponent,
+  jsxDEV,
+  jsxs,
+  memo,
+  mergeProps,
+  renderToString
+};