autosuspense 0.1.14 → 1.0.0

package/README.md

@@ -1,13 +1,49 @@
 # AutoSupense Beta
-AutoSuspense is a small React utility that automatically builds and composes
-Suspense fallback UI based on your component tree without manually wiring
-nested fallback components.
+AutoSuspense is a lightweight React utility that automatically composes Suspense fallback UI based on your component tree without manually wiring nested ```<Suspense>``` boundaries.
 
-## How to use:
-1. Install this library
-```npm i autosuspense```
+It lets you define fallback UI at the component level, while a parent ```<AutoSuspense>``` boundary handles rendering everything correctly.
 
-2. Use it by calling and passing your components normally like ```<Supense>```:
+## Why AutoSuspense?:
+
+React Suspense solves async rendering, but fallback composition quickly becomes messy:
+```
+<Suspense fallback={<PageSkeleton />}>
+  <Header />
+  <Suspense fallback={<FeedSkeleton />}>
+    <Feed />
+  </Suspense>
+</Suspense>
+```
+AutoSuspense removes that boilerplate:
+```
+<AutoSuspense>
+  <Page />
+</AutoSuspense>
+```
+Each component defines it's own fallback and autosuspense builds the fallback tree for you.
+
+```
+import { Suspend } from "autosuspense";
+import Feed from "./Feed";
+import Sidebar from "./Sidebar";
+
+function Page() {
+  return (
+    <div>
+      <Feed />
+      <Sidebar />
+    </div>
+  );
+}
+
+export default Suspend(Page, <div>Loading page...</div>);
+```
+
+## Installation:
+```npm install autosuspense```
+
+Usage
+1. Add AutoSuspense boundary
 ```
 import { AutoSuspense } from "autosuspense";
 
@@ -19,24 +55,62 @@ function App() {
   );
 }
 ```
+2. Wrap components with Suspend
+```
+import { Suspend } from "autosuspense";
+
+const UserCard = () => {
+  const data = resource.read(); // may suspend
+  return <div>{data.name}</div>;
+};
 
-3. Inside each AutoSuspense component provide a fallback componet for that particular component via ```useSuspenseFallback``` hook.
+export default Suspend(UserCard, <div>Loading user...</div>);
 ```
-import { useSuspenseFallback } from "autosuspense";
 
-function UserCard() {
-  useSuspenseFallback(<div>Loading user…</div>);
+3. Nested components automatically compose
+```
+const Parent = () => <Child />;
 
-  // Component may suspend somewhere below
-  return <Profile />;
-}
+export default Suspend(Parent, <div>Big Loader...</div>);
+const Child = () => {
+  const data = resource.read();
+  return <div>{data}</div>;
+};
+
+export default Suspend(Child, <div>Inner Loader...</div>);
+```
+👉 Resulting fallback:
+```
+Big Loader...
+  Inner Loader...
+```
+No manual fallback nesting required.
+
+## Core Idea:
+- Wrap a subtree with <AutoSuspense>.
+- Wrap components with Suspend().
+- Each component declares its fallback.
+- AutoSuspense automatically composes the fallback UI tree without explicit maintaince and wiring.
+
+## Fallback Options:
+
+You can provide fallbacks in multiple ways:
+
+1. JSX element:
+```
+Suspend(Component, <Skeleton />);
+Component
+Suspend(Component, SkeletonComponent);
+```
+
+2. Component: 
+```
+Suspend(Component, SkeletonComponent);
 ```
 
-### Important Caveats:
-1. This library works on top of existing Suspense blocks and prebuilds your Fallback UI via render tree traversal.
-2. This means that it uses Depth First searching to prebuild so react is only able to show prebuilt Ui when it first encounters a place to suspend. This could mean that rest of your fallback UI in next adjacent components never render.
+3. String:
+```
+Suspend(Component, SkeletonComponent);
+```
 
-### TBD:
-1. Adding Default Skeletons.
-2. Supporting existing Library skeleton implementations.
-3. Adding a central config & template extension components & file to easily extend and manage your Fallback UI.
+AutoSuspense does not replace Suspense. It enhances fallback composition.

package/dist/components/suspense/AutoSuspense.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutoSuspense.d.ts","sourceRoot":"","sources":["../../../src/components/suspense/AutoSuspense.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,eAAO,MAAM,YAAY,GAAI,uBAG1B;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC;CACxE,gBAqBA,CAAC"}
+{"version":3,"file":"AutoSuspense.d.ts","sourceRoot":"","sources":["../../../src/components/suspense/AutoSuspense.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,eAAO,MAAM,YAAY,0BAGtB;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC;CACxE,gBAkBA,CAAC"}

package/dist/components/suspense/AutoSuspense.js

@@ -6,16 +6,11 @@ import { defaultPrefab } from "../prefabs/defaultPrefab";
 export const AutoSuspense = ({ children, prefab = defaultPrefab, }) => {
     const registryRef = React.useRef({
         nodes: new Map(),
-        currentParent: null,
         prebuild: new Map(Object.entries(prefab)),
     });
-    if (registryRef.current === null) {
-        registryRef.current = {
-            nodes: new Map(),
-            currentParent: null,
-            prebuild: new Map(Object.entries(prefab)),
-        };
-    }
     const fallback = _jsx(GeneratedFallback, { registry: registryRef.current });
-    return (_jsx(FallbackContext.Provider, { value: registryRef.current, children: _jsx(React.Suspense, { fallback: fallback, children: children }) }));
+    return (_jsx(FallbackContext.Provider, { value: {
+            registry: registryRef.current,
+            parentId: null,
+        }, children: _jsx(React.Suspense, { fallback: fallback, children: children }) }));
 };

package/dist/functions/Suspend.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { FallbackDescriptor } from "../types/FallbackRegistry";
+export declare function Suspend<T extends object>(Component: React.ComponentType<T>, fallback?: FallbackDescriptor): (props: T) => JSX.Element;
+//# sourceMappingURL=Suspend.d.ts.map

package/dist/functions/Suspend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Suspend.d.ts","sourceRoot":"","sources":["../../src/functions/Suspend.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAGhF,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EACtC,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,EACjC,QAAQ,CAAC,EAAE,kBAAkB,WAEE,CAAC,iBAwBjC"}

package/dist/functions/Suspend.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { FallbackContext } from "../types/FallbackRegistry";
+import { useCompatId } from "../hooks/useCompatId";
+export function Suspend(Component, fallback) {
+    return function Wrapped(props) {
+        const ctx = React.useContext(FallbackContext);
+        const id = useCompatId();
+        if (!ctx) {
+            return _jsx(Component, { ...props });
+        }
+        const { registry, parentId } = ctx;
+        if (!registry.nodes.has(id)) {
+            registry.nodes.set(id, {
+                id,
+                element: fallback ?? Component,
+                parent: parentId,
+            });
+        }
+        return (_jsx(FallbackContext.Provider, { value: { registry, parentId: id }, children: _jsx(Component, { ...props }) }));
+    };
+}

package/dist/functions/index.d.ts

@@ -0,0 +1,3 @@
+import { Suspend } from "./Suspend";
+export { Suspend };
+//# sourceMappingURL=index.d.ts.map

package/dist/functions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/functions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAC,OAAO,EAAC,CAAC"}

package/dist/functions/index.js

@@ -0,0 +1,2 @@
+import { Suspend } from "./Suspend";
+export { Suspend };

package/dist/hooks/index.d.ts

@@ -1,4 +1,2 @@
-import { useSuspenseFallback } from "./useSuspenseFallback";
-import { useSuspenseBoundary } from "./useSuspenseBoundary";
-export { useSuspenseFallback, useSuspenseBoundary };
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC"}

package/dist/hooks/index.js

@@ -1,3 +1 @@
-import { useSuspenseFallback } from "./useSuspenseFallback";
-import { useSuspenseBoundary } from "./useSuspenseBoundary";
-export { useSuspenseFallback, useSuspenseBoundary };
+export {};

package/dist/hooks/useSuspenseBoundary.js

@@ -6,14 +6,14 @@ export function useSuspenseBoundary(element) {
     const id = useCompatId();
     if (!registry)
         return;
-    if (registry.nodes.has(id))
+    if (registry.registry.nodes.has(id))
         return;
-    const parentId = registry.currentParent;
-    registry.nodes.set(id, {
+    const parentId = registry.parentId;
+    registry.registry.nodes.set(id, {
         id,
         element,
         parent: parentId,
         isBoundary: true,
     });
-    registry.currentParent = id;
+    registry.parentId = id;
 }

package/dist/hooks/useSuspenseFallback.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useSuspenseFallback.d.ts","sourceRoot":"","sources":["../../src/hooks/useSuspenseFallback.ts"],"names":[],"mappings":"AACA,OAAO,EAAmB,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAGhF,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAgBrE"}
+{"version":3,"file":"useSuspenseFallback.d.ts","sourceRoot":"","sources":["../../src/hooks/useSuspenseFallback.ts"],"names":[],"mappings":"AACA,OAAO,EAAmB,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAIhF,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAgBrE"}

package/dist/hooks/useSuspenseFallback.js

@@ -1,18 +1,19 @@
 import { useContext } from "react";
 import { FallbackContext } from "../types/FallbackRegistry";
 import { useCompatId } from "./useCompatId";
+// Depricated hook, core logic changed
 export function useSuspenseFallback(element) {
     const registry = useContext(FallbackContext);
     const id = useCompatId();
     if (!registry)
         return;
-    if (registry.nodes.has(id))
+    if (registry.registry.nodes.has(id))
         return;
-    const parentId = registry.currentParent;
-    registry.nodes.set(id, {
+    const parentId = registry.parentId;
+    registry.registry.nodes.set(id, {
         id,
         element,
         parent: parentId,
     });
-    registry.currentParent = id;
+    registry.parentId = id;
 }

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export { AutoSuspense } from "./components";
 export * from "./hooks";
+export * from "./functions";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC"}

package/dist/index.js

@@ -1,2 +1,3 @@
 export { AutoSuspense } from "./components";
 export * from "./hooks";
+export * from "./functions";

package/dist/types/FallbackRegistry.d.ts

@@ -7,9 +7,12 @@ export type Node = {
 };
 export type FallbackRegistry = {
     nodes: Map<string, Node>;
-    currentParent: string | null;
     prebuild: Map<string, React.ReactElement | React.ComponentType<any>>;
 };
 export type FallbackDescriptor = string | React.ReactElement | React.ComponentType;
-export declare const FallbackContext: React.Context<FallbackRegistry | null>;
+export type FallbackContextValue = {
+    registry: FallbackRegistry;
+    parentId: string | null;
+};
+export declare const FallbackContext: React.Context<FallbackContextValue | null>;
 //# sourceMappingURL=FallbackRegistry.d.ts.map

package/dist/types/FallbackRegistry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FallbackRegistry.d.ts","sourceRoot":"","sources":["../../src/types/FallbackRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,IAAI,GAAG;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,kBAAkB,CAAC;IAC5B,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACzB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC;CACtE,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAC1B,MAAM,GACN,KAAK,CAAC,YAAY,GAClB,KAAK,CAAC,aAAa,CAAC;AAExB,eAAO,MAAM,eAAe,wCAE3B,CAAC"}
+{"version":3,"file":"FallbackRegistry.d.ts","sourceRoot":"","sources":["../../src/types/FallbackRegistry.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,IAAI,GAAG;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,kBAAkB,CAAC;IAC5B,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACzB,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,CAAC;CACtE,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAC1B,MAAM,GACN,KAAK,CAAC,YAAY,GAClB,KAAK,CAAC,aAAa,CAAC;AAExB,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,eAAe,4CAE3B,CAAC"}

package/dist/utils/renderNode.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderNode.d.ts","sourceRoot":"","sources":["../../src/utils/renderNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAIxE,wBAAgB,UAAU,CACxB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,GAAG,CAAC,MAAM,GAAG,IAAI,EAAE,IAAI,EAAE,CAAC,EACpC,QAAQ,EAAE,gBAAgB,GACzB,KAAK,CAAC,YAAY,GAAG,IAAI,CAqB3B"}
+{"version":3,"file":"renderNode.d.ts","sourceRoot":"","sources":["../../src/utils/renderNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,OAAO,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAIxE,wBAAgB,UAAU,CACxB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,GAAG,CAAC,MAAM,GAAG,IAAI,EAAE,IAAI,EAAE,CAAC,EACpC,QAAQ,EAAE,gBAAgB,GACzB,KAAK,CAAC,YAAY,GAAG,IAAI,CAkB3B"}

package/dist/utils/renderNode.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
+import React, { Suspense } from "react";
 import { resolveElement } from "./resolveElement";
-import { AutoSuspense } from "../components";
+import { Block } from "../components/prefabs/prebuilt/Block";
 export function renderNode(node, childMap, registry) {
     const children = childMap.get(node.id) ?? [];
     const resolvedEle = resolveElement(node.element, registry);
@@ -9,7 +9,7 @@ export function renderNode(node, childMap, registry) {
         return null;
     const renderedChildren = children.map((child) => renderNode(child, childMap, registry));
     if (node.isBoundary) {
-        return (_jsx(AutoSuspense, { prefab: Object.fromEntries(registry.prebuild), children: React.cloneElement(resolvedEle, {}, renderedChildren) }, node.id));
+        return (_jsx(Suspense, { fallback: _jsx(Block, {}), children: React.cloneElement(resolvedEle, {}, renderedChildren) }, node.id));
     }
     return React.cloneElement(resolvedEle, { key: node.id }, renderedChildren);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "autosuspense",
-  "version": "0.1.14",
+  "version": "1.0.0",
   "description": "Automatic suspense wiring block for React.",
   "license": "ISC",
   "type": "commonjs",

package/src/components/suspense/AutoSuspense.tsx

@@ -16,21 +16,18 @@ export const AutoSuspense = ({
 }) => {
   const registryRef = React.useRef<FallbackRegistry>({
     nodes: new Map(),
-    currentParent: null,
     prebuild: new Map(Object.entries(prefab)),
   });
 
-  if (registryRef.current === null) {
-    registryRef.current = {
-      nodes: new Map(),
-      currentParent: null,
-      prebuild: new Map(Object.entries(prefab)),
-    };
-  }
   const fallback = <GeneratedFallback registry={registryRef.current} />;
 
   return (
-    <FallbackContext.Provider value={registryRef.current}>
+    <FallbackContext.Provider
+      value={{
+        registry: registryRef.current,
+        parentId: null,
+      }}
+    >
       <React.Suspense fallback={fallback}>{children}</React.Suspense>
     </FallbackContext.Provider>
   );

package/src/functions/Suspend.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { FallbackContext, FallbackDescriptor } from "../types/FallbackRegistry";
+import { useCompatId } from "../hooks/useCompatId";
+
+export function Suspend<T extends object>(
+  Component: React.ComponentType<T>,
+  fallback?: FallbackDescriptor,
+) {
+  return function Wrapped(props: T) {
+    const ctx = React.useContext(FallbackContext);
+    const id = useCompatId();
+
+    if (!ctx) {
+      return <Component {...props} />;
+    }
+
+    const { registry, parentId } = ctx;
+
+    if (!registry.nodes.has(id)) {
+      registry.nodes.set(id, {
+        id,
+        element: fallback ?? (Component as React.ComponentType<any>),
+        parent: parentId,
+      });
+    }
+
+    return (
+      <FallbackContext.Provider value={{ registry, parentId: id }}>
+        <Component {...props} />
+      </FallbackContext.Provider>
+    );
+  };
+}

package/src/functions/index.ts

@@ -0,0 +1,2 @@
+import { Suspend } from "./Suspend";
+export { Suspend };

package/src/hooks/index.ts

@@ -1,3 +1 @@
-import { useSuspenseFallback } from "./useSuspenseFallback";
-import { useSuspenseBoundary } from "./useSuspenseBoundary";
-export { useSuspenseFallback, useSuspenseBoundary };
+export {};

package/src/hooks/useSuspenseBoundary.ts

@@ -7,16 +7,16 @@ export function useSuspenseBoundary(element: FallbackDescriptor): void {
   const id = useCompatId();
 
   if (!registry) return;
-  if (registry.nodes.has(id)) return;
+  if (registry.registry.nodes.has(id)) return;
 
-  const parentId = registry.currentParent;
+  const parentId = registry.parentId;
 
-  registry.nodes.set(id, {
+  registry.registry.nodes.set(id, {
     id,
     element,
     parent: parentId,
     isBoundary: true,
   });
 
-  registry.currentParent = id;
+  registry.parentId = id;
 }

package/src/hooks/useSuspenseFallback.ts

@@ -2,20 +2,21 @@ import { useContext } from "react";
 import { FallbackContext, FallbackDescriptor } from "../types/FallbackRegistry";
 import { useCompatId } from "./useCompatId";
 
+// Depricated hook, core logic changed
 export function useSuspenseFallback(element: FallbackDescriptor): void {
   const registry = useContext(FallbackContext);
   const id = useCompatId();
 
   if (!registry) return;
-  if (registry.nodes.has(id)) return;
+  if (registry.registry.nodes.has(id)) return;
 
-  const parentId = registry.currentParent;
+  const parentId = registry.parentId;
 
-  registry.nodes.set(id, {
+  registry.registry.nodes.set(id, {
     id,
     element,
     parent: parentId,
   });
 
-  registry.currentParent = id;
+  registry.parentId = id;
 }

package/src/index.ts

@@ -1,2 +1,3 @@
 export { AutoSuspense } from "./components";
 export * from "./hooks";
+export * from "./functions";

package/src/types/FallbackRegistry.ts

@@ -9,7 +9,6 @@ export type Node = {
 
 export type FallbackRegistry = {
   nodes: Map<string, Node>;
-  currentParent: string | null;
   prebuild: Map<string, React.ReactElement | React.ComponentType<any>>;
 };
 
@@ -18,6 +17,11 @@ export type FallbackDescriptor =
   | React.ReactElement
   | React.ComponentType;
 
-export const FallbackContext = React.createContext<FallbackRegistry | null>(
+export type FallbackContextValue = {
+  registry: FallbackRegistry;
+  parentId: string | null;
+};
+
+export const FallbackContext = React.createContext<FallbackContextValue | null>(
   null,
 );

package/src/utils/renderNode.tsx

@@ -1,7 +1,7 @@
-import React from "react";
+import React, { Suspense } from "react";
 import type { FallbackRegistry, Node } from "../types/FallbackRegistry";
 import { resolveElement } from "./resolveElement";
-import { AutoSuspense } from "../components";
+import { Block } from "../components/prefabs/prebuilt/Block";
 
 export function renderNode(
   node: Node,
@@ -18,12 +18,9 @@ export function renderNode(
 
   if (node.isBoundary) {
     return (
-      <AutoSuspense
-        key={node.id}
-        prefab={Object.fromEntries(registry.prebuild)}
-      >
+      <Suspense key={node.id} fallback={<Block />}>
         {React.cloneElement(resolvedEle, {}, renderedChildren)}
-      </AutoSuspense>
+      </Suspense>
     );
   }
 

package/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/index.ts","./src/components/index.ts","./src/components/prefabs/defaultprefab.tsx","./src/components/prefabs/prebuilt/block.tsx","./src/components/prefabs/prebuilt/card.tsx","./src/components/prefabs/prebuilt/list.tsx","./src/components/suspense/autosuspense.tsx","./src/components/suspense/generatedfallback.tsx","./src/hooks/index.ts","./src/hooks/usecompatid.ts","./src/hooks/usesuspensefallback.ts","./src/hooks/usesuspenseprovider.ts","./src/types/fallbackregistry.ts","./src/utils/buildtree.ts","./src/utils/rendernode.ts","./src/utils/resolveelement.ts"],"version":"5.9.3"}
+{"root":["./src/index.ts","./src/components/index.ts","./src/components/prefabs/defaultprefab.tsx","./src/components/prefabs/prebuilt/block.tsx","./src/components/prefabs/prebuilt/card.tsx","./src/components/prefabs/prebuilt/list.tsx","./src/components/suspense/autosuspense.tsx","./src/components/suspense/generatedfallback.tsx","./src/functions/suspend.tsx","./src/functions/index.ts","./src/hooks/index.ts","./src/hooks/usecompatid.ts","./src/hooks/usesuspenseboundary.ts","./src/hooks/usesuspensefallback.ts","./src/types/fallbackregistry.ts","./src/utils/buildtree.ts","./src/utils/rendernode.tsx","./src/utils/resolveelement.ts"],"version":"5.6.3"}