autosuspense 0.1.3 → 0.1.5

package/README.md

@@ -1,9 +1,9 @@
-# AutoSupense
+# 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.
 
-## How to use?:
+## How to use:
 1. Install this library
 ```npm i autosuspense```
 

package/dist/components/index.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/components/index.js

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"defaultPrefab.d.ts","sourceRoot":"","sources":["../../../src/components/prefabs/defaultPrefab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,YAAY,CAI5D,CAAC"}

package/dist/components/prefabs/defaultPrefab.js

@@ -0,0 +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, {}),
+};

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

@@ -0,0 +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 {};
+//# sourceMappingURL=Block.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Block.d.ts","sourceRoot":"","sources":["../../../../src/components/prefabs/prebuilt/Block.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,aAAa,CAAC;AAErB,KAAK,UAAU,GAAG;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAMtC,CAAC"}

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

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

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

@@ -0,0 +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 {};
+//# sourceMappingURL=Card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../../src/components/prefabs/prebuilt/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,YAAY,CAAC;AAEpB,KAAK,SAAS,GAAG;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAMpC,CAAC"}

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

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

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

@@ -0,0 +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 {};
+//# sourceMappingURL=List.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../../src/components/prefabs/prebuilt/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,YAAY,CAAC;AAEpB,KAAK,SAAS,GAAG;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAMpC,CAAC"}

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

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

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

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

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

@@ -0,0 +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,CAAC,CAAC;CAC7C,gBAqBA,CAAC"}

package/dist/components/suspense/AutoSuspense.js

@@ -0,0 +1,21 @@
+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(),
+        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 }) }));
+};

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"GeneratedFallback.d.ts","sourceRoot":"","sources":["../../../src/components/suspense/GeneratedFallback.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAIhE,wBAAgB,iBAAiB,CAAC,EAChC,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,gBAAgB,CAAC;CAC5B,eASA"}

package/dist/components/suspense/GeneratedFallback.js

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

package/dist/hooks/useSuspenseProvider.d.ts

@@ -0,0 +1 @@
+//# sourceMappingURL=useSuspenseProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSuspenseProvider.d.ts","sourceRoot":"","sources":["../../src/hooks/useSuspenseProvider.ts"],"names":[],"mappings":""}

package/dist/hooks/useSuspenseProvider.js

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

package/dist/types/FallbackRegistry.d.ts

@@ -1,12 +1,14 @@
-import { type ReactElement } from "react";
+import * as React from "react";
 export type Node = {
     id: string;
-    element: ReactElement;
+    element: FallbackDescriptor;
     parent: string | null;
 };
 export type FallbackRegistry = {
     nodes: Map<string, Node>;
     currentParent: string | null;
+    prebuild: Map<string, React.ReactElement | React.ComponentType<any>>;
 };
-export declare const FallbackContext: import("react").Context<FallbackRegistry | null>;
+export type FallbackDescriptor = string | React.ReactElement | React.ComponentType;
+export declare const FallbackContext: React.Context<FallbackRegistry | 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,EAAiB,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAEzD,MAAM,MAAM,IAAI,GAAG;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,YAAY,CAAC;IACtB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACzB,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B,CAAC;AAEF,eAAO,MAAM,eAAe,kDAA+C,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;CACvB,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"}

package/dist/types/FallbackRegistry.js

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

package/dist/utils/renderNode.d.ts

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

@@ -1 +1 @@
-{"version":3,"file":"renderNode.d.ts","sourceRoot":"","sources":["../../src/utils/renderNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAEtD,wBAAgB,UAAU,CACxB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,GAAG,CAAC,MAAM,GAAG,IAAI,EAAE,IAAI,EAAE,CAAC,GACnC,KAAK,CAAC,YAAY,CAQpB"}
+{"version":3,"file":"renderNode.d.ts","sourceRoot":"","sources":["../../src/utils/renderNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,2BAA2B,CAAC;AAGxE,wBAAgB,UAAU,CAExB,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,CAU3B"}

package/dist/utils/renderNode.js

@@ -1,5 +1,9 @@
 import React from "react";
-export function renderNode(node, childMap) {
+import { resolveElement } from "./resolveElement";
+export function renderNode(node, childMap, registry) {
     const children = childMap.get(node.id) ?? [];
-    return React.cloneElement(node.element, undefined, children.map((child) => renderNode(child, childMap)));
+    const resolvedEle = resolveElement(node.element, registry);
+    if (!resolvedEle)
+        return null;
+    return React.cloneElement(resolvedEle, { key: node.id }, children.map((child) => renderNode(child, childMap, registry)));
 }

package/dist/utils/resolveElement.d.ts

@@ -0,0 +1,4 @@
+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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolveElement.d.ts","sourceRoot":"","sources":["../../src/utils/resolveElement.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,kBAAkB,EAClB,gBAAgB,EACjB,MAAM,2BAA2B,CAAC;AAEnC,wBAAgB,cAAc,CAC5B,UAAU,EAAE,kBAAkB,EAC9B,QAAQ,EAAE,gBAAgB,GACzB,KAAK,CAAC,YAAY,GAAG,IAAI,CAsB3B"}

package/dist/utils/resolveElement.js

@@ -0,0 +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;
+}

package/package.json

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

package/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/index.ts","./src/components/autosuspense.tsx","./src/components/generatedfallback.tsx","./src/components/index.ts","./src/hooks/index.ts","./src/hooks/usecompatid.ts","./src/hooks/usesuspensefallback.ts","./src/types/fallbackregistry.ts","./src/utils/buildtree.ts","./src/utils/rendernode.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/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"}