@rmc-toolkit/react 0.2.0 → 0.2.4

package/README.md

@@ -0,0 +1,86 @@
+# @rmc-toolkit/react
+
+React adapter for [Runtime Module Composition](https://runtime-module-composition.dev). Two factories, for two different slice conventions — pick the one matching how your slices are written, not both for the same slice. Both take your app's own already-resolved `React` instance rather than importing one themselves, so this package never bundles a second, conflicting copy of React.
+
+## Install
+
+```bash
+npm install @rmc-toolkit/react @rmc-toolkit/core react
+```
+
+## Quick example
+
+**Slices share the `mount()`/`unmount()` convention:** use `createReactAdapter`, which wraps the resolve/import/mount lifecycle in a `useRuntimeHost` hook:
+
+```ts
+// src/rmc-adapter.ts
+import React from "react";
+import { createReactAdapter } from "@rmc-toolkit/react";
+
+export const { useRuntimeHost } = createReactAdapter(React);
+```
+
+```tsx
+// App.tsx
+import { useLocation } from "react-router-dom";
+import { useRuntimeHost } from "./rmc-adapter";
+import { manifest } from "./runtime-composition.manifest";
+
+function App() {
+  const location = useLocation();
+  const { ref, status } = useRuntimeHost<HTMLElement>(location.pathname, { manifest });
+
+  return (
+    <div className="app-shell">
+      <SiteHeader loading={status.type === "loading"} />
+      <main ref={ref} />
+      <SiteFooter />
+    </div>
+  );
+}
+```
+
+**Slices are plain default-exported components (not `mount()`/`unmount()`):** use `createDynamicModuleBoundary` instead:
+
+```tsx
+// src/rmc-adapter.ts
+import React from "react";
+import { createDynamicModuleBoundary } from "@rmc-toolkit/react";
+
+export const { DynamicModuleBoundary } = createDynamicModuleBoundary(React);
+```
+
+```tsx
+// RouteSlot.tsx
+import { resolveRoute } from "@rmc-toolkit/core";
+import { DynamicModuleBoundary } from "./rmc-adapter";
+import { manifest } from "./runtime-composition.manifest";
+
+export function RouteSlot() {
+  const match = resolveRoute(manifest, window.location.pathname);
+  if (!match) return null;
+
+  return (
+    <DynamicModuleBoundary
+      specifier={match.specifier}
+      context={{ route: match, manifest }}
+      fallback={<div>Loading...</div>}
+      errorFallback={<div>Unable to load this section.</div>}
+    />
+  );
+}
+```
+
+## What's in here
+
+- `createReactAdapter(React)` → `{ useRuntimeHost }` — a hook wrapping `createRuntimeHostObservable`'s resolve/import/mount/unmount lifecycle, with loading/error status.
+- `createDynamicModuleBoundary(React)` → `{ DynamicModuleBoundary }` — a `Suspense` + error-boundary component around `React.lazy()`-loading a slice's default-exported component.
+
+Full signatures and behavior for both: [API Reference](https://runtime-module-composition.dev/api-reference/#react-adapter-rmc-toolkitreact).
+
+## Documentation
+
+- [Getting Started](https://runtime-module-composition.dev/getting-started/) — install and wire up a host + slice end to end
+- [API Reference](https://runtime-module-composition.dev/api-reference/#react-adapter-rmc-toolkitreact)
+- [Technical Implementation](https://runtime-module-composition.dev/technical-implementation/) — the architecture and failure modes behind the pattern
+- [Multi-Framework Demo](https://runtime-module-composition.dev/demo/) — a full, runnable reference implementation, including a React slice

package/dist/create-dynamic-module-boundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-dynamic-module-boundary.d.ts","sourceRoot":"","sources":["../src/create-dynamic-module-boundary.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,cAAc,MAAM,OAAO,CAAC;AAC7C,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,oBAAoB,EAC1B,MAAM,mBAAmB,CAAC;AAM3B,MAAM,MAAM,0BAA0B,GAAG;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,QAAQ,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC;IACpC,aAAa,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC;IACzC,QAAQ,CAAC,EAAE,eAAe,CAAC;CAC5B,CAAC;AAYF,eAAO,MAAM,2BAA2B,GACtC,OAAO,OAAO,cAAc,KAC3B;IACD,qBAAqB,EAAE,CAAC,KAAK,EAAE,0BAA0B,KAAK,cAAc,CAAC,YAAY,CAAC;CAsE3F,CAAC"}
+{"version":3,"file":"create-dynamic-module-boundary.d.ts","sourceRoot":"","sources":["../src/create-dynamic-module-boundary.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,cAAc,MAAM,OAAO,CAAC;AAC7C,OAAO,EAEL,KAAK,eAAe,EACpB,KAAK,oBAAoB,EAC1B,MAAM,mBAAmB,CAAC;AAM3B,MAAM,MAAM,0BAA0B,GAAG;IACvC,SAAS,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,QAAQ,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC;IACpC,aAAa,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC;IACzC,QAAQ,CAAC,EAAE,eAAe,CAAC;CAC5B,CAAC;AAYF,eAAO,MAAM,2BAA2B,GACtC,OAAO,OAAO,cAAc,KAC3B;IACD,qBAAqB,EAAE,CAAC,KAAK,EAAE,0BAA0B,KAAK,cAAc,CAAC,YAAY,CAAC;CAiF3F,CAAC"}

package/dist/create-dynamic-module-boundary.js

@@ -30,10 +30,13 @@ export const createDynamicModuleBoundary = (React) => {
         }
     }
     const DynamicModuleBoundary = ({ specifier, context, fallback = null, errorFallback = null, importer = defaultImporter, }) => {
-        const LazyModule = React.lazy(async () => {
+        // Memoized by specifier/importer: React.lazy() must return the same
+        // component type across renders, or React treats it as a brand-new
+        // component and remounts (re-suspending) on every parent re-render.
+        const LazyModule = React.useMemo(() => React.lazy(async () => {
             const loadedModule = (await importer(specifier));
             return loadedModule;
-        });
+        }), [specifier, importer]);
         const moduleProps = context === undefined
             ? {}
             : { context };
@@ -50,6 +53,10 @@ export const createDynamicModuleBoundary = (React) => {
         // required -- it is the same substitution JSX itself performs, not an
         // accidental extra prop.
         return React.createElement(React.Suspense, { fallback }, React.createElement(ErrorBoundary, {
+            // Keyed by specifier so switching modules mounts a fresh
+            // ErrorBoundary instance instead of reusing one still holding a
+            // previous module's error state.
+            key: specifier,
             fallback: errorFallback,
             children: React.createElement(LazyModule, moduleProps),
         }));

package/package.json

@@ -1,7 +1,12 @@
 {
   "name": "@rmc-toolkit/react",
-  "version": "0.2.0",
+  "version": "0.2.4",
   "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/runtime-module-composition/rmc-toolkit",
+    "directory": "packages/react"
+  },
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -17,11 +22,11 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@rmc-toolkit/core": "0.2.0",
+    "@rmc-toolkit/core": "0.2.4",
     "react": ">=18"
   },
   "dependencies": {
-    "@rmc-toolkit/core": "0.2.0"
+    "@rmc-toolkit/core": "0.2.4"
   },
   "scripts": {
     "build": "tsc -b"