autosuspense 0.1.2 → 0.1.4

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.2",
+  "version": "0.1.4",
   "description": "Automatic suspense wiring block for React.",
   "license": "ISC",
   "type": "commonjs",

package/src/components/index.ts

@@ -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/src/components/prefabs/defaultPrefab.tsx

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { Block } from "./prebuilt/Block";
+import { Card } from "./prebuilt/Card";
+import { List } from "./prebuilt/List";
+
+export const defaultPrefab: Record<string, React.ReactElement> = {
+  block: <Block />,
+  card: <Card />,
+  list: <List />,
+};

package/src/components/prefabs/prebuilt/Block.css

@@ -0,0 +1,42 @@
+.as-block {
+  width: 100%;
+  min-height: var(--as-block-min-height, 96px);
+  border-radius: var(--as-block-radius, 12px);
+  box-sizing: border-box;
+
+  background: var(
+    --as-block-bg,
+    linear-gradient(
+      90deg,
+      var(--as-skeleton-base, #ececec) 25%,
+      var(--as-skeleton-highlight, #f5f5f5) 37%,
+      var(--as-skeleton-base, #ececec) 63%
+    )
+  );
+
+  background-size: 400% 100%;
+  animation:
+    as-shimmer 1.4s ease infinite,
+    as-pulse 2s ease-in-out infinite;
+}
+
+@keyframes as-shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+
+@keyframes as-pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.85;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/src/components/prefabs/prebuilt/Block.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import "./Block.css";
+
+type BlockProps = {
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export const Block: React.FC<BlockProps> = ({ children, className, style }) => {
+  return (
+    <div className={`as-block ${className ?? ""}`} style={style} data-as-block>
+      {children}
+    </div>
+  );
+};

package/src/components/prefabs/prebuilt/Card.css

@@ -0,0 +1,45 @@
+.as-card {
+  width: 100%;
+  min-height: var(--as-card-min-height, 120px);
+  padding: var(--as-card-padding, 16px);
+  box-sizing: border-box;
+
+  border-radius: var(--as-card-radius, 12px);
+
+  background: var(
+    --as-card-bg,
+    linear-gradient(
+      90deg,
+      var(--as-skeleton-base, #ececec) 25%,
+      var(--as-skeleton-highlight, #f5f5f5) 37%,
+      var(--as-skeleton-base, #ececec) 63%
+    )
+  );
+
+  background-size: 400% 100%;
+  animation:
+    as-shimmer 1.4s ease infinite,
+    as-pulse 2s ease-in-out infinite;
+}
+
+/* reuse same animations */
+@keyframes as-shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+
+@keyframes as-pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.85;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/src/components/prefabs/prebuilt/Card.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import "./Card.css";
+
+type CardProps = {
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export const Card: React.FC<CardProps> = ({ children, className, style }) => {
+  return (
+    <div className={`as-card ${className ?? ""}`} style={style} data-as-card>
+      {children}
+    </div>
+  );
+};

package/src/components/prefabs/prebuilt/List.css

@@ -0,0 +1,48 @@
+.as-list {
+  width: 100%;
+  min-height: var(--as-list-min-height, 160px);
+  padding: var(--as-list-padding, 12px);
+  box-sizing: border-box;
+
+  border-radius: var(--as-list-radius, 8px);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--as-list-gap, 12px);
+
+  background: var(
+    --as-list-bg,
+    linear-gradient(
+      90deg,
+      var(--as-skeleton-base, #ececec) 25%,
+      var(--as-skeleton-highlight, #f5f5f5) 37%,
+      var(--as-skeleton-base, #ececec) 63%
+    )
+  );
+
+  background-size: 400% 100%;
+  animation:
+    as-shimmer 1.4s ease infinite,
+    as-pulse 2s ease-in-out infinite;
+}
+
+@keyframes as-shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+
+@keyframes as-pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.85;
+  }
+  100% {
+    opacity: 1;
+  }
+}

package/src/components/prefabs/prebuilt/List.tsx

@@ -0,0 +1,16 @@
+import * as React from "react";
+import "./List.css";
+
+type ListProps = {
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export const List: React.FC<ListProps> = ({ children, className, style }) => {
+  return (
+    <div className={`as-list ${className ?? ""}`} style={style} data-as-list>
+      {children}
+    </div>
+  );
+};

package/src/components/{AutoSuspense.tsx → suspense/AutoSuspense.tsx}

@@ -1,20 +1,30 @@
 import * as React from "react";
+
+import { GeneratedFallback } from "./GeneratedFallback";
 import {
   FallbackContext,
-  type FallbackRegistry,
-} from "../types/FallbackRegistry";
-import { GeneratedFallback } from "./GeneratedFallback";
+  FallbackRegistry,
+} from "../../types/FallbackRegistry";
+import { defaultPrefab } from "../prefabs/defaultPrefab";
 
-export const AutoSuspense = ({ children }: { children: React.ReactNode }) => {
+export const AutoSuspense = ({
+  children,
+  prefab = defaultPrefab,
+}: {
+  children: React.ReactNode;
+  prefab?: Record<string, React.ReactElement>;
+}) => {
   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} />;

package/src/components/{GeneratedFallback.tsx → suspense/GeneratedFallback.tsx}

@@ -1,7 +1,7 @@
 import * as React from "react";
-import type { FallbackRegistry } from "../types/FallbackRegistry";
-import { buildTree } from "../utils/buildTree";
-import { renderNode } from "../utils/renderNode";
+import { FallbackRegistry } from "../../types/FallbackRegistry";
+import { buildTree } from "../../utils/buildTree";
+import { renderNode } from "../../utils/renderNode";
 
 export function GeneratedFallback({
   registry,
@@ -13,7 +13,7 @@ export function GeneratedFallback({
 
   return (
     <React.Fragment>
-      {roots.map((node) => renderNode(node, tree))}
+      {roots.map((node) => renderNode(node, tree, registry))}
     </React.Fragment>
   );
 }

package/src/types/FallbackRegistry.ts

@@ -1,14 +1,22 @@
-import { createContext, 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 const FallbackContext = createContext<FallbackRegistry | null>(null);
+export type FallbackDescriptor =
+  | string
+  | React.ReactElement
+  | React.ComponentType;
+
+export const FallbackContext = React.createContext<FallbackRegistry | null>(
+  null,
+);

package/src/utils/renderNode.ts

@@ -1,15 +1,20 @@
 import React from "react";
-import type { Node } from "../types/FallbackRegistry";
+import type { FallbackRegistry, Node } from "../types/FallbackRegistry";
+import { resolveElement } from "./resolveElement";
 
 export function renderNode(
+  
   node: Node,
   childMap: Map<string | null, Node[]>,
-): React.ReactElement {
+  registry: FallbackRegistry,
+): React.ReactElement | null {
   const children = childMap.get(node.id) ?? [];
+  const resolvedEle = resolveElement(node.element, registry);
+  if (!resolvedEle) return null;
 
   return React.cloneElement(
-    node.element,
-    undefined,
-    children.map((child) => renderNode(child, childMap)),
+    resolvedEle,
+    { key: node.id },
+    children.map((child) => renderNode(child, childMap, registry)),
   );
 }

package/src/utils/resolveElement.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+import {
+  FallbackDescriptor,
+  FallbackRegistry,
+} from "../types/FallbackRegistry";
+
+export function resolveElement(
+  descriptor: FallbackDescriptor,
+  registry: FallbackRegistry,
+): React.ReactElement | null {
+  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 as React.ComponentType<any>;
+    return React.createElement(Component);
+  }
+
+  return null;
+}

package/tsconfig.json

@@ -1,9 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2020",
-    "module": "CommonJS",
-    "jsx": "react",
-    "lib": ["DOM", "ES2019"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+
+    "jsx": "react-jsx",
+    "lib": ["DOM", "ES2020"],
     "types": ["react"],
 
     "declaration": true,
@@ -14,8 +16,6 @@
     "rootDir": "./src",
 
     "strict": true,
-
-    "moduleResolution": "Bundler",
     "esModuleInterop": true,
     "skipLibCheck": true
   },

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"}