IMPROVEMENT: ElementList sub elements controllers processing

.babelrc

@@ -1,14 +0,0 @@
-{
-    "presets": [
-        [
-            "@babel/preset-env",
-            {
-                "targets": {
-                    "node": "6.10",
-                    "esmodules": true
-                }
-            }
-        ]
-    ],
-    "plugins": ["@babel/plugin-proposal-object-rest-spread"]
-}

app/_config/elements.yml

@@ -9,6 +9,13 @@ Page:
   extensions:
     - DNADesign\Elemental\Extensions\ElementalPageExtension
 
+SilverStripe\CMS\Controllers\ContentController:
+  extensions:
+    - DNADesign\Elemental\Extensions\ElementalContentControllerExtension
+    - Site\Elements\ElementalContentControllerExtension
+  url_handlers:
+    'element/$ID!': 'handleElement'
+
 DNADesign\Elemental\Models\ElementalArea:
   extensions:
     - Site\Extensions\ElementalArea

app/src/Elements/ElementListExtension.php

@@ -0,0 +1,15 @@
+<?php
+
+
+namespace Site\Elements;
+
+
+use SilverStripe\ORM\DataExtension;
+
+class ElementListExtension extends DataExtension
+{
+    public function getControllerName()
+    {
+        return EmptyPageController::class;
+    }
+}

app/src/Elements/ElementalContentControllerExtension.php

@@ -0,0 +1,44 @@
+<?php
+
+
+namespace Site\Elements;
+
+
+use DNADesign\Elemental\Models\BaseElement;
+use SilverStripe\CMS\Model\SiteTree;
+
+class ElementalContentControllerExtension extends \DNADesign\Elemental\Extensions\ElementalContentControllerExtension
+{
+    private static $allowed_actions = array(
+        'handleElement'
+    );
+
+    public function handleElement()
+    {
+        $id = $this->owner->getRequest()->param('ID');
+
+        if (!$id) {
+            user_error('No element ID supplied', E_USER_ERROR);
+            return false;
+        }
+
+        /** @var SiteTree $elementOwner */
+        //$elementOwner = $this->owner->data();
+
+        /*$elementalAreaRelations = $this->owner->getElementalRelations();
+
+        if (!$elementalAreaRelations) {
+            user_error(get_class($this->owner) . ' has no ElementalArea relationships', E_USER_ERROR);
+            return false;
+        }*/
+
+        $element = BaseElement::get()->byID($id);
+
+        if ($element) {
+            return $element->getController();
+        }
+
+        user_error('Element $id not found', E_USER_ERROR);
+        return false;
+    }
+}

app/src/Elements/EmptyPageController.php

@@ -0,0 +1,23 @@
+<?php
+
+
+namespace Site\Elements;
+
+
+use SilverStripe\SiteConfig\SiteConfig;
+
+class EmptyPageController extends \PageController
+{
+    public function __construct($dataRecord = null)
+    {
+        parent::__construct();
+        $this->dataRecord->Title = SiteConfig::current_site_config()->getField('Title');
+
+        $this->setFailover($this->dataRecord);
+    }
+
+    public static function DefaultContainer()
+    {
+        return \Page::DefaultContainer();
+    }
+}

app/templates/Includes/First.ss

@@ -15,7 +15,14 @@
 
 
 <% if $isDev || $WebpackActive %>
-	<div id="DevOriginal"></div>
+	<div id="DevUtilities">
+		$DeferedCSS('app_dev.css')
+		$DeferedJS('app_dev.js')
+		<div class="navs">
+			<button class="toggle-original">Toggle Original</button>
+		</div>
+		<div class="original d-none"></div>
+	</div>
 <% end_if %>
 
 <%-- Site Wide Alert Message --%>

package.json

@@ -35,6 +35,7 @@
 		"browserslist": "^4.8.6",
 		"caniuse-lite": "^1.0.30001025",
 		"inputmask": "^5.0.3",
+		"font-awesome": "^4.7.0",
 		"yarn": "^1.22.0"
 	},
 	"devDependencies": {
@@ -47,7 +48,6 @@
 		"animate.css": "^3.7.0",
 		"autoprefixer": "^9.7.4",
 		"babel-eslint": "^8.2.6",
-		"babel-loader": "^8.0.6",
 		"bootbox": "^4.4.0",
 		"bootstrap": "^4.4.1",
 		"bootstrap-confirmation2": "^4.1.0",
@@ -62,16 +62,13 @@
 		"core-util-is": "^1.0.2",
 		"croppie": "^2.6.4",
 		"cross-env": "^5.2.1",
-		"css-loader": "^3.4.2",
 		"eslint": "^4.18.1",
 		"eslint-plugin-import": "^2.20.1",
 		"eslint-plugin-jquery": "^1.5.1",
 		"eslint-plugin-react": "^7.18.3",
 		"exif-js": "^2.3.0",
 		"exports-loader": "^0.7.0",
-		"extract-text-webpack-plugin": "^4.0.0-beta.0",
 		"favicons-webpack-plugin": "0.0.9",
-		"file-loader": "^1.1.5",
 		"font-awesome": "^4.7.0",
 		"foundation-emails": "^2.2.1",
 		"gijgo": "^1.9.13",
@@ -92,12 +89,10 @@
 		"lost": "^8.3.1",
 		"mapbox-gl": "^1.6.1",
 		"material-design-color": "^2.3.2",
-		"node-sass": "^4.13.1",
 		"object-assign": "^4.1.1",
 		"offcanvas-bootstrap": "^2.5.2",
 		"optimize-css-assets-webpack-plugin": "^5.0.3",
 		"popper.js": "^1.16.0",
-		"postcss-loader": "^2.1.5",
 		"pouchdb": "^6.4.3",
 		"quill": "^1.3.7",
 		"react": "^16.12.0",
@@ -106,26 +101,31 @@
 		"react-hot-loader": "^3.1.3",
 		"redux": "^3.7.2",
 		"redux-devtools-extension": "^2.13.8",
-		"resolve-url-loader": "^2.3.2",
 		"rimraf": "^2.7.1",
 		"routie": "0.0.1",
 		"sass-lint": "^1.13.1",
 		"sass-lint-fix": "^1.12.1",
-		"sass-loader": "^6.0.6",
 		"script-ext-html-webpack-plugin": "^2.1.4",
 		"select2": "^4.0.8",
 		"smooth-scroll": "^14.2.1",
 		"style-loader": "^0.19.0",
 		"svg-url-loader": "^2.3.3",
 		"terser-webpack-plugin": "^2.3.2",
-		"uglify-js": "git://github.com/mishoo/UglifyJS2.git#harmony-v2.8.22",
-		"uglifyjs-webpack-plugin": "^2.2.0",
 		"url-loader": "^0.6.2",
 		"webpack": "^4.41.5",
 		"webpack-cli": "^3.3.10",
 		"webpack-dev-server": "^3.10.3",
 		"webpack-manifest-plugin": "^1.3.2",
-		"webpack-merge": "^4.2.2"
+		"webpack-merge": "^4.2.2",
+		"@a2nt/image-sprite-webpack-plugin": "^0.2.5",
+		"css-loader": "^3.4.2",
+		"file-loader": "^5.1.0",
+		"mini-css-extract-plugin": "^0.9.0",
+		"node-sass": "^4.13.1",
+		"postcss-loader": "^3.0.0",
+		"resolve-url-loader": "^3.1.1",
+		"sass-loader": "^8.0.2",
+		"hard-source-webpack-plugin": "^0.13.1"
 	},
 	"stylelint": {
 		"rules": {

webpack.config.prod.js

@@ -12,7 +12,7 @@ const filesystem = require('fs');
 const path = require('path');
 const autoprefixer = require('autoprefixer');
 
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
+const ExtractTextPlugin = require('mini-css-extract-plugin');
 const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
 
 const TerserPlugin = require('terser-webpack-plugin');
@@ -20,6 +20,8 @@ const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const ImageminPlugin = require('imagemin-webpack');
 const ImageSpritePlugin = require('@a2nt/image-sprite-webpack-plugin');
 
+const COMPRESS = true;
+
 let plugins = [
   new webpack.DefinePlugin({
     'process.env': {
@@ -215,19 +217,20 @@ module.exports = merge(common, {
     rules: [
       {
         test: /\.s?css$/,
-        use: ExtractTextPlugin.extract({
-          fallback: 'style-loader',
         use: [
+          {
+            loader: ExtractTextPlugin.loader,
+          },
           {
             loader: 'css-loader',
             options: {
-                sourceMap: false,
+              sourceMap: !COMPRESS,
             },
           },
           {
             loader: 'postcss-loader',
             options: {
-                sourceMap: false,
+              sourceMap: !COMPRESS,
               plugins: [autoprefixer()],
             },
           },
@@ -237,11 +240,10 @@ module.exports = merge(common, {
           {
             loader: 'sass-loader',
             options: {
-                sourceMap: false,
+              sourceMap: !COMPRESS,
             },
           },
         ],
-        }),
       },
       {
         test: /fontawesome([^.]+).(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,