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

Comparing version 2.2.0 to 2.3.0

dist/cjs/data-loading.test.js

@@ -104,2 +104,66 @@ "use strict";
 }); });
+it('component can provide additional arguments dynamically', function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+    var resources, _a, middleware, createRegisterableComponentWithData, lengthCalculatorWithMultiplierDataDefinition, testComponentWithDataRegistration, layout, wrapper, component;
+    return tslib_1.__generator(this, function (_b) {
+        switch (_b.label) {
+            case 0:
+                resources = new react_ssr_data_loader_1.DataLoaderResources();
+                _a = _1.init(resources), middleware = _a.middleware, createRegisterableComponentWithData = _a.createRegisterableComponentWithData;
+                lengthCalculatorWithMultiplierDataDefinition = {
+                    getRuntimeParams: function () {
+                        return {
+                            multiplier: 2,
+                        };
+                    },
+                    loadData: function (props) {
+                        return new Promise(function (resolve) {
+                            return setTimeout(function () {
+                                resolve(props.dataArg.length * props.multiplier);
+                            });
+                        });
+                    },
+                };
+                testComponentWithDataRegistration = createRegisterableComponentWithData('test-with-data', lengthCalculatorWithMultiplierDataDefinition, function (props, data) {
+                    return (react_1.default.createElement(TestComponentWithData, tslib_1.__assign({ length: data.loaded ? data.result : undefined }, props, { dataProps: { data: data } })));
+                });
+                layout = new json_react_layouts_1.LayoutRegistration()
+                    .registerComponents(function (registrar) {
+                    return registrar
+                        .registerComponent(testComponentWithDataRegistration)
+                        .registerMiddleware(middleware);
+                })
+                    .registerCompositions(function (registrar) {
+                    return registrar.registerComposition(testCompositionRegistration);
+                });
+                wrapper = enzyme_1.mount(react_1.default.createElement(react_ssr_data_loader_1.DataProvider, { resources: resources, globalProps: {} },
+                    react_1.default.createElement(layout.CompositionsRenderer, { compositions: [
+                            {
+                                type: 'test-composition',
+                                contentAreas: {
+                                    main: [
+                                        {
+                                            type: 'test-with-data',
+                                            props: { dataDefinitionArgs: { dataArg: 'Foo' } },
+                                        },
+                                    ],
+                                },
+                                props: {},
+                            },
+                        ], services: {} })));
+                return [4, new Promise(function (resolve) { return setTimeout(resolve); })];
+            case 1:
+                _b.sent();
+                component = wrapper.update().find(TestComponentWithData);
+                expect(component.text()).toBe('Length: 6');
+                expect(component.props()).toMatchObject({
+                    dataProps: {
+                        data: {
+                            dataDefinitionArgs: { dataArg: 'Foo', multiplier: 2 },
+                        },
+                    },
+                });
+                return [2];
+        }
+    });
+}); });
 var createRegisterableComposition = json_react_layouts_1.getRegistrationCreators().createRegisterableComposition;
@@ -106,0 +170,0 @@ var TestComponentWithData = function (_a) {

dist/cjs/DataLoading.d.ts

 import { LayoutApi } from 'json-react-layouts';
-export declare type LoadData<DataLoadArguments extends object, TData, Services extends object> = (config: DataLoadArguments, services: Services, context: {
+export declare type LoadData<DataLoadArguments extends object, TData, Services extends object> = (dataDefinitionArgs: DataLoadArguments, services: Services, context: {
     componentRenderPath: string;
@@ -7,5 +7,5 @@ resourceType: string;
 }) => Promise<TData>;
-export interface DataDefinition<DataLoadArguments extends object, TData, Services extends object> {
-    getCacheKey?: (config: DataLoadArguments, services: Services) => string;
-    loadData: LoadData<DataLoadArguments, TData, Services>;
+export interface DataDefinition<DataLoadArguments extends object, TData, Services extends object, AdditionalParams extends object = {}> {
+    getRuntimeParams?: (dataDefinitionArgs: DataLoadArguments, services: Services) => AdditionalParams;
+    loadData: LoadData<DataLoadArguments & AdditionalParams, TData, Services>;
 }
@@ -12,0 +12,0 @@ export declare type MaybeLoaded<TData> = {

dist/cjs/index.d.ts

@@ -10,3 +10,3 @@ import React from 'react';
 export declare function init<Services extends object>(resources: DataLoaderResources<Services>, wrapLoad?: (loadData: LoadData<any, any, Services>) => LoadData<any, any, Services>): {
-    createRegisterableComponentWithData: <ComponentType extends string, ComponentProps extends {}, DataLoadArgs extends {}, ComponentData>(type: ComponentType, dataDefinition: DataDefinition<DataLoadArgs, ComponentData, Services>, render: RenderComponentWithDataProps<ComponentProps, ComponentData, DataLoadArgs, Services>) => ComponentRegistration<ComponentType, ComponentProps & {
+    createRegisterableComponentWithData: <ComponentType extends string, ComponentProps extends object, DataLoadArgs extends object, ComponentData, AdditionalParams extends object>(type: ComponentType, dataDefinition: DataDefinition<DataLoadArgs, ComponentData, Services, AdditionalParams>, render: RenderComponentWithDataProps<ComponentProps, ComponentData, DataLoadArgs, Services>) => ComponentRegistration<ComponentType, ComponentProps & {
         dataDefinitionArgs: DataLoadArgs;
@@ -13,0 +13,0 @@ }, Services>;

dist/cjs/index.js

@@ -29,3 +29,8 @@ "use strict";
             if (dataDefinition) {
-                return (react_1.default.createElement(ComponentDataLoader, { layout: services.layout, componentRenderPath: componentProps.componentRenderPath, dataDefinition: dataDefinition, dataDefinitionArgs: componentProps.dataDefinitionArgs, renderData: function (renderProps) {
+                var dataDefinitionArgs = dataDefinition.getRuntimeParams
+                    ? tslib_1.__assign({}, componentProps.dataDefinitionArgs, dataDefinition.getRuntimeParams(componentProps.dataDefinitionArgs, services.services)) : componentProps.dataDefinitionArgs;
+                if (dataDefinition.getRuntimeParams) {
+                    componentProps = tslib_1.__assign({}, componentProps, { dataDefinitionArgs: dataDefinitionArgs });
+                }
+                return (react_1.default.createElement(ComponentDataLoader, { layout: services.layout, componentRenderPath: componentProps.componentRenderPath, dataDefinition: dataDefinition, dataDefinitionArgs: dataDefinitionArgs, renderData: function (renderProps) {
                         if (!renderProps.lastAction.success) {
@@ -32,0 +37,0 @@ throw renderProps.lastAction.error;

dist/esm/data-loading.test.js

@@ -102,2 +102,66 @@ var _this = this;
 }); });
+it('component can provide additional arguments dynamically', function () { return tslib_1.__awaiter(_this, void 0, void 0, function () {
+    var resources, _a, middleware, createRegisterableComponentWithData, lengthCalculatorWithMultiplierDataDefinition, testComponentWithDataRegistration, layout, wrapper, component;
+    return tslib_1.__generator(this, function (_b) {
+        switch (_b.label) {
+            case 0:
+                resources = new DataLoaderResources();
+                _a = init(resources), middleware = _a.middleware, createRegisterableComponentWithData = _a.createRegisterableComponentWithData;
+                lengthCalculatorWithMultiplierDataDefinition = {
+                    getRuntimeParams: function () {
+                        return {
+                            multiplier: 2,
+                        };
+                    },
+                    loadData: function (props) {
+                        return new Promise(function (resolve) {
+                            return setTimeout(function () {
+                                resolve(props.dataArg.length * props.multiplier);
+                            });
+                        });
+                    },
+                };
+                testComponentWithDataRegistration = createRegisterableComponentWithData('test-with-data', lengthCalculatorWithMultiplierDataDefinition, function (props, data) {
+                    return (React.createElement(TestComponentWithData, tslib_1.__assign({ length: data.loaded ? data.result : undefined }, props, { dataProps: { data: data } })));
+                });
+                layout = new LayoutRegistration()
+                    .registerComponents(function (registrar) {
+                    return registrar
+                        .registerComponent(testComponentWithDataRegistration)
+                        .registerMiddleware(middleware);
+                })
+                    .registerCompositions(function (registrar) {
+                    return registrar.registerComposition(testCompositionRegistration);
+                });
+                wrapper = mount(React.createElement(DataProvider, { resources: resources, globalProps: {} },
+                    React.createElement(layout.CompositionsRenderer, { compositions: [
+                            {
+                                type: 'test-composition',
+                                contentAreas: {
+                                    main: [
+                                        {
+                                            type: 'test-with-data',
+                                            props: { dataDefinitionArgs: { dataArg: 'Foo' } },
+                                        },
+                                    ],
+                                },
+                                props: {},
+                            },
+                        ], services: {} })));
+                return [4, new Promise(function (resolve) { return setTimeout(resolve); })];
+            case 1:
+                _b.sent();
+                component = wrapper.update().find(TestComponentWithData);
+                expect(component.text()).toBe('Length: 6');
+                expect(component.props()).toMatchObject({
+                    dataProps: {
+                        data: {
+                            dataDefinitionArgs: { dataArg: 'Foo', multiplier: 2 },
+                        },
+                    },
+                });
+                return [2];
+        }
+    });
+}); });
 var createRegisterableComposition = getRegistrationCreators().createRegisterableComposition;
@@ -104,0 +168,0 @@ var TestComponentWithData = function (_a) {

dist/esm/DataLoading.d.ts

 import { LayoutApi } from 'json-react-layouts';
-export declare type LoadData<DataLoadArguments extends object, TData, Services extends object> = (config: DataLoadArguments, services: Services, context: {
+export declare type LoadData<DataLoadArguments extends object, TData, Services extends object> = (dataDefinitionArgs: DataLoadArguments, services: Services, context: {
     componentRenderPath: string;
@@ -7,5 +7,5 @@ resourceType: string;
 }) => Promise<TData>;
-export interface DataDefinition<DataLoadArguments extends object, TData, Services extends object> {
-    getCacheKey?: (config: DataLoadArguments, services: Services) => string;
-    loadData: LoadData<DataLoadArguments, TData, Services>;
+export interface DataDefinition<DataLoadArguments extends object, TData, Services extends object, AdditionalParams extends object = {}> {
+    getRuntimeParams?: (dataDefinitionArgs: DataLoadArguments, services: Services) => AdditionalParams;
+    loadData: LoadData<DataLoadArguments & AdditionalParams, TData, Services>;
 }
@@ -12,0 +12,0 @@ export declare type MaybeLoaded<TData> = {

dist/esm/index.d.ts

@@ -10,3 +10,3 @@ import React from 'react';
 export declare function init<Services extends object>(resources: DataLoaderResources<Services>, wrapLoad?: (loadData: LoadData<any, any, Services>) => LoadData<any, any, Services>): {
-    createRegisterableComponentWithData: <ComponentType extends string, ComponentProps extends {}, DataLoadArgs extends {}, ComponentData>(type: ComponentType, dataDefinition: DataDefinition<DataLoadArgs, ComponentData, Services>, render: RenderComponentWithDataProps<ComponentProps, ComponentData, DataLoadArgs, Services>) => ComponentRegistration<ComponentType, ComponentProps & {
+    createRegisterableComponentWithData: <ComponentType extends string, ComponentProps extends object, DataLoadArgs extends object, ComponentData, AdditionalParams extends object>(type: ComponentType, dataDefinition: DataDefinition<DataLoadArgs, ComponentData, Services, AdditionalParams>, render: RenderComponentWithDataProps<ComponentProps, ComponentData, DataLoadArgs, Services>) => ComponentRegistration<ComponentType, ComponentProps & {
         dataDefinitionArgs: DataLoadArgs;
@@ -13,0 +13,0 @@ }, Services>;

dist/esm/index.js

@@ -26,3 +26,8 @@ import * as tslib_1 from "tslib";
             if (dataDefinition) {
-                return (React.createElement(ComponentDataLoader, { layout: services.layout, componentRenderPath: componentProps.componentRenderPath, dataDefinition: dataDefinition, dataDefinitionArgs: componentProps.dataDefinitionArgs, renderData: function (renderProps) {
+                var dataDefinitionArgs = dataDefinition.getRuntimeParams
+                    ? tslib_1.__assign({}, componentProps.dataDefinitionArgs, dataDefinition.getRuntimeParams(componentProps.dataDefinitionArgs, services.services)) : componentProps.dataDefinitionArgs;
+                if (dataDefinition.getRuntimeParams) {
+                    componentProps = tslib_1.__assign({}, componentProps, { dataDefinitionArgs: dataDefinitionArgs });
+                }
+                return (React.createElement(ComponentDataLoader, { layout: services.layout, componentRenderPath: componentProps.componentRenderPath, dataDefinition: dataDefinition, dataDefinitionArgs: dataDefinitionArgs, renderData: function (renderProps) {
                         if (!renderProps.lastAction.success) {
@@ -29,0 +34,0 @@ throw renderProps.lastAction.error;

package.json

 {
     "name": "json-react-layouts-data-loader",
-    "version": "2.2.0",
+    "version": "2.3.0",
     "main": "dist/cjs/index.js",
@@ -5,0 +5,0 @@ "module": "dist/esm/index.js",

README.md

@@ -40,1 +40,33 @@ # JSON React layouts data loader
 ```
+
+## FAQ
+
+### My data load function references global variables and does not update when they change
+
+If you reference global variables in your data load function the data will not be re-fetched when that variable changes. This is because the data loader assumes if the arguments are the same, the result of the load function will be the same as the current data and do nothing.
+
+You can use the `getRuntimeParams` function to merge additional varibles to the data loader props when it re-renders so it can fetch the updated data as expected. For example if you had state stored in redux.
+
+```ts
+import { init } from 'json-react-layouts-data-loader'
+import { DataLoaderResources, DataProvider } from 'react-ssr-data-loader'
+
+export const testComponentWithDataRegistration = createRegisterableComponentWithData(
+    'test-with-data',
+    {
+        getRuntimeParams: (props, services) => services.store.getState().myAdditionalState
+        // You provide this function to load the data
+        loadData: props => {
+            // Now the global state is visible to the data loader and will make up the cache key so changes to myAdditionalState will cause the data to be re-loaded
+            props.myAdditionalState
+        },
+    },
+    (props, data) => {
+        if (!data.loaded) {
+            return <div>Loading...</div>
+        }
+
+        return <TestComponentWithData data={data.result} />
+    },
+)
+```

src/DataLoading.ts

 import { LayoutApi } from 'json-react-layouts'
 
 export type LoadData<DataLoadArguments extends object, TData, Services extends object> = (
-    config: DataLoadArguments,
+    dataDefinitionArgs: DataLoadArguments,
     services: Services,
@@ -9,5 +9,14 @@ context: { componentRenderPath: string; resourceType: string; paramsCacheKey: string },
 
-export interface DataDefinition<DataLoadArguments extends object, TData, Services extends object> {
-    getCacheKey?: (config: DataLoadArguments, services: Services) => string
-    loadData: LoadData<DataLoadArguments, TData, Services>
+export interface DataDefinition<
+    DataLoadArguments extends object,
+    TData,
+    Services extends object,
+    AdditionalParams extends object = {}
+> {
+    /** Hook to provide additional dynamic parameters to the data loader */
+    getRuntimeParams?: (
+        dataDefinitionArgs: DataLoadArguments,
+        services: Services,
+    ) => AdditionalParams
+    loadData: LoadData<DataLoadArguments & AdditionalParams, TData, Services>
 }
@@ -14,0 +23,0 @@

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

Improved metrics

Total package byte prevSize

77747

increased by29.57%

Lines of code

1077

increased by29.76%

Number of lines in readme file

72

increased by80%

No dependency changes