@plone/volto 14.0.0-alpha.25 → 14.0.0-alpha.26

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 14.0.0-alpha.26 (2021-11-01)
+
+### Feature
+
+- Provide Server-Side Rendering capabilities for blocks with async-based content (such as the listing block). A block needs to provide its own `getAsyncData` implementation, which is similar to an `asyncConnect` wrapper promise. @tiberiuichim @sneridagh
+
 ## 14.0.0-alpha.25 (2021-11-01)
 
 ### Feature

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "14.0.0-alpha.25",
+  "version": "14.0.0-alpha.26",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"

package/src/components/manage/Blocks/Listing/getAsyncData.js

@@ -0,0 +1,9 @@
+import { getQueryStringResults } from '@plone/volto/actions';
+
+export default ({ dispatch, data, path }) => {
+  return [
+    dispatch(
+      getQueryStringResults(path, { ...data, fullobjects: 1 }, data.block),
+    ),
+  ];
+};

package/src/components/theme/App/App.jsx

@@ -18,6 +18,7 @@ import trim from 'lodash/trim';
 import cx from 'classnames';
 import config from '@plone/volto/registry';
 import { PluggablesProvider } from '@plone/volto/components/manage/Pluggable';
+import { visitBlocks } from '@plone/volto/helpers/Blocks/Blocks';
 
 import Error from '@plone/volto/error';
 
@@ -191,6 +192,42 @@ export const __test__ = connect(
   {},
 )(App);
 
+export const fetchContent = async ({ store, location }) => {
+  const content = await store.dispatch(
+    getContent(getBaseUrl(location.pathname)),
+  );
+
+  const promises = [];
+  const { blocksConfig } = config.blocks;
+
+  const visitor = ([id, data]) => {
+    const blockType = data['@type'];
+    const { getAsyncData } = blocksConfig[blockType];
+    if (getAsyncData) {
+      const p = getAsyncData({
+        store,
+        dispatch: store.dispatch,
+        path: location.pathname,
+        location,
+        id,
+        data,
+      });
+      if (!p?.length) {
+        throw new Error(
+          'You should return a list of promises from getAsyncData',
+        );
+      }
+      promises.push(...p);
+    }
+  };
+
+  visitBlocks(content, visitor);
+
+  await Promise.allSettled(promises);
+
+  return content;
+};
+
 export default compose(
   asyncConnect([
     {
@@ -200,8 +237,8 @@ export default compose(
     },
     {
       key: 'content',
-      promise: ({ location, store: { dispatch } }) =>
-        __SERVER__ && dispatch(getContent(getBaseUrl(location.pathname))),
+      promise: ({ location, store }) =>
+        __SERVER__ && fetchContent({ store, location }),
     },
     {
       key: 'navigation',

package/src/config/Blocks.jsx

@@ -57,6 +57,7 @@ import {
   SelectFacet,
   CheckboxFacet,
 } from '@plone/volto/components/manage/Blocks/Search/components';
+import getListingBlockAsyncData from '@plone/volto/components/manage/Blocks/Listing/getAsyncData';
 
 defineMessages({
   title: {
@@ -278,6 +279,7 @@ const blocksConfig = {
         template: SummaryListingBlockTemplate,
       },
     ],
+    getAsyncData: getListingBlockAsyncData,
   },
   video: {
     id: 'video',

package/src/helpers/Blocks/Blocks.js

@@ -337,3 +337,25 @@ export function emptyBlocksForm() {
     blocks_layout: { items: [id] },
   };
 }
+
+/**
+ * Recursively discover blocks in data and call the provided callback
+ */
+export function visitBlocks(content, callback) {
+  const queue = getBlocks(content);
+  while (queue.length > 0) {
+    const [id, blockdata] = queue.shift();
+    callback([id, blockdata]);
+
+    // assumes that a block value is like: {blocks, blocks_layout} or
+    // { data: {blocks, blocks_layout}}
+    if (Object.keys(blockdata || {}).indexOf('blocks') > -1) {
+      queue.push(...getBlocks(blockdata));
+      // getBlocks(blockdata).forEach((tuple) => queue.push(tuple));
+    }
+    if (Object.keys(blockdata?.data || {}).indexOf('blocks') > -1) {
+      queue.push(...getBlocks(blockdata.data));
+      // getBlocks(blockdata.data).forEach((tuple) => queue.push(tuple));
+    }
+  }
+}

package/src/helpers/Blocks/Blocks.test.js

@@ -13,6 +13,7 @@ import {
   mutateBlock,
   nextBlockId,
   previousBlockId,
+  visitBlocks,
 } from './Blocks';
 
 import config from '@plone/volto/registry';
@@ -300,4 +301,64 @@ describe('Blocks', () => {
       ).toBe('b');
     });
   });
+
+  describe('visitBlocks', () => {
+    it('visit blocks', () => {
+      const d = {
+        data: {
+          blocks: {
+            '1': {
+              blocks: {
+                '2': {},
+                '3': {
+                  data: {
+                    blocks: {
+                      '11': {},
+                      '12': {},
+                      '13': {},
+                    },
+                    blocks_layout: {
+                      items: ['11', '12', '13'],
+                    },
+                  },
+                },
+                '7': {
+                  blocks: {
+                    '8': {},
+                    '9': {},
+                    '10': {},
+                  },
+                  blocks_layout: {
+                    items: ['8', '9', '10'],
+                  },
+                },
+              },
+              blocks_layout: {
+                items: ['2', '3', '7'],
+              },
+            },
+            '4': {
+              blocks: {
+                '5': {},
+                '6': {},
+              },
+              blocks_layout: {
+                items: ['5', '6'],
+              },
+            },
+          },
+          blocks_layout: {
+            items: ['1', '4'],
+          },
+        },
+      };
+
+      const a = [];
+      visitBlocks(d.data, (x) => {
+        a.push(x);
+      });
+
+      expect(a.length).toBe(13);
+    });
+  });
 });

package/src/components/manage/History/__snapshots__/History.test.jsx.snap

@@ -1,216 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`History renders a history component 1`] = `
-<div
-  className="ui container"
-  id="page-history"
->
-  <div
-    className="ui raised segments"
-  >
-    <div
-      className="ui segment primary"
-    >
-      History of 
-      <q>
-        Blog
-      </q>
-    </div>
-    <div
-      className="ui secondary segment"
-    >
-      You can view the history of your item below.
-    </div>
-    <table
-      className="ui selectable single line attached compact table"
-    >
-      <thead
-        className=""
-      >
-        <tr
-          className=""
-        >
-          <th
-            className="one wide"
-          >
-            #
-          </th>
-          <th
-            className="four wide"
-          >
-            What
-          </th>
-          <th
-            className="four wide"
-          >
-            Who
-          </th>
-          <th
-            className="four wide"
-          >
-            When
-          </th>
-          <th
-            className="four wide"
-          >
-            Change Note
-          </th>
-          <th
-            className=""
-          />
-        </tr>
-      </thead>
-      <tbody
-        className=""
-      >
-        <tr
-          className=""
-        >
-          <td
-            className=""
-          >
-            <span />
-          </td>
-          <td
-            className=""
-          >
-            <span>
-              Publish
-               (Private → Published)
-            </span>
-          </td>
-          <td
-            className=""
-          >
-            Web Admin
-          </td>
-          <td
-            className=""
-          >
-            <span
-              title="Sunday, April 23, 2017 3:38 AM"
-            >
-              a few seconds ago
-            </span>
-          </td>
-          <td
-            className=""
-          >
-            
-          </td>
-          <td
-            className=""
-          />
-        </tr>
-        <tr
-          className=""
-        >
-          <td
-            className=""
-          >
-            <span />
-          </td>
-          <td
-            className=""
-          >
-            <span>
-              Edited
-            </span>
-          </td>
-          <td
-            className=""
-          >
-            Web Admin
-          </td>
-          <td
-            className=""
-          >
-            <span
-              title="Sunday, April 23, 2017 3:38 AM"
-            >
-              a few seconds ago
-            </span>
-          </td>
-          <td
-            className=""
-          >
-            Changed text
-          </td>
-          <td
-            className=""
-          >
-            <div
-              aria-expanded={false}
-              className="ui dropdown"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onMouseDown={[Function]}
-              role="listbox"
-              tabIndex={0}
-            >
-              <div
-                aria-atomic={true}
-                aria-live="polite"
-                className="text"
-                role="alert"
-              />
-              <i
-                aria-hidden="true"
-                className="ellipsis horizontal icon"
-                onClick={[Function]}
-              />
-              <div
-                className="menu transition left"
-              />
-            </div>
-          </td>
-        </tr>
-        <tr
-          className=""
-        >
-          <td
-            className=""
-          >
-            <span />
-          </td>
-          <td
-            className=""
-          >
-            <span>
-              Create
-               (Private)
-            </span>
-          </td>
-          <td
-            className=""
-          >
-            Web Admin
-          </td>
-          <td
-            className=""
-          >
-            <span
-              title="Sunday, April 23, 2017 3:38 AM"
-            >
-              a few seconds ago
-            </span>
-          </td>
-          <td
-            className=""
-          >
-            
-          </td>
-          <td
-            className=""
-          />
-        </tr>
-      </tbody>
-    </table>
-  </div>
-  <div
-    id="Portal"
-  />
-</div>
-`;