Merge pull request #67 from NathanP-7West/main

Support composition data loading.

.changeset/config.json

@@ -4,5 +4,5 @@
     "commit": false,
     "linked": [],
     "access": "public",
-    "baseBranch": "master"
-}
+    "baseBranch": "main"
+}

.changeset/mighty-beans-trade.md

@@ -0,0 +1,14 @@
+---
+'json-react-layouts': major
+'json-react-layouts-data-loader': major
+---
+
+## Breaking Changes
+
+### `json-react-layouts`
+
+-   `RendererMiddleware` does not depend on `ComponentProps` anymore and will contain a `{ layoutType: string }` value instead to represent the component/composition type.
+
+### `json-react-layouts-data-loader`
+
+-   `middleware` converted to `getMiddleware(type: 'composition' | 'component')` method to support composition middleware.

packages/json-react-layouts-data-loader/README.md

@@ -15,12 +15,25 @@ interface MyServices {
 }
 
 const resources = new DataLoaderResources<MyServices>()
-const { middleware, createRegisterableComponentWithData } = init<MyServices>(resources)
-
-const componentRegistrar = new ComponentRegistrar()
-    // Register your components, then register the component data loading middleware
-    .registerMiddleware(middleware)
-
+const {
+    getMiddleware,
+    createRegisterableComponentWithData,
+    createRegisterableCompositionWithData,
+} = init<MyServices>(resources)
+
+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(
     'test-with-data',
     {
@@ -35,6 +48,28 @@ export const testComponentWithDataRegistration = createRegisterableComponentWith
         return <TestComponentWithData data={data.result} />
     },
 )
+
+// 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}
+            </>
+        )
+    },
+)
 ```
 
 ## FAQ

packages/json-react-layouts-data-loader/src/__snapshots__/data-loading.test.tsx.snap

@@ -3,7 +3,6 @@
 exports[`can load data for component 1`] = `
 Object {
   "componentRenderPath": "[0]test-composition/main/[0]",
-  "componentType": "test-with-data",
   "dataProps": Object {
     "data": Object {
       "dataDefinitionArgs": Object {
@@ -13,6 +12,58 @@ Object {
       "result": 3,
     },
   },
+  "layoutType": "test-with-data",
   "length": 3,
 }
 `;
+
+exports[`can load data for composition 1`] = `
+Object {
+  "dataProps": Object {
+    "data": Object {
+      "dataDefinitionArgs": Object {
+        "dataArg": "Foo",
+      },
+      "loaded": true,
+      "result": 3,
+    },
+  },
+  "layoutType": "test-with-data",
+  "length": 3,
+  "main": <ComponentsRenderer
+    additionalComponentProps={Object {}}
+    componentMiddleware={[Function]}
+    componentRegistrations={
+      Object {
+        "get": [Function],
+        "isRegistered": [Function],
+      }
+    }
+    componentRenderPath="[0]test-with-data/main"
+    components={
+      Array [
+        Object {
+          "props": Object {},
+          "type": "test-component",
+        },
+      ]
+    }
+    layoutApi={
+      Object {
+        "component": [Function],
+        "componentRegistrations": Object {
+          "get": [Function],
+          "isRegistered": [Function],
+        },
+        "composition": [Function],
+        "compositionRegistrations": Object {
+          "get": [Function],
+        },
+        "createRenderers": [Function],
+        "nestedComposition": [Function],
+      }
+    }
+    services={Object {}}
+  />,
+}
+`;