autosuspense 0.1.13 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/suspense/AutoSuspense.d.ts +1 -1
- package/dist/components/suspense/AutoSuspense.d.ts.map +1 -1
- package/dist/components/suspense/AutoSuspense.js +4 -9
- package/dist/functions/Suspend.d.ts +4 -0
- package/dist/functions/Suspend.d.ts.map +1 -0
- package/dist/functions/Suspend.js +22 -0
- package/dist/functions/index.d.ts +3 -0
- package/dist/functions/index.d.ts.map +1 -0
- package/dist/functions/index.js +2 -0
- package/dist/hooks/index.d.ts +1 -2
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +1 -2
- package/dist/hooks/useSuspenseBoundary.d.ts +3 -0
- package/dist/hooks/useSuspenseBoundary.d.ts.map +1 -0
- package/dist/hooks/useSuspenseBoundary.js +19 -0
- package/dist/hooks/useSuspenseFallback.d.ts.map +1 -1
- package/dist/hooks/useSuspenseFallback.js +5 -4
- package/dist/index.d.ts +2 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -1
- package/dist/types/FallbackRegistry.d.ts +6 -2
- package/dist/types/FallbackRegistry.d.ts.map +1 -1
- package/dist/utils/renderNode.d.ts.map +1 -1
- package/dist/utils/renderNode.js +8 -2
- package/package.json +1 -1
- package/src/components/suspense/AutoSuspense.tsx +8 -12
- package/src/functions/Suspend.tsx +33 -0
- package/src/functions/index.ts +2 -0
- package/src/hooks/index.ts +1 -2
- package/src/hooks/useSuspenseBoundary.ts +22 -0
- package/src/hooks/useSuspenseFallback.ts +5 -4
- package/src/index.ts +2 -1
- package/src/types/FallbackRegistry.ts +7 -2
- package/src/utils/renderNode.tsx +28 -0
- package/tsconfig.tsbuildinfo +1 -1
- package/src/hooks/useSuspenseProvider.ts +0 -0
- package/src/types/PrefabFactory.ts +0 -5
- package/src/utils/renderNode.ts +0 -20
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
export declare const AutoSuspense: ({ children, prefab, }: {
|
|
3
3
|
children: React.ReactNode;
|
|
4
|
-
prefab?: Record<string, React.ReactElement
|
|
4
|
+
prefab?: Record<string, React.ReactElement | React.ComponentType<any>>;
|
|
5
5
|
}) => JSX.Element;
|
|
6
6
|
//# sourceMappingURL=AutoSuspense.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AutoSuspense.d.ts","sourceRoot":"","sources":["../../../src/components/suspense/AutoSuspense.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
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,0BAGtB;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,gBAkBA,CAAC"}
|
|
@@ -6,16 +6,11 @@ import { defaultPrefab } from "../prefabs/defaultPrefab";
|
|
|
6
6
|
export const AutoSuspense = ({ children, prefab = defaultPrefab, }) => {
|
|
7
7
|
const registryRef = React.useRef({
|
|
8
8
|
nodes: new Map(),
|
|
9
|
-
currentParent: null,
|
|
10
9
|
prebuild: new Map(Object.entries(prefab)),
|
|
11
10
|
});
|
|
12
|
-
if (registryRef.current === null) {
|
|
13
|
-
registryRef.current = {
|
|
14
|
-
nodes: new Map(),
|
|
15
|
-
currentParent: null,
|
|
16
|
-
prebuild: new Map(Object.entries(prefab)),
|
|
17
|
-
};
|
|
18
|
-
}
|
|
19
11
|
const fallback = _jsx(GeneratedFallback, { registry: registryRef.current });
|
|
20
|
-
return (_jsx(FallbackContext.Provider, { value:
|
|
12
|
+
return (_jsx(FallbackContext.Provider, { value: {
|
|
13
|
+
registry: registryRef.current,
|
|
14
|
+
parentId: null,
|
|
15
|
+
}, children: _jsx(React.Suspense, { fallback: fallback, children: children }) }));
|
|
21
16
|
};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { FallbackDescriptor } from "../types/FallbackRegistry";
|
|
3
|
+
export declare function Suspend<T extends object>(Component: React.ComponentType<T>, fallback?: FallbackDescriptor): (props: T) => JSX.Element;
|
|
4
|
+
//# sourceMappingURL=Suspend.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Suspend.d.ts","sourceRoot":"","sources":["../../src/functions/Suspend.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAmB,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAGhF,wBAAgB,OAAO,CAAC,CAAC,SAAS,MAAM,EACtC,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,EACjC,QAAQ,CAAC,EAAE,kBAAkB,WAEE,CAAC,iBAwBjC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { FallbackContext } from "../types/FallbackRegistry";
|
|
4
|
+
import { useCompatId } from "../hooks/useCompatId";
|
|
5
|
+
export function Suspend(Component, fallback) {
|
|
6
|
+
return function Wrapped(props) {
|
|
7
|
+
const ctx = React.useContext(FallbackContext);
|
|
8
|
+
const id = useCompatId();
|
|
9
|
+
if (!ctx) {
|
|
10
|
+
return _jsx(Component, { ...props });
|
|
11
|
+
}
|
|
12
|
+
const { registry, parentId } = ctx;
|
|
13
|
+
if (!registry.nodes.has(id)) {
|
|
14
|
+
registry.nodes.set(id, {
|
|
15
|
+
id,
|
|
16
|
+
element: fallback ?? Component,
|
|
17
|
+
parent: parentId,
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
return (_jsx(FallbackContext.Provider, { value: { registry, parentId: id }, children: _jsx(Component, { ...props }) }));
|
|
21
|
+
};
|
|
22
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/functions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAC,OAAO,EAAC,CAAC"}
|
package/dist/hooks/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC"}
|
package/dist/hooks/index.js
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { useSuspenseFallback };
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
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"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { useContext } from "react";
|
|
2
|
+
import { FallbackContext } from "../types/FallbackRegistry";
|
|
3
|
+
import { useCompatId } from "./useCompatId";
|
|
4
|
+
export function useSuspenseBoundary(element) {
|
|
5
|
+
const registry = useContext(FallbackContext);
|
|
6
|
+
const id = useCompatId();
|
|
7
|
+
if (!registry)
|
|
8
|
+
return;
|
|
9
|
+
if (registry.registry.nodes.has(id))
|
|
10
|
+
return;
|
|
11
|
+
const parentId = registry.parentId;
|
|
12
|
+
registry.registry.nodes.set(id, {
|
|
13
|
+
id,
|
|
14
|
+
element,
|
|
15
|
+
parent: parentId,
|
|
16
|
+
isBoundary: true,
|
|
17
|
+
});
|
|
18
|
+
registry.parentId = id;
|
|
19
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useSuspenseFallback.d.ts","sourceRoot":"","sources":["../../src/hooks/useSuspenseFallback.ts"],"names":[],"mappings":"AACA,OAAO,EAAmB,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;
|
|
1
|
+
{"version":3,"file":"useSuspenseFallback.d.ts","sourceRoot":"","sources":["../../src/hooks/useSuspenseFallback.ts"],"names":[],"mappings":"AACA,OAAO,EAAmB,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAIhF,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,GAAG,IAAI,CAgBrE"}
|
|
@@ -1,18 +1,19 @@
|
|
|
1
1
|
import { useContext } from "react";
|
|
2
2
|
import { FallbackContext } from "../types/FallbackRegistry";
|
|
3
3
|
import { useCompatId } from "./useCompatId";
|
|
4
|
+
// Depricated hook, core logic changed
|
|
4
5
|
export function useSuspenseFallback(element) {
|
|
5
6
|
const registry = useContext(FallbackContext);
|
|
6
7
|
const id = useCompatId();
|
|
7
8
|
if (!registry)
|
|
8
9
|
return;
|
|
9
|
-
if (registry.nodes.has(id))
|
|
10
|
+
if (registry.registry.nodes.has(id))
|
|
10
11
|
return;
|
|
11
|
-
const parentId = registry.
|
|
12
|
-
registry.nodes.set(id, {
|
|
12
|
+
const parentId = registry.parentId;
|
|
13
|
+
registry.registry.nodes.set(id, {
|
|
13
14
|
id,
|
|
14
15
|
element,
|
|
15
16
|
parent: parentId,
|
|
16
17
|
});
|
|
17
|
-
registry.
|
|
18
|
+
registry.parentId = id;
|
|
18
19
|
}
|
package/dist/index.d.ts
CHANGED
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,
|
|
1
|
+
{"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;AACxB,cAAc,aAAa,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -3,12 +3,16 @@ export type Node = {
|
|
|
3
3
|
id: string;
|
|
4
4
|
element: FallbackDescriptor;
|
|
5
5
|
parent: string | null;
|
|
6
|
+
isBoundary?: boolean;
|
|
6
7
|
};
|
|
7
8
|
export type FallbackRegistry = {
|
|
8
9
|
nodes: Map<string, Node>;
|
|
9
|
-
currentParent: string | null;
|
|
10
10
|
prebuild: Map<string, React.ReactElement | React.ComponentType<any>>;
|
|
11
11
|
};
|
|
12
12
|
export type FallbackDescriptor = string | React.ReactElement | React.ComponentType;
|
|
13
|
-
export
|
|
13
|
+
export type FallbackContextValue = {
|
|
14
|
+
registry: FallbackRegistry;
|
|
15
|
+
parentId: string | null;
|
|
16
|
+
};
|
|
17
|
+
export declare const FallbackContext: React.Context<FallbackContextValue | null>;
|
|
14
18
|
//# sourceMappingURL=FallbackRegistry.d.ts.map
|
|
@@ -1 +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;
|
|
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;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACzB,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,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB,CAAC;AAEF,eAAO,MAAM,eAAe,4CAE3B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderNode.d.ts","sourceRoot":"","sources":["../../src/utils/renderNode.
|
|
1
|
+
{"version":3,"file":"renderNode.d.ts","sourceRoot":"","sources":["../../src/utils/renderNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AACxC,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,CAkB3B"}
|
package/dist/utils/renderNode.js
CHANGED
|
@@ -1,9 +1,15 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import React, { Suspense } from "react";
|
|
2
3
|
import { resolveElement } from "./resolveElement";
|
|
4
|
+
import { Block } from "../components/prefabs/prebuilt/Block";
|
|
3
5
|
export function renderNode(node, childMap, registry) {
|
|
4
6
|
const children = childMap.get(node.id) ?? [];
|
|
5
7
|
const resolvedEle = resolveElement(node.element, registry);
|
|
6
8
|
if (!resolvedEle)
|
|
7
9
|
return null;
|
|
8
|
-
|
|
10
|
+
const renderedChildren = children.map((child) => renderNode(child, childMap, registry));
|
|
11
|
+
if (node.isBoundary) {
|
|
12
|
+
return (_jsx(Suspense, { fallback: _jsx(Block, {}), children: React.cloneElement(resolvedEle, {}, renderedChildren) }, node.id));
|
|
13
|
+
}
|
|
14
|
+
return React.cloneElement(resolvedEle, { key: node.id }, renderedChildren);
|
|
9
15
|
}
|
package/package.json
CHANGED
|
@@ -6,33 +6,29 @@ import {
|
|
|
6
6
|
FallbackRegistry,
|
|
7
7
|
} from "../../types/FallbackRegistry";
|
|
8
8
|
import { defaultPrefab } from "../prefabs/defaultPrefab";
|
|
9
|
-
import { PrefabFactory } from "../../types/PrefabFactory";
|
|
10
9
|
|
|
11
10
|
export const AutoSuspense = ({
|
|
12
11
|
children,
|
|
13
12
|
prefab = defaultPrefab,
|
|
14
13
|
}: {
|
|
15
14
|
children: React.ReactNode;
|
|
16
|
-
prefab?: Record<string, React.ReactElement
|
|
15
|
+
prefab?: Record<string, React.ReactElement | React.ComponentType<any>>;
|
|
17
16
|
}) => {
|
|
18
17
|
const registryRef = React.useRef<FallbackRegistry>({
|
|
19
18
|
nodes: new Map(),
|
|
20
|
-
currentParent: null,
|
|
21
19
|
prebuild: new Map(Object.entries(prefab)),
|
|
22
20
|
});
|
|
23
21
|
|
|
24
|
-
if (registryRef.current === null) {
|
|
25
|
-
registryRef.current = {
|
|
26
|
-
nodes: new Map(),
|
|
27
|
-
currentParent: null,
|
|
28
|
-
prebuild: new Map(Object.entries(prefab)),
|
|
29
|
-
};
|
|
30
|
-
}
|
|
31
22
|
const fallback = <GeneratedFallback registry={registryRef.current} />;
|
|
32
23
|
|
|
33
24
|
return (
|
|
34
|
-
<FallbackContext.Provider
|
|
35
|
-
|
|
25
|
+
<FallbackContext.Provider
|
|
26
|
+
value={{
|
|
27
|
+
registry: registryRef.current,
|
|
28
|
+
parentId: null,
|
|
29
|
+
}}
|
|
30
|
+
>
|
|
31
|
+
<React.Suspense fallback={fallback}>{children}</React.Suspense>
|
|
36
32
|
</FallbackContext.Provider>
|
|
37
33
|
);
|
|
38
34
|
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { FallbackContext, FallbackDescriptor } from "../types/FallbackRegistry";
|
|
3
|
+
import { useCompatId } from "../hooks/useCompatId";
|
|
4
|
+
|
|
5
|
+
export function Suspend<T extends object>(
|
|
6
|
+
Component: React.ComponentType<T>,
|
|
7
|
+
fallback?: FallbackDescriptor,
|
|
8
|
+
) {
|
|
9
|
+
return function Wrapped(props: T) {
|
|
10
|
+
const ctx = React.useContext(FallbackContext);
|
|
11
|
+
const id = useCompatId();
|
|
12
|
+
|
|
13
|
+
if (!ctx) {
|
|
14
|
+
return <Component {...props} />;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
const { registry, parentId } = ctx;
|
|
18
|
+
|
|
19
|
+
if (!registry.nodes.has(id)) {
|
|
20
|
+
registry.nodes.set(id, {
|
|
21
|
+
id,
|
|
22
|
+
element: fallback ?? (Component as React.ComponentType<any>),
|
|
23
|
+
parent: parentId,
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
return (
|
|
28
|
+
<FallbackContext.Provider value={{ registry, parentId: id }}>
|
|
29
|
+
<Component {...props} />
|
|
30
|
+
</FallbackContext.Provider>
|
|
31
|
+
);
|
|
32
|
+
};
|
|
33
|
+
}
|
package/src/hooks/index.ts
CHANGED
|
@@ -1,2 +1 @@
|
|
|
1
|
-
|
|
2
|
-
export { useSuspenseFallback };
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { useContext } from "react";
|
|
2
|
+
import { FallbackContext, FallbackDescriptor } from "../types/FallbackRegistry";
|
|
3
|
+
import { useCompatId } from "./useCompatId";
|
|
4
|
+
|
|
5
|
+
export function useSuspenseBoundary(element: FallbackDescriptor): void {
|
|
6
|
+
const registry = useContext(FallbackContext);
|
|
7
|
+
const id = useCompatId();
|
|
8
|
+
|
|
9
|
+
if (!registry) return;
|
|
10
|
+
if (registry.registry.nodes.has(id)) return;
|
|
11
|
+
|
|
12
|
+
const parentId = registry.parentId;
|
|
13
|
+
|
|
14
|
+
registry.registry.nodes.set(id, {
|
|
15
|
+
id,
|
|
16
|
+
element,
|
|
17
|
+
parent: parentId,
|
|
18
|
+
isBoundary: true,
|
|
19
|
+
});
|
|
20
|
+
|
|
21
|
+
registry.parentId = id;
|
|
22
|
+
}
|
|
@@ -2,20 +2,21 @@ import { useContext } from "react";
|
|
|
2
2
|
import { FallbackContext, FallbackDescriptor } from "../types/FallbackRegistry";
|
|
3
3
|
import { useCompatId } from "./useCompatId";
|
|
4
4
|
|
|
5
|
+
// Depricated hook, core logic changed
|
|
5
6
|
export function useSuspenseFallback(element: FallbackDescriptor): void {
|
|
6
7
|
const registry = useContext(FallbackContext);
|
|
7
8
|
const id = useCompatId();
|
|
8
9
|
|
|
9
10
|
if (!registry) return;
|
|
10
|
-
if (registry.nodes.has(id)) return;
|
|
11
|
+
if (registry.registry.nodes.has(id)) return;
|
|
11
12
|
|
|
12
|
-
const parentId = registry.
|
|
13
|
+
const parentId = registry.parentId;
|
|
13
14
|
|
|
14
|
-
registry.nodes.set(id, {
|
|
15
|
+
registry.registry.nodes.set(id, {
|
|
15
16
|
id,
|
|
16
17
|
element,
|
|
17
18
|
parent: parentId,
|
|
18
19
|
});
|
|
19
20
|
|
|
20
|
-
registry.
|
|
21
|
+
registry.parentId = id;
|
|
21
22
|
}
|
package/src/index.ts
CHANGED
|
@@ -4,11 +4,11 @@ export type Node = {
|
|
|
4
4
|
id: string;
|
|
5
5
|
element: FallbackDescriptor;
|
|
6
6
|
parent: string | null;
|
|
7
|
+
isBoundary?: boolean;
|
|
7
8
|
};
|
|
8
9
|
|
|
9
10
|
export type FallbackRegistry = {
|
|
10
11
|
nodes: Map<string, Node>;
|
|
11
|
-
currentParent: string | null;
|
|
12
12
|
prebuild: Map<string, React.ReactElement | React.ComponentType<any>>;
|
|
13
13
|
};
|
|
14
14
|
|
|
@@ -17,6 +17,11 @@ export type FallbackDescriptor =
|
|
|
17
17
|
| React.ReactElement
|
|
18
18
|
| React.ComponentType;
|
|
19
19
|
|
|
20
|
-
export
|
|
20
|
+
export type FallbackContextValue = {
|
|
21
|
+
registry: FallbackRegistry;
|
|
22
|
+
parentId: string | null;
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export const FallbackContext = React.createContext<FallbackContextValue | null>(
|
|
21
26
|
null,
|
|
22
27
|
);
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React, { Suspense } from "react";
|
|
2
|
+
import type { FallbackRegistry, Node } from "../types/FallbackRegistry";
|
|
3
|
+
import { resolveElement } from "./resolveElement";
|
|
4
|
+
import { Block } from "../components/prefabs/prebuilt/Block";
|
|
5
|
+
|
|
6
|
+
export function renderNode(
|
|
7
|
+
node: Node,
|
|
8
|
+
childMap: Map<string | null, Node[]>,
|
|
9
|
+
registry: FallbackRegistry,
|
|
10
|
+
): React.ReactElement | null {
|
|
11
|
+
const children = childMap.get(node.id) ?? [];
|
|
12
|
+
const resolvedEle = resolveElement(node.element, registry);
|
|
13
|
+
if (!resolvedEle) return null;
|
|
14
|
+
|
|
15
|
+
const renderedChildren = children.map((child) =>
|
|
16
|
+
renderNode(child, childMap, registry),
|
|
17
|
+
);
|
|
18
|
+
|
|
19
|
+
if (node.isBoundary) {
|
|
20
|
+
return (
|
|
21
|
+
<Suspense key={node.id} fallback={<Block />}>
|
|
22
|
+
{React.cloneElement(resolvedEle, {}, renderedChildren)}
|
|
23
|
+
</Suspense>
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
return React.cloneElement(resolvedEle, { key: node.id }, renderedChildren);
|
|
28
|
+
}
|
package/tsconfig.tsbuildinfo
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"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/
|
|
1
|
+
{"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/functions/suspend.tsx","./src/functions/index.ts","./src/hooks/index.ts","./src/hooks/usecompatid.ts","./src/hooks/usesuspenseboundary.ts","./src/hooks/usesuspensefallback.ts","./src/types/fallbackregistry.ts","./src/utils/buildtree.ts","./src/utils/rendernode.tsx","./src/utils/resolveelement.ts"],"version":"5.6.3"}
|
|
File without changes
|
package/src/utils/renderNode.ts
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import type { FallbackRegistry, Node } from "../types/FallbackRegistry";
|
|
3
|
-
import { resolveElement } from "./resolveElement";
|
|
4
|
-
|
|
5
|
-
export function renderNode(
|
|
6
|
-
|
|
7
|
-
node: Node,
|
|
8
|
-
childMap: Map<string | null, Node[]>,
|
|
9
|
-
registry: FallbackRegistry,
|
|
10
|
-
): React.ReactElement | null {
|
|
11
|
-
const children = childMap.get(node.id) ?? [];
|
|
12
|
-
const resolvedEle = resolveElement(node.element, registry);
|
|
13
|
-
if (!resolvedEle) return null;
|
|
14
|
-
|
|
15
|
-
return React.cloneElement(
|
|
16
|
-
resolvedEle,
|
|
17
|
-
{ key: node.id },
|
|
18
|
-
children.map((child) => renderNode(child, childMap, registry)),
|
|
19
|
-
);
|
|
20
|
-
}
|