Use WordPress dependencies as ES modules

.eslintrc

@@ -1,42 +1,42 @@
 {
-    "extends": [
-        "eslint:recommended",
-        "plugin:react/recommended",
-        "prettier",
-        "prettier/react"
-    ],
-    "plugins": [
-        "prettier",
-        "react"
-    ],
-    "parser": "babel-eslint",
-    "parserOptions": {
-        "sourceType": "module",
-        "ecmaFeatures": {
-            "jsx": true
-        }
-    },
-    "globals": {
-        "wp": true,
-        "document": true,
-        "console": true,
-        "window": true
-    },
-    "settings": {
-        "react": {
-            "pragma": "wp"
-        }
-    },
-    "env": {
-        "es6": true
-    },
-    "rules": {
-        "prettier/prettier": "error",
-        "react/prop-types": [
-            0
-        ],
-        "react/display-name": [
-            0
-        ]
-    }
-}
+	"extends": [
+		"eslint:recommended",
+		"plugin:react/recommended",
+		"prettier",
+		"prettier/react"
+	],
+	"plugins": [
+		"prettier",
+		"react"
+	],
+	"parser": "babel-eslint",
+	"parserOptions": {
+		"sourceType": "module",
+		"ecmaFeatures": {
+			"jsx": true
+		}
+	},
+	"globals": {
+		"wp": true,
+		"document": true,
+		"console": true,
+		"window": true
+	},
+	"settings": {
+		"react": {
+			"pragma": "wp"
+		}
+	},
+	"env": {
+		"es6": true
+	},
+	"rules": {
+		"prettier/prettier": "error",
+		"react/prop-types": [
+			0
+		],
+		"react/display-name": [
+			0
+		]
+	}
+}

.gitignore

@@ -50,7 +50,7 @@ vendor
 
 #build
 build
-languages
+languages/*.pot
 dummynator.zip
 
 # Project Notes

.nvmrc

@@ -0,0 +1 @@
+lts/*

package.json

@@ -2,6 +2,10 @@
     "name": "dummynator",
     "version": "1.0.0",
     "private": true,
+    "engines": {
+        "node": ">=8.0.0",
+        "npm": ">=5.0.0"
+      },
     "dependencies": {
         "classnames": "^2.2.5",
         "lorem-ipsum": "^1.0.4"
@@ -11,6 +15,23 @@
         "build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
         "dev": "cross-env BABEL_ENV=default webpack --watch"
     },
+    "babel": {
+        "presets": [
+          "@wordpress/default"
+        ],
+        "env": {
+          "production": {
+            "plugins": [
+              [
+                "@wordpress/babel-plugin-makepot",
+                {
+                  "output": "languages/cpb.pot"
+                }
+              ]
+            ]
+          }
+        }
+      },
     "devDependencies": {
         "@wordpress/babel-plugin-makepot": "^1.0.0",
         "@wordpress/babel-preset-default": "^1.1.0",

src/components/generator.js

@@ -6,17 +6,27 @@ import loremIpsum from "lorem-ipsum";
 /**
  * WordPress dependencies
  */
-const { __ } = wp.i18n;
-const { ButtonGroup, Button, IconButton, BaseControl } = wp.components;
-const { Component, Fragment } = wp.element;
-const { withDispatch } = wp.data;
-const { createBlock } = wp.blocks;
+import { __ } from "@wordpress/i18n";
+import {
+  ButtonGroup,
+  Button,
+  IconButton,
+  BaseControl
+} from "@wordpress/components";
+import { Component, Fragment } from "@wordpress/element";
+import { withDispatch } from "@wordpress/data";
+import { createBlock } from "@wordpress/blocks";
 
 /**
  * Internal dependencies
  */
 import options from "../data/options";
 
+/**
+ * Dummy content generator
+ *
+ * @extends Component
+ */
 class Generator extends Component {
   constructor() {
     super(...arguments);

src/components/menu-item.js

@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-const { PluginSidebarMoreMenuItem } = wp.editPost;
-const { __ } = wp.i18n;
+import { __ } from "@wordpress/i18n";
+import { PluginSidebarMoreMenuItem } from "@wordpress/editPost";
 
 /**
  * Internal dependencies

src/components/sidebar.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-const { PluginSidebar } = wp.editPost;
+import { PluginSidebar } from "@wordpress/editPost";
 
 /**
  * Internal dependencies

src/index.js

@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-const { Fragment } = wp.element;
-const { registerPlugin } = wp.plugins;
+import { Fragment } from "@wordpress/element";
+import { registerPlugin } from "@wordpress/plugins";
 
 /**
  * Internal dependencies

webpack.config.js

@@ -1,23 +1,59 @@
+/**
+ * External Dependencies
+ */
 const webpack = require("webpack");
-const path = require("path");
-const ExtractTextPlugin = require("extract-text-webpack-plugin");
-const inProduction = "production" === process.env.NODE_ENV;
 const CleanWebpackPlugin = require("clean-webpack-plugin");
+const ExtractTextPlugin = require("extract-text-webpack-plugin");
 const WebpackRTLPlugin = require("webpack-rtl-plugin");
 
+// Enviornment Flag
+const inProduction = "production" === process.env.NODE_ENV;
+
+// Block CSS loader
+const cssExtractTextPlugin = new ExtractTextPlugin({
+  filename: "./build/style.css"
+});
+
+// Editor CSS loader
+const editBlocksCSSPlugin = new ExtractTextPlugin({
+  filename: "./build/editor.css"
+});
+
+// Configuration for the ExtractTextPlugin.
+const extractConfig = {
+  use: [
+    { loader: "raw-loader" },
+    {
+      loader: "postcss-loader",
+      options: {
+        plugins: [require("autoprefixer")]
+      }
+    },
+    {
+      loader: "sass-loader"
+    }
+  ]
+};
+
+// Externals
 const externals = {
-  react: "React"
+  react: "React",
+  lodash: "lodash"
 };
+// WordPress dependences
 const wpDependencies = [
   "components",
   "element",
   "blocks",
+  "editor",
+  "hooks",
   "utils",
   "date",
   "data",
   "i18n",
   "editPost",
-  "plugins"
+  "plugins",
+  "apiRequest"
 ];
 wpDependencies.forEach(wpDependency => {
   externals["@wordpress/" + wpDependency] = {
@@ -27,70 +63,48 @@ wpDependencies.forEach(wpDependency => {
 
 // Webpack config.
 const config = {
-  entry: {
-    script: ["./src/index.js"]
-  },
+  entry: "./src/index.js",
   externals,
-  // Tell webpack where to output.
   output: {
-    path: path.resolve(__dirname, "./build"),
-    filename: "[name].js"
+    filename: "build/script.js",
+    path: __dirname,
+    library: ["dummynator", "[name]"],
+    libraryTarget: "this"
   },
   resolve: {
     modules: [__dirname, "node_modules"]
   },
-  devtool: "source-map",
   module: {
     rules: [
-      // Use Babel to compile JS.
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        loaders: ["babel-loader"]
+        use: "babel-loader"
+      },
+      {
+        test: /editor\.s?css$/,
+        use: editBlocksCSSPlugin.extract(extractConfig)
       },
-      // SASS to CSS.
       {
-        test: /\.scss$/,
-        use: ExtractTextPlugin.extract({
-          use: [
-            { loader: "raw-loader" },
-            {
-              loader: "postcss-loader",
-              options: {
-                sourceMap: true,
-                plugins: () => [require("autoprefixer")]
-              }
-            },
-            {
-              loader: "sass-loader",
-              options: {
-                sourceMap: true,
-                outputStyle: inProduction ? "compressed" : "nested"
-              }
-            }
-          ]
-        })
+        test: /style\.s?css$/,
+        use: cssExtractTextPlugin.extract(extractConfig)
       }
     ]
   },
-
-  // Plugins.
   plugins: [
-    // Removes the "build" folder before building.
     new CleanWebpackPlugin(["build"]),
-    new ExtractTextPlugin("style.css"),
-
-    // Create RTL css.
+    editBlocksCSSPlugin,
+    cssExtractTextPlugin,
     new WebpackRTLPlugin()
-  ]
+  ],
+  stats: {
+    children: false
+  }
 };
 
-// inProd?
+// For Productions
 if (inProduction) {
-  // Uglify JS.
   config.plugins.push(new webpack.optimize.UglifyJsPlugin({ sourceMap: true }));
-
-  // Minify CSS.
   config.plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true }));
 }