Merge remote-tracking branch 'roots/10.0.0-dev' into 10.0.0-dev

* roots/10.0.0-dev:
  Add post-autoload-dump script for package discovery (roots#2201)
  Update dependencies
  New DOM router + dynamic imports (roots#2190)
  Simplify Mix Browsersync API (roots#2198)
  Fix version_compare() operators (roots#2195)
  Restructure (roots#2200)

Author: oxyc

.babelrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["@babel/plugin-syntax-dynamic-import"]
+}

.circleci/config.yml

@@ -29,7 +29,7 @@ orbs:
                 - composer-v1-{{ checksum "composer.lock" }}
                 - composer-v1-
           - run: composer install -n --prefer-dist
-          - run: composer test
+          - run: composer lint
           - save_cache:
               key: composer-v1-{{ checksum "composer.lock" }}
               paths:

app/setup.php

@@ -23,7 +23,6 @@
 
     wp_enqueue_style('sage/reset.css', asset('styles/reset.css')->uri(), false, null);
     wp_enqueue_style('sage/app.css', asset('styles/app.css')->uri(), ['sage/reset.css'], null);
-
 }, 100);
 
 /**

composer.json

@@ -60,8 +60,11 @@
   "minimum-stability": "dev",
   "prefer-stable": true,
   "scripts": {
-    "test": [
+    "lint": [
       "phpcs"
+    ],
+    "post-autoload-dump": [
+      "Roots\\Acorn\\ComposerScripts::postAutoloadDump"
     ]
   }
 }

config/view.php

@@ -21,21 +21,21 @@
 /**
  * Ensure compatible version of PHP is used
  */
-if (version_compare('7.1.3', phpversion(), '>=')) {
+if (version_compare('7.1.3', phpversion(), '>')) {
     $sage_error(__('You must be using PHP 7.1.3 or greater.', 'sage'), __('Invalid PHP version', 'sage'));
 }
 
 /**
  * Ensure compatible version of WordPress is used
  */
-if (version_compare('5.2', get_bloginfo('version'), '>=')) {
+if (version_compare('5.2', get_bloginfo('version'), '>')) {
     $sage_error(__('You must be using WordPress 5.2 or greater.', 'sage'), __('Invalid WordPress version', 'sage'));
 }
 
 /**
  * Ensure dependencies are loaded
  */
-if (! file_exists($composer = __DIR__ . '/../vendor/autoload.php')) {
+if (! file_exists($composer = __DIR__ . '/vendor/autoload.php')) {
     $sage_error(
         __('You must run <code>composer install</code> from the Sage directory.', 'sage'),
         __('Autoloader not found.', 'sage')
@@ -50,7 +50,7 @@
  * Add or remove files to the array as needed. Supports child theme overrides.
  */
 array_map(function ($file) use ($sage_error) {
-    $file = "../app/{$file}.php";
+    $file = "app/{$file}.php";
     if (! locate_template($file, true, true)) {
         $sage_error(
             sprintf(__('Error locating <code>%s</code> for inclusion.', 'sage'), $file),

resources/functions.php renamed to functions.php

@@ -17,41 +17,45 @@
   },
   "eslintConfig": {
     "root": true,
+    "parser": "babel-eslint",
     "extends": [
       "plugin:genero/recommended",
       "plugin:genero/wordpress"
     ]
   },
   "devDependencies": {
+    "@babel/plugin-syntax-dynamic-import": "^7.2",
     "@wordpress/babel-preset-default": "^4.2.0",
-    "browser-sync": "^2.26.5",
-    "browser-sync-webpack-plugin": "2.0.1",
+    "babel-eslint": "^10.0.1",
+    "browser-sync": "^2.26",
+    "browser-sync-webpack-plugin": "2.2",
     "classnames": "^2.2.6",
-    "cross-env": "^5.2.0",
+    "cross-env": "^5.2",
     "eslint": "^5.11",
     "eslint-plugin-genero": "git+https://github.com/generoi/eslint-plugin-genero.git",
-    "eslint-plugin-import": "^2.14",
-    "laravel-mix": "^4.0.15",
+    "eslint-plugin-import": "^2.17",
+    "laravel-mix": "^4.0",
     "laravel-mix-export-tailwind-config": "^0.1.2",
     "laravel-mix-wp-blocks": "^0.1.4",
-    "npm-run-all": "^4.1.5",
+    "npm-run-all": "^4.1",
     "postcss-import": "^12.0.1",
     "postcss-inline-svg": "^3.1.1",
     "postcss-nested": "^4.1.2",
     "postcss-preset-env": "^6.6.0",
     "postcss-scss": "^2.0.0",
     "prop-types": "^15.7.2",
     "rimraf": "^2.6",
-    "sass": "^1.19.0",
+    "sass": "^1.21",
     "sass-loader": "7.*",
-    "stylelint": "^9.9",
+    "stylelint": "^10.1",
     "stylelint-config-standard": "^18.2",
     "tailwindcss": "^1.0.1",
     "tailwindcss-gutenberg": "git+https://github.com/generoi/tailwindcss-gutenberg.git",
     "vue-template-compiler": "^2.6.10",
     "write-webpack-plugin": "^1.1.0"
   },
   "dependencies": {
-    "jquery": "^3.4.0"
+    "jquery": "^3.4",
+    "js-dom-router": "^1.0"
   }
 }

resources/index.php renamed to index.php

@@ -3,9 +3,10 @@
   <description>Roots Coding Standards</description>
 
   <!-- Scan these files -->
-  <file>resources/functions.php</file>
-  <file>resources/index.php</file>
+  <file>functions.php</file>
+  <file>index.php</file>
   <file>app</file>
+  <file>config</file>
   <file>resources/views</file>
 
   <!-- Show colors in console -->
@@ -15,7 +16,7 @@
   <arg value="s"/>
 
   <!-- Use PSR-2 as a base -->
-  <rule ref="PSR2"/>
+  <rule ref="PSR12"/>
 
   <!-- Exclusions below are for resources/views/ folder -->
 

package.json

@@ -1,23 +1,28 @@
 /**
- * Local Dependencies
+ * External Dependencies
  */
-import Router from './util/Router';
-import common from './routes/common';
-import aboutUs from './routes/about';
-import { ready } from './utils';
+import { router } from 'js-dom-router';
 
 /**
- * Populate the Router instance with DOM routes.
+ * DOM-based routing
+ */
+import about from './routes/about';
+
+/**
+ * Below is an example of a dynamic import; it will not be loaded until it's needed.
  *
- * common – Fired on all pages.
- * aboutUs – Fired on the About Us page, note the change from about-us to aboutUs (camelCase).
+ * See: {@link https://webpack.js.org/guides/code-splitting/#dynamic-imports | Dynamic Imports}
  */
-const routes = new Router({
-  common,
-  aboutUs,
-});
+const home = async () => import(/* webpackChunkName: "scripts/routes/home" */ './routes/home');
 
 /**
- * Load Events
+ * Set up DOM router
+ *
+ * .on(<name of body class>, callback)
+ *
+ * See: {@link http://goo.gl/EUTi53 | Markup-based Unobtrusive Comprehensive DOM-ready Execution} by Paul Irish
  */
-ready(() => routes.loadEvents());
+router
+  .on('about-us', about)
+  .on('home', async (event) => (await home()).default(event))
+  .ready();