@21stware/rpui-react 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+export interface RpmlRendererProps {
+    /** RPML source text. Updates trigger incremental re-render with scroll preserved. */
+    rpml: string;
+    /** Debounce delay in ms before re-rendering (recommended for live editors). Default: 0. */
+    debounce?: number;
+    className?: string;
+    style?: React.CSSProperties;
+    /** Called with an error message on parse failure, null when the error clears. */
+    onError?: (msg: string | null) => void;
+}
+/**
+ * Renders RPML markup as a live Web Components prototype.
+ * Scroll position is preserved across incremental updates.
+ */
+export declare function RpmlRenderer({ rpml, debounce, className, style, onError }: RpmlRendererProps): import("react").JSX.Element;

package/dist/index.js

@@ -0,0 +1,47 @@
+import { useEffect, useRef } from "react";
+import { createDocRenderer, registerAll } from "@21stware/rpui";
+import { jsx } from "react/jsx-runtime";
+//#region src/index.tsx
+let _registered = false;
+/**
+* Renders RPML markup as a live Web Components prototype.
+* Scroll position is preserved across incremental updates.
+*/
+function RpmlRenderer({ rpml, debounce = 0, className, style, onError }) {
+	const hostRef = useRef(null);
+	const rendererRef = useRef(null);
+	const onErrorRef = useRef(onError);
+	const timerRef = useRef(void 0);
+	useEffect(() => {
+		onErrorRef.current = onError;
+	}, [onError]);
+	useEffect(() => {
+		if (!_registered) {
+			registerAll();
+			_registered = true;
+		}
+		const renderer = createDocRenderer(hostRef.current, { onError: (msg) => onErrorRef.current?.(msg) });
+		rendererRef.current = renderer;
+		return () => {
+			renderer.destroy();
+			rendererRef.current = null;
+		};
+	}, []);
+	useEffect(() => {
+		const renderer = rendererRef.current;
+		if (!renderer) return;
+		if (debounce > 0) {
+			clearTimeout(timerRef.current);
+			timerRef.current = setTimeout(() => renderer.render(rpml), debounce);
+			return () => clearTimeout(timerRef.current);
+		}
+		renderer.render(rpml);
+	}, [rpml, debounce]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: hostRef,
+		className,
+		style
+	});
+}
+//#endregion
+export { RpmlRenderer };

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@21stware/rpui-react",
+  "version": "0.1.0",
+  "description": "React binding for the RPUI/RPML Web Components runtime — incremental, scroll-preserving RPML rendering",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "build:js": "rolldown -c rolldown.config.js",
+    "build:types": "tsc -p tsconfig.types.json",
+    "build": "bun run clean && bun run typecheck && bun run build:js && bun run build:types",
+    "clean": "rm -rf dist && mkdir -p dist",
+    "release": "bun run build"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@21stware/rpui": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "react": "^18.3.0",
+    "rolldown": "^1.0.0-beta.0",
+    "typescript": "^5.8.3"
+  }
+}