autosuspense 0.1.13 → 0.1.14

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>;
+    prefab?: Record<string, React.ReactElement | React.ComponentType<any>>;
 }) => JSX.Element;
 //# sourceMappingURL=AutoSuspense.d.ts.map

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;AAU/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"}
+{"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"}

package/dist/hooks/index.d.ts

@@ -1,3 +1,4 @@
 import { useSuspenseFallback } from "./useSuspenseFallback";
-export { useSuspenseFallback };
+import { useSuspenseBoundary } from "./useSuspenseBoundary";
+export { useSuspenseFallback, useSuspenseBoundary };
 //# 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,CAAC"}
+{"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"}

package/dist/hooks/index.js

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

package/dist/hooks/useSuspenseBoundary.d.ts

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

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

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

package/dist/hooks/useSuspenseBoundary.js

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

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 export { AutoSuspense } from "./components";
-export { useSuspenseFallback } from "./hooks";
+export * from "./hooks";
 //# 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,OAAO,EAAE,mBAAmB,EAAE,MAAM,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"}

package/dist/index.js

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

package/dist/types/FallbackRegistry.d.ts

@@ -3,6 +3,7 @@ export type Node = {
     id: string;
     element: FallbackDescriptor;
     parent: string | null;
+    isBoundary?: boolean;
 };
 export type FallbackRegistry = {
     nodes: Map<string, Node>;

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;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"}
+{"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"}

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,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"}
+{"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"}

package/dist/utils/renderNode.js

@@ -1,9 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { resolveElement } from "./resolveElement";
+import { AutoSuspense } from "../components";
 export function renderNode(node, childMap, registry) {
     const children = childMap.get(node.id) ?? [];
     const resolvedEle = resolveElement(node.element, registry);
     if (!resolvedEle)
         return null;
-    return React.cloneElement(resolvedEle, { key: node.id }, children.map((child) => renderNode(child, childMap, registry)));
+    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 React.cloneElement(resolvedEle, { key: node.id }, renderedChildren);
 }

package/package.json

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

package/src/components/suspense/AutoSuspense.tsx

@@ -6,14 +6,13 @@ import {
   FallbackRegistry,
 } from "../../types/FallbackRegistry";
 import { defaultPrefab } from "../prefabs/defaultPrefab";
-import { PrefabFactory } from "../../types/PrefabFactory";
 
 export const AutoSuspense = ({
   children,
   prefab = defaultPrefab,
 }: {
   children: React.ReactNode;
-  prefab?: Record<string, React.ReactElement>;
+  prefab?: Record<string, React.ReactElement | React.ComponentType<any>>;
 }) => {
   const registryRef = React.useRef<FallbackRegistry>({
     nodes: new Map(),
@@ -32,7 +31,7 @@ export const AutoSuspense = ({
 
   return (
     <FallbackContext.Provider value={registryRef.current}>
-        <React.Suspense fallback={fallback}>{children}</React.Suspense>
+      <React.Suspense fallback={fallback}>{children}</React.Suspense>
     </FallbackContext.Provider>
   );
 };

package/src/hooks/index.ts

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

package/src/hooks/useSuspenseBoundary.ts

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

package/src/index.ts

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

package/src/types/FallbackRegistry.ts

@@ -4,6 +4,7 @@ export type Node = {
   id: string;
   element: FallbackDescriptor;
   parent: string | null;
+  isBoundary?: boolean;
 };
 
 export type FallbackRegistry = {

package/src/utils/renderNode.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import type { FallbackRegistry, Node } from "../types/FallbackRegistry";
+import { resolveElement } from "./resolveElement";
+import { AutoSuspense } from "../components";
+
+export function renderNode(
+  node: Node,
+  childMap: Map<string | null, Node[]>,
+  registry: FallbackRegistry,
+): React.ReactElement | null {
+  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 (
+      <AutoSuspense
+        key={node.id}
+        prefab={Object.fromEntries(registry.prebuild)}
+      >
+        {React.cloneElement(resolvedEle, {}, renderedChildren)}
+      </AutoSuspense>
+    );
+  }
+
+  return React.cloneElement(resolvedEle, { key: node.id }, renderedChildren);
+}

package/src/types/PrefabFactory.ts

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

package/src/utils/renderNode.ts

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