autosuspense 1.0.0 → 1.0.1

package/README.md

@@ -3,6 +3,7 @@ AutoSuspense is a lightweight React utility that automatically composes Suspense
 
 It lets you define fallback UI at the component level, while a parent ```<AutoSuspense>``` boundary handles rendering everything correctly.
 
+---
 ## Why AutoSuspense?:
 
 React Suspense solves async rendering, but fallback composition quickly becomes messy:
@@ -38,6 +39,7 @@ function Page() {
 
 export default Suspend(Page, <div>Loading page...</div>);
 ```
+---
 
 ## Installation:
 ```npm install autosuspense```
@@ -67,31 +69,76 @@ const UserCard = () => {
 export default Suspend(UserCard, <div>Loading user...</div>);
 ```
 
-3. Nested components automatically compose
+- Nested components automatically compose
 ```
 const Parent = () => <Child />;
 
-export default Suspend(Parent, <div>Big Loader...</div>);
+export default Suspend(Parent, <div>Outer Loader...</div>);
 const Child = () => {
   const data = resource.read();
   return <div>{data}</div>;
 };
 
+--- 
+
+
 export default Suspend(Child, <div>Inner Loader...</div>);
 ```
 👉 Resulting fallback:
 ```
-Big Loader...
+Outer Loader...
   Inner Loader...
 ```
-No manual fallback nesting required.
+
+## Using Prefabs (Reusable Fallbacks)
+Instead of passing JSX everywhere, define reusable fallbacks once.
+
+- Define prefabs at the root
+```
+import { AutoSuspense } from "autosuspense";
+import PageSkeleton from "./skeletons/PageSkeleton";
+import CardSkeleton from "./skeletons/CardSkeleton";
+
+function App() {
+  return (
+    <AutoSuspense
+      prefab={{
+        page: PageSkeleton,
+        card: CardSkeleton,
+      }}
+    >
+      <Page />
+    </AutoSuspense>
+  );
+}
+🎯 Use prefab keys in components
+import { Suspend } from "autosuspense";
+
+function Page() {
+  return <Feed />;
+}
+
+export default Suspend(Page, "page");
+function Feed() {
+  const data = resource.read();
+  return <div>{data}</div>;
+}
+
+export default Suspend(Feed, "card");
+```
+- Resulting fallback UI
+```
+PageSkeleton
+  CardSkeleton
+```
 
 ## Core Idea:
-- Wrap a subtree with <AutoSuspense>.
+- 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:
@@ -99,8 +146,6 @@ You can provide fallbacks in multiple ways:
 1. JSX element:
 ```
 Suspend(Component, <Skeleton />);
-Component
-Suspend(Component, SkeletonComponent);
 ```
 
 2. Component: 
@@ -113,4 +158,6 @@ Suspend(Component, SkeletonComponent);
 Suspend(Component, SkeletonComponent);
 ```
 
-AutoSuspense does not replace Suspense. It enhances fallback composition.
+---
+
+AutoSuspense aims to make and enhance fallback creation and make it's maintainence easier. 

package/package.json

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

package/src/components/prefabs/{defaultPrefab.tsx → defaultFallbacks.tsx}

@@ -3,7 +3,7 @@ import { Block } from "./prebuilt/Block";
 import { Card } from "./prebuilt/Card";
 import { List } from "./prebuilt/List";
 
-export const defaultPrefab: Record<string, React.ReactElement> = {
+export const defaultFallbacks: Record<string, React.ReactElement> = {
   block: <Block />,
   card: <Card />,
   list: <List />,

package/src/components/suspense/AutoSuspense.tsx

@@ -5,18 +5,18 @@ import {
   FallbackContext,
   FallbackRegistry,
 } from "../../types/FallbackRegistry";
-import { defaultPrefab } from "../prefabs/defaultPrefab";
+import { defaultFallbacks } from "../prefabs/defaultFallbacks";
 
 export const AutoSuspense = ({
   children,
-  prefab = defaultPrefab,
+  fallbacks = defaultFallbacks,
 }: {
   children: React.ReactNode;
-  prefab?: Record<string, React.ReactElement | React.ComponentType<any>>;
+  fallbacks?: Record<string, React.ReactElement | React.ComponentType<any>>;
 }) => {
   const registryRef = React.useRef<FallbackRegistry>({
     nodes: new Map(),
-    prebuild: new Map(Object.entries(prefab)),
+    prebuild: new Map(Object.entries(fallbacks)),
   });
 
   const fallback = <GeneratedFallback registry={registryRef.current} />;