json-react-layouts-data-loader - npm Package Compare versions

Comparing version 4.0.1 to 5.0.0

CHANGELOG.md

 # json-react-layouts-data-loader
 
+## 5.0.0
+
+### Major Changes
+
+-   94a9773:
+    -   `middleware` converted to `getMiddleware(type: 'composition' | 'component')` method to support composition middleware.
+
+### Patch Changes
+
+-   Updated dependencies [94a9773]
+    -   json-react-layouts@4.0.0
+
 ## 4.0.1
@@ -4,0 +16,0 @@

dist/esm/index.js

@@ -37,9 +37,4 @@ var __defProp = Object.defineProperty;
 // packages/json-react-layouts-data-loader/src/get-data-args.ts
-function getComponentDataArgs(layout, componentType) {
-  const componentDataDefinition = layout.componentRegistrations.get(componentType);
-  if (!componentDataDefinition) {
-    return;
-  }
-  const dataDefinition = componentDataDefinition.dataDefinition;
-  return dataDefinition;
+function getDataArgs(registration) {
+  return registration == null ? void 0 : registration.dataDefinition;
 }
@@ -91,3 +86,3 @@
     dataDefinition,
-    componentProps,
+    props,
     services,
@@ -97,3 +92,3 @@ next,
   }) {
-    const dataDefinitionArgs = componentProps.dataDefinitionArgs;
+    const dataDefinitionArgs = props.dataDefinitionArgs;
     const renderProps = useComponentData({
@@ -108,3 +103,3 @@ dataDefinition,
     const data = renderProps.data.hasData ? { data: { loaded: true, result: renderProps.data.result } } : { data: { loaded: false } };
-    return next(__spreadValues(__spreadValues({}, componentProps), data), middlewareProps, services) || null;
+    return next(__spreadValues(__spreadValues({}, props), data), middlewareProps, services) || null;
   }
@@ -122,17 +117,33 @@ return {
     },
-    middleware: (componentProps, middlewareProps, services, next) => {
-      const dataDefinition = getComponentDataArgs(services.layout, componentProps.componentType);
-      if (dataDefinition) {
-        if (dataDefinition.useRuntimeParams) {
-          return /* @__PURE__ */ React.createElement(DataLoaderWithRuntimeParams, {
-            dataDefinition,
-            componentProps,
-            services,
-            next,
-            middlewareProps
-          });
-        }
+    createRegisterableCompositionWithData: () => (type, dataDefinition, render) => {
+      const normalRender = (contentAreas, _a, services) => {
+        var _b = _a, { data, dataDefinitionArgs } = _b, rest = __objRest(_b, ["data", "dataDefinitionArgs"]);
+        return render(contentAreas, rest, __spreadProps(__spreadValues({}, data), {
+          dataDefinitionArgs
+        }), services);
+      };
+      const registrationWithData = { type, render: normalRender, dataDefinition };
+      return registrationWithData;
+    },
+    getMiddleware: (type) => (props, middlewareProps, services, next) => {
+      const registration = type === "component" ? services.layout.componentRegistrations.get(props.layoutType) : services.layout.compositionRegistrations.get(props.layoutType);
+      if (!registration) {
+        return next(props, middlewareProps, services);
+      }
+      const dataDefinition = getDataArgs(registration);
+      if (!dataDefinition) {
+        return next(props, middlewareProps, services);
+      }
+      if (dataDefinition.useRuntimeParams) {
+        return /* @__PURE__ */ React.createElement(DataLoaderWithRuntimeParams, {
+          dataDefinition,
+          componentProps: props,
+          services,
+          next,
+          middlewareProps
+        });
+      } else {
         return /* @__PURE__ */ React.createElement(WithDataLoad, {
           dataDefinition,
-          componentProps,
+          props,
           services,
@@ -143,3 +154,2 @@ next,
       }
-      return next(componentProps, middlewareProps, services);
     }
@@ -149,5 +159,5 @@ };
 export {
-  getComponentDataArgs,
+  getDataArgs as getComponentDataArgs,
   init
 };
 //# sourceMappingURL=index.js.map

dist/get-data-args.d.ts

@@ -1,3 +0,7 @@
-import { LayoutApi } from 'json-react-layouts';
 import { DataDefinition } from './DataLoading';
-export declare function getComponentDataArgs<Services extends {}>(layout: LayoutApi<any, any, any, any, Services>, componentType: string): DataDefinition<any, any, Services, any> | undefined;
+import { ComponentRegistration } from '../../json-react-layouts/src/ComponentRegistrar';
+import { CompositionRegistration } from '../../json-react-layouts/src/CompositionRegistrar';
+export declare type RegistrationWithDataDefinition<Type extends string, ContentAreas extends string, Props extends {}, Services extends {}, DataLoadArguments extends {}, TData, AdditionalParams extends {} = {}> = (ComponentRegistration<Type, Props, Services> | CompositionRegistration<Type, ContentAreas, Services, Props>) & {
+    dataDefinition?: DataDefinition<DataLoadArguments, TData, Services, AdditionalParams>;
+};
+export declare function getDataArgs<Type extends string, ContentAreas extends string, Props extends {}, Services extends {}, DataLoadArguments extends {}, TData, AdditionalParams extends {} = {}>(registration: RegistrationWithDataDefinition<Type, ContentAreas, Props, Services, DataLoadArguments, TData, AdditionalParams> | undefined): DataDefinition<any, any, Services, any> | undefined;

dist/index.d.ts

 import React from 'react';
-import { RendererMiddleware, ComponentRegistration } from 'json-react-layouts';
+import { RendererMiddleware, ComponentRegistration, CompositionRegistration } from 'json-react-layouts';
 import { DataLoaderResources } from 'react-ssr-data-loader';
 import { DataDefinition, MaybeLoaded, LoadData } from './DataLoading';
-import { getComponentDataArgs } from './get-data-args';
+import { getDataArgs } from './get-data-args';
 declare type RenderComponentWithDataProps<ComponentProps extends {}, TData, TConfig extends {}, Services> = (props: ComponentProps, dataProps: MaybeLoaded<TData> & {
     dataDefinitionArgs: TConfig;
 }, services: Services) => React.ReactElement<any> | false | null;
+declare type RenderCompositionWithDataProps<TContentAreas extends string, ComponentProps extends {}, TData, TConfig extends {}, Services> = (contentAreas: {
+    [key in TContentAreas]: React.ReactElement<any>;
+}, props: ComponentProps, dataProps: MaybeLoaded<TData> & {
+    dataDefinitionArgs: TConfig;
+}, services: Services) => React.ReactElement<any> | false | null;
 export declare function init<Services extends object>(resources: DataLoaderResources<Services>, 
@@ -15,4 +20,7 @@ /** Hook into data load functions */
     }, Services>;
-    middleware: RendererMiddleware<Services, {}>;
+    createRegisterableCompositionWithData: <ContentAreas extends string>() => <CompositionType extends string, CompositionProps extends object, DataLoadArgs extends object, CompositionData, AdditionalParams extends object>(type: CompositionType, dataDefinition: DataDefinition<DataLoadArgs, CompositionData, Services, AdditionalParams>, render: RenderCompositionWithDataProps<ContentAreas, CompositionProps, CompositionData, DataLoadArgs, Services>) => CompositionRegistration<CompositionType, ContentAreas, Services, CompositionProps & {
+        dataDefinitionArgs: DataLoadArgs;
+    }>;
+    getMiddleware: (type: 'component' | 'composition') => RendererMiddleware<Services, {}>;
 };
-export { DataDefinition, MaybeLoaded, getComponentDataArgs };
+export { DataDefinition, MaybeLoaded, getDataArgs as getComponentDataArgs };

dist/index.js

@@ -37,9 +37,4 @@ "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }var __defProp = Object.defineProperty;
 // packages/json-react-layouts-data-loader/src/get-data-args.ts
-function getComponentDataArgs(layout, componentType) {
-  const componentDataDefinition = layout.componentRegistrations.get(componentType);
-  if (!componentDataDefinition) {
-    return;
-  }
-  const dataDefinition = componentDataDefinition.dataDefinition;
-  return dataDefinition;
+function getDataArgs(registration) {
+  return registration == null ? void 0 : registration.dataDefinition;
 }
@@ -91,3 +86,3 @@
     dataDefinition,
-    componentProps,
+    props,
     services,
@@ -97,3 +92,3 @@ next,
   }) {
-    const dataDefinitionArgs = componentProps.dataDefinitionArgs;
+    const dataDefinitionArgs = props.dataDefinitionArgs;
     const renderProps = useComponentData({
@@ -108,3 +103,3 @@ dataDefinition,
     const data = renderProps.data.hasData ? { data: { loaded: true, result: renderProps.data.result } } : { data: { loaded: false } };
-    return next(__spreadValues(__spreadValues({}, componentProps), data), middlewareProps, services) || null;
+    return next(__spreadValues(__spreadValues({}, props), data), middlewareProps, services) || null;
   }
@@ -122,17 +117,33 @@ return {
     },
-    middleware: (componentProps, middlewareProps, services, next) => {
-      const dataDefinition = getComponentDataArgs(services.layout, componentProps.componentType);
-      if (dataDefinition) {
-        if (dataDefinition.useRuntimeParams) {
-          return /* @__PURE__ */ _react2.default.createElement(DataLoaderWithRuntimeParams, {
-            dataDefinition,
-            componentProps,
-            services,
-            next,
-            middlewareProps
-          });
-        }
+    createRegisterableCompositionWithData: () => (type, dataDefinition, render) => {
+      const normalRender = (contentAreas, _a, services) => {
+        var _b = _a, { data, dataDefinitionArgs } = _b, rest = __objRest(_b, ["data", "dataDefinitionArgs"]);
+        return render(contentAreas, rest, __spreadProps(__spreadValues({}, data), {
+          dataDefinitionArgs
+        }), services);
+      };
+      const registrationWithData = { type, render: normalRender, dataDefinition };
+      return registrationWithData;
+    },
+    getMiddleware: (type) => (props, middlewareProps, services, next) => {
+      const registration = type === "component" ? services.layout.componentRegistrations.get(props.layoutType) : services.layout.compositionRegistrations.get(props.layoutType);
+      if (!registration) {
+        return next(props, middlewareProps, services);
+      }
+      const dataDefinition = getDataArgs(registration);
+      if (!dataDefinition) {
+        return next(props, middlewareProps, services);
+      }
+      if (dataDefinition.useRuntimeParams) {
+        return /* @__PURE__ */ _react2.default.createElement(DataLoaderWithRuntimeParams, {
+          dataDefinition,
+          componentProps: props,
+          services,
+          next,
+          middlewareProps
+        });
+      } else {
         return /* @__PURE__ */ _react2.default.createElement(WithDataLoad, {
           dataDefinition,
-          componentProps,
+          props,
           services,
@@ -143,3 +154,2 @@ next,
       }
-      return next(componentProps, middlewareProps, services);
     }
@@ -151,3 +161,3 @@ };
 
-exports.getComponentDataArgs = getComponentDataArgs; exports.init = init;
+exports.getComponentDataArgs = getDataArgs; exports.init = init;
 //# sourceMappingURL=index.js.map

out-tsc/data-loading.test.js

@@ -14,3 +14,3 @@ "use strict";
     const resources = new react_ssr_data_loader_1.DataLoaderResources();
-    const { middleware, createRegisterableComponentWithData } = _1.init(resources);
+    const { getMiddleware, createRegisterableComponentWithData } = _1.init(resources);
     const testComponentWithDataRegistration = createRegisterableComponentWithData('test-with-data', lengthCalculatorDataDefinition, (props, data) => {
@@ -22,3 +22,3 @@ return (react_1.default.createElement(TestComponentWithData, { length: data.loaded ? data.result : undefined, ...props, ...{ dataProps: { data } } }));
         .registerComponent(testComponentWithDataRegistration)
-        .registerMiddleware(middleware))
+        .registerMiddleware(getMiddleware('component')))
         .registerCompositions(registrar => registrar.registerComposition(testCompositionRegistration));
@@ -46,2 +46,34 @@ const renderers = layout.createRenderers({
 });
+it('can load data for composition', async () => {
+    const resources = new react_ssr_data_loader_1.DataLoaderResources();
+    const { getMiddleware, createRegisterableCompositionWithData } = _1.init(resources);
+    const testCompositionWithDataRegistration = createRegisterableCompositionWithData()('test-with-data', lengthCalculatorDataDefinition, ({ main }, props, data) => {
+        return (react_1.default.createElement(TestCompositionWithData, { main: main, length: data.loaded ? data.result : undefined, ...props, ...{ dataProps: { data } } }));
+    });
+    const layout = json_react_layouts_1.LayoutRegistration()
+        .registerComponents(registrar => registrar.registerComponent(testComponentRegistration))
+        .registerCompositions(registrar => registrar
+        .registerComposition(testCompositionWithDataRegistration)
+        .registerMiddleware(getMiddleware('composition')));
+    const renderers = layout.createRenderers({
+        services: {},
+    });
+    const wrapper = enzyme_1.mount(react_1.default.createElement(react_ssr_data_loader_1.DataProvider, { resources: resources, globalProps: {} }, renderers.renderCompositions(layout.composition({
+        type: 'test-with-data',
+        contentAreas: {
+            main: [
+                layout.component({
+                    type: 'test-component',
+                    props: {},
+                }),
+            ],
+        },
+        props: { dataDefinitionArgs: { dataArg: 'Foo' } },
+    }))));
+    expect(wrapper.find(TestCompositionWithData).text()).toBe('Loading#TestComponent#');
+    await test_utils_1.act(() => new Promise(resolve => setTimeout(resolve)));
+    const composition = wrapper.update().find(TestCompositionWithData);
+    expect(composition.text()).toBe('Length: 3#TestComponent#');
+    expect(composition.props()).toMatchSnapshot();
+});
 it('cap wrap data load function', async () => {
@@ -52,3 +84,3 @@ let wrapArgs;
     const resources = new react_ssr_data_loader_1.DataLoaderResources();
-    const { middleware, createRegisterableComponentWithData } = _1.init(resources, load => (args, services, context) => {
+    const { getMiddleware, createRegisterableComponentWithData } = _1.init(resources, load => (args, services, context) => {
         wrapArgs = args;
@@ -65,3 +97,3 @@ wrapServices = services;
         .registerComponent(testComponentWithDataRegistration)
-        .registerMiddleware(middleware))
+        .registerMiddleware(getMiddleware('component')))
         .registerCompositions(registrar => registrar.registerComposition(testCompositionRegistration));
@@ -92,3 +124,3 @@ const renderers = layout.createRenderers({
     const resources = new react_ssr_data_loader_1.DataLoaderResources();
-    const { middleware, createRegisterableComponentWithData } = _1.init(resources);
+    const { getMiddleware, createRegisterableComponentWithData } = _1.init(resources);
     // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -118,3 +150,3 @@ let updateMultiplier = () => { };
         .registerComponent(testComponentWithDataRegistration)
-        .registerMiddleware(middleware))
+        .registerMiddleware(getMiddleware('component')))
         .registerCompositions(registrar => registrar.registerComposition(testCompositionRegistration));
@@ -160,7 +192,83 @@ const renderers = layout.createRenderers({
 });
-const { createRegisterableComposition } = json_react_layouts_1.getRegistrationCreators();
-// Test component with data
+it('composition can provide additional arguments dynamically', async () => {
+    const resources = new react_ssr_data_loader_1.DataLoaderResources();
+    const { getMiddleware, createRegisterableCompositionWithData } = _1.init(resources);
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    let updateMultiplier = () => { };
+    const lengthCalculatorWithMultiplierDataDefinition = {
+        // Additional params can come from anywhere, for instance redux or
+        // other environmental variables (window.location?)
+        useRuntimeParams: () => {
+            const [multiplier, setMultiplier] = react_1.default.useState(2);
+            react_1.default.useEffect(() => {
+                updateMultiplier = setMultiplier;
+            }, []);
+            return {
+                multiplier,
+            };
+        },
+        loadData: props => new Promise(resolve => setTimeout(() => {
+            resolve(props.dataArg.length * props.multiplier);
+        })),
+    };
+    const testCompositionWithDataRegistration = createRegisterableCompositionWithData()('test-with-data', lengthCalculatorWithMultiplierDataDefinition, ({ main }, props, data) => {
+        return (react_1.default.createElement(TestCompositionWithData, { main: main, length: data.loaded ? data.result : undefined, ...props, ...{ dataProps: { data } } }));
+    });
+    const layout = json_react_layouts_1.LayoutRegistration()
+        .registerComponents(registrar => registrar.registerComponent(testComponentRegistration))
+        .registerCompositions(registrar => registrar
+        .registerComposition(testCompositionWithDataRegistration)
+        .registerMiddleware(getMiddleware('composition')));
+    const renderers = layout.createRenderers({
+        services: {},
+    });
+    const wrapper = enzyme_1.mount(react_1.default.createElement(react_ssr_data_loader_1.DataProvider, { resources: resources, globalProps: {} }, renderers.renderCompositions(layout.composition({
+        type: 'test-with-data',
+        contentAreas: {
+            main: [
+                layout.component({
+                    type: 'test-component',
+                    props: {},
+                }),
+            ],
+        },
+        props: {
+            dataDefinitionArgs: {
+                dataArg: 'Foo',
+            },
+        },
+    }))));
+    await test_utils_1.act(() => new Promise(resolve => setTimeout(resolve)));
+    let composition = wrapper.update().find(TestCompositionWithData);
+    expect(composition.text()).toBe('Length: 6#TestComponent#');
+    expect(composition.props()).toMatchObject({
+        dataProps: {
+            data: {
+                dataDefinitionArgs: { dataArg: 'Foo', multiplier: 2 },
+            },
+        },
+    });
+    test_utils_1.act(() => {
+        updateMultiplier(3);
+    });
+    await test_utils_1.act(() => new Promise(resolve => setTimeout(resolve)));
+    composition = wrapper.update().find(TestCompositionWithData);
+    expect(composition.text()).toBe('Length: 9#TestComponent#');
+    expect(composition.props()).toMatchObject({
+        dataProps: {
+            data: {
+                dataDefinitionArgs: { dataArg: 'Foo', multiplier: 3 },
+            },
+        },
+    });
+});
+const TestComponent = () => react_1.default.createElement("div", null, "#TestComponent#");
 const TestComponentWithData = ({ length }) => (react_1.default.createElement("div", null, length ? `Length: ${length}` : 'Loading'));
 const TestComposition = props => (react_1.default.createElement("div", null, props.main));
+const TestCompositionWithData = ({ length, main }) => (react_1.default.createElement("div", null,
+    react_1.default.createElement("div", null, length ? `Length: ${length}` : 'Loading'),
+    main));
+const { createRegisterableComposition, createRegisterableComponent } = json_react_layouts_1.getRegistrationCreators();
 const testCompositionRegistration = createRegisterableComposition()('test-composition', contentAreas => react_1.default.createElement(TestComposition, { main: contentAreas.main }));
+const testComponentRegistration = createRegisterableComponent('test-component', () => (react_1.default.createElement(TestComponent, null)));
 const lengthCalculatorDataDefinition = {
@@ -167,0 +275,0 @@ loadData: props => new Promise(resolve => setTimeout(() => {

out-tsc/get-data-args.d.ts

@@ -1,3 +0,7 @@
-import { LayoutApi } from 'json-react-layouts';
 import { DataDefinition } from './DataLoading';
-export declare function getComponentDataArgs<Services extends {}>(layout: LayoutApi<any, any, any, any, Services>, componentType: string): DataDefinition<any, any, Services, any> | undefined;
+import { ComponentRegistration } from '../../json-react-layouts/src/ComponentRegistrar';
+import { CompositionRegistration } from '../../json-react-layouts/src/CompositionRegistrar';
+export declare type RegistrationWithDataDefinition<Type extends string, ContentAreas extends string, Props extends {}, Services extends {}, DataLoadArguments extends {}, TData, AdditionalParams extends {} = {}> = (ComponentRegistration<Type, Props, Services> | CompositionRegistration<Type, ContentAreas, Services, Props>) & {
+    dataDefinition?: DataDefinition<DataLoadArguments, TData, Services, AdditionalParams>;
+};
+export declare function getDataArgs<Type extends string, ContentAreas extends string, Props extends {}, Services extends {}, DataLoadArguments extends {}, TData, AdditionalParams extends {} = {}>(registration: RegistrationWithDataDefinition<Type, ContentAreas, Props, Services, DataLoadArguments, TData, AdditionalParams> | undefined): DataDefinition<any, any, Services, any> | undefined;

out-tsc/get-data-args.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getComponentDataArgs = void 0;
-function getComponentDataArgs(layout, componentType) {
-    const componentDataDefinition = layout.componentRegistrations.get(componentType);
-    // This can be undefined
-    if (!componentDataDefinition) {
-        return;
-    }
-    const dataDefinition = componentDataDefinition.dataDefinition;
-    return dataDefinition;
+exports.getDataArgs = void 0;
+function getDataArgs(registration) {
+    return registration === null || registration === void 0 ? void 0 : registration.dataDefinition;
 }
-exports.getComponentDataArgs = getComponentDataArgs;
+exports.getDataArgs = getDataArgs;
 //# sourceMappingURL=get-data-args.js.map

out-tsc/index.d.ts

 import React from 'react';
-import { RendererMiddleware, ComponentRegistration } from 'json-react-layouts';
+import { RendererMiddleware, ComponentRegistration, CompositionRegistration } from 'json-react-layouts';
 import { DataLoaderResources } from 'react-ssr-data-loader';
 import { DataDefinition, MaybeLoaded, LoadData } from './DataLoading';
-import { getComponentDataArgs } from './get-data-args';
+import { getDataArgs } from './get-data-args';
 declare type RenderComponentWithDataProps<ComponentProps extends {}, TData, TConfig extends {}, Services> = (props: ComponentProps, dataProps: MaybeLoaded<TData> & {
     dataDefinitionArgs: TConfig;
 }, services: Services) => React.ReactElement<any> | false | null;
+declare type RenderCompositionWithDataProps<TContentAreas extends string, ComponentProps extends {}, TData, TConfig extends {}, Services> = (contentAreas: {
+    [key in TContentAreas]: React.ReactElement<any>;
+}, props: ComponentProps, dataProps: MaybeLoaded<TData> & {
+    dataDefinitionArgs: TConfig;
+}, services: Services) => React.ReactElement<any> | false | null;
 export declare function init<Services extends object>(resources: DataLoaderResources<Services>, 
@@ -15,4 +20,7 @@ /** Hook into data load functions */
     }, Services>;
-    middleware: RendererMiddleware<Services, {}>;
+    createRegisterableCompositionWithData: <ContentAreas extends string>() => <CompositionType extends string, CompositionProps extends object, DataLoadArgs extends object, CompositionData, AdditionalParams extends object>(type: CompositionType, dataDefinition: DataDefinition<DataLoadArgs, CompositionData, Services, AdditionalParams>, render: RenderCompositionWithDataProps<ContentAreas, CompositionProps, CompositionData, DataLoadArgs, Services>) => CompositionRegistration<CompositionType, ContentAreas, Services, CompositionProps & {
+        dataDefinitionArgs: DataLoadArgs;
+    }>;
+    getMiddleware: (type: 'component' | 'composition') => RendererMiddleware<Services, {}>;
 };
-export { DataDefinition, MaybeLoaded, getComponentDataArgs };
+export { DataDefinition, MaybeLoaded, getDataArgs as getComponentDataArgs };

out-tsc/index.js

@@ -7,3 +7,3 @@ "use strict";
 const get_data_args_1 = require("./get-data-args");
-Object.defineProperty(exports, "getComponentDataArgs", { enumerable: true, get: function () { return get_data_args_1.getComponentDataArgs; } });
+Object.defineProperty(exports, "getComponentDataArgs", { enumerable: true, get: function () { return get_data_args_1.getDataArgs; } });
 // TODO this could have a better name
@@ -44,4 +44,4 @@ function init(resources,
     }
-    function WithDataLoad({ dataDefinition, componentProps, services, next, middlewareProps, }) {
-        const dataDefinitionArgs = componentProps.dataDefinitionArgs;
+    function WithDataLoad({ dataDefinition, props, services, next, middlewareProps, }) {
+        const dataDefinitionArgs = props.dataDefinitionArgs;
         const renderProps = useComponentData({
@@ -61,3 +61,3 @@ dataDefinition,
         return (next({
-            ...componentProps,
+            ...props,
             ...data,
@@ -86,11 +86,40 @@ }, middlewareProps, services) || null);
         },
-        middleware: (componentProps, middlewareProps, services, next) => {
-            const dataDefinition = get_data_args_1.getComponentDataArgs(services.layout, componentProps.componentType);
-            if (dataDefinition) {
-                if (dataDefinition.useRuntimeParams) {
-                    return (react_1.default.createElement(DataLoaderWithRuntimeParams, { dataDefinition: dataDefinition, componentProps: componentProps, services: services, next: next, middlewareProps: middlewareProps }));
-                }
-                return (react_1.default.createElement(WithDataLoad, { dataDefinition: dataDefinition, componentProps: componentProps, services: services, next: next, middlewareProps: middlewareProps }));
+        createRegisterableCompositionWithData: () => (type, dataDefinition, render) => {
+            // This is quite a complex transform which can't be modelled in typescript.
+            //
+            // The dataDefinition which is passed to this object is hidden from the types returned
+            // The content area renderer has a data loader which will look for this property
+            // Then use the loadData function
+            const normalRender = (contentAreas, { data, dataDefinitionArgs, ...rest }, services) => {
+                return render(contentAreas, rest, {
+                    ...data,
+                    dataDefinitionArgs,
+                }, services);
+            };
+            const registrationWithData = { type, render: normalRender, dataDefinition };
+            // Once the data is loaded it will be passed to the render function on the
+            // data prop, which will be typed as LoadedData<TData>
+            // The route info looks like this:
+            // { type: TType, props: TProps & { dataDefinition: TData } }
+            return registrationWithData;
+        },
+        getMiddleware: type => (props, middlewareProps, services, next) => {
+            const registration = type === 'component'
+                ? services.layout.componentRegistrations.get(props.layoutType)
+                : services.layout.compositionRegistrations.get(props.layoutType);
+            // No registration found for this component.
+            if (!registration) {
+                return next(props, middlewareProps, services);
             }
-            return next(componentProps, middlewareProps, services);
+            const dataDefinition = get_data_args_1.getDataArgs(registration);
+            // dataDefinition does not exist on all components.
+            if (!dataDefinition) {
+                return next(props, middlewareProps, services);
+            }
+            if (dataDefinition.useRuntimeParams) {
+                return (react_1.default.createElement(DataLoaderWithRuntimeParams, { dataDefinition: dataDefinition, componentProps: props, services: services, next: next, middlewareProps: middlewareProps }));
+            }
+            else {
+                return (react_1.default.createElement(WithDataLoad, { dataDefinition: dataDefinition, props: props, services: services, next: next, middlewareProps: middlewareProps }));
+            }
         },
@@ -97,0 +126,0 @@ };

package.json

 {
     "name": "json-react-layouts-data-loader",
-    "version": "4.0.1",
+    "version": "5.0.0",
     "repository": "github:sevenwestmedia-labs/json-react-layouts",
@@ -14,3 +14,3 @@ "author": "Seven West Media WA",
     "dependencies": {
-        "json-react-layouts": "^3.0.1"
+        "json-react-layouts": "^4.0.0"
     },
@@ -17,0 +17,0 @@ "peerDependencies": {

README.md

@@ -18,8 +18,21 @@ # JSON React layouts data loader
 const resources = new DataLoaderResources<MyServices>()
-const { middleware, createRegisterableComponentWithData } = init<MyServices>(resources)
+const {
+    getMiddleware,
+    createRegisterableComponentWithData,
+    createRegisterableCompositionWithData,
+} = init<MyServices>(resources)
 
-const componentRegistrar = new ComponentRegistrar()
-    // Register your components, then register the component data loading middleware
-    .registerMiddleware(middleware)
+const layout = LayoutRegistration()
+    .registerComponents(registrar =>
+        registrar
+            // Register your components, then register the component data loading middleware
+            .registerMiddleware(getMiddleware('component')),
+    )
+    .registerCompositions(registrar =>
+        registrar
+            // Register your compositions, then register the composition data loading middleware
+            .registerMiddleware(getMiddleware('composition')),
+    )
 
+// Data-loading component.
 export const testComponentWithDataRegistration = createRegisterableComponentWithData(
@@ -39,2 +52,24 @@ 'test-with-data',
 )
+
+// Data-loading composition.
+const testCompositionWithDataRegistration = createRegisterableCompositionWithData<'main'>()(
+    'test-with-data', //                                Composition content areas ^^^^^^
+    {
+        // You provide this function to load the data
+        loadData: props => {},
+    },
+    ({ main }, props, data) => {
+    // ^^^^ Receive content areas here.
+        if (!data.loaded) {
+            return <div>Loading...</div>
+        }
+
+        return (
+            <>
+                <TestComponentWithData data={data.result} />
+                {main}
+            </>
+        )
+    },
+)
 ```
@@ -41,0 +76,0 @@

src/get-data-args.ts

@@ -1,17 +0,42 @@
-import { LayoutApi } from 'json-react-layouts'
 import { DataDefinition } from './DataLoading'
+import { ComponentRegistration } from '../../json-react-layouts/src/ComponentRegistrar'
+import { CompositionRegistration } from '../../json-react-layouts/src/CompositionRegistrar'
 
-export function getComponentDataArgs<Services extends {}>(
-    layout: LayoutApi<any, any, any, any, Services>,
-    componentType: string,
+export type RegistrationWithDataDefinition<
+    Type extends string,
+    ContentAreas extends string,
+    Props extends {},
+    Services extends {},
+    DataLoadArguments extends {},
+    TData,
+    AdditionalParams extends {} = {}
+> = (
+    | ComponentRegistration<Type, Props, Services>
+    | CompositionRegistration<Type, ContentAreas, Services, Props>
+) & {
+    dataDefinition?: DataDefinition<DataLoadArguments, TData, Services, AdditionalParams>
+}
+
+export function getDataArgs<
+    Type extends string,
+    ContentAreas extends string,
+    Props extends {},
+    Services extends {},
+    DataLoadArguments extends {},
+    TData,
+    AdditionalParams extends {} = {}
+>(
+    registration:
+        | RegistrationWithDataDefinition<
+              Type,
+              ContentAreas,
+              Props,
+              Services,
+              DataLoadArguments,
+              TData,
+              AdditionalParams
+          >
+        | undefined,
 ): DataDefinition<any, any, Services, any> | undefined {
-    const componentDataDefinition = layout.componentRegistrations.get(componentType)
-
-    // This can be undefined
-    if (!componentDataDefinition) {
-        return
-    }
-    const dataDefinition = (componentDataDefinition as any).dataDefinition
-
-    return dataDefinition
+    return registration?.dataDefinition
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

153068

increased by34.61%

Lines of code

1620

increased by40.38%

Number of lines in readme file

108

increased by47.95%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Addedjson-react-layouts@4.1.0(transitive)

• - Removedjson-react-layouts@3.0.1(transitive)

• Updatedjson-react-layouts@^4.0.0