diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index 67b3c52..0fb5bdd 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -1,5 +1,5 @@ { - "name": "jrx", + "name": "jfx", "build": { "context": ".", "dockerfile": "Dockerfile" diff --git a/README.md b/README.md index 1b66241..71fd577 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,22 @@ -# jrx +# jfx JSX factory for [json-render](https://github.com/vercel-labs/json-render). Write JSX, get Spec JSON. ## Install ```bash -bun add jrx @json-render/core +bun add jfx @json-render/core ``` ## Setup -Configure your `tsconfig.json` to use jrx as the JSX source: +Configure your `tsconfig.json` to use jfx as the JSX source: ```json { "compilerOptions": { "jsx": "react-jsx", - "jsxImportSource": "jrx" + "jsxImportSource": "jfx" } } ``` @@ -24,7 +24,7 @@ Configure your `tsconfig.json` to use jrx as the JSX source: Or use a per-file pragma: ```tsx -/** @jsxImportSource jrx */ +/** @jsxImportSource jfx */ ``` ## 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 "jrx/jsx-runtime"; -import type { JrxNode } from "jrx"; +import { jsx } from "jfx/jsx-runtime"; +import type { JfxNode } from "jfx"; -export function Stack(props: Record): JrxNode { +export function Stack(props: Record): JfxNode { return jsx("Stack", props); } -export function Text(props: Record): JrxNode { +export function Text(props: Record): JfxNode { return jsx("Text", props); } -export function Button(props: Record): JrxNode { +export function Button(props: Record): JfxNode { return jsx("Button", props); } ``` @@ -53,12 +53,12 @@ export function Button(props: Record): JrxNode { ### Render JSX to Spec JSON ```tsx -import { render } from "jrx"; +import { render } from "jfx"; import { Stack, Text, Button } from "./components"; const spec = render( - +