@jfdevelops/react-layout 0.16.0 → 0.17.1
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/create-config/define-layout.cjs +7 -3
- package/dist/create-config/define-layout.cjs.map +1 -1
- package/dist/create-config/define-layout.d.cts.map +1 -1
- package/dist/create-config/define-layout.d.mts.map +1 -1
- package/dist/create-config/define-layout.mjs +7 -3
- package/dist/create-config/define-layout.mjs.map +1 -1
- package/dist/create-config/for-resources/create-for-resources.cjs +8 -2
- package/dist/create-config/for-resources/create-for-resources.cjs.map +1 -1
- package/dist/create-config/for-resources/create-for-resources.mjs +8 -2
- package/dist/create-config/for-resources/create-for-resources.mjs.map +1 -1
- package/dist/index.cjs +6 -0
- package/dist/index.d.cts +2 -2
- package/dist/index.d.mts +2 -2
- package/dist/index.mjs +2 -2
- package/package.json +5 -4
- package/skills/build-react-layouts/SKILL.md +132 -0
- package/skills/build-react-layouts/agents/openai.yaml +4 -0
- package/skills/build-react-layouts/references/architecture.md +184 -0
- package/skills/build-react-layouts/references/factory-patterns.md +156 -0
- package/skills/build-react-layouts/references/routing-and-navigation.md +174 -0
|
@@ -66,7 +66,10 @@ function createForResources({ createLayoutForResource, createMakeComposableLayou
|
|
|
66
66
|
if (componentProps === void 0) throw new Error(`Scoped component "${name}" must be rendered inside its scoped component`);
|
|
67
67
|
const resolvedOwnProps = ownProps ?? {};
|
|
68
68
|
cachedOwnProps = resolvedOwnProps;
|
|
69
|
-
validateProps(ownPropDefinitions, resolvedOwnProps
|
|
69
|
+
validateProps(ownPropDefinitions, resolvedOwnProps, {
|
|
70
|
+
layoutName: entry.name ?? defaultNames.get(resource) ?? capitalize(resource),
|
|
71
|
+
resource
|
|
72
|
+
});
|
|
70
73
|
const result = definition.render({
|
|
71
74
|
...componentProps,
|
|
72
75
|
...resolvedOwnProps,
|
|
@@ -152,7 +155,10 @@ function createForResources({ createLayoutForResource, createMakeComposableLayou
|
|
|
152
155
|
if (key === "children" || key === "resource") continue;
|
|
153
156
|
definitionsToValidate[key] = definition;
|
|
154
157
|
}
|
|
155
|
-
validateProps(definitionsToValidate, componentProps
|
|
158
|
+
validateProps(definitionsToValidate, componentProps, {
|
|
159
|
+
layoutName: definedEntries.get(componentResource)?.name ?? defaultNames.get(componentResource) ?? capitalize(componentResource),
|
|
160
|
+
resource: componentResource
|
|
161
|
+
});
|
|
156
162
|
return createElement(componentPropsContext.Provider, { value: componentProps }, resolveScopedRenderResult(componentOptions.render(componentProps, renderContext), componentProps));
|
|
157
163
|
}
|
|
158
164
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create-for-resources.mjs","names":[],"sources":["../../../src/create-config/for-resources/create-for-resources.ts"],"sourcesContent":["import {\n createContext,\n createElement,\n type ComponentType,\n type JSX,\n useContext,\n} from 'react';\nimport type { ComposableComponents } from '@jfdevelops/react-layout-composables';\nimport {\n type AnyBuiltPropDefinition,\n validateProps,\n} from '@jfdevelops/react-layout-validator';\nimport type { InPropsDefinition, InPropsObject } from '../../props';\nimport type { LayoutResourceKey, ResourceDefinition } from '../../resource';\nimport { capitalize } from '../../utils/capitalize';\nimport type { LayoutIncludeProps } from '../define-layout';\nimport type {\n CapitalizedResource,\n ResourcesLayoutName,\n} from './resource-selection';\nimport type { CreateResourceLayoutForResourcesFn } from './scoped-layout';\nimport {\n isRenderableComponentType,\n reservedScopedComponentNames,\n resolveScopedRenderResult,\n type ScopedRenderResult,\n withScopedCompoundStatics,\n} from './scoped-render';\n\ntype CreateForResourcesOptions<\n Resources extends ReadonlyArray<ResourceDefinition>,\n> = {\n createLayoutForResource: (\n defaultName: string | undefined,\n resource: LayoutResourceKey<Resources>,\n ) => unknown;\n createMakeComposableLayout?: () => (\n options: Record<string, unknown>,\n ) => unknown;\n createResourceLayout: (options: Record<string, unknown>) => unknown;\n getComponentPropDefinitions: (\n resource: LayoutResourceKey<Resources>,\n ) => Record<string, AnyBuiltPropDefinition>;\n};\n\nexport function createForResources<\n Resources extends ReadonlyArray<ResourceDefinition>,\n InProps extends InPropsDefinition<Resources>,\n Composables extends ComposableComponents,\n IncludeProps extends LayoutIncludeProps<Resources, InProps, Composables>,\n CustomProps extends InPropsObject,\n>({\n createLayoutForResource,\n createMakeComposableLayout,\n createResourceLayout,\n getComponentPropDefinitions,\n}: CreateForResourcesOptions<Resources>) {\n return ((...resourcesOrOptions: Array<unknown>) => {\n const firstArgument = resourcesOrOptions[0];\n let resourceOptions: Array<{\n resource: LayoutResourceKey<Resources>;\n name?:\n | string\n | ((\n resource: CapitalizedResource<LayoutResourceKey<Resources>>,\n ) => string);\n }>;\n\n if (typeof firstArgument === 'string') {\n resourceOptions = resourcesOrOptions.map((resource) => ({\n resource: resource as LayoutResourceKey<Resources>,\n }));\n } else if (\n firstArgument !== null &&\n typeof firstArgument === 'object' &&\n 'resources' in firstArgument &&\n Array.isArray(firstArgument.resources)\n ) {\n const { name, resources } = firstArgument as {\n name?: ResourcesLayoutName<LayoutResourceKey<Resources>>;\n resources: Array<LayoutResourceKey<Resources>>;\n };\n resourceOptions = resources.map((resource) => ({\n name: typeof name === 'function' ? name : name?.[resource],\n resource,\n }));\n } else {\n resourceOptions = Object.entries(firstArgument ?? {}).map(\n ([resource, options]) => ({\n ...(options as {\n name?:\n | string\n | ((\n resource: CapitalizedResource<LayoutResourceKey<Resources>>,\n ) => string);\n }),\n resource: resource as LayoutResourceKey<Resources>,\n }),\n );\n }\n\n const defaultNames = new Map(\n resourceOptions.map(({ name, resource }) => [\n resource,\n typeof name === 'function'\n ? name(\n capitalize(resource) as CapitalizedResource<\n LayoutResourceKey<Resources>\n >,\n )\n : name,\n ]),\n );\n\n function scopedCreateResourceLayout(options: Record<string, unknown>) {\n const resource = options.resource as LayoutResourceKey<Resources>;\n\n return createResourceLayout({\n ...options,\n name: options.name ?? defaultNames.get(resource),\n });\n }\n\n function scopedForResource(options: {\n name?: string;\n resource: LayoutResourceKey<Resources>;\n }) {\n return createLayoutForResource(\n options.name ?? defaultNames.get(options.resource),\n options.resource,\n );\n }\n\n type ScopedComponentRenderFn = (\n props: Record<string, unknown>,\n components: Record<string, (props?: never) => JSX.Element>,\n ) => ScopedRenderResult;\n\n type ScopedResourceScopedComponentDefinition = {\n props?: Record<string, AnyBuiltPropDefinition>;\n render: ScopedComponentRenderFn;\n };\n\n type ScopedComponentEntry = {\n [option: string]: unknown;\n name?: string;\n components?: Record<string, ScopedResourceScopedComponentDefinition>;\n render: ScopedComponentRenderFn;\n };\n\n function createComponent(componentOptions: {\n props?: {\n include?: Record<string, true | 'optional'>;\n custom?: Record<string, AnyBuiltPropDefinition>;\n };\n resources?: Record<string, ScopedComponentEntry>;\n render: (\n props: Record<string, unknown>,\n context: Record<string, (props: never) => JSX.Element>,\n ) => ScopedRenderResult;\n }) {\n const include = componentOptions.props?.include ?? {};\n const custom = componentOptions.props?.custom ?? {};\n const selectedResources = new Set(\n resourceOptions.map(({ resource }) => resource),\n );\n const componentPropsContext = createContext<\n Record<string, unknown> | undefined\n >(undefined);\n const definedEntries = new Map<\n LayoutResourceKey<Resources>,\n ScopedComponentEntry\n >();\n\n for (const [key, entry] of Object.entries(\n componentOptions.resources ?? {},\n )) {\n const resource = key as LayoutResourceKey<Resources>;\n\n if (!selectedResources.has(resource)) {\n throw new Error(\n `Resource \"${key}\" is not available in this scoped component`,\n );\n }\n\n definedEntries.set(resource, entry);\n }\n\n /** Resolved scoped components, per resource. */\n const resourceScopedComponents = new Map<\n LayoutResourceKey<Resources>,\n Record<string, (props?: never) => JSX.Element>\n >();\n const contextResources = new Map<string, LayoutResourceKey<Resources>>();\n const renderContext: Record<string, (props: never) => JSX.Element> =\n Object.fromEntries(\n [...definedEntries].map(([resource, entry]) => {\n const contextKey = capitalize(resource);\n\n if (contextKey === 'Root') {\n throw new Error(\n `Resource \"${resource}\" maps to the reserved render context key \"Root\"`,\n );\n }\n\n const existingResource = contextResources.get(contextKey);\n\n if (existingResource !== undefined) {\n throw new Error(\n `Resources \"${existingResource}\" and \"${resource}\" both map to render context key \"${contextKey}\"`,\n );\n }\n\n contextResources.set(contextKey, resource);\n\n /**\n * Built once per resource so every scoped component keeps a stable\n * identity, and shared by the resource render, the render context,\n * and any component bound through `asHOF()`.\n */\n const scopedComponents: Record<\n string,\n (props?: never) => JSX.Element\n > = {};\n\n for (const [name, definition] of Object.entries(\n entry.components ?? {},\n )) {\n if (reservedScopedComponentNames.has(name)) {\n throw new Error(\n `Scoped component \"${name}\" for resource \"${resource}\" uses a reserved name`,\n );\n }\n\n const ownPropDefinitions = definition.props ?? {};\n // Last call-site own-props / returned component for this scoped\n // entry. Compound statics re-run `render` with these so\n // `<DataTable variant=\"b\" />` then `<DataTable.Loading />` sees \"b\".\n let cachedOwnProps: Record<string, unknown> = {};\n let cachedReturnedComponent:\n | ComponentType<Record<string, unknown>>\n | undefined;\n\n function ScopedComponent(ownProps?: Record<string, unknown>) {\n const componentProps = useContext(componentPropsContext);\n\n if (componentProps === undefined) {\n throw new Error(\n `Scoped component \"${name}\" must be rendered inside its scoped component`,\n );\n }\n\n const resolvedOwnProps = ownProps ?? {};\n cachedOwnProps = resolvedOwnProps;\n\n validateProps(ownPropDefinitions, resolvedOwnProps);\n\n // Mount a returned component type with call-site props; pass\n // nodes (elements, portals, null) through unchanged.\n const result = definition.render(\n { ...componentProps, ...resolvedOwnProps, resource },\n scopedComponents,\n );\n\n if (isRenderableComponentType(result)) {\n cachedReturnedComponent = result as ComponentType<\n Record<string, unknown>\n >;\n }\n\n return resolveScopedRenderResult(result, resolvedOwnProps);\n }\n\n // Types expose compound statics from the returned component\n // (`DataTable.Loading`); attach matching runtime wrappers.\n scopedComponents[name] = withScopedCompoundStatics(\n ScopedComponent,\n (staticName) => {\n function CompoundStatic(ownProps?: Record<string, unknown>) {\n const componentProps = useContext(componentPropsContext);\n\n if (componentProps === undefined) {\n throw new Error(\n `Scoped component \"${name}.${staticName}\" must be rendered inside its scoped component`,\n );\n }\n\n // Prefer the component from the last parent call (same\n // closure as that call's own-props). Fall back to re-running\n // render with cached parent props when needed.\n let result: unknown = cachedReturnedComponent;\n\n if (!isRenderableComponentType(result)) {\n result = definition.render(\n {\n ...componentProps,\n ...cachedOwnProps,\n resource,\n },\n scopedComponents,\n );\n }\n\n if (!isRenderableComponentType(result)) {\n throw new Error(\n `Scoped component \"${name}\" must return a component type to use static \"${staticName}\"`,\n );\n }\n\n const staticComponent = (\n result as ComponentType<Record<string, unknown>> &\n Record<string, unknown>\n )[staticName];\n\n if (!isRenderableComponentType(staticComponent)) {\n throw new Error(\n `Scoped component \"${name}\" has no component static \"${staticName}\"`,\n );\n }\n\n // Loading's props — those mount the static itself.\n return createElement(staticComponent, ownProps ?? {});\n }\n\n CompoundStatic.displayName = `${name}.${staticName}`;\n return CompoundStatic;\n },\n ) as (props?: never) => JSX.Element;\n }\n\n resourceScopedComponents.set(resource, scopedComponents);\n\n function ResourceRender(ownProps?: Record<string, unknown>) {\n const componentProps = useContext(componentPropsContext);\n\n if (componentProps === undefined) {\n throw new Error(\n `Render context component \"${contextKey}\" must be rendered inside its scoped component`,\n );\n }\n\n // Call-site props on `context.Users({ title, heading })` merge into\n // the resource render props and mount a returned component type.\n const callProps = { ...componentProps, ...ownProps, resource };\n return resolveScopedRenderResult(\n entry.render(callProps, scopedComponents),\n ownProps,\n );\n }\n\n return [\n contextKey,\n Object.assign(ResourceRender, scopedComponents),\n ];\n }),\n );\n\n /**\n * Layouts are created once per resource and cached. Creating one during\n * render would hand React a new component type on every pass, remounting\n * the whole subtree.\n */\n const roots = new Map<\n LayoutResourceKey<Resources>,\n (props: Record<string, unknown>) => JSX.Element\n >();\n\n function Root(rootProps: Record<string, unknown>) {\n const componentProps = useContext(componentPropsContext);\n\n if (componentProps === undefined) {\n throw new Error(\n 'Render context component \"Root\" must be rendered inside its scoped component',\n );\n }\n\n const resource =\n componentProps.resource as LayoutResourceKey<Resources>;\n let root = roots.get(resource);\n\n if (root === undefined) {\n const entry = definedEntries.get(resource);\n\n if (entry === undefined) {\n throw new Error(\n `Render context component \"Root\" requires a \"resources.${resource}\" entry to build the layout for resource \"${resource}\"`,\n );\n }\n\n // Layout option values come from the outer component call site\n // (`<Directory title=\"…\" />`), not from the resource entry.\n const availableDefinitions =\n getComponentPropDefinitions(resource);\n const layoutOptions: Record<string, unknown> = {};\n\n for (const key of Object.keys(availableDefinitions)) {\n if (key in componentProps) {\n layoutOptions[key] = componentProps[key];\n }\n\n const capitalized = capitalize(key);\n if (capitalized in componentProps) {\n layoutOptions[capitalized] = componentProps[capitalized];\n }\n }\n\n root = scopedCreateResourceLayout({\n ...layoutOptions,\n name:\n entry.name ??\n defaultNames.get(resource) ??\n capitalize(resource),\n resource,\n }) as (props: Record<string, unknown>) => JSX.Element;\n roots.set(resource, root);\n }\n\n return createElement(root, rootProps);\n }\n\n renderContext.Root = Root;\n\n function Component(componentProps: Record<string, unknown>) {\n const componentResource =\n componentProps.resource as LayoutResourceKey<Resources>;\n\n if (!selectedResources.has(componentResource)) {\n throw new Error(\n `Resource \"${componentResource}\" is not available in this scoped component`,\n );\n }\n\n const availableDefinitions =\n getComponentPropDefinitions(componentResource);\n const definitionsToValidate: Record<string, AnyBuiltPropDefinition> =\n {};\n\n for (const [key, inclusion] of Object.entries(include)) {\n const definition = availableDefinitions[key];\n\n if (!definition) {\n continue;\n }\n\n // Keep declared keys as-is — do not capitalize JSX.Element props.\n if (inclusion === true || key in componentProps) {\n definitionsToValidate[key] = definition;\n }\n }\n\n for (const [key, definition] of Object.entries(custom)) {\n if (key === 'children' || key === 'resource') {\n continue;\n }\n\n definitionsToValidate[key] = definition;\n }\n\n validateProps(definitionsToValidate, componentProps);\n\n // Top-level render may return a component type; mount it with the full\n // component props (include/custom + inferred return-type props).\n return createElement(\n componentPropsContext.Provider,\n { value: componentProps },\n resolveScopedRenderResult(\n componentOptions.render(componentProps, renderContext),\n componentProps,\n ),\n );\n }\n\n /**\n * Bound components are created once per resource and cached. Returning a\n * fresh component from the factory would hand React a new component type\n * whenever the caller rebinds, remounting the subtree.\n */\n const boundComponents = new Map<\n LayoutResourceKey<Resources>,\n (props: Record<string, unknown>) => JSX.Element\n >();\n\n function bindResource(resource: LayoutResourceKey<Resources>) {\n if (!selectedResources.has(resource)) {\n throw new Error(\n `Resource \"${resource}\" is not available in this scoped component`,\n );\n }\n\n let boundComponent = boundComponents.get(resource);\n\n if (boundComponent === undefined) {\n boundComponent = Object.assign(\n (boundProps: Record<string, unknown>) =>\n createElement(Component, { ...boundProps, resource }),\n {\n displayName: `ScopedResourceComponent(${resource})`,\n props: undefined,\n resource: undefined,\n },\n resourceScopedComponents.get(resource) ?? {},\n );\n boundComponents.set(resource, boundComponent);\n }\n\n return boundComponent;\n }\n\n function asHOF() {\n return bindResource;\n }\n\n return Object.assign(Component, {\n asHOF,\n displayName: 'ScopedResourceComponent',\n props: undefined,\n });\n }\n\n type CreateComponentPropsBag = {\n include?: Record<string, true | 'optional'>;\n custom?: Record<string, AnyBuiltPropDefinition>;\n };\n\n const createResourceComponentExtras = new WeakMap<\n object,\n CreateComponentPropsBag\n >();\n\n function mergeCreateComponentProps(\n ...bags: Array<CreateComponentPropsBag | undefined>\n ): CreateComponentPropsBag {\n const include: Record<string, true | 'optional'> = {};\n const custom: Record<string, AnyBuiltPropDefinition> = {};\n\n for (const bag of bags) {\n Object.assign(include, bag?.include);\n Object.assign(custom, bag?.custom);\n }\n\n return { include, custom };\n }\n\n function createComponentSetProps(baseProps: CreateComponentPropsBag) {\n function createWithProps(componentOptions: {\n props?: CreateComponentPropsBag;\n resources?: Record<string, ScopedComponentEntry>;\n render: (\n props: Record<string, unknown>,\n context: Record<string, (props: never) => JSX.Element>,\n ) => ScopedRenderResult;\n }) {\n const fromEntries = mergeCreateComponentProps(\n ...Object.values(componentOptions.resources ?? {}).map(\n (entry) => createResourceComponentExtras.get(entry),\n ),\n );\n\n return createComponent({\n ...componentOptions,\n props: mergeCreateComponentProps(\n baseProps,\n fromEntries,\n componentOptions.props,\n ),\n });\n }\n\n createWithProps.createResourceComponents = (options: {\n resource: LayoutResourceKey<Resources>;\n props?: CreateComponentPropsBag;\n name?: string;\n components?: Record<string, ScopedResourceScopedComponentDefinition>;\n render: ScopedComponentRenderFn;\n }) => {\n const { resource, props, ...entry } = options;\n\n if (\n !resourceOptions.some(\n (resourceOption) => resourceOption.resource === resource,\n )\n ) {\n throw new Error(\n `Resource \"${resource}\" is not available in this scoped component`,\n );\n }\n\n if (props !== undefined) {\n createResourceComponentExtras.set(entry, props);\n }\n\n return entry;\n };\n\n return createWithProps;\n }\n\n Object.assign(createComponent, {\n setProps: createComponentSetProps,\n });\n\n const scopedExtras: {\n createComponent: typeof createComponent;\n forResource: typeof scopedForResource;\n makeComposable?: (options: Record<string, unknown>) => unknown;\n resources: undefined;\n } = {\n createComponent,\n forResource: scopedForResource,\n resources: undefined,\n };\n\n if (createMakeComposableLayout) {\n const makeComposableLayout = createMakeComposableLayout();\n\n scopedExtras.makeComposable = (options) => {\n const resource = options.resource as LayoutResourceKey<Resources>;\n\n return makeComposableLayout({\n ...options,\n name: options.name ?? defaultNames.get(resource),\n });\n };\n }\n\n return Object.assign(scopedCreateResourceLayout, scopedExtras);\n }) as unknown as CreateResourceLayoutForResourcesFn<\n Resources,\n InProps,\n Composables,\n IncludeProps,\n CustomProps\n >;\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"create-for-resources.mjs","names":[],"sources":["../../../src/create-config/for-resources/create-for-resources.ts"],"sourcesContent":["import {\n createContext,\n createElement,\n type ComponentType,\n type JSX,\n useContext,\n} from 'react';\nimport type { ComposableComponents } from '@jfdevelops/react-layout-composables';\nimport {\n type AnyBuiltPropDefinition,\n validateProps,\n} from '@jfdevelops/react-layout-validator';\nimport type { InPropsDefinition, InPropsObject } from '../../props';\nimport type { LayoutResourceKey, ResourceDefinition } from '../../resource';\nimport { capitalize } from '../../utils/capitalize';\nimport type { LayoutIncludeProps } from '../define-layout';\nimport type {\n CapitalizedResource,\n ResourcesLayoutName,\n} from './resource-selection';\nimport type { CreateResourceLayoutForResourcesFn } from './scoped-layout';\nimport {\n isRenderableComponentType,\n reservedScopedComponentNames,\n resolveScopedRenderResult,\n type ScopedRenderResult,\n withScopedCompoundStatics,\n} from './scoped-render';\n\ntype CreateForResourcesOptions<\n Resources extends ReadonlyArray<ResourceDefinition>,\n> = {\n createLayoutForResource: (\n defaultName: string | undefined,\n resource: LayoutResourceKey<Resources>,\n ) => unknown;\n createMakeComposableLayout?: () => (\n options: Record<string, unknown>,\n ) => unknown;\n createResourceLayout: (options: Record<string, unknown>) => unknown;\n getComponentPropDefinitions: (\n resource: LayoutResourceKey<Resources>,\n ) => Record<string, AnyBuiltPropDefinition>;\n};\n\nexport function createForResources<\n Resources extends ReadonlyArray<ResourceDefinition>,\n InProps extends InPropsDefinition<Resources>,\n Composables extends ComposableComponents,\n IncludeProps extends LayoutIncludeProps<Resources, InProps, Composables>,\n CustomProps extends InPropsObject,\n>({\n createLayoutForResource,\n createMakeComposableLayout,\n createResourceLayout,\n getComponentPropDefinitions,\n}: CreateForResourcesOptions<Resources>) {\n return ((...resourcesOrOptions: Array<unknown>) => {\n const firstArgument = resourcesOrOptions[0];\n let resourceOptions: Array<{\n resource: LayoutResourceKey<Resources>;\n name?:\n | string\n | ((\n resource: CapitalizedResource<LayoutResourceKey<Resources>>,\n ) => string);\n }>;\n\n if (typeof firstArgument === 'string') {\n resourceOptions = resourcesOrOptions.map((resource) => ({\n resource: resource as LayoutResourceKey<Resources>,\n }));\n } else if (\n firstArgument !== null &&\n typeof firstArgument === 'object' &&\n 'resources' in firstArgument &&\n Array.isArray(firstArgument.resources)\n ) {\n const { name, resources } = firstArgument as {\n name?: ResourcesLayoutName<LayoutResourceKey<Resources>>;\n resources: Array<LayoutResourceKey<Resources>>;\n };\n resourceOptions = resources.map((resource) => ({\n name: typeof name === 'function' ? name : name?.[resource],\n resource,\n }));\n } else {\n resourceOptions = Object.entries(firstArgument ?? {}).map(\n ([resource, options]) => ({\n ...(options as {\n name?:\n | string\n | ((\n resource: CapitalizedResource<LayoutResourceKey<Resources>>,\n ) => string);\n }),\n resource: resource as LayoutResourceKey<Resources>,\n }),\n );\n }\n\n const defaultNames = new Map(\n resourceOptions.map(({ name, resource }) => [\n resource,\n typeof name === 'function'\n ? name(\n capitalize(resource) as CapitalizedResource<\n LayoutResourceKey<Resources>\n >,\n )\n : name,\n ]),\n );\n\n function scopedCreateResourceLayout(options: Record<string, unknown>) {\n const resource = options.resource as LayoutResourceKey<Resources>;\n\n return createResourceLayout({\n ...options,\n name: options.name ?? defaultNames.get(resource),\n });\n }\n\n function scopedForResource(options: {\n name?: string;\n resource: LayoutResourceKey<Resources>;\n }) {\n return createLayoutForResource(\n options.name ?? defaultNames.get(options.resource),\n options.resource,\n );\n }\n\n type ScopedComponentRenderFn = (\n props: Record<string, unknown>,\n components: Record<string, (props?: never) => JSX.Element>,\n ) => ScopedRenderResult;\n\n type ScopedResourceScopedComponentDefinition = {\n props?: Record<string, AnyBuiltPropDefinition>;\n render: ScopedComponentRenderFn;\n };\n\n type ScopedComponentEntry = {\n [option: string]: unknown;\n name?: string;\n components?: Record<string, ScopedResourceScopedComponentDefinition>;\n render: ScopedComponentRenderFn;\n };\n\n function createComponent(componentOptions: {\n props?: {\n include?: Record<string, true | 'optional'>;\n custom?: Record<string, AnyBuiltPropDefinition>;\n };\n resources?: Record<string, ScopedComponentEntry>;\n render: (\n props: Record<string, unknown>,\n context: Record<string, (props: never) => JSX.Element>,\n ) => ScopedRenderResult;\n }) {\n const include = componentOptions.props?.include ?? {};\n const custom = componentOptions.props?.custom ?? {};\n const selectedResources = new Set(\n resourceOptions.map(({ resource }) => resource),\n );\n const componentPropsContext = createContext<\n Record<string, unknown> | undefined\n >(undefined);\n const definedEntries = new Map<\n LayoutResourceKey<Resources>,\n ScopedComponentEntry\n >();\n\n for (const [key, entry] of Object.entries(\n componentOptions.resources ?? {},\n )) {\n const resource = key as LayoutResourceKey<Resources>;\n\n if (!selectedResources.has(resource)) {\n throw new Error(\n `Resource \"${key}\" is not available in this scoped component`,\n );\n }\n\n definedEntries.set(resource, entry);\n }\n\n /** Resolved scoped components, per resource. */\n const resourceScopedComponents = new Map<\n LayoutResourceKey<Resources>,\n Record<string, (props?: never) => JSX.Element>\n >();\n const contextResources = new Map<string, LayoutResourceKey<Resources>>();\n const renderContext: Record<string, (props: never) => JSX.Element> =\n Object.fromEntries(\n [...definedEntries].map(([resource, entry]) => {\n const contextKey = capitalize(resource);\n\n if (contextKey === 'Root') {\n throw new Error(\n `Resource \"${resource}\" maps to the reserved render context key \"Root\"`,\n );\n }\n\n const existingResource = contextResources.get(contextKey);\n\n if (existingResource !== undefined) {\n throw new Error(\n `Resources \"${existingResource}\" and \"${resource}\" both map to render context key \"${contextKey}\"`,\n );\n }\n\n contextResources.set(contextKey, resource);\n\n /**\n * Built once per resource so every scoped component keeps a stable\n * identity, and shared by the resource render, the render context,\n * and any component bound through `asHOF()`.\n */\n const scopedComponents: Record<\n string,\n (props?: never) => JSX.Element\n > = {};\n\n for (const [name, definition] of Object.entries(\n entry.components ?? {},\n )) {\n if (reservedScopedComponentNames.has(name)) {\n throw new Error(\n `Scoped component \"${name}\" for resource \"${resource}\" uses a reserved name`,\n );\n }\n\n const ownPropDefinitions = definition.props ?? {};\n // Last call-site own-props / returned component for this scoped\n // entry. Compound statics re-run `render` with these so\n // `<DataTable variant=\"b\" />` then `<DataTable.Loading />` sees \"b\".\n let cachedOwnProps: Record<string, unknown> = {};\n let cachedReturnedComponent:\n | ComponentType<Record<string, unknown>>\n | undefined;\n\n function ScopedComponent(ownProps?: Record<string, unknown>) {\n const componentProps = useContext(componentPropsContext);\n\n if (componentProps === undefined) {\n throw new Error(\n `Scoped component \"${name}\" must be rendered inside its scoped component`,\n );\n }\n\n const resolvedOwnProps = ownProps ?? {};\n cachedOwnProps = resolvedOwnProps;\n\n validateProps(ownPropDefinitions, resolvedOwnProps, {\n layoutName:\n entry.name ??\n defaultNames.get(resource) ??\n capitalize(resource),\n resource,\n });\n\n // Mount a returned component type with call-site props; pass\n // nodes (elements, portals, null) through unchanged.\n const result = definition.render(\n { ...componentProps, ...resolvedOwnProps, resource },\n scopedComponents,\n );\n\n if (isRenderableComponentType(result)) {\n cachedReturnedComponent = result as ComponentType<\n Record<string, unknown>\n >;\n }\n\n return resolveScopedRenderResult(result, resolvedOwnProps);\n }\n\n // Types expose compound statics from the returned component\n // (`DataTable.Loading`); attach matching runtime wrappers.\n scopedComponents[name] = withScopedCompoundStatics(\n ScopedComponent,\n (staticName) => {\n function CompoundStatic(ownProps?: Record<string, unknown>) {\n const componentProps = useContext(componentPropsContext);\n\n if (componentProps === undefined) {\n throw new Error(\n `Scoped component \"${name}.${staticName}\" must be rendered inside its scoped component`,\n );\n }\n\n // Prefer the component from the last parent call (same\n // closure as that call's own-props). Fall back to re-running\n // render with cached parent props when needed.\n let result: unknown = cachedReturnedComponent;\n\n if (!isRenderableComponentType(result)) {\n result = definition.render(\n {\n ...componentProps,\n ...cachedOwnProps,\n resource,\n },\n scopedComponents,\n );\n }\n\n if (!isRenderableComponentType(result)) {\n throw new Error(\n `Scoped component \"${name}\" must return a component type to use static \"${staticName}\"`,\n );\n }\n\n const staticComponent = (\n result as ComponentType<Record<string, unknown>> &\n Record<string, unknown>\n )[staticName];\n\n if (!isRenderableComponentType(staticComponent)) {\n throw new Error(\n `Scoped component \"${name}\" has no component static \"${staticName}\"`,\n );\n }\n\n // Loading's props — those mount the static itself.\n return createElement(staticComponent, ownProps ?? {});\n }\n\n CompoundStatic.displayName = `${name}.${staticName}`;\n return CompoundStatic;\n },\n ) as (props?: never) => JSX.Element;\n }\n\n resourceScopedComponents.set(resource, scopedComponents);\n\n function ResourceRender(ownProps?: Record<string, unknown>) {\n const componentProps = useContext(componentPropsContext);\n\n if (componentProps === undefined) {\n throw new Error(\n `Render context component \"${contextKey}\" must be rendered inside its scoped component`,\n );\n }\n\n // Call-site props on `context.Users({ title, heading })` merge into\n // the resource render props and mount a returned component type.\n const callProps = { ...componentProps, ...ownProps, resource };\n return resolveScopedRenderResult(\n entry.render(callProps, scopedComponents),\n ownProps,\n );\n }\n\n return [\n contextKey,\n Object.assign(ResourceRender, scopedComponents),\n ];\n }),\n );\n\n /**\n * Layouts are created once per resource and cached. Creating one during\n * render would hand React a new component type on every pass, remounting\n * the whole subtree.\n */\n const roots = new Map<\n LayoutResourceKey<Resources>,\n (props: Record<string, unknown>) => JSX.Element\n >();\n\n function Root(rootProps: Record<string, unknown>) {\n const componentProps = useContext(componentPropsContext);\n\n if (componentProps === undefined) {\n throw new Error(\n 'Render context component \"Root\" must be rendered inside its scoped component',\n );\n }\n\n const resource =\n componentProps.resource as LayoutResourceKey<Resources>;\n let root = roots.get(resource);\n\n if (root === undefined) {\n const entry = definedEntries.get(resource);\n\n if (entry === undefined) {\n throw new Error(\n `Render context component \"Root\" requires a \"resources.${resource}\" entry to build the layout for resource \"${resource}\"`,\n );\n }\n\n // Layout option values come from the outer component call site\n // (`<Directory title=\"…\" />`), not from the resource entry.\n const availableDefinitions =\n getComponentPropDefinitions(resource);\n const layoutOptions: Record<string, unknown> = {};\n\n for (const key of Object.keys(availableDefinitions)) {\n if (key in componentProps) {\n layoutOptions[key] = componentProps[key];\n }\n\n const capitalized = capitalize(key);\n if (capitalized in componentProps) {\n layoutOptions[capitalized] = componentProps[capitalized];\n }\n }\n\n root = scopedCreateResourceLayout({\n ...layoutOptions,\n name:\n entry.name ??\n defaultNames.get(resource) ??\n capitalize(resource),\n resource,\n }) as (props: Record<string, unknown>) => JSX.Element;\n roots.set(resource, root);\n }\n\n return createElement(root, rootProps);\n }\n\n renderContext.Root = Root;\n\n function Component(componentProps: Record<string, unknown>) {\n const componentResource =\n componentProps.resource as LayoutResourceKey<Resources>;\n\n if (!selectedResources.has(componentResource)) {\n throw new Error(\n `Resource \"${componentResource}\" is not available in this scoped component`,\n );\n }\n\n const availableDefinitions =\n getComponentPropDefinitions(componentResource);\n const definitionsToValidate: Record<string, AnyBuiltPropDefinition> =\n {};\n\n for (const [key, inclusion] of Object.entries(include)) {\n const definition = availableDefinitions[key];\n\n if (!definition) {\n continue;\n }\n\n // Keep declared keys as-is — do not capitalize JSX.Element props.\n if (inclusion === true || key in componentProps) {\n definitionsToValidate[key] = definition;\n }\n }\n\n for (const [key, definition] of Object.entries(custom)) {\n if (key === 'children' || key === 'resource') {\n continue;\n }\n\n definitionsToValidate[key] = definition;\n }\n\n validateProps(definitionsToValidate, componentProps, {\n layoutName:\n definedEntries.get(componentResource)?.name ??\n defaultNames.get(componentResource) ??\n capitalize(componentResource),\n resource: componentResource,\n });\n\n // Top-level render may return a component type; mount it with the full\n // component props (include/custom + inferred return-type props).\n return createElement(\n componentPropsContext.Provider,\n { value: componentProps },\n resolveScopedRenderResult(\n componentOptions.render(componentProps, renderContext),\n componentProps,\n ),\n );\n }\n\n /**\n * Bound components are created once per resource and cached. Returning a\n * fresh component from the factory would hand React a new component type\n * whenever the caller rebinds, remounting the subtree.\n */\n const boundComponents = new Map<\n LayoutResourceKey<Resources>,\n (props: Record<string, unknown>) => JSX.Element\n >();\n\n function bindResource(resource: LayoutResourceKey<Resources>) {\n if (!selectedResources.has(resource)) {\n throw new Error(\n `Resource \"${resource}\" is not available in this scoped component`,\n );\n }\n\n let boundComponent = boundComponents.get(resource);\n\n if (boundComponent === undefined) {\n boundComponent = Object.assign(\n (boundProps: Record<string, unknown>) =>\n createElement(Component, { ...boundProps, resource }),\n {\n displayName: `ScopedResourceComponent(${resource})`,\n props: undefined,\n resource: undefined,\n },\n resourceScopedComponents.get(resource) ?? {},\n );\n boundComponents.set(resource, boundComponent);\n }\n\n return boundComponent;\n }\n\n function asHOF() {\n return bindResource;\n }\n\n return Object.assign(Component, {\n asHOF,\n displayName: 'ScopedResourceComponent',\n props: undefined,\n });\n }\n\n type CreateComponentPropsBag = {\n include?: Record<string, true | 'optional'>;\n custom?: Record<string, AnyBuiltPropDefinition>;\n };\n\n const createResourceComponentExtras = new WeakMap<\n object,\n CreateComponentPropsBag\n >();\n\n function mergeCreateComponentProps(\n ...bags: Array<CreateComponentPropsBag | undefined>\n ): CreateComponentPropsBag {\n const include: Record<string, true | 'optional'> = {};\n const custom: Record<string, AnyBuiltPropDefinition> = {};\n\n for (const bag of bags) {\n Object.assign(include, bag?.include);\n Object.assign(custom, bag?.custom);\n }\n\n return { include, custom };\n }\n\n function createComponentSetProps(baseProps: CreateComponentPropsBag) {\n function createWithProps(componentOptions: {\n props?: CreateComponentPropsBag;\n resources?: Record<string, ScopedComponentEntry>;\n render: (\n props: Record<string, unknown>,\n context: Record<string, (props: never) => JSX.Element>,\n ) => ScopedRenderResult;\n }) {\n const fromEntries = mergeCreateComponentProps(\n ...Object.values(componentOptions.resources ?? {}).map(\n (entry) => createResourceComponentExtras.get(entry),\n ),\n );\n\n return createComponent({\n ...componentOptions,\n props: mergeCreateComponentProps(\n baseProps,\n fromEntries,\n componentOptions.props,\n ),\n });\n }\n\n createWithProps.createResourceComponents = (options: {\n resource: LayoutResourceKey<Resources>;\n props?: CreateComponentPropsBag;\n name?: string;\n components?: Record<string, ScopedResourceScopedComponentDefinition>;\n render: ScopedComponentRenderFn;\n }) => {\n const { resource, props, ...entry } = options;\n\n if (\n !resourceOptions.some(\n (resourceOption) => resourceOption.resource === resource,\n )\n ) {\n throw new Error(\n `Resource \"${resource}\" is not available in this scoped component`,\n );\n }\n\n if (props !== undefined) {\n createResourceComponentExtras.set(entry, props);\n }\n\n return entry;\n };\n\n return createWithProps;\n }\n\n Object.assign(createComponent, {\n setProps: createComponentSetProps,\n });\n\n const scopedExtras: {\n createComponent: typeof createComponent;\n forResource: typeof scopedForResource;\n makeComposable?: (options: Record<string, unknown>) => unknown;\n resources: undefined;\n } = {\n createComponent,\n forResource: scopedForResource,\n resources: undefined,\n };\n\n if (createMakeComposableLayout) {\n const makeComposableLayout = createMakeComposableLayout();\n\n scopedExtras.makeComposable = (options) => {\n const resource = options.resource as LayoutResourceKey<Resources>;\n\n return makeComposableLayout({\n ...options,\n name: options.name ?? defaultNames.get(resource),\n });\n };\n }\n\n return Object.assign(scopedCreateResourceLayout, scopedExtras);\n }) as unknown as CreateResourceLayoutForResourcesFn<\n Resources,\n InProps,\n Composables,\n IncludeProps,\n CustomProps\n >;\n}\n"],"mappings":"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"}
|
package/dist/index.cjs
CHANGED
|
@@ -11,6 +11,12 @@ Object.defineProperty(exports, 'LayoutComposablePresetProvider', {
|
|
|
11
11
|
return _jfdevelops_react_layout_composables.LayoutComposablePresetProvider;
|
|
12
12
|
}
|
|
13
13
|
});
|
|
14
|
+
Object.defineProperty(exports, 'PropError', {
|
|
15
|
+
enumerable: true,
|
|
16
|
+
get: function () {
|
|
17
|
+
return _jfdevelops_react_layout_validator.PropError;
|
|
18
|
+
}
|
|
19
|
+
});
|
|
14
20
|
Object.defineProperty(exports, 'collectComposablePresetEntries', {
|
|
15
21
|
enumerable: true,
|
|
16
22
|
get: function () {
|
package/dist/index.d.cts
CHANGED
|
@@ -3,5 +3,5 @@ import { LayoutResourceKey, NormalizeResource, NormalizeResources, ResourceDefin
|
|
|
3
3
|
import { InPropsDefinition, InPropsFunction, InPropsObject, InPropsOptions, IncludedProps, InferredInProps, LayoutRenderProps, MergedLayoutInProps, PropsContextRender, PropsRenderDefinition, ResolvedIncludedProps, ResolvedIncludedPropsAsDefined } from "./props.cjs";
|
|
4
4
|
import { defineResourceLayout } from "./create-config/define-layout.cjs";
|
|
5
5
|
import { AnyComposableComponent, ComposableComponent, ComposableComponentCallable, ComposableComponents, ComposableNameContext, ComposablePresetComponent, ComposablePresetComponentCallProps, ComposablePresetMeta, ComposablePresetProps, ComposableResourceLayout, CreateLayoutComposable, DefinedComposableComponentRecord, LayoutComposablePresetProvider, LayoutComposablesFactory, MakeComposable, MakeComposableOptions, MergePresetProps, PresetPropsFromComposable, RequiredPresetLayoutProps, RequiredPresetRenderProps, ResolveLayoutComposables, collectComposablePresetEntries, createComposableComponent, createLayoutComposableFactory, defineComposableComponent, makeComposable, resolveComposablePresetProps, resolveLayoutComposables } from "@jfdevelops/react-layout-composables";
|
|
6
|
-
import { AnyBuiltPropDefinition, ExtractDefinitionValue, ResolveLayoutProps, ResolveLayoutPropsAsDefined, ResolveProps, ResolvedBuiltPropShape, createPrimitivePropBuilder, createProp, isPropDefinitionShape, resolvePropDefinitionValues, validateProps } from "@jfdevelops/react-layout-validator";
|
|
7
|
-
export { type AnyBuiltPropDefinition, type AnyComposableComponent, type BaseComponent, type ComposableComponent, type ComposableComponentCallable, type ComposableComponents, type ComposableNameContext, type ComposablePresetComponent, type ComposablePresetComponentCallProps, type ComposablePresetMeta, type ComposablePresetProps, type ComposableResourceLayout, type CreateLayoutComposable, type DefinedComposableComponentRecord, type ExtractDefinitionValue, type InPropsDefinition, type InPropsFunction, type InPropsObject, type InPropsOptions, type IncludedProps, type InferredInProps, LayoutComposablePresetProvider, type LayoutComposablesFactory, type LayoutRenderProps, type LayoutResourceKey, type MakeComposable, type MakeComposableOptions, type MergeIntersection, type MergePresetProps, type MergedLayoutInProps, type NormalizeResource, type NormalizeResources, type PresetPropsFromComposable, type PropsContextRender, type PropsRenderDefinition, type RequiredPresetLayoutProps, type RequiredPresetRenderProps, type ResolveLayoutComposables, type ResolveLayoutProps, type ResolveLayoutPropsAsDefined, type ResolveProps, type ResolvedBuiltPropShape, type ResolvedIncludedProps, type ResolvedIncludedPropsAsDefined, type ResourceDefinition, type ResourceEnum, type ResourceLayoutComponentProps, type ResourceTree, type Show, type UnionToIntersection, collectComposablePresetEntries, createComposableComponent, createLayoutComposableFactory, createPrimitivePropBuilder, createProp, defineComposableComponent, defineResourceLayout, isPropDefinitionShape, makeComposable, normalizeResource, normalizeResources, pick, resolveComposablePresetProps, resolveLayoutComposables, resolvePropDefinitionValues, toResourceEnum, validateProps };
|
|
6
|
+
import { AnyBuiltPropDefinition, ExtractDefinitionValue, PropError, PropErrorOptions, ResolveLayoutProps, ResolveLayoutPropsAsDefined, ResolveProps, ResolvedBuiltPropShape, createPrimitivePropBuilder, createProp, isPropDefinitionShape, resolvePropDefinitionValues, validateProps } from "@jfdevelops/react-layout-validator";
|
|
7
|
+
export { type AnyBuiltPropDefinition, type AnyComposableComponent, type BaseComponent, type ComposableComponent, type ComposableComponentCallable, type ComposableComponents, type ComposableNameContext, type ComposablePresetComponent, type ComposablePresetComponentCallProps, type ComposablePresetMeta, type ComposablePresetProps, type ComposableResourceLayout, type CreateLayoutComposable, type DefinedComposableComponentRecord, type ExtractDefinitionValue, type InPropsDefinition, type InPropsFunction, type InPropsObject, type InPropsOptions, type IncludedProps, type InferredInProps, LayoutComposablePresetProvider, type LayoutComposablesFactory, type LayoutRenderProps, type LayoutResourceKey, type MakeComposable, type MakeComposableOptions, type MergeIntersection, type MergePresetProps, type MergedLayoutInProps, type NormalizeResource, type NormalizeResources, type PresetPropsFromComposable, PropError, type PropErrorOptions, type PropsContextRender, type PropsRenderDefinition, type RequiredPresetLayoutProps, type RequiredPresetRenderProps, type ResolveLayoutComposables, type ResolveLayoutProps, type ResolveLayoutPropsAsDefined, type ResolveProps, type ResolvedBuiltPropShape, type ResolvedIncludedProps, type ResolvedIncludedPropsAsDefined, type ResourceDefinition, type ResourceEnum, type ResourceLayoutComponentProps, type ResourceTree, type Show, type UnionToIntersection, collectComposablePresetEntries, createComposableComponent, createLayoutComposableFactory, createPrimitivePropBuilder, createProp, defineComposableComponent, defineResourceLayout, isPropDefinitionShape, makeComposable, normalizeResource, normalizeResources, pick, resolveComposablePresetProps, resolveLayoutComposables, resolvePropDefinitionValues, toResourceEnum, validateProps };
|
package/dist/index.d.mts
CHANGED
|
@@ -3,5 +3,5 @@ import { LayoutResourceKey, NormalizeResource, NormalizeResources, ResourceDefin
|
|
|
3
3
|
import { InPropsDefinition, InPropsFunction, InPropsObject, InPropsOptions, IncludedProps, InferredInProps, LayoutRenderProps, MergedLayoutInProps, PropsContextRender, PropsRenderDefinition, ResolvedIncludedProps, ResolvedIncludedPropsAsDefined } from "./props.mjs";
|
|
4
4
|
import { defineResourceLayout } from "./create-config/define-layout.mjs";
|
|
5
5
|
import { AnyComposableComponent, ComposableComponent, ComposableComponentCallable, ComposableComponents, ComposableNameContext, ComposablePresetComponent, ComposablePresetComponentCallProps, ComposablePresetMeta, ComposablePresetProps, ComposableResourceLayout, CreateLayoutComposable, DefinedComposableComponentRecord, LayoutComposablePresetProvider, LayoutComposablesFactory, MakeComposable, MakeComposableOptions, MergePresetProps, PresetPropsFromComposable, RequiredPresetLayoutProps, RequiredPresetRenderProps, ResolveLayoutComposables, collectComposablePresetEntries, createComposableComponent, createLayoutComposableFactory, defineComposableComponent, makeComposable, resolveComposablePresetProps, resolveLayoutComposables } from "@jfdevelops/react-layout-composables";
|
|
6
|
-
import { AnyBuiltPropDefinition, ExtractDefinitionValue, ResolveLayoutProps, ResolveLayoutPropsAsDefined, ResolveProps, ResolvedBuiltPropShape, createPrimitivePropBuilder, createProp, isPropDefinitionShape, resolvePropDefinitionValues, validateProps } from "@jfdevelops/react-layout-validator";
|
|
7
|
-
export { type AnyBuiltPropDefinition, type AnyComposableComponent, type BaseComponent, type ComposableComponent, type ComposableComponentCallable, type ComposableComponents, type ComposableNameContext, type ComposablePresetComponent, type ComposablePresetComponentCallProps, type ComposablePresetMeta, type ComposablePresetProps, type ComposableResourceLayout, type CreateLayoutComposable, type DefinedComposableComponentRecord, type ExtractDefinitionValue, type InPropsDefinition, type InPropsFunction, type InPropsObject, type InPropsOptions, type IncludedProps, type InferredInProps, LayoutComposablePresetProvider, type LayoutComposablesFactory, type LayoutRenderProps, type LayoutResourceKey, type MakeComposable, type MakeComposableOptions, type MergeIntersection, type MergePresetProps, type MergedLayoutInProps, type NormalizeResource, type NormalizeResources, type PresetPropsFromComposable, type PropsContextRender, type PropsRenderDefinition, type RequiredPresetLayoutProps, type RequiredPresetRenderProps, type ResolveLayoutComposables, type ResolveLayoutProps, type ResolveLayoutPropsAsDefined, type ResolveProps, type ResolvedBuiltPropShape, type ResolvedIncludedProps, type ResolvedIncludedPropsAsDefined, type ResourceDefinition, type ResourceEnum, type ResourceLayoutComponentProps, type ResourceTree, type Show, type UnionToIntersection, collectComposablePresetEntries, createComposableComponent, createLayoutComposableFactory, createPrimitivePropBuilder, createProp, defineComposableComponent, defineResourceLayout, isPropDefinitionShape, makeComposable, normalizeResource, normalizeResources, pick, resolveComposablePresetProps, resolveLayoutComposables, resolvePropDefinitionValues, toResourceEnum, validateProps };
|
|
6
|
+
import { AnyBuiltPropDefinition, ExtractDefinitionValue, PropError, PropErrorOptions, ResolveLayoutProps, ResolveLayoutPropsAsDefined, ResolveProps, ResolvedBuiltPropShape, createPrimitivePropBuilder, createProp, isPropDefinitionShape, resolvePropDefinitionValues, validateProps } from "@jfdevelops/react-layout-validator";
|
|
7
|
+
export { type AnyBuiltPropDefinition, type AnyComposableComponent, type BaseComponent, type ComposableComponent, type ComposableComponentCallable, type ComposableComponents, type ComposableNameContext, type ComposablePresetComponent, type ComposablePresetComponentCallProps, type ComposablePresetMeta, type ComposablePresetProps, type ComposableResourceLayout, type CreateLayoutComposable, type DefinedComposableComponentRecord, type ExtractDefinitionValue, type InPropsDefinition, type InPropsFunction, type InPropsObject, type InPropsOptions, type IncludedProps, type InferredInProps, LayoutComposablePresetProvider, type LayoutComposablesFactory, type LayoutRenderProps, type LayoutResourceKey, type MakeComposable, type MakeComposableOptions, type MergeIntersection, type MergePresetProps, type MergedLayoutInProps, type NormalizeResource, type NormalizeResources, type PresetPropsFromComposable, PropError, type PropErrorOptions, type PropsContextRender, type PropsRenderDefinition, type RequiredPresetLayoutProps, type RequiredPresetRenderProps, type ResolveLayoutComposables, type ResolveLayoutProps, type ResolveLayoutPropsAsDefined, type ResolveProps, type ResolvedBuiltPropShape, type ResolvedIncludedProps, type ResolvedIncludedPropsAsDefined, type ResourceDefinition, type ResourceEnum, type ResourceLayoutComponentProps, type ResourceTree, type Show, type UnionToIntersection, collectComposablePresetEntries, createComposableComponent, createLayoutComposableFactory, createPrimitivePropBuilder, createProp, defineComposableComponent, defineResourceLayout, isPropDefinitionShape, makeComposable, normalizeResource, normalizeResources, pick, resolveComposablePresetProps, resolveLayoutComposables, resolvePropDefinitionValues, toResourceEnum, validateProps };
|
package/dist/index.mjs
CHANGED
|
@@ -2,6 +2,6 @@ import { normalizeResource, normalizeResources, toResourceEnum } from "./resourc
|
|
|
2
2
|
import { pick } from "./utils.mjs";
|
|
3
3
|
import { defineResourceLayout } from "./create-config/define-layout.mjs";
|
|
4
4
|
import { LayoutComposablePresetProvider, collectComposablePresetEntries, createComposableComponent, createLayoutComposableFactory, defineComposableComponent, makeComposable, resolveComposablePresetProps, resolveLayoutComposables } from "@jfdevelops/react-layout-composables";
|
|
5
|
-
import { createPrimitivePropBuilder, createProp, isPropDefinitionShape, resolvePropDefinitionValues, validateProps } from "@jfdevelops/react-layout-validator";
|
|
5
|
+
import { PropError, createPrimitivePropBuilder, createProp, isPropDefinitionShape, resolvePropDefinitionValues, validateProps } from "@jfdevelops/react-layout-validator";
|
|
6
6
|
|
|
7
|
-
export { LayoutComposablePresetProvider, collectComposablePresetEntries, createComposableComponent, createLayoutComposableFactory, createPrimitivePropBuilder, createProp, defineComposableComponent, defineResourceLayout, isPropDefinitionShape, makeComposable, normalizeResource, normalizeResources, pick, resolveComposablePresetProps, resolveLayoutComposables, resolvePropDefinitionValues, toResourceEnum, validateProps };
|
|
7
|
+
export { LayoutComposablePresetProvider, PropError, collectComposablePresetEntries, createComposableComponent, createLayoutComposableFactory, createPrimitivePropBuilder, createProp, defineComposableComponent, defineResourceLayout, isPropDefinitionShape, makeComposable, normalizeResource, normalizeResources, pick, resolveComposablePresetProps, resolveLayoutComposables, resolvePropDefinitionValues, toResourceEnum, validateProps };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jfdevelops/react-layout",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.17.1",
|
|
4
4
|
"description": "A React library for creating layout components.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -8,7 +8,8 @@
|
|
|
8
8
|
},
|
|
9
9
|
"type": "module",
|
|
10
10
|
"files": [
|
|
11
|
-
"dist"
|
|
11
|
+
"dist",
|
|
12
|
+
"skills"
|
|
12
13
|
],
|
|
13
14
|
"sideEffects": false,
|
|
14
15
|
"main": "./dist/index.cjs",
|
|
@@ -26,8 +27,8 @@
|
|
|
26
27
|
"node": "^20.19.0 || >=22.12.0"
|
|
27
28
|
},
|
|
28
29
|
"dependencies": {
|
|
29
|
-
"@jfdevelops/react-layout-composables": "0.2.
|
|
30
|
-
"@jfdevelops/react-layout-validator": "0.2.
|
|
30
|
+
"@jfdevelops/react-layout-composables": "0.2.4",
|
|
31
|
+
"@jfdevelops/react-layout-validator": "0.2.4"
|
|
31
32
|
},
|
|
32
33
|
"peerDependencies": {
|
|
33
34
|
"react": ">=18",
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: build-react-layouts
|
|
3
|
+
description: Build, extend, refactor, and review typed resource-based React application layouts using @jfdevelops/react-layout. Use when defining shared application shells with defineResourceLayout, generating resource pages with createResourceLayout, creating semantic composables, configuring grouped resource navigation, dispatching route components with createResourceConfig, building create or detail panes, or sharing implementations across multiple resources.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Build React Layouts
|
|
7
|
+
|
|
8
|
+
Use `@jfdevelops/react-layout` as a typed application-structure layer.
|
|
9
|
+
|
|
10
|
+
Model the application around a central resource definition, a shared layout
|
|
11
|
+
contract, small resource-specific page configurations, and router adapters that
|
|
12
|
+
dispatch through the resource configuration. Create additional layout
|
|
13
|
+
definitions for structurally different surfaces such as side panes.
|
|
14
|
+
|
|
15
|
+
Do not treat the library as a replacement for routing, data fetching, form
|
|
16
|
+
state, or application business logic.
|
|
17
|
+
|
|
18
|
+
## Follow the workflow
|
|
19
|
+
|
|
20
|
+
1. Inspect the existing layout definition and resource list.
|
|
21
|
+
2. Identify whether the requested surface belongs to an existing layout family.
|
|
22
|
+
3. Add or reuse the resource in the central definition.
|
|
23
|
+
4. Define shared configuration values with `createProp`.
|
|
24
|
+
5. Expose semantic layout regions through composables.
|
|
25
|
+
6. Generate the narrowest suitable page factory.
|
|
26
|
+
7. Connect navigation and route-state dispatch through the helpers returned by
|
|
27
|
+
`defineResourceLayout`.
|
|
28
|
+
8. Run the application's typecheck and relevant tests.
|
|
29
|
+
|
|
30
|
+
Read [references/architecture.md](references/architecture.md) before creating
|
|
31
|
+
or substantially restructuring a layout definition.
|
|
32
|
+
|
|
33
|
+
Read [references/factory-patterns.md](references/factory-patterns.md) when
|
|
34
|
+
choosing between direct creation, `forResource`, `forResources`,
|
|
35
|
+
`makeComposable`, or `createComponent(...).asHOF()`.
|
|
36
|
+
|
|
37
|
+
Read
|
|
38
|
+
[references/routing-and-navigation.md](references/routing-and-navigation.md)
|
|
39
|
+
when integrating resource links, route components, pending states, errors, or
|
|
40
|
+
not-found states.
|
|
41
|
+
|
|
42
|
+
## Apply the core conventions
|
|
43
|
+
|
|
44
|
+
- Import `defineResourceLayout` and `createProp` from
|
|
45
|
+
`@jfdevelops/react-layout`.
|
|
46
|
+
- Import optional preset composables from their dedicated packages.
|
|
47
|
+
- Export the helpers returned by the central `defineResourceLayout` call.
|
|
48
|
+
- Keep the authoritative resource list in the central layout definition.
|
|
49
|
+
- Use resource names that match the application's route vocabulary.
|
|
50
|
+
- Define reusable configuration in `options`.
|
|
51
|
+
- Use `layout.props.include` for definition-time values consumed by the shared
|
|
52
|
+
renderer.
|
|
53
|
+
- Use `layout.props.custom` for props passed when rendering the generated React
|
|
54
|
+
component.
|
|
55
|
+
- Use `createProp.component({ type: 'ReactNode' })` for React content.
|
|
56
|
+
- Mark genuinely optional values with `.optional()`.
|
|
57
|
+
- Give optional custom values defaults in the shared renderer when appropriate.
|
|
58
|
+
- Name composables by semantic role rather than visual implementation.
|
|
59
|
+
- Connect semantic composables to design-system components with `wrapWith`.
|
|
60
|
+
- Use resource-aware composable names so generated components remain
|
|
61
|
+
identifiable in React DevTools.
|
|
62
|
+
- Keep page configuration close to the corresponding resource feature.
|
|
63
|
+
- Keep resource routing generic instead of building a separate route component
|
|
64
|
+
for every resource.
|
|
65
|
+
- Confirm helper signatures against the installed package version and let the
|
|
66
|
+
current TypeScript types determine which resource-configuration branches are
|
|
67
|
+
supported.
|
|
68
|
+
- Reuse the consuming application's router and runtime-validation tools. Do not
|
|
69
|
+
add a schema dependency solely to connect a route parameter to a resource.
|
|
70
|
+
- Create a separate `defineResourceLayout` definition for a surface with a
|
|
71
|
+
meaningfully different structural contract, such as a create or detail pane.
|
|
72
|
+
- Preserve inferred types. Do not use `any`, broad casts, or duplicated
|
|
73
|
+
hand-written resource types to work around a layout mismatch.
|
|
74
|
+
|
|
75
|
+
## Define semantic composables
|
|
76
|
+
|
|
77
|
+
Prefer names that describe application structure, such as `Layout`, `Header`,
|
|
78
|
+
`Content`, `ResourceLayout`, `ResourceHeader`, `ResourceHeaderActions`, and
|
|
79
|
+
`Breadcrumb`.
|
|
80
|
+
|
|
81
|
+
Do not expose every wrapper element as a composable. Expose a region when
|
|
82
|
+
consumers may need to replace it, compose it, style it, or address it through a
|
|
83
|
+
generated component.
|
|
84
|
+
|
|
85
|
+
## Separate definition-time and render-time props
|
|
86
|
+
|
|
87
|
+
Use `options` for values supplied while creating a resource layout:
|
|
88
|
+
|
|
89
|
+
```tsx
|
|
90
|
+
options: {
|
|
91
|
+
title: createProp.component({ type: 'ReactNode' }).optional(),
|
|
92
|
+
}
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
Make an option available to the shared renderer through `include`:
|
|
96
|
+
|
|
97
|
+
```tsx
|
|
98
|
+
layout: {
|
|
99
|
+
props: {
|
|
100
|
+
include: {
|
|
101
|
+
title: true,
|
|
102
|
+
},
|
|
103
|
+
},
|
|
104
|
+
}
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
Use `custom` for values supplied when rendering the resulting component:
|
|
108
|
+
|
|
109
|
+
```tsx
|
|
110
|
+
layout: {
|
|
111
|
+
props: {
|
|
112
|
+
custom: {
|
|
113
|
+
children: createProp.component({ type: 'ReactNode' }),
|
|
114
|
+
actions: createProp.component({ type: 'ReactNode' }).optional(),
|
|
115
|
+
showHeader: createProp.boolean().optional(),
|
|
116
|
+
},
|
|
117
|
+
},
|
|
118
|
+
}
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
Keep these categories distinct. Do not turn a definition-time page contract
|
|
122
|
+
into a custom render prop merely because both eventually reach the renderer.
|
|
123
|
+
|
|
124
|
+
## Verify the result
|
|
125
|
+
|
|
126
|
+
1. Typecheck the consuming application.
|
|
127
|
+
2. Run relevant component and route tests.
|
|
128
|
+
3. Exercise at least one resource page.
|
|
129
|
+
4. Exercise pending, error, and not-found dispatch if route configuration
|
|
130
|
+
changed.
|
|
131
|
+
5. Exercise create and detail panes if pane configuration changed.
|
|
132
|
+
6. Confirm grouped navigation generates the intended resource and route.
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
# Application Architecture
|
|
2
|
+
|
|
3
|
+
## Contents
|
|
4
|
+
|
|
5
|
+
- Central layout definition
|
|
6
|
+
- Shared layout contract
|
|
7
|
+
- Semantic composables
|
|
8
|
+
- Preset composables
|
|
9
|
+
- Secondary layout families
|
|
10
|
+
- Feature organization
|
|
11
|
+
|
|
12
|
+
## Create a central layout definition
|
|
13
|
+
|
|
14
|
+
Create one central definition for resources that share the same application
|
|
15
|
+
shell. Export the generated helpers from that module:
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import {
|
|
19
|
+
createProp,
|
|
20
|
+
defineResourceLayout,
|
|
21
|
+
} from '@jfdevelops/react-layout';
|
|
22
|
+
|
|
23
|
+
export const {
|
|
24
|
+
createResourceConfig,
|
|
25
|
+
createResourceLayout,
|
|
26
|
+
createResourceLinks,
|
|
27
|
+
} = defineResourceLayout({
|
|
28
|
+
resources: ['appointments', 'locations', 'services', 'settings'],
|
|
29
|
+
options: {
|
|
30
|
+
title: createProp.component({ type: 'ReactNode' }).optional(),
|
|
31
|
+
},
|
|
32
|
+
layout: {
|
|
33
|
+
// Define the shared contract here.
|
|
34
|
+
},
|
|
35
|
+
});
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Import these generated helpers in feature modules instead of defining parallel
|
|
39
|
+
resource lists or rebuilding the application shell.
|
|
40
|
+
|
|
41
|
+
## Define the shared layout contract
|
|
42
|
+
|
|
43
|
+
Separate definition-time configuration from render-time component props:
|
|
44
|
+
|
|
45
|
+
```tsx
|
|
46
|
+
layout: {
|
|
47
|
+
props: {
|
|
48
|
+
include: {
|
|
49
|
+
title: true,
|
|
50
|
+
segments: true,
|
|
51
|
+
},
|
|
52
|
+
custom: {
|
|
53
|
+
children: createProp.component({ type: 'ReactNode' }),
|
|
54
|
+
actions: createProp.component({ type: 'ReactNode' }).optional(),
|
|
55
|
+
showHeader: createProp.boolean().optional(),
|
|
56
|
+
},
|
|
57
|
+
},
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
Use included props for values that describe the generated page. Use custom
|
|
62
|
+
props for content supplied when the generated page component is rendered.
|
|
63
|
+
|
|
64
|
+
Default optional behavioral props in the renderer:
|
|
65
|
+
|
|
66
|
+
```tsx
|
|
67
|
+
render: (
|
|
68
|
+
{ children, actions, showHeader = true, segments },
|
|
69
|
+
{ composables },
|
|
70
|
+
) => {
|
|
71
|
+
// Render the shared shell.
|
|
72
|
+
}
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## Create semantic composables
|
|
76
|
+
|
|
77
|
+
Define named layout regions through the scoped `create` function:
|
|
78
|
+
|
|
79
|
+
```tsx
|
|
80
|
+
composables: (create) => ({
|
|
81
|
+
Layout: create({
|
|
82
|
+
name: ({ capitalize, resource }) =>
|
|
83
|
+
`${capitalize(resource)}Layout`,
|
|
84
|
+
wrapWith: AppLayout,
|
|
85
|
+
}),
|
|
86
|
+
Header: create({
|
|
87
|
+
name: ({ capitalize, resource }) =>
|
|
88
|
+
`${capitalize(resource)}Header`,
|
|
89
|
+
wrapWith: AppHeader,
|
|
90
|
+
}),
|
|
91
|
+
Content: create({
|
|
92
|
+
name: ({ capitalize, resource }) =>
|
|
93
|
+
`${capitalize(resource)}Content`,
|
|
94
|
+
wrapWith: AppContent,
|
|
95
|
+
}),
|
|
96
|
+
ResourceHeaderActions: create({
|
|
97
|
+
name: ({ capitalize, resource }) =>
|
|
98
|
+
`${capitalize(resource)}ResourceHeaderActions`,
|
|
99
|
+
wrapWith: AppResourceHeaderActions,
|
|
100
|
+
}),
|
|
101
|
+
}),
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
Make the composable name communicate the region's role. Use `wrapWith` to
|
|
105
|
+
connect that role to the application's design-system implementation.
|
|
106
|
+
|
|
107
|
+
## Merge preset composables
|
|
108
|
+
|
|
109
|
+
Merge optional preset composables into the same semantic map:
|
|
110
|
+
|
|
111
|
+
```tsx
|
|
112
|
+
import {
|
|
113
|
+
createBreadcrumbComposable,
|
|
114
|
+
} from '@jfdevelops/react-layout-composable-breadcrumb';
|
|
115
|
+
|
|
116
|
+
composables: (create) => ({
|
|
117
|
+
Layout: create({ name: 'Layout', wrapWith: AppLayout }),
|
|
118
|
+
...createBreadcrumbComposable(({ segments }) => (
|
|
119
|
+
<AppBreadcrumb segments={segments} />
|
|
120
|
+
)),
|
|
121
|
+
})
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
Include the preset's required values in `layout.props.include`. Keep
|
|
125
|
+
presentation in the preset renderer and segment definitions in resource page
|
|
126
|
+
configuration.
|
|
127
|
+
|
|
128
|
+
## Create secondary layout families
|
|
129
|
+
|
|
130
|
+
Create another `defineResourceLayout` when a surface has a distinct structural
|
|
131
|
+
contract. A side pane is not merely a variation of the main page shell:
|
|
132
|
+
|
|
133
|
+
```tsx
|
|
134
|
+
export const resourcePaneLayout = defineResourceLayout({
|
|
135
|
+
resources: ['create', 'detail'],
|
|
136
|
+
options: {
|
|
137
|
+
title: createProp.component({ type: 'ReactNode' }),
|
|
138
|
+
},
|
|
139
|
+
layout: {
|
|
140
|
+
props: {
|
|
141
|
+
include: {
|
|
142
|
+
title: true,
|
|
143
|
+
},
|
|
144
|
+
custom: {
|
|
145
|
+
children: createProp.component({ type: 'ReactNode' }),
|
|
146
|
+
},
|
|
147
|
+
},
|
|
148
|
+
render: function Render({ children, title }) {
|
|
149
|
+
return (
|
|
150
|
+
<Panel>
|
|
151
|
+
<PanelHeader>
|
|
152
|
+
<PanelTitle>{title}</PanelTitle>
|
|
153
|
+
</PanelHeader>
|
|
154
|
+
<PanelContent>{children}</PanelContent>
|
|
155
|
+
</Panel>
|
|
156
|
+
);
|
|
157
|
+
},
|
|
158
|
+
},
|
|
159
|
+
});
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
Do not overload the main page layout with pane-specific flags and conditional
|
|
163
|
+
branches.
|
|
164
|
+
|
|
165
|
+
## Organize by feature
|
|
166
|
+
|
|
167
|
+
Keep the general layout definition centralized and concrete page definitions
|
|
168
|
+
beside their feature:
|
|
169
|
+
|
|
170
|
+
```text
|
|
171
|
+
admin/
|
|
172
|
+
├── -utils/
|
|
173
|
+
│ └── layout.tsx
|
|
174
|
+
├── $resource/
|
|
175
|
+
│ ├── -page-config.tsx
|
|
176
|
+
│ ├── -pane/
|
|
177
|
+
│ │ └── layout.tsx
|
|
178
|
+
│ ├── -appointments/
|
|
179
|
+
│ │ └── pages-config.ts
|
|
180
|
+
│ ├── -locations/
|
|
181
|
+
│ │ └── pages-config.ts
|
|
182
|
+
│ └── index.tsx
|
|
183
|
+
└── route.tsx
|
|
184
|
+
```
|