@jfdevelops/react-layout 1.6.1 → 2.1.0

package/dist/create-config/define-layout.mjs

@@ -1,7 +1,12 @@
-import { InvalidConfigError } from "../errors/invalid-config.mjs";
-import { MissingResourceProviderError } from "../errors/missing-resource-provider.mjs";
+import { ReferencedRenderStateContext, RenderStateFallback, RenderStateNameContext } from "./render-state-context.mjs";
 import { LayoutConfigurationError } from "../errors/layout-configuration-error.mjs";
 import { ResourceModuleLoadError, ResourceRenderError } from "../errors/resource-state-error.mjs";
+import { LazyResourceStateNotFoundError } from "../errors/lazy-resource-error.mjs";
+import { LazyBoundary } from "../lazy/lazy-boundary.mjs";
+import { LazyFallbackPropsContext } from "../lazy/fallback-props.mjs";
+import { lazyDefaultsSymbol, lazyStatesSymbol } from "../lazy/types.mjs";
+import { InvalidConfigError } from "../errors/invalid-config.mjs";
+import { MissingResourceProviderError } from "../errors/missing-resource-provider.mjs";
 import { capitalize } from "../utils/capitalize.mjs";
 import { StateComposableContext, createStateReferences, stateReferenceSource } from "./state-composable.mjs";
 import { mergeLayoutProps } from "./merge-layout-props.mjs";
@@ -14,13 +19,13 @@ import { isResourceConfigComponentKey } from "./component-keys.mjs";
 import { createResourceConfig } from "./get-component.mjs";
 import { createResourceLinksFn } from "./create-resource-links.mjs";
 import { createForResource } from "./for-resource.mjs";
+import { deferredRenderStateSymbol, definedResourceLayoutComponentSymbol, isDeferredRenderState, isLazyRenderState, lazyInspectionSymbol, lazyLoaderSymbol, lazyOptionsSymbol } from "./render-state.mjs";
 import { createForResources } from "./for-resources/create-for-resources.mjs";
 import { ResourceLayoutShellPublisherContext, useResourceLayoutShellPublisher } from "./shell-context.mjs";
-import { deferredRenderStateSymbol, definedResourceLayoutComponentSymbol, findDefinedRenderState, isDeferredRenderState, isLazyRenderState, lazyRenderStateSymbol } from "./render-state.mjs";
 import { LayoutComposablePresetProvider, collectComposablePresetEntries, makeComposable, resolveLayoutComposables } from "@jfdevelops/react-layout-composables";
-import { Component, Suspense, createContext, lazy, useCallback, useContext, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
-import { getLayoutDebug, inspectionId, layoutDebug, layoutPreviewFixtures } from "@jfdevelops/react-layout-devtools-core";
+import { Component, Suspense, createContext, lazy, useCallback, useContext, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx } from "react/jsx-runtime";
+import { getLayoutDebug, inspectionId, layoutDebug, layoutPreviewFixtures } from "@jfdevelops/react-layout-devtools-core";
 import { attachComponentPropDefinitions, createPrimitivePropBuilder, createProp, resolvePropDefinitionValues, validateProps } from "@jfdevelops/react-layout-validator";
 
 //#region src/create-config/define-layout.tsx
@@ -35,7 +40,10 @@ var RenderStateBoundary = class extends Component {
 		this.setState({ error: void 0 });
 	};
 	render() {
-		if (this.state.error !== void 0) return this.props.fallback(this.state.error, this.retry);
+		if (this.state.error !== void 0) return /* @__PURE__ */ jsx(RenderStateFallback, {
+			state: "Error",
+			children: this.props.fallback(this.state.error, this.retry)
+		});
 		return this.props.children;
 	}
 };
@@ -120,6 +128,28 @@ function resolveLayoutOptionDefaults(defaults, options) {
 	else resolved[key] = functionalUpdate(defaultValue, options[key]);
 	return resolved;
 }
+function optionalStateChildren(props) {
+	if (!props) return props;
+	const children = props.custom?.children;
+	const childrenInclude = props.include?.children;
+	return {
+		...props,
+		include: props.include && {
+			...props.include,
+			..."children" in props.include ? { children: typeof childrenInclude === "object" && childrenInclude !== null ? {
+				...childrenInclude,
+				required: false
+			} : childrenInclude === true || childrenInclude === "required" ? {
+				required: false,
+				suppliedVia: "config"
+			} : "optional" } : {}
+		},
+		custom: props.custom && {
+			...props.custom,
+			...children ? { children: children.visibility === "required" ? children.optional?.() ?? children : children } : {}
+		}
+	};
+}
 function getSynchronousRenderStateDefinition(input, fallbackProps) {
 	if (isLazyRenderState(input)) return;
 	if (isDeferredRenderState(input)) return input[deferredRenderStateSymbol];
@@ -139,8 +169,9 @@ function assertUnreservedResourceSlugs(resources, owner) {
 		if (typeof resource !== "string") assertUnreservedResourceSlugs(resource.subResources, slug);
 	}
 }
-function defineResourceLayoutImpl(options, inheritedStateScope, inheritedInspection) {
+function defineResourceLayoutImpl(options, inheritedStateScope, inheritedInspection, renderStateName = "default") {
 	const { options: inProps = {}, resources, layout, namespace: defaultNamespace = false } = options;
+	const getLazyDefaults = options[lazyDefaultsSymbol] ?? (() => ({}));
 	const shellId = options.shellId;
 	const inspection = inheritedInspection ? void 0 : inspectDefinition(resources, getLayoutDebug(options)?.source ?? getLayoutDebug(layout)?.source);
 	if (inspection) inspection.store.node({
@@ -319,10 +350,10 @@ function defineResourceLayoutImpl(options, inheritedStateScope, inheritedInspect
 		}));
 		const mergedRenderContext = {
 			composables: resolvedComposables,
-			resource: layoutContext.resource,
 			resources: createLayoutRenderResourcesAccessor(resources, layoutContext.resource),
 			name: layoutContext.name,
-			inProps: splitInProps
+			inProps: splitInProps,
+			state: renderStateName
 		};
 		const stateComponents = {};
 		let CreatedDefaultStateComponent;
@@ -331,11 +362,20 @@ function defineResourceLayoutImpl(options, inheritedStateScope, inheritedInspect
 				if (CreatedDefaultStateComponent) return;
 				return inspectionStore.mount(activeInspection.layout, activeInspection.state, ...resourceId ? [resourceId] : []);
 			}, []);
-			if (CreatedDefaultStateComponent) return /* @__PURE__ */ jsx(CreatedDefaultStateComponent, { ...renderProps });
-			return render(renderProps, mergedRenderContext);
+			const state = useContext(RenderStateNameContext);
+			if (CreatedDefaultStateComponent) return /* @__PURE__ */ jsx(ReferencedRenderStateContext.Provider, {
+				value: state,
+				children: /* @__PURE__ */ jsx(CreatedDefaultStateComponent, { ...renderProps })
+			});
+			return render(renderProps, {
+				...mergedRenderContext,
+				state
+			});
 		}
 		function Component(props) {
+			const state = useContext(ReferencedRenderStateContext) ?? renderStateName;
 			const publishResource = useResourceLayoutShellPublisher();
+			const fallbackOptions = useContext(LazyFallbackPropsContext);
 			useLayoutEffect(() => {
 				publishResource?.(layoutContext.resource, shellId);
 				return () => publishResource?.(void 0, shellId);
@@ -348,7 +388,7 @@ function defineResourceLayoutImpl(options, inheritedStateScope, inheritedInspect
 				const definition = mergedResolvedInProps[key];
 				const includeBehavior = includeLayoutProps?.[key];
 				const callSiteValue = allowsComponentPassthrough(includeBehavior) ? readLayoutOptionValue(key, definition, props) : void 0;
-				const layoutOptionValue = allowsConfigPassthrough(includeBehavior) ? readLayoutOptionValue(key, definition, layoutOptionValues) : void 0;
+				const layoutOptionValue = allowsConfigPassthrough(includeBehavior) ? readLayoutOptionValue(key, definition, fallbackOptions?.owner === activeInspection.layout ? fallbackOptions.props : layoutOptionValues) : void 0;
 				const splitValue = key in splitInProps ? splitInProps[key] : void 0;
 				const value = callSiteValue ?? layoutOptionValue ?? splitValue;
 				if (value !== void 0) includedPropValues[key] = value;
@@ -367,17 +407,23 @@ function defineResourceLayoutImpl(options, inheritedStateScope, inheritedInspect
 				...validatedProps,
 				...layoutRenderIncludedProps
 			};
-			const rendered = /* @__PURE__ */ jsx(ResourceProvider, {
-				resource: layoutContext.resource,
-				children: /* @__PURE__ */ jsx(LayoutComposablePresetProvider, {
-					value: composablePresetProps,
-					children: /* @__PURE__ */ jsx(StateComposableContext.Provider, {
-						value: {
-							scope: stateScope,
-							props: layoutRenderProps,
-							definitions: mergedResolvedInProps
-						},
-						children: /* @__PURE__ */ jsx(RenderDefaultState, { renderProps: layoutRenderProps })
+			const rendered = /* @__PURE__ */ jsx(ReferencedRenderStateContext.Provider, {
+				value: void 0,
+				children: /* @__PURE__ */ jsx(RenderStateNameContext.Provider, {
+					value: state,
+					children: /* @__PURE__ */ jsx(ResourceProvider, {
+						resource: layoutContext.resource,
+						children: /* @__PURE__ */ jsx(LayoutComposablePresetProvider, {
+							value: composablePresetProps,
+							children: /* @__PURE__ */ jsx(StateComposableContext.Provider, {
+								value: {
+									scope: stateScope,
+									props: layoutRenderProps,
+									definitions: mergedResolvedInProps
+								},
+								children: /* @__PURE__ */ jsx(RenderDefaultState, { renderProps: layoutRenderProps })
+							})
+						})
 					})
 				})
 			});
@@ -400,41 +446,38 @@ function defineResourceLayoutImpl(options, inheritedStateScope, inheritedInspect
 		function createStateComponent(stateName, input, validateStateName = true, fallbackStateName = stateName) {
 			const inspectedId = validateStateName ? stateIds.get(stateName) : getReferenceStateId(input, stateName);
 			if (isLazyRenderState(input)) {
-				const loadState = input[lazyRenderStateSymbol];
-				function createLazyState() {
-					return lazy(async () => {
-						const stateDefinition = await findDefinedRenderState(await loadState().catch((error) => {
-							throw new ResourceModuleLoadError(String(layoutContext.resource), error);
-						}));
-						if (validateStateName && stateDefinition.state !== void 0 && stateDefinition.state !== stateName) throw new LayoutConfigurationError(`Lazy render state "${stateDefinition.state}" cannot be used as "${stateName}"`);
-						return { default: createLoadedStateComponent(validateStateName ? stateName : stateDefinition.state ?? stateName, stateDefinition, inspectedId) };
-					});
-				}
+				const loader = input[lazyLoaderSymbol];
+				const lazyOptions = input[lazyOptionsSymbol];
+				const lazyInspection = input[lazyInspectionSymbol];
+				inspectionStore.connect(input);
+				inspectionStore.edge(inspectedId ?? layoutId, lazyInspection.id, "declares");
+				const label = `${layoutContext.resource}:${stateName}`;
+				lazyInspection.setLabel(label);
+				const map = (stateDefinition) => {
+					if (validateStateName && stateDefinition.state !== void 0 && stateDefinition.state !== stateName) throw new LazyResourceStateNotFoundError(label, stateName);
+					return createLoadedStateComponent(validateStateName ? stateName : stateDefinition.state ?? stateName, stateDefinition, inspectedId);
+				};
 				function LazyStateComponent(props) {
-					const [, rerender] = useReducer((version) => version + 1, 0);
-					const LazyState = useRef(createLazyState());
-					const CurrentLazyState = LazyState.current;
+					const defaults = lazyOptions.defaults();
 					const LoadingComponent = fallbackStateName === "Loading" ? void 0 : stateComponents.Loading;
-					const ErrorComponent = fallbackStateName === "Error" ? void 0 : stateComponents.Error;
-					function retry() {
-						LazyState.current = createLazyState();
-						rerender();
-					}
-					const rendered = /* @__PURE__ */ jsx(Suspense, {
-						fallback: LoadingComponent ? /* @__PURE__ */ jsx(LoadingComponent, {}) : null,
-						children: /* @__PURE__ */ jsx(CurrentLazyState, { ...props })
+					const ErrorState = fallbackStateName === "Error" ? void 0 : stateComponents.Error;
+					const LoadingDefault = defaults.Loading;
+					const ErrorComponent = ErrorState ? ({ error, retry }) => /* @__PURE__ */ jsx(RenderStateRetryContext.Provider, {
+						value: retry,
+						children: /* @__PURE__ */ jsx(ErrorState, {
+							error,
+							retry
+						})
+					}) : defaults.Error;
+					return /* @__PURE__ */ jsx(LazyBoundary, {
+						loader,
+						map,
+						resource: String(layoutContext.resource),
+						componentProps: props,
+						ErrorComponent,
+						onMount: lazyInspection.hooks.onMount,
+						fallback: lazyOptions.fallback !== void 0 ? lazyOptions.fallback : LoadingComponent ? /* @__PURE__ */ jsx(LoadingComponent, {}) : LoadingDefault ? /* @__PURE__ */ jsx(LoadingDefault, { resource: String(layoutContext.resource) }) : null
 					});
-					return ErrorComponent ? /* @__PURE__ */ jsx(RenderStateBoundary, {
-						fallback: (error, reset) => /* @__PURE__ */ jsx(RenderStateRetryContext.Provider, {
-							value: reset,
-							children: /* @__PURE__ */ jsx(ErrorComponent, {
-								error: toResourceStateError(String(layoutContext.resource), stateName, error),
-								retry: reset
-							})
-						}),
-						onRetry: retry,
-						children: rendered
-					}) : rendered;
 				}
 				return LazyStateComponent;
 			}
@@ -447,7 +490,10 @@ function defineResourceLayoutImpl(options, inheritedStateScope, inheritedInspect
 				const LoadingComponent = fallbackStateName === "Loading" ? void 0 : stateComponents.Loading;
 				const ErrorComponent = fallbackStateName === "Error" ? void 0 : stateComponents.Error;
 				const rendered = /* @__PURE__ */ jsx(Suspense, {
-					fallback: LoadingComponent ? /* @__PURE__ */ jsx(LoadingComponent, {}) : null,
+					fallback: /* @__PURE__ */ jsx(RenderStateFallback, {
+						state: "Loading",
+						children: LoadingComponent ? /* @__PURE__ */ jsx(LoadingComponent, {}) : null
+					}),
 					children: /* @__PURE__ */ jsx(DeferredState, { ...props })
 				});
 				return ErrorComponent ? /* @__PURE__ */ jsx(RenderStateBoundary, {
@@ -488,13 +534,13 @@ function defineResourceLayoutImpl(options, inheritedStateScope, inheritedInspect
 				options: inProps,
 				layout: {
 					composables: stateComposables,
-					props: mergeLayoutProps(legacyLayoutProps, definition.props),
+					props: optionalStateChildren(mergeLayoutProps(legacyLayoutProps, definition.props)),
 					render: stateRender
 				}
 			}, stateScope, {
 				...activeInspection,
 				state: inspectedState ?? getReferenceStateId(definition, stateName)
-			}).createResourceLayout({
+			}, stateName).createResourceLayout({
 				...layoutOptions,
 				name,
 				namespace: false
@@ -557,6 +603,17 @@ function defineResourceLayoutImpl(options, inheritedStateScope, inheritedInspect
 				name
 			}),
 			...exposedStates,
+			[lazyStatesSymbol]: {
+				owner: layoutId,
+				Loading: stateComponents.Loading,
+				Error: stateComponents.Error ? ({ error, retry }) => /* @__PURE__ */ jsx(RenderStateRetryContext.Provider, {
+					value: retry,
+					children: /* @__PURE__ */ jsx(stateComponents.Error, {
+						error,
+						retry
+					})
+				}) : void 0
+			},
 			[definedResourceLayoutComponentSymbol]: true
 		});
 		previewRoot = createdComponent;
@@ -618,7 +675,21 @@ function defineResourceLayoutImpl(options, inheritedStateScope, inheritedInspect
 			createLayoutForResource: createLayoutForResourceBuilder,
 			...layout.composables ? { createMakeComposableLayout: createTopLevelMakeComposable } : {},
 			createResourceLayout: definedResourceLayout,
-			getComponentPropDefinitions
+			getComponentPropDefinitions,
+			lazyEnvironment: {
+				store: inheritedInspection?.store ?? inspection.store,
+				parent: inheritedInspection?.layout ?? inspection.definition,
+				defaults: getLazyDefaults,
+				states(resource, props) {
+					if (typeof layout.render !== "object" || !layout.render || !("Loading" in layout.render || "Error" in layout.render)) return {};
+					return definedResourceLayout({
+						...props,
+						resource,
+						namespace: false,
+						name: capitalize(resource)
+					})[lazyStatesSymbol];
+				}
+			}
 		})
 	};
 	if (layout.composables) createResourceLayoutExtras.makeComposable = createTopLevelMakeComposable();