[WIP] Proof of concept: Use Volto content browser

babel.config.js

@@ -7,6 +7,28 @@ module.exports = {
                 corejs: 3,
             },
         ],
+        "@babel/preset-react",
+    ],
+    plugins: [
+        "@babel/plugin-proposal-optional-chaining",
+        "@babel/plugin-proposal-class-properties",
+        "@babel/plugin-proposal-export-default-from",
+        "@babel/plugin-syntax-export-namespace-from",
+        "@babel/plugin-proposal-throw-expressions",
+        [
+            "babel-plugin-root-import",
+            {
+                paths: [
+                    {
+                        rootPathSuffix: "./devsrc/volto/src",
+                        rootPathPrefix: "~/",
+                    },
+                    {
+                        rootPathSuffix: "./node_modules/@plone/volto/src",
+                        rootPathPrefix: "~/",
+                    },
+                ],
+            },
+        ],
     ],
-    plugins: ["@babel/plugin-proposal-optional-chaining"],
 };

package.json

@@ -13,6 +13,7 @@
         "@patternslib/pat-code-editor": "^1.0.0",
         "@patternslib/pat-content-browser": "https://github.com/plone/pat-content-browser.git#master",
         "@patternslib/patternslib": "^4.2.4",
+        "@plone/volto": "https://github.com/plone/volto.git#thet-mockup-2",
         "backbone": "1.1.2",
         "backbone.paginator": "1.0.0",
         "bootstrap": "^5.0.0",
@@ -59,20 +60,25 @@
         "@11ty/eleventy-plugin-syntaxhighlight": "^3.0.4",
         "@babel/core": "^7.13.15",
         "@babel/eslint-parser": "^7.13.14",
+        "@babel/plugin-proposal-export-default-from": "^7.12.1",
+        "@babel/plugin-proposal-export-namespace-from": "7.10.4",
         "@babel/plugin-proposal-optional-chaining": "^7.11.0",
+        "@babel/plugin-proposal-throw-expressions": "^7.12.1",
         "@babel/preset-env": "^7.9.6",
         "@commitlint/cli": "^12.1.1",
         "@commitlint/config-conventional": "^12.1.1",
         "@release-it/conventional-changelog": "^2.0.1",
         "@testing-library/jest-dom": "^5.11.10",
+        "@babel/preset-react": "^7.12.10",
         "babel-loader": "^8.1.0",
         "clean-webpack-plugin": "^3.0.0",
         "copy-webpack-plugin": "^6.2.0",
         "copyfiles": "^2.4.1",
-        "core-js": "3",
+        "core-js": "2",
         "cross-env": "^7.0.3",
         "css-loader": "^3.5.3",
         "duplicate-package-checker-webpack-plugin": "^3.0.0",
+        "es-abstract": "^1.17.7",
         "eslint": "^7.10.0",
         "eslint-config-prettier": "^6.12.0",
         "expose-loader": "^0.7.5",
@@ -88,6 +94,7 @@
         "prettier": "^2.1.2",
         "prism-themes": "^1.5.0",
         "raw-loader": "^4.0.1",
+        "react-dates": "21.8.0",
         "regenerator-runtime": "^0.13.5",
         "release-it": "^14.6.1",
         "rimraf": "^3.0.2",
@@ -107,11 +114,22 @@
     "resolutions": {
         "@patternslib/patternslib": "4.2.4",
         "backbone": "1.1.2",
+        "core-js": "2.6.12",
         "underscore": "1.12.0",
         "jqtree": "1.4.10",
         "jquery": "3.6.0",
         "datatables.net": "1.10.24",
-        "datatables.net-bs": "1.10.24"
+        "datatables.net-bs": "1.10.24",
+        "es-abstract": "1.18.0",
+        "hoist-non-react-statics": "3.3.2",
+        "inherits": "2.0.4",
+        "is-regex": "1.1.3",
+        "isarray": "2.0.5",
+        "react-is": "16.13.1",
+        "react-redux": "7.2.4",
+        "redux": "4.1.0",
+        "safe-buffer": "5.2.1",
+        "tslib": "2.0.1"
     },
     "scripts": {
         "clean": "rimraf docs/_site",

src/pat/contentbrowser/README.md

@@ -0,0 +1,20 @@
+---
+permalink: "pat/contentbrowser/"
+title: Content Browser
+---
+
+# Content Browser pattern.
+
+## Configuration
+
+| Option | Type | Default | Description |
+|:-:|:-:|:-:|:-:|
+
+## Example
+
+<div class="pat-contentbrowser">hello.</div>
+
+```html
+<div class="pat-contentbrowser">hello.</div>
+```
+

src/pat/contentbrowser/contentbrowser.js

@@ -0,0 +1,80 @@
+import "regenerator-runtime/runtime"; // needed for ``await`` support
+import Base from "@patternslib/patternslib/src/core/base";
+
+export default Base.extend({
+    name: "contentbrowser",
+    trigger: ".pat-contentbrowser",
+    parser: "mockup",
+
+    async init() {
+        window.__CLIENT__ = true; // Define as volto client
+        window.__DEVELOPMENT__ = true;
+        window.__SERVER__ = false;
+
+        // await import("@plone/volto/config");
+        //
+        //
+        //
+        //
+        //
+        //
+
+        const config = (await import("@plone/volto/registry")).default;
+
+        const contentIcons = (await import("@plone/volto/config/ContentIcons"))
+            .contentIcons;
+
+        config.set("settings", {
+            apiPath: "http://localhost:8080/Plone",
+            storeExtenders: [],
+            nonContentRoutes: [],
+            contentIcons: contentIcons,
+        });
+
+        const React = (await import("react")).default;
+        const ReactDOM = (await import("react-dom")).default;
+        const IntlProvider = (await import("react-intl")).IntlProvider;
+        const Provider = (await import("react-redux")).Provider;
+        const Contents = (await import("@plone/volto/components/manage/Contents/Contents.jsx")).default; // prettier-ignore
+        const configureStore = (await import("@plone/volto/store")).default;
+
+        const StaticRouter = (await import("react-router-dom")).StaticRouter;
+
+        const createBrowserHistory = (await import("history")).createBrowserHistory;
+        const Api = (await import("@plone/volto/helpers")).Api;
+
+        const history = createBrowserHistory();
+        const api = new Api();
+        const store = configureStore(window.__data, history, api);
+
+        //const persistAuthToken = (await import("@plone/volto/helpers")).persistAuthToken;
+        //persistAuthToken(store);
+
+        //const ConnectedRouter = (await import("connected-react-router")).ConnectedRouter;
+        //const routes = {
+        //    path: "/**",
+        //    component: Contents,
+        //};
+
+        ReactDOM.render(
+            React.createElement(
+                Provider,
+                { store: store },
+                React.createElement(
+                    IntlProvider,
+                    { locale: "en" },
+                    React.createElement(
+                        StaticRouter,
+                        { location: "/" },
+                        React.createElement(
+                            Contents,
+                            { location: { pathname: "/" } },
+                            null
+                        )
+                    )
+                )
+            ),
+            this.el
+        );
+    },
+});

src/patterns.js

@@ -48,6 +48,9 @@ import "./pat/toolbar/toolbar";
 import "./pat/tree/tree";
 import "./pat/upload/upload";
 
+// Volto
+import "./pat/contentbrowser/contentbrowser";
+
 // REMOVE obsolete patterns
 //import "./pat/pickadate/pickadate";
 import "./pat/tinymce/tinymce";

src/volto/load-volto-addons.js

@@ -0,0 +1,4 @@
+export default (config) => {
+    // dummy ``applyAddonConfiguration`` from load-volto-addons
+    return config;
+};

test.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Test</title>
+    <script charset="utf-8" src="/dist/bundle.js"></script>
+  </head>
+  <body>
+    <div class="pat-contentbrowser">hello.</div>
+  </body>
+</html>

webpack.config.js

@@ -8,11 +8,21 @@ module.exports = async (env, argv, build_dirname = __dirname) => {
     const config = patternslib_config(env, argv);
 
     config.entry = {
-        "bundle": path.resolve(build_dirname, "src/patterns.js"),
-        "bundle-polyfills": path.resolve(build_dirname, "node_modules/@patternslib/patternslib/src/polyfills.js"), // prettier-ignore
+        bundle: path.resolve(build_dirname, "src/patterns.js"),
+        //"bundle-polyfills": path.resolve(build_dirname, "node_modules/@patternslib/patternslib/src/polyfills.js"), // prettier-ignore
     };
     config.output.path = path.resolve(build_dirname, "dist/");
 
+    // Volto / React
+    const config_babel_loader = config.module.rules.filter(
+        (it) => it.loader === "babel-loader"
+    )[0];
+    config_babel_loader.test = /\.jsx?$/;
+    config_babel_loader.exclude = /node_modules\/(?!(.*patternslib)\/)(?!(pat-.*)\/)(?!(mockup|@plone)\/).*/;
+    config.resolve.alias["load-volto-addons"] = path.resolve(__dirname, "src/volto/load-volto-addons"); // prettier-ignore
+    config.resolve.alias["@sentry/node"] = "@sentry/browser";
+    config.resolve.alias["~/../locales"] = path.resolve(__dirname, "devsrc/volto/locales"); // prettier-ignore
+
     // Correct moment alias
     config.resolve.alias.moment = path.resolve(build_dirname, "node_modules/moment"); // prettier-ignore
 
@@ -29,7 +39,7 @@ module.exports = async (env, argv, build_dirname = __dirname) => {
         use: "svelte-loader",
     });
     config.resolve.alias.svelte = path.resolve("node_modules", "svelte");
-    config.resolve.extensions = [".wasm", ".mjs", ".js", ".json", ".svelte"];
+    config.resolve.extensions = [".wasm", ".mjs", ".js", ".json", ".svelte", ".jsx"];
     config.resolve.mainFields = ["svelte", "browser", "module", "main"];
     if (argv.mode === "development") {
         // Use checked-out versions of dependencies if available.
@@ -41,10 +51,18 @@ module.exports = async (env, argv, build_dirname = __dirname) => {
                 if ([".gitkeep"].includes(it)) {
                     continue;
                 }
-                const prefix = it.indexOf("pat") === 0 ? "@patternslib/" : "";
+                let prefix = "";
+                let suffix = "";
+                if (it.indexOf("pat") === 0) {
+                    prefix = "@patternslib/";
+                }
+                if (it.indexOf("volto") === 0) {
+                    prefix = "@plone/";
+                    suffix = "/src";
+                }
                 config.resolve.alias[prefix + it] = path.resolve(
                     build_dirname,
-                    `devsrc/${it}`
+                    `devsrc/${it}${suffix}`
                 );
             }
         } catch (error) {
@@ -56,7 +74,7 @@ module.exports = async (env, argv, build_dirname = __dirname) => {
         config.output.publicPath = "/dist/";
         config.devServer = {
             inline: true,
-            contentBase: "./docs/_site/",
+            contentBase: ".",
             port: "8000",
             host: "0.0.0.0",
             watchOptions: {
@@ -68,7 +86,7 @@ module.exports = async (env, argv, build_dirname = __dirname) => {
     if (argv.mode === "production") {
         // Also create minified bundles along with the non-minified ones.
         config.entry["bundle.min"] = config.entry["bundle"];
-        config.entry["bundle-polyfills.min"] = config.entry["bundle-polyfills"];
+        //config.entry["bundle-polyfills.min"] = config.entry["bundle-polyfills"];
     }
 
     if (env && env.DEPLOYMENT === "plone") {