autosuspense 1.0.1 → 1.0.2

package/README.md

@@ -1,4 +1,4 @@
-# AutoSupense Beta
+# AutoSupense
 AutoSuspense is a lightweight React utility that automatically composes Suspense fallback UI based on your component tree without manually wiring nested ```<Suspense>``` boundaries.
 
 It lets you define fallback UI at the component level, while a parent ```<AutoSuspense>``` boundary handles rendering everything correctly.
@@ -79,9 +79,6 @@ const Child = () => {
   return <div>{data}</div>;
 };
 
---- 
-
-
 export default Suspend(Child, <div>Inner Loader...</div>);
 ```
 👉 Resulting fallback:
@@ -90,8 +87,8 @@ Outer Loader...
   Inner Loader...
 ```
 
-## Using Prefabs (Reusable Fallbacks)
-Instead of passing JSX everywhere, define reusable fallbacks once.
+## Using fallback maps (Per Suspense Reusable Fallbacks)
+Instead of passing JSX everywhere, define reusable fallbacks once based required design. Use this to compose multiple fallback designs in the same component.
 
 - Define prefabs at the root
 ```
@@ -102,7 +99,7 @@ import CardSkeleton from "./skeletons/CardSkeleton";
 function App() {
   return (
     <AutoSuspense
-      prefab={{
+      fallbacks={{
         page: PageSkeleton,
         card: CardSkeleton,
       }}
@@ -111,7 +108,11 @@ function App() {
     </AutoSuspense>
   );
 }
-🎯 Use prefab keys in components
+```
+
+## Use fallback map keys in components:
+
+```
 import { Suspend } from "autosuspense";
 
 function Page() {
@@ -126,7 +127,9 @@ function Feed() {
 
 export default Suspend(Feed, "card");
 ```
-- Resulting fallback UI
+
+Resulting fallback UI
+
 ```
 PageSkeleton
   CardSkeleton
@@ -137,13 +140,14 @@ PageSkeleton
 - Wrap components with Suspend().
 - Each component declares its fallback.
 - AutoSuspense automatically composes the fallback UI tree without explicit maintaince and wiring.
+- Fallback maps automatically help compose UI changes without changing the actual Component.
 
 ---
 ## Fallback Options:
 
 You can provide fallbacks in multiple ways:
-
 1. JSX element:
+
 ```
 Suspend(Component, <Skeleton />);
 ```
@@ -154,10 +158,11 @@ Suspend(Component, SkeletonComponent);
 ```
 
 3. String:
+
+
 ```
 Suspend(Component, SkeletonComponent);
 ```
 
 ---
-
-AutoSuspense aims to make and enhance fallback creation and make it's maintainence easier. 
+AutoSuspense aims to make and enhance fallback creation and make it's maintainence easier.

package/dist/components/index.d.ts

@@ -1,4 +1,4 @@
-import { AutoSuspense } from "./suspense/AutoSuspense";
-import { GeneratedFallback } from "./suspense/GeneratedFallback";
-export { AutoSuspense, GeneratedFallback };
+import { AutoSuspense } from "./suspense/AutoSuspense";
+import { GeneratedFallback } from "./suspense/GeneratedFallback";
+export { AutoSuspense, GeneratedFallback };
 //# sourceMappingURL=index.d.ts.map

package/dist/components/index.js

@@ -1,3 +1,3 @@
-import { AutoSuspense } from "./suspense/AutoSuspense";
-import { GeneratedFallback } from "./suspense/GeneratedFallback";
-export { AutoSuspense, GeneratedFallback };
+import { AutoSuspense } from "./suspense/AutoSuspense";
+import { GeneratedFallback } from "./suspense/GeneratedFallback";
+export { AutoSuspense, GeneratedFallback };

package/dist/components/prefabs/defaultPrefab.d.ts

@@ -1,3 +1,3 @@
-import * as React from "react";
-export declare const defaultPrefab: Record<string, React.ReactElement>;
+import * as React from "react";
+export declare const defaultPrefab: Record<string, React.ReactElement>;
 //# sourceMappingURL=defaultPrefab.d.ts.map

package/dist/components/prefabs/defaultPrefab.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Block } from "./prebuilt/Block";
-import { Card } from "./prebuilt/Card";
-import { List } from "./prebuilt/List";
-export const defaultPrefab = {
-    block: _jsx(Block, {}),
-    card: _jsx(Card, {}),
-    list: _jsx(List, {}),
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Block } from "./prebuilt/Block";
+import { Card } from "./prebuilt/Card";
+import { List } from "./prebuilt/List";
+export const defaultPrefab = {
+    block: _jsx(Block, {}),
+    card: _jsx(Card, {}),
+    list: _jsx(List, {}),
+};

package/dist/components/prefabs/prebuilt/Block.d.ts

@@ -1,10 +1,10 @@
-import * as React from "react";
-import "./Block.css";
-type BlockProps = {
-    children?: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
-};
-export declare const Block: React.FC<BlockProps>;
-export {};
+import * as React from "react";
+import "./Block.css";
+type BlockProps = {
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+};
+export declare const Block: React.FC<BlockProps>;
+export {};
 //# sourceMappingURL=Block.d.ts.map

package/dist/components/prefabs/prebuilt/Block.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./Block.css";
-export const Block = ({ children, className, style }) => {
-    return (_jsx("div", { className: `as-block ${className ?? ""}`, style: style, "data-as-block": true, children: children }));
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./Block.css";
+export const Block = ({ children, className, style }) => {
+    return (_jsx("div", { className: `as-block ${className ?? ""}`, style: style, "data-as-block": true, children: children }));
+};

package/dist/components/prefabs/prebuilt/Card.d.ts

@@ -1,10 +1,10 @@
-import * as React from "react";
-import "./Card.css";
-type CardProps = {
-    children?: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
-};
-export declare const Card: React.FC<CardProps>;
-export {};
+import * as React from "react";
+import "./Card.css";
+type CardProps = {
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+};
+export declare const Card: React.FC<CardProps>;
+export {};
 //# sourceMappingURL=Card.d.ts.map

package/dist/components/prefabs/prebuilt/Card.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./Card.css";
-export const Card = ({ children, className, style }) => {
-    return (_jsx("div", { className: `as-card ${className ?? ""}`, style: style, "data-as-card": true, children: children }));
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./Card.css";
+export const Card = ({ children, className, style }) => {
+    return (_jsx("div", { className: `as-card ${className ?? ""}`, style: style, "data-as-card": true, children: children }));
+};

package/dist/components/prefabs/prebuilt/List.d.ts

@@ -1,10 +1,10 @@
-import * as React from "react";
-import "./List.css";
-type ListProps = {
-    children?: React.ReactNode;
-    className?: string;
-    style?: React.CSSProperties;
-};
-export declare const List: React.FC<ListProps>;
-export {};
+import * as React from "react";
+import "./List.css";
+type ListProps = {
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+};
+export declare const List: React.FC<ListProps>;
+export {};
 //# sourceMappingURL=List.d.ts.map

package/dist/components/prefabs/prebuilt/List.js

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./List.css";
-export const List = ({ children, className, style }) => {
-    return (_jsx("div", { className: `as-list ${className ?? ""}`, style: style, "data-as-list": true, children: children }));
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./List.css";
+export const List = ({ children, className, style }) => {
+    return (_jsx("div", { className: `as-list ${className ?? ""}`, style: style, "data-as-list": true, children: children }));
+};

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

@@ -1,6 +1,6 @@
-import * as React from "react";
-export declare const AutoSuspense: ({ children, prefab, }: {
-    children: React.ReactNode;
-    prefab?: Record<string, React.ReactElement | React.ComponentType<any>>;
-}) => JSX.Element;
+import * as React from "react";
+export declare const AutoSuspense: ({ children, prefab, }: {
+    children: React.ReactNode;
+    prefab?: Record<string, React.ReactElement | React.ComponentType<any>>;
+}) => JSX.Element;
 //# sourceMappingURL=AutoSuspense.d.ts.map

package/dist/components/suspense/AutoSuspense.js

@@ -1,16 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { GeneratedFallback } from "./GeneratedFallback";
-import { FallbackContext, } from "../../types/FallbackRegistry";
-import { defaultPrefab } from "../prefabs/defaultPrefab";
-export const AutoSuspense = ({ children, prefab = defaultPrefab, }) => {
-    const registryRef = React.useRef({
-        nodes: new Map(),
-        prebuild: new Map(Object.entries(prefab)),
-    });
-    const fallback = _jsx(GeneratedFallback, { registry: registryRef.current });
-    return (_jsx(FallbackContext.Provider, { value: {
-            registry: registryRef.current,
-            parentId: null,
-        }, children: _jsx(React.Suspense, { fallback: fallback, children: children }) }));
-};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { GeneratedFallback } from "./GeneratedFallback";
+import { FallbackContext, } from "../../types/FallbackRegistry";
+import { defaultPrefab } from "../prefabs/defaultPrefab";
+export const AutoSuspense = ({ children, prefab = defaultPrefab, }) => {
+    const registryRef = React.useRef({
+        nodes: new Map(),
+        prebuild: new Map(Object.entries(prefab)),
+    });
+    const fallback = _jsx(GeneratedFallback, { registry: registryRef.current });
+    return (_jsx(FallbackContext.Provider, { value: {
+            registry: registryRef.current,
+            parentId: null,
+        }, children: _jsx(React.Suspense, { fallback: fallback, children: children }) }));
+};

package/dist/components/suspense/GeneratedFallback.d.ts

@@ -1,5 +1,5 @@
-import { FallbackRegistry } from "../../types/FallbackRegistry";
-export declare function GeneratedFallback({ registry, }: {
-    registry: FallbackRegistry;
-}): JSX.Element;
+import { FallbackRegistry } from "../../types/FallbackRegistry";
+export declare function GeneratedFallback({ registry, }: {
+    registry: FallbackRegistry;
+}): JSX.Element;
 //# sourceMappingURL=GeneratedFallback.d.ts.map

package/dist/components/suspense/GeneratedFallback.js

@@ -1,9 +1,9 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { buildTree } from "../../utils/buildTree";
-import { renderNode } from "../../utils/renderNode";
-export function GeneratedFallback({ registry, }) {
-    const tree = buildTree(registry.nodes);
-    const roots = tree.get(null) ?? [];
-    return (_jsx(React.Fragment, { children: roots.map((node) => renderNode(node, tree, registry)) }));
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { buildTree } from "../../utils/buildTree";
+import { renderNode } from "../../utils/renderNode";
+export function GeneratedFallback({ registry, }) {
+    const tree = buildTree(registry.nodes);
+    const roots = tree.get(null) ?? [];
+    return (_jsx(React.Fragment, { children: roots.map((node) => renderNode(node, tree, registry)) }));
+}

package/dist/functions/Suspend.d.ts

@@ -1,4 +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;
+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.js

@@ -1,22 +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 }) }));
-    };
-}
+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

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

package/dist/functions/index.js

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

package/dist/hooks/index.d.ts

@@ -1,2 +1,2 @@
-export {};
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.js

@@ -1 +1 @@
-export {};
+export {};

package/dist/hooks/useSuspenseBoundary.d.ts

@@ -1,3 +1,3 @@
-import { FallbackDescriptor } from "../types/FallbackRegistry";
-export declare function useSuspenseBoundary(element: FallbackDescriptor): void;
+import { FallbackDescriptor } from "../types/FallbackRegistry";
+export declare function useSuspenseBoundary(element: FallbackDescriptor): void;
 //# sourceMappingURL=useSuspenseBoundary.d.ts.map

package/dist/hooks/useSuspenseBoundary.js

@@ -1,19 +1,19 @@
-import { useContext } from "react";
-import { FallbackContext } from "../types/FallbackRegistry";
-import { useCompatId } from "./useCompatId";
-export function useSuspenseBoundary(element) {
-    const registry = useContext(FallbackContext);
-    const id = useCompatId();
-    if (!registry)
-        return;
-    if (registry.registry.nodes.has(id))
-        return;
-    const parentId = registry.parentId;
-    registry.registry.nodes.set(id, {
-        id,
-        element,
-        parent: parentId,
-        isBoundary: true,
-    });
-    registry.parentId = id;
-}
+import { useContext } from "react";
+import { FallbackContext } from "../types/FallbackRegistry";
+import { useCompatId } from "./useCompatId";
+export function useSuspenseBoundary(element) {
+    const registry = useContext(FallbackContext);
+    const id = useCompatId();
+    if (!registry)
+        return;
+    if (registry.registry.nodes.has(id))
+        return;
+    const parentId = registry.parentId;
+    registry.registry.nodes.set(id, {
+        id,
+        element,
+        parent: parentId,
+        isBoundary: true,
+    });
+    registry.parentId = id;
+}

package/dist/hooks/useSuspenseFallback.d.ts

@@ -1,3 +1,3 @@
-import { FallbackDescriptor } from "../types/FallbackRegistry";
-export declare function useSuspenseFallback(element: FallbackDescriptor): void;
+import { FallbackDescriptor } from "../types/FallbackRegistry";
+export declare function useSuspenseFallback(element: FallbackDescriptor): void;
 //# sourceMappingURL=useSuspenseFallback.d.ts.map

package/dist/hooks/useSuspenseFallback.js

@@ -1,19 +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.registry.nodes.has(id))
-        return;
-    const parentId = registry.parentId;
-    registry.registry.nodes.set(id, {
-        id,
-        element,
-        parent: parentId,
-    });
-    registry.parentId = id;
-}
+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.registry.nodes.has(id))
+        return;
+    const parentId = registry.parentId;
+    registry.registry.nodes.set(id, {
+        id,
+        element,
+        parent: parentId,
+    });
+    registry.parentId = id;
+}

package/dist/hooks/useSuspenseProvider.js

@@ -1 +1 @@
-"use strict";
+"use strict";

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/types/FallbackRegistry.d.ts

@@ -1,18 +1,18 @@
-import * as React from "react";
-export type Node = {
-    id: string;
-    element: FallbackDescriptor;
-    parent: string | null;
-    isBoundary?: boolean;
-};
-export type FallbackRegistry = {
-    nodes: Map<string, Node>;
-    prebuild: Map<string, React.ReactElement | React.ComponentType<any>>;
-};
-export type FallbackDescriptor = string | React.ReactElement | React.ComponentType;
-export type FallbackContextValue = {
-    registry: FallbackRegistry;
-    parentId: string | null;
-};
-export declare const FallbackContext: React.Context<FallbackContextValue | null>;
+import * as React from "react";
+export type Node = {
+    id: string;
+    element: FallbackDescriptor;
+    parent: string | null;
+    isBoundary?: boolean;
+};
+export type FallbackRegistry = {
+    nodes: Map<string, Node>;
+    prebuild: Map<string, React.ReactElement | React.ComponentType<any>>;
+};
+export type FallbackDescriptor = string | React.ReactElement | React.ComponentType;
+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.js

@@ -1,2 +1,2 @@
-import * as React from "react";
-export const FallbackContext = React.createContext(null);
+import * as React from "react";
+export const FallbackContext = React.createContext(null);

package/dist/types/PrefabFactory.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-export type PrefabFactory = (props: {
-    children?: React.ReactNode;
-}) => React.ReactElement;
+import * as React from "react";
+export type PrefabFactory = (props: {
+    children?: React.ReactNode;
+}) => React.ReactElement;
 //# sourceMappingURL=PrefabFactory.d.ts.map

package/dist/types/PrefabFactory.js

@@ -1 +1 @@
-export {};
+export {};

package/dist/utils/renderNode.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
-import type { FallbackRegistry, Node } from "../types/FallbackRegistry";
-export declare function renderNode(node: Node, childMap: Map<string | null, Node[]>, registry: FallbackRegistry): React.ReactElement | null;
+import React from "react";
+import type { FallbackRegistry, Node } from "../types/FallbackRegistry";
+export declare function renderNode(node: Node, childMap: Map<string | null, Node[]>, registry: FallbackRegistry): React.ReactElement | null;
 //# sourceMappingURL=renderNode.d.ts.map

package/dist/utils/renderNode.js

@@ -1,15 +1,15 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { Suspense } from "react";
-import { resolveElement } from "./resolveElement";
-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);
-    if (!resolvedEle)
-        return null;
-    const renderedChildren = children.map((child) => renderNode(child, childMap, registry));
-    if (node.isBoundary) {
-        return (_jsx(Suspense, { fallback: _jsx(Block, {}), children: React.cloneElement(resolvedEle, {}, renderedChildren) }, node.id));
-    }
-    return React.cloneElement(resolvedEle, { key: node.id }, renderedChildren);
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { Suspense } from "react";
+import { resolveElement } from "./resolveElement";
+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);
+    if (!resolvedEle)
+        return null;
+    const renderedChildren = children.map((child) => renderNode(child, childMap, registry));
+    if (node.isBoundary) {
+        return (_jsx(Suspense, { fallback: _jsx(Block, {}), children: React.cloneElement(resolvedEle, {}, renderedChildren) }, node.id));
+    }
+    return React.cloneElement(resolvedEle, { key: node.id }, renderedChildren);
+}

package/dist/utils/resolveElement.d.ts

@@ -1,4 +1,4 @@
-import * as React from "react";
-import { FallbackDescriptor, FallbackRegistry } from "../types/FallbackRegistry";
-export declare function resolveElement(descriptor: FallbackDescriptor, registry: FallbackRegistry): React.ReactElement | null;
+import * as React from "react";
+import { FallbackDescriptor, FallbackRegistry } from "../types/FallbackRegistry";
+export declare function resolveElement(descriptor: FallbackDescriptor, registry: FallbackRegistry): React.ReactElement | null;
 //# sourceMappingURL=resolveElement.d.ts.map

package/dist/utils/resolveElement.js

@@ -1,20 +1,20 @@
-import * as React from "react";
-export function resolveElement(descriptor, registry) {
-    if (React.isValidElement(descriptor)) {
-        return descriptor;
-    }
-    if (typeof descriptor === "function") {
-        return React.createElement(descriptor);
-    }
-    if (typeof descriptor === "string") {
-        const value = registry.prebuild.get(descriptor);
-        if (!value)
-            return null;
-        if (React.isValidElement(value)) {
-            return value;
-        }
-        const Component = value;
-        return React.createElement(Component);
-    }
-    return null;
-}
+import * as React from "react";
+export function resolveElement(descriptor, registry) {
+    if (React.isValidElement(descriptor)) {
+        return descriptor;
+    }
+    if (typeof descriptor === "function") {
+        return React.createElement(descriptor);
+    }
+    if (typeof descriptor === "string") {
+        const value = registry.prebuild.get(descriptor);
+        if (!value)
+            return null;
+        if (React.isValidElement(value)) {
+            return value;
+        }
+        const Component = value;
+        return React.createElement(Component);
+    }
+    return null;
+}

package/package.json

@@ -1,42 +1,42 @@
-{
-  "name": "autosuspense",
-  "version": "1.0.1",
-  "description": "Automatic suspense wiring block for React.",
-  "license": "ISC",
-  "type": "commonjs",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "author": {
-    "name": "Paper-Bag-dev",
-    "email": "vikalpsh1234@gmail.com",
-    "url": "https://github.com/Paper-Bag-dev"
-  },
-  "keywords": [
-    "react",
-    "react-suspense",
-    "suspense",
-    "react-hooks",
-    "fallback",
-    "react-library",
-    "ui",
-    "async",
-    "concurrent",
-    "typescript"
-  ],
-  "scripts": {
-    "build": "tsc && copyfiles -u 1 \"src/**/*.css\" dist",
-    "test:build": "node dist/index.js"
-  },
-  "peerDependencies": {
-    "react": ">=16.8",
-    "react-dom": ">=16.8"
-  },
-  "devDependencies": {
-    "@types/react": "^16.14.68",
-    "@types/react-dom": "^16.9.25",
-    "copyfiles": "^2.4.1",
-    "react": "^16.8.0",
-    "react-dom": "^16.8.0",
-    "typescript": "^5.3.0"
-  }
-}
+{
+  "name": "autosuspense",
+  "version": "1.0.2",
+  "description": "Automatic suspense wiring block for React.",
+  "license": "ISC",
+  "type": "commonjs",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "author": {
+    "name": "Paper-Bag-dev",
+    "email": "vikalpsh1234@gmail.com",
+    "url": "https://github.com/Paper-Bag-dev"
+  },
+  "keywords": [
+    "react",
+    "react-suspense",
+    "suspense",
+    "react-hooks",
+    "fallback",
+    "react-library",
+    "ui",
+    "async",
+    "concurrent",
+    "typescript"
+  ],
+  "scripts": {
+    "build": "tsc && copyfiles -u 1 \"src/**/*.css\" dist",
+    "test:build": "node dist/index.js"
+  },
+  "peerDependencies": {
+    "react": ">=16.8",
+    "react-dom": ">=16.8"
+  },
+  "devDependencies": {
+    "@types/react": "^16.14.68",
+    "@types/react-dom": "^16.9.25",
+    "copyfiles": "^2.4.1",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
+    "typescript": "^5.3.0"
+  }
+}