pat contentbrowser: Try to import from Volto.

Author: thet

babel.config.js

@@ -7,6 +7,13 @@ 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",
     ],
-    plugins: ["@babel/plugin-proposal-optional-chaining"],
 };

package.json

@@ -9,6 +9,7 @@
         "yarn": "^1.3.2"
     },
     "dependencies": {
+        "@plone/volto": "^10.7.0",
         "ace-builds": "1.2.6",
         "backbone": "1.1.2",
         "backbone.paginator": "1.0.0",
@@ -39,6 +40,7 @@
         "patternslib": "https://github.com/Patternslib/Patterns.git#c718baa7057cd218d1704d5c66ace8ded0a43e44",
         "pickadate": "3.6.4",
         "prettier": "^2.1.2",
+        "react-dates": "21.5.1",
         "select2": "https://github.com/ivaynberg/select2.git#3.5.4",
         "sortablejs": "^1.12.0",
         "tinymce-builded": "https://github.com/artursmirnov/tinymce_builded.git#4.7.13"
@@ -47,8 +49,13 @@
         "@11ty/eleventy": "^0.11.1",
         "@11ty/eleventy-navigation": "^0.1.6",
         "@11ty/eleventy-plugin-syntaxhighlight": "^3.0.4",
+        "@babel/plugin-proposal-class-properties": "^7.12.1",
+        "@babel/plugin-proposal-export-default-from": "^7.12.1",
         "@babel/plugin-proposal-optional-chaining": "^7.11.0",
+        "@babel/plugin-proposal-throw-expressions": "^7.12.1",
+        "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
         "@babel/preset-env": "^7.9.6",
+        "@babel/preset-react": "^7.12.10",
         "@testing-library/jest-dom": "^5.5.0",
         "babel-eslint": "^10.1.0",
         "babel-loader": "^8.1.0",
@@ -59,6 +66,7 @@
         "core-js": "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",
@@ -96,7 +104,20 @@
         "jqtree": "1.4.10",
         "jquery": "3.5.1",
         "datatables.net": "1.10.23",
-        "datatables.net-bs": "1.10.23"
+        "datatables.net-bs": "1.10.23",
+        "react-dates": "21.5.1",
+        "@sentry/utils": "5.27.3",
+        "@sentry/types": "5.27.3",
+        "core-js": "3.8.2",
+        "dom-helpers": "5.2.0",
+        "es-abstract": "1.17.7",
+        "hoist-non-react-statics": "3.3.2",
+        "inherits": "2.0.4",
+        "isarray": "1.0.0",
+        "react-redux": "7.2.2",
+        "react-transition-group": "4.4.1",
+        "safe-buffer": "5.2.1",
+        "tslib": "2.1.0"
     },
     "scripts": {
         "clean": "rimraf docs/_site",

src/pat/contentbrowser/contentbrowser.js

@@ -7,7 +7,8 @@ export default Base.extend({
     parser: "mockup",
 
     async init() {
-        // let volto = await import("@plone/volto");
+        let contentbrowser = await import("@plone/volto/components/manage/Contents/Contents.jsx"); // prettier-ignore
+
         this.el.style["background-color"] = "green";
     },
 });

src/volto/load-volto-addons.js

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

webpack.config.js

@@ -49,8 +49,8 @@ module.exports = async (env) => {
         module: {
             rules: [
                 {
-                    test: /\.js$/,
-                    exclude: /node_modules\/(?!(patternslib)\/).*/,
+                    test: /\.jsx?$/,
+                    exclude: /node_modules\/(?!(patternslib|@plone)\/).*/,
                     loader: "babel-loader",
                 },
                 {
@@ -112,7 +112,11 @@ module.exports = async (env) => {
             }),
         ],
         resolve: {
-            alias: {},
+            alias: {
+                "load-volto-addons": path.resolve(__dirname, "src/volto/load-volto-addons"), // prettier-ignore
+                "@sentry/node": "@sentry/browser",
+            },
+            extensions: [".js", ".jsx"],
         },
     };
     if (mode === "development") {
@@ -136,6 +140,13 @@ module.exports = async (env) => {
         } catch (error) {
             // ignore.
         }
+
+        try {
+            await fs.promises.access(path.resolve(__dirname, "devsrc/volto")); // prettier-ignore
+            config.resolve.alias["@plone/volto"] = path.resolve(__dirname, "devsrc/volto/src"); // prettier-ignore
+        } catch (error) {
+            config.resolve.alias["@plone/volto"] = path.resolve(__dirname, "node_modules/@plone/volto/src"); // prettier-ignore
+        }
     }
     if (mode === "production") {
         config.entry["bundle.min"] = config.entry["bundle"];