mirror of
https://github.com/kennethnym/jrx.git
synced 2026-03-19 19:31:17 +00:00
@@ -3,11 +3,11 @@
|
||||
"configVersion": 1,
|
||||
"workspaces": {
|
||||
"": {
|
||||
"name": "jsonsx-example",
|
||||
"name": "jrx-example",
|
||||
"dependencies": {
|
||||
"@json-render/core": "0.10.0",
|
||||
"@json-render/react": "0.10.0",
|
||||
"jsonsx": "file:..",
|
||||
"@nym.sh/jrx": "file:..",
|
||||
"react": "19.2.4",
|
||||
"react-dom": "19.2.4",
|
||||
"shiki": "^4.0.0",
|
||||
@@ -91,6 +91,8 @@
|
||||
|
||||
"@json-render/react": ["@json-render/react@0.10.0", "", { "dependencies": { "@json-render/core": "0.10.0" }, "peerDependencies": { "react": "^19.2.3" } }, "sha512-gyl3YiZ8CZZauAxvUtL1cYkO2mWnKkWmJEC9naqzxIjJp5oHg5v/4F+4zEx4xH5AeGAcY+g2/C7X9Kz8rWMRFg=="],
|
||||
|
||||
"@nym.sh/jrx": ["@nym.sh/jrx@file:..", { "devDependencies": { "@json-render/core": "0.10.0", "@json-render/react": "0.10.0", "@testing-library/react": "16.3.2", "@types/bun": "^1.3.9", "@types/react": "19.2.3", "happy-dom": "18.0.1", "react": "19.2.4", "react-dom": "19.2.4", "tsup": "8.5.1", "typescript": "5.9.3" }, "peerDependencies": { "@json-render/core": ">=0.10.0" } }],
|
||||
|
||||
"@rollup/rollup-android-arm-eabi": ["@rollup/rollup-android-arm-eabi@4.59.0", "", { "os": "android", "cpu": "arm" }, "sha512-upnNBkA6ZH2VKGcBj9Fyl9IGNPULcjXRlg0LLeaioQWueH30p6IXtJEbKAgvyv+mJaMxSm1l6xwDXYjpEMiLMg=="],
|
||||
|
||||
"@rollup/rollup-android-arm64": ["@rollup/rollup-android-arm64@4.59.0", "", { "os": "android", "cpu": "arm64" }, "sha512-hZ+Zxj3SySm4A/DylsDKZAeVg0mvi++0PYVceVyX7hemkw7OreKdCvW2oQ3T1FMZvCaQXqOTHb8qmBShoqk69Q=="],
|
||||
@@ -245,8 +247,6 @@
|
||||
|
||||
"js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
|
||||
|
||||
"jsonsx": ["jsonsx@file:..", { "devDependencies": { "@json-render/core": "0.10.0", "@json-render/react": "0.10.0", "@testing-library/react": "16.3.2", "@types/bun": "^1.3.9", "@types/react": "19.2.3", "happy-dom": "18.0.1", "react": "19.2.4", "react-dom": "19.2.4", "tsup": "8.5.1", "typescript": "5.9.3" }, "peerDependencies": { "@json-render/core": ">=0.10.0" } }],
|
||||
|
||||
"lilconfig": ["lilconfig@3.1.3", "", {}, "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw=="],
|
||||
|
||||
"lines-and-columns": ["lines-and-columns@1.2.4", "", {}, "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="],
|
||||
@@ -369,6 +369,6 @@
|
||||
|
||||
"zwitch": ["zwitch@2.0.4", "", {}, "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A=="],
|
||||
|
||||
"jsonsx/@types/react": ["@types/react@19.2.3", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-k5dJVszUiNr1DSe8Cs+knKR6IrqhqdhpUwzqhkS8ecQTSf3THNtbfIp/umqHMpX2bv+9dkx3fwDv/86LcSfvSg=="],
|
||||
"@nym.sh/jrx/@types/react": ["@types/react@19.2.3", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-k5dJVszUiNr1DSe8Cs+knKR6IrqhqdhpUwzqhkS8ecQTSf3THNtbfIp/umqHMpX2bv+9dkx3fwDv/86LcSfvSg=="],
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,23 +1,23 @@
|
||||
import { jsx } from "jsonsx/jsx-runtime";
|
||||
import type { JsonsxNode } from "jsonsx";
|
||||
import { jsx } from "@nym.sh/jrx/jsx-runtime";
|
||||
import type { JrxNode } from "@nym.sh/jrx";
|
||||
|
||||
|
||||
export function Stack(props: Record<string, unknown>): JsonsxNode {
|
||||
export function Stack(props: Record<string, unknown>): JrxNode {
|
||||
return jsx("Stack", props);
|
||||
}
|
||||
|
||||
export function Card(props: Record<string, unknown>): JsonsxNode {
|
||||
export function Card(props: Record<string, unknown>): JrxNode {
|
||||
return jsx("Card", props);
|
||||
}
|
||||
|
||||
export function Text(props: Record<string, unknown>): JsonsxNode {
|
||||
export function Text(props: Record<string, unknown>): JrxNode {
|
||||
return jsx("Text", props);
|
||||
}
|
||||
|
||||
export function Button(props: Record<string, unknown>): JsonsxNode {
|
||||
export function Button(props: Record<string, unknown>): JrxNode {
|
||||
return jsx("Button", props);
|
||||
}
|
||||
|
||||
export function Input(props: Record<string, unknown>): JsonsxNode {
|
||||
export function Input(props: Record<string, unknown>): JrxNode {
|
||||
return jsx("Input", props);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "jsonsx-example",
|
||||
"name": "jrx-example",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
@@ -10,7 +10,7 @@
|
||||
"dependencies": {
|
||||
"@json-render/core": "0.10.0",
|
||||
"@json-render/react": "0.10.0",
|
||||
"jsonsx": "file:..",
|
||||
"@nym.sh/jrx": "file:..",
|
||||
"react": "19.2.4",
|
||||
"react-dom": "19.2.4",
|
||||
"shiki": "^4.0.0"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
/** @jsxImportSource jsonsx */
|
||||
import { render } from "jsonsx";
|
||||
/** @jsxImportSource @nym.sh/jrx */
|
||||
import { render } from "@nym.sh/jrx";
|
||||
import { Stack, Card, Text, Button, Input } from "../components";
|
||||
|
||||
export const fullSpec = render(
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
/** @jsxImportSource jsonsx */
|
||||
import { render } from "jsonsx";
|
||||
/** @jsxImportSource @nym.sh/jrx */
|
||||
import { render } from "@nym.sh/jrx";
|
||||
import { Stack, Text, Button } from "../components";
|
||||
|
||||
export const simpleSpec = render(
|
||||
<Stack>
|
||||
<Text content="Hello from jsonsx!" />
|
||||
<Text content="Hello from jrx!" />
|
||||
<Button label="Click me" />
|
||||
</Stack>
|
||||
);
|
||||
|
||||
@@ -75,7 +75,7 @@ export function App() {
|
||||
if (!activeSpec) {
|
||||
return (
|
||||
<div style={{ maxWidth: 600, margin: "60px auto", padding: "0 24px" }}>
|
||||
<h1 style={{ fontSize: "24px", marginBottom: "8px" }}>jsonsx examples</h1>
|
||||
<h1 style={{ fontSize: "24px", marginBottom: "8px" }}>jrx examples</h1>
|
||||
<p style={{ color: "var(--text-secondary)", fontSize: "14px", marginBottom: "24px" }}>
|
||||
JSX → json-render Spec. Pick a spec to see the live UI and JSON
|
||||
output.
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>jsonsx example</title>
|
||||
<title>jrx example</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #f5f5f5;
|
||||
|
||||
@@ -46,4 +46,4 @@ const server = serve({
|
||||
},
|
||||
});
|
||||
|
||||
console.log(`jsonsx example server running at ${server.url}`);
|
||||
console.log(`jrx example server running at ${server.url}`);
|
||||
|
||||
Reference in New Issue
Block a user