@jfdevelops/react-layout 0.24.2 → 0.25.0

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

@@ -1,6 +1,7 @@
 const require_invalid_config = require('../errors/invalid-config.cjs');
 const require_missing_resource_provider = require('../errors/missing-resource-provider.cjs');
 const require_layout_configuration_error = require('../errors/layout-configuration-error.cjs');
+const require_resource_state_error = require('../errors/resource-state-error.cjs');
 const require_resource = require('../resource.cjs');
 const require_utils = require('../utils.cjs');
 const require_capitalize = require('../utils/capitalize.cjs');
@@ -10,12 +11,31 @@ const require_create_resource_links = require('./create-resource-links.cjs');
 const require_for_resource = require('./for-resource.cjs');
 const require_create_for_resources = require('./for-resources/create-for-resources.cjs');
 const require_shell_context = require('./shell-context.cjs');
+const require_render_state = require('./render-state.cjs');
 let _jfdevelops_react_layout_composables = require("@jfdevelops/react-layout-composables");
 let react = require("react");
 let _jfdevelops_react_layout_validator = require("@jfdevelops/react-layout-validator");
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/create-config/define-layout.tsx
+const RenderStateRetryContext = (0, react.createContext)(void 0);
+var RenderStateBoundary = class extends react.Component {
+	state = {};
+	static getDerivedStateFromError(error) {
+		return { error };
+	}
+	retry = () => {
+		this.props.onRetry?.();
+		this.setState({ error: void 0 });
+	};
+	render() {
+		if (this.state.error !== void 0) return this.props.fallback(this.state.error, this.retry);
+		return this.props.children;
+	}
+};
+function toResourceStateError(resource, state, error) {
+	return error instanceof require_resource_state_error.ResourceModuleLoadError || error instanceof require_resource_state_error.ResourceRenderError ? error : new require_resource_state_error.ResourceRenderError(resource, state, error);
+}
 function createResourceSelection(definitions) {
 	const selection = (() => definitions);
 	selection.isResource = require_resource.createIsValidResourceFn(definitions);
@@ -88,6 +108,15 @@ function resolveLayoutOptionDefaults(defaults, options) {
 	else resolved[key] = require_utils.functionalUpdate(defaultValue, options[key]);
 	return resolved;
 }
+function getSynchronousRenderStateDefinition(input, fallbackProps) {
+	if (require_render_state.isLazyRenderState(input)) return;
+	if (require_render_state.isDeferredRenderState(input)) return input[require_render_state.deferredRenderStateSymbol];
+	if (typeof input === "function") return {
+		props: fallbackProps,
+		render: input
+	};
+	return typeof input === "object" && input !== null ? input : void 0;
+}
 function readResourceSlug(resource) {
 	return typeof resource === "string" ? resource : resource.value;
 }
@@ -129,7 +158,15 @@ function defineResourceLayoutImpl(options) {
 			...instancePropDefinitions,
 			...layoutOptionProps
 		});
-		const { composables, render, props: layoutProps } = layout;
+		const { composables, props: legacyLayoutProps } = layout;
+		const renderStates = typeof layout.render === "function" ? { default: layout.render } : layout.render;
+		const defaultRenderInput = renderStates.default;
+		const createdDefaultState = require_render_state.isDeferredRenderState(defaultRenderInput) || require_render_state.isLazyRenderState(defaultRenderInput);
+		const defaultRenderDefinition = getSynchronousRenderStateDefinition(defaultRenderInput, legacyLayoutProps) ?? { render: () => null };
+		if (typeof defaultRenderDefinition !== "object" || defaultRenderDefinition === null || !("render" in defaultRenderDefinition) || typeof defaultRenderDefinition.render !== "function") throw new require_layout_configuration_error.LayoutConfigurationError("The \"default\" render state must define a render function");
+		const defaultState = defaultRenderDefinition;
+		const render = defaultState.render;
+		const layoutProps = defaultState.props ?? legacyLayoutProps;
 		const customLayoutProps = layoutProps?.custom;
 		const includeLayoutProps = layoutProps?.include;
 		const layoutOptionValues = layoutOptionProps;
@@ -143,7 +180,11 @@ function defineResourceLayoutImpl(options) {
 			layoutName: name,
 			resource: layoutContext.resource
 		};
-		const resolvedComposables = composables ? (0, _jfdevelops_react_layout_composables.resolveLayoutComposables)(composables, layoutContext) : void 0;
+		const defaultComposables = defaultState.composables ? (create) => ({
+			...composables?.(create) ?? {},
+			...defaultState.composables?.(create)
+		}) : composables;
+		const resolvedComposables = defaultComposables ? (0, _jfdevelops_react_layout_composables.resolveLayoutComposables)(defaultComposables, layoutContext) : void 0;
 		const mergedResolvedInProps = { ...resolvedInProps };
 		for (const { props: presetPropDefinitions } of (0, _jfdevelops_react_layout_composables.collectComposablePresetEntries)(resolvedComposables)) Object.assign(mergedResolvedInProps, presetPropDefinitions);
 		const composablePresetProps = Object.fromEntries((0, _jfdevelops_react_layout_composables.collectComposablePresetEntries)(resolvedComposables).map(({ key, props: presetPropDefinitions }) => {
@@ -160,6 +201,12 @@ function defineResourceLayoutImpl(options) {
 			name: layoutContext.name,
 			inProps: splitInProps
 		};
+		const stateComponents = {};
+		let CreatedDefaultStateComponent;
+		function RenderDefaultState({ renderProps }) {
+			if (CreatedDefaultStateComponent) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CreatedDefaultStateComponent, { ...renderProps });
+			return render(renderProps, mergedRenderContext);
+		}
 		function Component(props) {
 			const publishResource = require_shell_context.useResourceLayoutShellPublisher();
 			(0, react.useLayoutEffect)(() => {
@@ -193,26 +240,153 @@ function defineResourceLayoutImpl(options) {
 				...validatedProps,
 				...layoutRenderIncludedProps
 			};
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResourceProvider, {
+			const rendered = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResourceProvider, {
 				resource: layoutContext.resource,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_jfdevelops_react_layout_composables.LayoutComposablePresetProvider, {
 					value: composablePresetProps,
-					children: render(layoutRenderProps, mergedRenderContext)
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderDefaultState, { renderProps: layoutRenderProps })
 				})
 			});
+			const ErrorComponent = stateComponents.Error;
+			return ErrorComponent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderStateBoundary, {
+				fallback: (error, retry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderStateRetryContext.Provider, {
+					value: retry,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorComponent, {
+						error: toResourceStateError(String(layoutContext.resource), "default", error),
+						retry
+					})
+				}),
+				children: rendered
+			}) : rendered;
 		}
 		function createComposition(compositionOptions) {
 			if (!compositionOptions.components) return {};
 			return { makeComposable: createComposableLayout(compositionOptions) };
 		}
-		return Object.assign(Component, {
+		function createStateComponent(stateName, input) {
+			if (require_render_state.isLazyRenderState(input)) {
+				const loadState = input[require_render_state.lazyRenderStateSymbol];
+				function createLazyState() {
+					return (0, react.lazy)(async () => {
+						const stateDefinition = require_render_state.findDefinedRenderState(await loadState().catch((error) => {
+							throw new require_resource_state_error.ResourceModuleLoadError(String(layoutContext.resource), error);
+						}));
+						if (stateDefinition.state !== void 0 && stateDefinition.state !== stateName) throw new require_layout_configuration_error.LayoutConfigurationError(`Lazy render state "${stateDefinition.state}" cannot be used as "${stateName}"`);
+						return { default: createLoadedStateComponent(stateName, stateDefinition) };
+					});
+				}
+				function LazyStateComponent(props) {
+					const [, rerender] = (0, react.useReducer)((version) => version + 1, 0);
+					const LazyState = (0, react.useRef)(createLazyState());
+					const CurrentLazyState = LazyState.current;
+					const LoadingComponent = stateName === "Loading" ? void 0 : stateComponents.Loading;
+					const ErrorComponent = stateName === "Error" ? void 0 : stateComponents.Error;
+					function retry() {
+						LazyState.current = createLazyState();
+						rerender();
+					}
+					const rendered = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
+						fallback: LoadingComponent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingComponent, {}) : null,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CurrentLazyState, { ...props })
+					});
+					return ErrorComponent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderStateBoundary, {
+						fallback: (error, reset) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderStateRetryContext.Provider, {
+							value: reset,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorComponent, {
+								error: toResourceStateError(String(layoutContext.resource), stateName, error),
+								retry: reset
+							})
+						}),
+						onRetry: retry,
+						children: rendered
+					}) : rendered;
+				}
+				return LazyStateComponent;
+			}
+			const definition = require_render_state.isDeferredRenderState(input) ? input[require_render_state.deferredRenderStateSymbol] : typeof input === "function" ? { render: input } : input;
+			if (typeof definition !== "object" || definition === null || !("render" in definition) || typeof definition.render !== "function") throw new require_layout_configuration_error.LayoutConfigurationError(`Render state "${stateName}" must define a render function`);
+			const StateComponent = createLoadedStateComponent(stateName, definition);
+			if (!require_render_state.isDeferredRenderState(input)) return StateComponent;
+			const DeferredState = (0, react.lazy)(() => Promise.resolve({ default: StateComponent }));
+			function DeferredStateComponent(props) {
+				const LoadingComponent = stateName === "Loading" ? void 0 : stateComponents.Loading;
+				const ErrorComponent = stateName === "Error" ? void 0 : stateComponents.Error;
+				const rendered = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Suspense, {
+					fallback: LoadingComponent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingComponent, {}) : null,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DeferredState, { ...props })
+				});
+				return ErrorComponent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderStateBoundary, {
+					fallback: (error, retry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderStateRetryContext.Provider, {
+						value: retry,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ErrorComponent, {
+							error: toResourceStateError(String(layoutContext.resource), stateName, error),
+							retry
+						})
+					}),
+					children: rendered
+				}) : rendered;
+			}
+			return DeferredStateComponent;
+		}
+		function createLoadedStateComponent(stateName, definition) {
+			const stateComposables = definition.composables ? (create) => ({
+				...composables?.(create) ?? {},
+				...definition.composables?.(create)
+			}) : composables;
+			const stateRender = stateName === "Error" ? (props, context) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RenderStateRetryContext.Consumer, { children: (retry) => definition.render(props, {
+				...context,
+				retry
+			}) }) : definition.render;
+			const StateComponent = defineResourceLayoutImpl({
+				resources,
+				options: inProps,
+				layout: {
+					composables: stateComposables,
+					props: definition.props,
+					render: stateRender
+				}
+			}).createResourceLayout(layoutOptions);
+			StateComponent.displayName = `${name}.${stateName}`;
+			return StateComponent;
+		}
+		if (createdDefaultState) CreatedDefaultStateComponent = createStateComponent("default", defaultRenderInput);
+		for (const [stateName, input] of Object.entries(renderStates)) {
+			if (stateName === "default") continue;
+			if ([
+				"__proto__",
+				"apply",
+				"arguments",
+				"bind",
+				"call",
+				"caller",
+				"displayName",
+				"length",
+				"makeComposable",
+				"name",
+				"props",
+				"prototype",
+				"resource"
+			].includes(stateName)) throw new require_layout_configuration_error.LayoutConfigurationError(`Render state name "${stateName}" is reserved`);
+			stateComponents[stateName] = createStateComponent(stateName, input);
+		}
+		const includedComponentDefinitions = Object.fromEntries(Object.keys(includeLayoutProps ?? {}).flatMap((key) => {
+			if (!allowsComponentPassthrough(includeLayoutProps?.[key]) || !(key in mergedResolvedInProps)) return [];
+			const definition = mergedResolvedInProps[key];
+			return [[key, isIncludedPropRequired(includeLayoutProps?.[key]) ? definition : definition.optional?.() ?? definition]];
+		}));
+		return (0, _jfdevelops_react_layout_validator.attachComponentPropDefinitions)(Object.assign(Component, {
 			displayName: name,
 			props: void 0,
 			resource: void 0,
 			...createComposition({
 				components: resolvedComposables,
 				name
-			})
+			}),
+			...stateComponents,
+			[require_render_state.definedResourceLayoutComponentSymbol]: true
+		}), {
+			...customLayoutProps,
+			...includedComponentDefinitions
 		});
 	});
 	const createTopLevelMakeComposable = () => {
@@ -228,7 +402,12 @@ function defineResourceLayoutImpl(options) {
 			resource: resourcesEnum,
 			name: _jfdevelops_react_layout_validator.createProp.string().literal(componentName)
 		}) : inProps);
-		const resolvedComposables = layout.composables ? (0, _jfdevelops_react_layout_composables.resolveLayoutComposables)(layout.composables, {
+		const defaultState = getSynchronousRenderStateDefinition((typeof layout.render === "function" ? { default: layout.render } : layout.render).default, layout.props);
+		const defaultComposables = defaultState?.composables ? (create) => ({
+			...layout.composables?.(create) ?? {},
+			...defaultState.composables?.(create)
+		}) : layout.composables;
+		const resolvedComposables = defaultComposables ? (0, _jfdevelops_react_layout_composables.resolveLayoutComposables)(defaultComposables, {
 			resource,
 			name: componentName,
 			capitalize: require_capitalize.capitalize
@@ -236,7 +415,7 @@ function defineResourceLayoutImpl(options) {
 		for (const { props: presetPropDefinitions } of (0, _jfdevelops_react_layout_composables.collectComposablePresetEntries)(resolvedComposables)) Object.assign(resolvedInProps, presetPropDefinitions);
 		return {
 			...resolvedInProps,
-			...layout.props?.custom
+			...(defaultState?.props ?? layout.props)?.custom
 		};
 	}
 	const { createLayoutForResourceBuilder, forResource } = require_for_resource.createForResource({