@jfdevelops/react-layout 1.0.1 → 1.2.0

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

@@ -11,6 +11,7 @@ import { createResourceLinksFn } from "./create-resource-links.mjs";
 import { createForResource } from "./for-resource.mjs";
 import { createForResources } from "./for-resources/create-for-resources.mjs";
 import { ResourceLayoutShellPublisherContext, useResourceLayoutShellPublisher } from "./shell-context.mjs";
+import { StateComposableContext, createStateReferences } from "./state-composable.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";
@@ -137,8 +138,8 @@ function assertUnreservedResourceSlugs(resources, owner) {
 		if (typeof resource !== "string") assertUnreservedResourceSlugs(resource.subResources, slug);
 	}
 }
-function defineResourceLayoutImpl(options) {
-	const { options: inProps = {}, resources, layout } = options;
+function defineResourceLayoutImpl(options, inheritedStateScope) {
+	const { options: inProps = {}, resources, layout, namespace: defaultNamespace = false } = options;
 	const shellId = options.shellId;
 	assertUnreservedResourceSlugs(resources);
 	const resourcesAccessor = createLayoutResourcesAccessor(resources);
@@ -157,7 +158,7 @@ function defineResourceLayoutImpl(options) {
 	const normalizedResources = normalizeResources(resources);
 	const resourcesEnum = createPrimitivePropBuilder("string").enum(toResourceEnum(normalizedResources));
 	const definedResourceLayout = ((layoutOptions) => {
-		const { name, props: instancePropDefinitions, ...layoutOptionProps } = layoutOptions;
+		const { name, props: instancePropDefinitions, namespace = defaultNamespace, ...layoutOptionProps } = layoutOptions;
 		const createComposableLayout = makeComposable();
 		const nameProp = createProp.string().literal(name);
 		const { resolvedInProps, splitInProps } = splitLayoutInProps({
@@ -170,6 +171,19 @@ function defineResourceLayoutImpl(options) {
 		});
 		const { composables, props: legacyLayoutProps } = layout;
 		const renderStates = typeof layout.render === "function" ? { default: layout.render } : layout.render;
+		const referenceComponents = /* @__PURE__ */ new Map();
+		const stateScope = inheritedStateScope ?? {
+			states: createStateReferences(renderStates),
+			resolve(source) {
+				for (const [stateName, input] of Object.entries(renderStates)) if (input === source.input) return stateName === "default" ? Component : stateComponents[stateName];
+				let reference = referenceComponents.get(source.input);
+				if (!reference) {
+					reference = createStateComponent(source.name, source.input, false, source.fallbackStateName);
+					referenceComponents.set(source.input, reference);
+				}
+				return reference;
+			}
+		};
 		const defaultRenderInput = renderStates.default;
 		const createdDefaultState = isDeferredRenderState(defaultRenderInput) || isLazyRenderState(defaultRenderInput);
 		const defaultRenderDefinition = getSynchronousRenderStateDefinition(defaultRenderInput, legacyLayoutProps) ?? { render: () => null };
@@ -190,10 +204,10 @@ function defineResourceLayoutImpl(options) {
 			layoutName: name,
 			resource: layoutContext.resource
 		};
-		const defaultComposables = defaultState.composables ? (create) => ({
-			...composables?.(create) ?? {},
-			...defaultState.composables?.(create)
-		}) : composables;
+		const defaultComposables = composables || defaultState.composables ? (create) => ({
+			...composables?.(create, stateScope.states) ?? {},
+			...defaultState.composables?.(create, stateScope.states)
+		}) : void 0;
 		const resolvedComposables = defaultComposables ? resolveLayoutComposables(defaultComposables, layoutContext) : void 0;
 		const mergedResolvedInProps = { ...resolvedInProps };
 		for (const { props: presetPropDefinitions } of collectComposablePresetEntries(resolvedComposables)) Object.assign(mergedResolvedInProps, presetPropDefinitions);
@@ -254,7 +268,14 @@ function defineResourceLayoutImpl(options) {
 				resource: layoutContext.resource,
 				children: /* @__PURE__ */ jsx(LayoutComposablePresetProvider, {
 					value: composablePresetProps,
-					children: /* @__PURE__ */ jsx(RenderDefaultState, { renderProps: layoutRenderProps })
+					children: /* @__PURE__ */ jsx(StateComposableContext.Provider, {
+						value: {
+							scope: stateScope,
+							props: layoutRenderProps,
+							definitions: mergedResolvedInProps
+						},
+						children: /* @__PURE__ */ jsx(RenderDefaultState, { renderProps: layoutRenderProps })
+					})
 				})
 			});
 			const ErrorComponent = stateComponents.Error;
@@ -273,24 +294,24 @@ function defineResourceLayoutImpl(options) {
 			if (!compositionOptions.components) return {};
 			return { makeComposable: createComposableLayout(compositionOptions) };
 		}
-		function createStateComponent(stateName, input) {
+		function createStateComponent(stateName, input, validateStateName = true, fallbackStateName = stateName) {
 			if (isLazyRenderState(input)) {
 				const loadState = input[lazyRenderStateSymbol];
 				function createLazyState() {
 					return lazy(async () => {
-						const stateDefinition = findDefinedRenderState(await loadState().catch((error) => {
+						const stateDefinition = await findDefinedRenderState(await loadState().catch((error) => {
 							throw new ResourceModuleLoadError(String(layoutContext.resource), error);
 						}));
-						if (stateDefinition.state !== void 0 && stateDefinition.state !== stateName) throw new LayoutConfigurationError(`Lazy render state "${stateDefinition.state}" cannot be used as "${stateName}"`);
-						return { default: createLoadedStateComponent(stateName, stateDefinition) };
+						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) };
 					});
 				}
 				function LazyStateComponent(props) {
 					const [, rerender] = useReducer((version) => version + 1, 0);
 					const LazyState = useRef(createLazyState());
 					const CurrentLazyState = LazyState.current;
-					const LoadingComponent = stateName === "Loading" ? void 0 : stateComponents.Loading;
-					const ErrorComponent = stateName === "Error" ? void 0 : stateComponents.Error;
+					const LoadingComponent = fallbackStateName === "Loading" ? void 0 : stateComponents.Loading;
+					const ErrorComponent = fallbackStateName === "Error" ? void 0 : stateComponents.Error;
 					function retry() {
 						LazyState.current = createLazyState();
 						rerender();
@@ -319,8 +340,8 @@ function defineResourceLayoutImpl(options) {
 			if (!isDeferredRenderState(input)) return StateComponent;
 			const DeferredState = 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 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,
 					children: /* @__PURE__ */ jsx(DeferredState, { ...props })
@@ -339,10 +360,10 @@ function defineResourceLayoutImpl(options) {
 			return DeferredStateComponent;
 		}
 		function createLoadedStateComponent(stateName, definition) {
-			const stateComposables = definition.composables ? (create) => ({
-				...composables?.(create) ?? {},
-				...definition.composables?.(create)
-			}) : composables;
+			const stateComposables = composables || definition.composables ? (create) => ({
+				...composables?.(create, stateScope.states) ?? {},
+				...definition.composables?.(create, stateScope.states)
+			}) : void 0;
 			const stateRender = stateName === "Error" ? (props, context) => /* @__PURE__ */ jsx(RenderStateRetryContext.Consumer, { children: (retry) => definition.render(props, {
 				...context,
 				retry
@@ -355,7 +376,10 @@ function defineResourceLayoutImpl(options) {
 					props: definition.props,
 					render: stateRender
 				}
-			}).createResourceLayout(layoutOptions);
+			}, stateScope).createResourceLayout({
+				...layoutOptions,
+				namespace: false
+			});
 			StateComponent.displayName = `${name}.${stateName}`;
 			return StateComponent;
 		}
@@ -364,6 +388,7 @@ function defineResourceLayoutImpl(options) {
 			if (stateName === "default") continue;
 			if ([
 				"__proto__",
+				"asComposable",
 				"apply",
 				"arguments",
 				"bind",
@@ -384,7 +409,7 @@ function defineResourceLayoutImpl(options) {
 			const definition = mergedResolvedInProps[key];
 			return [[key, isIncludedPropRequired(includeLayoutProps?.[key]) ? definition : definition.optional?.() ?? definition]];
 		}));
-		return attachComponentPropDefinitions(Object.assign(Component, {
+		const rootComponent = attachComponentPropDefinitions(Object.assign(Component, {
 			displayName: name,
 			props: void 0,
 			resource: void 0,
@@ -398,10 +423,21 @@ function defineResourceLayoutImpl(options) {
 			...customLayoutProps,
 			...includedComponentDefinitions
 		});
+		if (namespace) {
+			if (Object.prototype.hasOwnProperty.call(stateComponents, "Root")) throw new LayoutConfigurationError("Render state name \"Root\" is reserved when namespace is true");
+			return {
+				Root: rootComponent,
+				...stateComponents
+			};
+		}
+		return rootComponent;
 	});
 	const createTopLevelMakeComposable = () => {
 		return (options) => {
-			const layout = definedResourceLayout(options);
+			const layout = definedResourceLayout({
+				...options,
+				namespace: false
+			});
 			if (!("makeComposable" in layout) || typeof layout.makeComposable !== "function") throw new LayoutConfigurationError("makeComposable requires composables to be defined in the layout");
 			return layout.makeComposable();
 		};
@@ -412,11 +448,13 @@ function defineResourceLayoutImpl(options) {
 			resource: resourcesEnum,
 			name: createProp.string().literal(componentName)
 		}) : inProps);
-		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 renderStates = typeof layout.render === "function" ? { default: layout.render } : layout.render;
+		const defaultState = getSynchronousRenderStateDefinition(renderStates.default, layout.props);
+		const stateReferences = createStateReferences(renderStates);
+		const defaultComposables = layout.composables || defaultState?.composables ? (create) => ({
+			...layout.composables?.(create, stateReferences) ?? {},
+			...defaultState?.composables?.(create, stateReferences)
+		}) : void 0;
 		const resolvedComposables = defaultComposables ? resolveLayoutComposables(defaultComposables, {
 			resource,
 			name: componentName,
@@ -619,6 +657,7 @@ function defineResourceLayoutWithLayoutImpl(options) {
 		resources,
 		options: inProps,
 		layout: resolvedLayout,
+		namespace: options.namespace,
 		shellId
 	});
 	const Shell = createResourceLayoutShellComponent(resources, inProps ?? {}, shell, shellId);