mirror of
https://github.com/kennethnym/jrx.git
synced 2026-03-20 03:41:18 +00:00
Add example: Bun HTTP server showcasing jrx JSX-to-JSON rendering
Bun React app with HMR that demonstrates jrx's render() pipeline. Shows JSX source, live UI via @json-render/react, and JSON output side by side. - example/specs/simple.tsx: flat Stack > Text + Button - example/specs/full.tsx: nested layout with state, events, visibility conditions, and watchers - Uses defineCatalog + defineRegistry from @json-render/react - Fix package.json exports to match actual tsup output (.js/.cjs instead of .mjs/.js) Co-authored-by: Ona <no-reply@ona.com>
This commit is contained in:
75
example/specs/full.tsx
Normal file
75
example/specs/full.tsx
Normal file
@@ -0,0 +1,75 @@
|
||||
/** @jsxImportSource jrx */
|
||||
import { render } from "jrx";
|
||||
import { Stack, Card, Text, Button, Input } from "../components";
|
||||
|
||||
export const fullSpec = render(
|
||||
<Stack>
|
||||
<Card title="Counter">
|
||||
<Text content={{ $state: "/count" }} />
|
||||
<Button
|
||||
label="Increment"
|
||||
on={{
|
||||
press: {
|
||||
action: "increment",
|
||||
params: { statePath: "/count" },
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Card title="Toggle Details">
|
||||
<Button
|
||||
label={{
|
||||
$cond: { $state: "/showDetails", eq: true },
|
||||
$then: "Hide Details",
|
||||
$else: "Show Details",
|
||||
}}
|
||||
on={{
|
||||
press: {
|
||||
action: "setState",
|
||||
params: {
|
||||
statePath: "/showDetails",
|
||||
value: {
|
||||
$cond: { $state: "/showDetails", eq: true },
|
||||
$then: false,
|
||||
$else: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Text
|
||||
content="These are the hidden details!"
|
||||
visible={{ $state: "/showDetails", eq: true }}
|
||||
/>
|
||||
</Card>
|
||||
|
||||
<Card title="Watched Input">
|
||||
<Input
|
||||
placeholder="Type a country..."
|
||||
on={{
|
||||
change: {
|
||||
action: "setState",
|
||||
params: { statePath: "/country", value: { $event: "/value" } },
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<Text
|
||||
content={{ $state: "/country" }}
|
||||
watch={{
|
||||
"/country": {
|
||||
action: "logCountry",
|
||||
params: { country: { $state: "/country" } },
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Card>
|
||||
</Stack>,
|
||||
{
|
||||
state: {
|
||||
count: 0,
|
||||
showDetails: false,
|
||||
country: "",
|
||||
},
|
||||
}
|
||||
);
|
||||
Reference in New Issue
Block a user