mirror of
https://github.com/kennethnym/jrx.git
synced 2026-03-19 19:31:17 +00:00
Kenneth
af85ad3b07
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>
76 lines
1.7 KiB
TypeScript
76 lines
1.7 KiB
TypeScript
/** @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: "",
|
|
},
|
|
}
|
|
);
|