@fabricorg/experience-react 0.1.1

package/CHANGELOG.md

@@ -0,0 +1,23 @@
+# Changelog
+
+## 0.1.1
+
+### Patch Changes
+
+- Updated dependencies [337e89c]
+- Updated dependencies [9a5b18a]
+- Updated dependencies [9b2e55b]
+- Updated dependencies [0d1f6f6]
+  - @fabricorg/experience-runtime@0.2.0
+
+## 0.1.0
+
+### Minor Changes
+
+- Add deterministic React rendering for scoped plans, fragment-event and named-binding
+  interfaces, and accessible missing-component recovery.
+
+### Patch Changes
+
+- Updated dependencies
+  - @fabricorg/experience-runtime@0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Fabric
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,8 @@
+# `@fabricorg/experience-react`
+
+React adapter for scoped render plans. It maps renderer-neutral component names to an
+application registry and gives each component only its declared event interface.
+Missing components render an accessible alert.
+
+The adapter does not parse releases, select variants, authorize requests, or import
+either governed Host.

package/dist/index.cjs

@@ -0,0 +1,61 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// index.tsx
+var index_exports = {};
+__export(index_exports, {
+  createExperienceReactRenderer: () => createExperienceReactRenderer
+});
+module.exports = __toCommonJS(index_exports);
+var import_react = require("react");
+function createExperienceReactRenderer(options) {
+  const Missing = options.missingComponent ?? DefaultMissingComponent;
+  const Renderer = ({ session }) => renderFragment(session.plan.root, session, options.components, Missing);
+  Renderer.displayName = "FabricExperienceRenderer";
+  return Renderer;
+}
+function renderFragment(fragment, session, components, Missing) {
+  const children = (fragment.children ?? []).map((child) => (0, import_react.createElement)(import_react.Fragment, { key: child.id }, renderFragment(child, session, components, Missing)));
+  if (fragment.component === void 0) return (0, import_react.createElement)(import_react.Fragment, null, ...children);
+  const Component = components[fragment.component];
+  if (!Component) return (0, import_react.createElement)(Missing, { name: fragment.component, fragmentId: fragment.id });
+  const events = fragment.events ?? [];
+  const bindings = fragment.bindings ?? [];
+  return (0, import_react.createElement)(Component, {
+    ...fragment.props ?? {},
+    experience: Object.freeze({
+      events,
+      bindings,
+      invoke: (eventName, parameters, idempotencyKey) => session.invoke(fragment.id, eventName, parameters, idempotencyKey),
+      read: (bindingName, parameters) => session.read(fragment.id, bindingName, parameters)
+    })
+  }, ...children);
+}
+function DefaultMissingComponent({ name, fragmentId }) {
+  return (0, import_react.createElement)(
+    "div",
+    { role: "alert", "data-fabric-fragment": fragmentId },
+    `Component "${name}" is unavailable.`
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createExperienceReactRenderer
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../index.tsx"],"sourcesContent":["import {\n\tFragment,\n\tcreateElement,\n\ttype ComponentType,\n\ttype ReactElement,\n\ttype ReactNode,\n} from \"react\";\nimport type {\n\tExperienceSession,\n\tRenderPlanFragment,\n} from \"@fabricorg/experience-runtime\";\n\nexport interface ExperienceComponentActions {\n\tevents: readonly string[];\n\tbindings: readonly string[];\n\tinvoke(eventName: string, parameters: Record<string, unknown>, idempotencyKey?: string): Promise<unknown>;\n\tread(bindingName: string, parameters?: Record<string, unknown>): Promise<unknown>;\n}\n\nexport type ExperiencePackComponent = ComponentType<Record<string, unknown> & {\n\texperience: ExperienceComponentActions;\n\tchildren?: ReactNode;\n}>;\n\nexport interface ExperienceRendererProps {\n\tsession: ExperienceSession;\n}\n\nexport function createExperienceReactRenderer(options: {\n\tcomponents: Readonly<Record<string, ExperiencePackComponent>>;\n\tmissingComponent?: ComponentType<{ name: string; fragmentId: string }>;\n}): ComponentType<ExperienceRendererProps> {\n\tconst Missing = options.missingComponent ?? DefaultMissingComponent;\n\tconst Renderer = ({ session }: ExperienceRendererProps): ReactElement =>\n\t\trenderFragment(session.plan.root, session, options.components, Missing);\n\tRenderer.displayName = \"FabricExperienceRenderer\";\n\treturn Renderer;\n}\n\nfunction renderFragment(\n\tfragment: RenderPlanFragment,\n\tsession: ExperienceSession,\n\tcomponents: Readonly<Record<string, ExperiencePackComponent>>,\n\tMissing: ComponentType<{ name: string; fragmentId: string }>,\n): ReactElement {\n\tconst children = (fragment.children ?? []).map((child) =>\n\t\tcreateElement(Fragment, { key: child.id }, renderFragment(child, session, components, Missing)));\n\tif (fragment.component === undefined) return createElement(Fragment, null, ...children);\n\tconst Component = components[fragment.component];\n\tif (!Component) return createElement(Missing, { name: fragment.component, fragmentId: fragment.id });\n\tconst events = fragment.events ?? [];\n\tconst bindings = fragment.bindings ?? [];\n\treturn createElement(Component, {\n\t\t...(fragment.props ?? {}),\n\t\texperience: Object.freeze({\n\t\t\tevents,\n\t\t\tbindings,\n\t\t\tinvoke: (eventName: string, parameters: Record<string, unknown>, idempotencyKey?: string) =>\n\t\t\t\tsession.invoke(fragment.id, eventName, parameters, idempotencyKey),\n\t\t\tread: (bindingName: string, parameters?: Record<string, unknown>) =>\n\t\t\t\tsession.read(fragment.id, bindingName, parameters),\n\t\t}),\n\t}, ...children);\n}\n\nfunction DefaultMissingComponent({ name, fragmentId }: { name: string; fragmentId: string }): ReactElement {\n\treturn createElement(\n\t\t\"div\",\n\t\t{ role: \"alert\", \"data-fabric-fragment\": fragmentId },\n\t\t`Component \"${name}\" is unavailable.`,\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAMO;AAsBA,SAAS,8BAA8B,SAGH;AAC1C,QAAM,UAAU,QAAQ,oBAAoB;AAC5C,QAAM,WAAW,CAAC,EAAE,QAAQ,MAC3B,eAAe,QAAQ,KAAK,MAAM,SAAS,QAAQ,YAAY,OAAO;AACvE,WAAS,cAAc;AACvB,SAAO;AACR;AAEA,SAAS,eACR,UACA,SACA,YACA,SACe;AACf,QAAM,YAAY,SAAS,YAAY,CAAC,GAAG,IAAI,CAAC,cAC/C,4BAAc,uBAAU,EAAE,KAAK,MAAM,GAAG,GAAG,eAAe,OAAO,SAAS,YAAY,OAAO,CAAC,CAAC;AAChG,MAAI,SAAS,cAAc,OAAW,YAAO,4BAAc,uBAAU,MAAM,GAAG,QAAQ;AACtF,QAAM,YAAY,WAAW,SAAS,SAAS;AAC/C,MAAI,CAAC,UAAW,YAAO,4BAAc,SAAS,EAAE,MAAM,SAAS,WAAW,YAAY,SAAS,GAAG,CAAC;AACnG,QAAM,SAAS,SAAS,UAAU,CAAC;AACnC,QAAM,WAAW,SAAS,YAAY,CAAC;AACvC,aAAO,4BAAc,WAAW;AAAA,IAC/B,GAAI,SAAS,SAAS,CAAC;AAAA,IACvB,YAAY,OAAO,OAAO;AAAA,MACzB;AAAA,MACA;AAAA,MACA,QAAQ,CAAC,WAAmB,YAAqC,mBAChE,QAAQ,OAAO,SAAS,IAAI,WAAW,YAAY,cAAc;AAAA,MAClE,MAAM,CAAC,aAAqB,eAC3B,QAAQ,KAAK,SAAS,IAAI,aAAa,UAAU;AAAA,IACnD,CAAC;AAAA,EACF,GAAG,GAAG,QAAQ;AACf;AAEA,SAAS,wBAAwB,EAAE,MAAM,WAAW,GAAuD;AAC1G,aAAO;AAAA,IACN;AAAA,IACA,EAAE,MAAM,SAAS,wBAAwB,WAAW;AAAA,IACpD,cAAc,IAAI;AAAA,EACnB;AACD;","names":[]}

package/dist/index.d.cts

@@ -0,0 +1,25 @@
+import { ComponentType, ReactNode } from 'react';
+import { ExperienceSession } from '@fabricorg/experience-runtime';
+
+interface ExperienceComponentActions {
+    events: readonly string[];
+    bindings: readonly string[];
+    invoke(eventName: string, parameters: Record<string, unknown>, idempotencyKey?: string): Promise<unknown>;
+    read(bindingName: string, parameters?: Record<string, unknown>): Promise<unknown>;
+}
+type ExperiencePackComponent = ComponentType<Record<string, unknown> & {
+    experience: ExperienceComponentActions;
+    children?: ReactNode;
+}>;
+interface ExperienceRendererProps {
+    session: ExperienceSession;
+}
+declare function createExperienceReactRenderer(options: {
+    components: Readonly<Record<string, ExperiencePackComponent>>;
+    missingComponent?: ComponentType<{
+        name: string;
+        fragmentId: string;
+    }>;
+}): ComponentType<ExperienceRendererProps>;
+
+export { type ExperienceComponentActions, type ExperiencePackComponent, type ExperienceRendererProps, createExperienceReactRenderer };

package/dist/index.d.ts

@@ -0,0 +1,25 @@
+import { ComponentType, ReactNode } from 'react';
+import { ExperienceSession } from '@fabricorg/experience-runtime';
+
+interface ExperienceComponentActions {
+    events: readonly string[];
+    bindings: readonly string[];
+    invoke(eventName: string, parameters: Record<string, unknown>, idempotencyKey?: string): Promise<unknown>;
+    read(bindingName: string, parameters?: Record<string, unknown>): Promise<unknown>;
+}
+type ExperiencePackComponent = ComponentType<Record<string, unknown> & {
+    experience: ExperienceComponentActions;
+    children?: ReactNode;
+}>;
+interface ExperienceRendererProps {
+    session: ExperienceSession;
+}
+declare function createExperienceReactRenderer(options: {
+    components: Readonly<Record<string, ExperiencePackComponent>>;
+    missingComponent?: ComponentType<{
+        name: string;
+        fragmentId: string;
+    }>;
+}): ComponentType<ExperienceRendererProps>;
+
+export { type ExperienceComponentActions, type ExperiencePackComponent, type ExperienceRendererProps, createExperienceReactRenderer };

package/dist/index.js

@@ -0,0 +1,39 @@
+// index.tsx
+import {
+  Fragment,
+  createElement
+} from "react";
+function createExperienceReactRenderer(options) {
+  const Missing = options.missingComponent ?? DefaultMissingComponent;
+  const Renderer = ({ session }) => renderFragment(session.plan.root, session, options.components, Missing);
+  Renderer.displayName = "FabricExperienceRenderer";
+  return Renderer;
+}
+function renderFragment(fragment, session, components, Missing) {
+  const children = (fragment.children ?? []).map((child) => createElement(Fragment, { key: child.id }, renderFragment(child, session, components, Missing)));
+  if (fragment.component === void 0) return createElement(Fragment, null, ...children);
+  const Component = components[fragment.component];
+  if (!Component) return createElement(Missing, { name: fragment.component, fragmentId: fragment.id });
+  const events = fragment.events ?? [];
+  const bindings = fragment.bindings ?? [];
+  return createElement(Component, {
+    ...fragment.props ?? {},
+    experience: Object.freeze({
+      events,
+      bindings,
+      invoke: (eventName, parameters, idempotencyKey) => session.invoke(fragment.id, eventName, parameters, idempotencyKey),
+      read: (bindingName, parameters) => session.read(fragment.id, bindingName, parameters)
+    })
+  }, ...children);
+}
+function DefaultMissingComponent({ name, fragmentId }) {
+  return createElement(
+    "div",
+    { role: "alert", "data-fabric-fragment": fragmentId },
+    `Component "${name}" is unavailable.`
+  );
+}
+export {
+  createExperienceReactRenderer
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../index.tsx"],"sourcesContent":["import {\n\tFragment,\n\tcreateElement,\n\ttype ComponentType,\n\ttype ReactElement,\n\ttype ReactNode,\n} from \"react\";\nimport type {\n\tExperienceSession,\n\tRenderPlanFragment,\n} from \"@fabricorg/experience-runtime\";\n\nexport interface ExperienceComponentActions {\n\tevents: readonly string[];\n\tbindings: readonly string[];\n\tinvoke(eventName: string, parameters: Record<string, unknown>, idempotencyKey?: string): Promise<unknown>;\n\tread(bindingName: string, parameters?: Record<string, unknown>): Promise<unknown>;\n}\n\nexport type ExperiencePackComponent = ComponentType<Record<string, unknown> & {\n\texperience: ExperienceComponentActions;\n\tchildren?: ReactNode;\n}>;\n\nexport interface ExperienceRendererProps {\n\tsession: ExperienceSession;\n}\n\nexport function createExperienceReactRenderer(options: {\n\tcomponents: Readonly<Record<string, ExperiencePackComponent>>;\n\tmissingComponent?: ComponentType<{ name: string; fragmentId: string }>;\n}): ComponentType<ExperienceRendererProps> {\n\tconst Missing = options.missingComponent ?? DefaultMissingComponent;\n\tconst Renderer = ({ session }: ExperienceRendererProps): ReactElement =>\n\t\trenderFragment(session.plan.root, session, options.components, Missing);\n\tRenderer.displayName = \"FabricExperienceRenderer\";\n\treturn Renderer;\n}\n\nfunction renderFragment(\n\tfragment: RenderPlanFragment,\n\tsession: ExperienceSession,\n\tcomponents: Readonly<Record<string, ExperiencePackComponent>>,\n\tMissing: ComponentType<{ name: string; fragmentId: string }>,\n): ReactElement {\n\tconst children = (fragment.children ?? []).map((child) =>\n\t\tcreateElement(Fragment, { key: child.id }, renderFragment(child, session, components, Missing)));\n\tif (fragment.component === undefined) return createElement(Fragment, null, ...children);\n\tconst Component = components[fragment.component];\n\tif (!Component) return createElement(Missing, { name: fragment.component, fragmentId: fragment.id });\n\tconst events = fragment.events ?? [];\n\tconst bindings = fragment.bindings ?? [];\n\treturn createElement(Component, {\n\t\t...(fragment.props ?? {}),\n\t\texperience: Object.freeze({\n\t\t\tevents,\n\t\t\tbindings,\n\t\t\tinvoke: (eventName: string, parameters: Record<string, unknown>, idempotencyKey?: string) =>\n\t\t\t\tsession.invoke(fragment.id, eventName, parameters, idempotencyKey),\n\t\t\tread: (bindingName: string, parameters?: Record<string, unknown>) =>\n\t\t\t\tsession.read(fragment.id, bindingName, parameters),\n\t\t}),\n\t}, ...children);\n}\n\nfunction DefaultMissingComponent({ name, fragmentId }: { name: string; fragmentId: string }): ReactElement {\n\treturn createElement(\n\t\t\"div\",\n\t\t{ role: \"alert\", \"data-fabric-fragment\": fragmentId },\n\t\t`Component \"${name}\" is unavailable.`,\n\t);\n}\n"],"mappings":";AAAA;AAAA,EACC;AAAA,EACA;AAAA,OAIM;AAsBA,SAAS,8BAA8B,SAGH;AAC1C,QAAM,UAAU,QAAQ,oBAAoB;AAC5C,QAAM,WAAW,CAAC,EAAE,QAAQ,MAC3B,eAAe,QAAQ,KAAK,MAAM,SAAS,QAAQ,YAAY,OAAO;AACvE,WAAS,cAAc;AACvB,SAAO;AACR;AAEA,SAAS,eACR,UACA,SACA,YACA,SACe;AACf,QAAM,YAAY,SAAS,YAAY,CAAC,GAAG,IAAI,CAAC,UAC/C,cAAc,UAAU,EAAE,KAAK,MAAM,GAAG,GAAG,eAAe,OAAO,SAAS,YAAY,OAAO,CAAC,CAAC;AAChG,MAAI,SAAS,cAAc,OAAW,QAAO,cAAc,UAAU,MAAM,GAAG,QAAQ;AACtF,QAAM,YAAY,WAAW,SAAS,SAAS;AAC/C,MAAI,CAAC,UAAW,QAAO,cAAc,SAAS,EAAE,MAAM,SAAS,WAAW,YAAY,SAAS,GAAG,CAAC;AACnG,QAAM,SAAS,SAAS,UAAU,CAAC;AACnC,QAAM,WAAW,SAAS,YAAY,CAAC;AACvC,SAAO,cAAc,WAAW;AAAA,IAC/B,GAAI,SAAS,SAAS,CAAC;AAAA,IACvB,YAAY,OAAO,OAAO;AAAA,MACzB;AAAA,MACA;AAAA,MACA,QAAQ,CAAC,WAAmB,YAAqC,mBAChE,QAAQ,OAAO,SAAS,IAAI,WAAW,YAAY,cAAc;AAAA,MAClE,MAAM,CAAC,aAAqB,eAC3B,QAAQ,KAAK,SAAS,IAAI,aAAa,UAAU;AAAA,IACnD,CAAC;AAAA,EACF,GAAG,GAAG,QAAQ;AACf;AAEA,SAAS,wBAAwB,EAAE,MAAM,WAAW,GAAuD;AAC1G,SAAO;AAAA,IACN;AAAA,IACA,EAAE,MAAM,SAAS,wBAAwB,WAAW;AAAA,IACpD,cAAc,IAAI;AAAA,EACnB;AACD;","names":[]}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@fabricorg/experience-react",
+  "version": "0.1.1",
+  "description": "React renderer adapter for scoped Fabric experience render plans.",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "browser": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "dependencies": {
+    "@fabricorg/experience-runtime": "^0.2.0"
+  },
+  "peerDependencies": {
+    "react": "^18.3.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tsup": "^8.5.0",
+    "typescript": "^5.7.3",
+    "vitest": "^4.1.5"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "clean": "rm -rf dist tsconfig.tsbuildinfo",
+    "build": "tsup",
+    "type-check": "tsc --noEmit",
+    "test": "vitest run"
+  }
+}