diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 0fb5bdd..816e67a 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -1,5 +1,5 @@ { - "name": "jfx", + "name": "jsonsx", "build": { "context": ".", "dockerfile": "Dockerfile" diff --git a/README.md b/README.md index 71fd577..fe22f12 100644 --- a/README.md +++ b/README.md @@ -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): JfxNode { +export function Stack(props: Record): JsonsxNode { return jsx("Stack", props); } -export function Text(props: Record): JfxNode { +export function Text(props: Record): JsonsxNode { return jsx("Text", props); } -export function Button(props: Record): JfxNode { +export function Button(props: Record): JsonsxNode { return jsx("Button", props); } ``` @@ -53,12 +53,12 @@ export function Button(props: Record): JfxNode { ### Render JSX to Spec JSON ```tsx -import { render } from "jfx"; +import { render } from "jsonsx"; import { Stack, Text, Button } from "./components"; const spec = render( - +