kennethnym/jrx
1
0
Fork 0
mirror of https://github.com/kennethnym/jrx.git synced 2026-03-20 03:41:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Rename package from jfx to jsonsx

Browse Source 
Co-authored-by: Ona <no-reply@ona.com>
This commit is contained in:
Kenneth
2026-02-28 01:37:10 +00:00
parent c9d4ff28e3
commit 99fe5e1db9
21 changed files with 142 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
README.md
View File

@@ -1,22 +1,22 @@
# jfx
# jsonsx
JSX factory for [json-render](https://github.com/vercel-labs/json-render). Write JSX, get Spec JSON.
## Install
```bash
bun add jfx @json-render/core
bun add jsonsx @json-render/core
```
## Setup
Configure your `tsconfig.json` to use jfx as the JSX source:
Configure your `tsconfig.json` to use jsonsx as the JSX source:
```json
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "jfx"
"jsxImportSource": "jsonsx"
}
}
```
@@ -24,7 +24,7 @@ Configure your `tsconfig.json` to use jfx as the JSX source:
Or use a per-file pragma:
```tsx
/** @jsxImportSource jfx */
/** @jsxImportSource jsonsx */
```
## Usage
@@ -34,18 +34,18 @@ Or use a per-file pragma:
Create wrapper functions that map JSX tags to json-render component type names:
```ts
import { jsx } from "jfx/jsx-runtime";
import type { JfxNode } from "jfx";
import { jsx } from "jsonsx/jsx-runtime";
import type { JsonsxNode } from "jsonsx";
export function Stack(props: Record<string, unknown>): JfxNode {
export function Stack(props: Record<string, unknown>): JsonsxNode {
return jsx("Stack", props);
}
export function Text(props: Record<string, unknown>): JfxNode {
export function Text(props: Record<string, unknown>): JsonsxNode {
return jsx("Text", props);
}
export function Button(props: Record<string, unknown>): JfxNode {
export function Button(props: Record<string, unknown>): JsonsxNode {
return jsx("Button", props);
}
```
@@ -53,12 +53,12 @@ export function Button(props: Record<string, unknown>): JfxNode {
### Render JSX to Spec JSON
```tsx
import { render } from "jfx";
import { render } from "jsonsx";
import { Stack, Text, Button } from "./components";
const spec = render(
<Stack>
<Text content="Hello from jfx!" />
<Text content="Hello from jsonsx!" />
<Button label="Click me" />
</Stack>
);
@@ -72,7 +72,7 @@ This produces:
"elements": {
"text-1": {
"type": "Text",
"props": { "content": "Hello from jfx!" }
"props": { "content": "Hello from jsonsx!" }
},
"button-1": {
"type": "Button",
@@ -135,7 +135,7 @@ These props are extracted from JSX and mapped to Spec fields rather than passed
## Example
The `example/` directory contains a Bun HTTP server that demonstrates jfx in action. It shows JSX source, live rendered UI (via `@json-render/react`), and JSON output side by side.
The `example/` directory contains a Bun HTTP server that demonstrates jsonsx in action. It shows JSX source, live rendered UI (via `@json-render/react`), and JSON output side by side.
```bash
cd example