Standardised module loading system & fixed build system

Fixed broken build system in broken webpack version.
Also updates module system to standardise on ES6 import/exports,
Especially since babel has changed it's 'default' logic for the old
module system.

package.json

@@ -10,9 +10,9 @@
     "permissions": "chown -R $USER:$USER bootstrap/cache storage public/uploads"
   },
   "devDependencies": {
-    "@babel/core": "^7.1.2",
+    "@babel/core": "^7.1.5",
     "@babel/polyfill": "^7.0.0",
-    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-env": "^7.1.5",
     "autoprefixer": "^8.6.5",
     "babel-loader": "^8.0.4",
     "css-loader": "^0.28.11",
@@ -24,8 +24,8 @@
     "sass-loader": "^7.1.0",
     "style-loader": "^0.21.0",
     "uglifyjs-webpack-plugin": "^1.3.0",
-    "webpack": "^4.24.0",
+    "webpack": "^4.25.1",
-    "webpack-cli": "^2.1.5"
+    "webpack-cli": "^3.1.2"
   },
   "dependencies": {
     "axios": "^0.18.0",

resources/assets/js/components/back-to-top.js

@@ -56,4 +56,4 @@ class BackToTop {
 
 }
 
-module.exports = BackToTop;
+export default BackToTop;

resources/assets/js/components/chapter-toggle.js

@@ -69,4 +69,4 @@ class ChapterToggle {
 
 }
 
-module.exports = ChapterToggle;
+export default ChapterToggle;

resources/assets/js/components/collapsible.js

@@ -34,4 +34,4 @@ class Collapsible {
 
 }
 
-module.exports = Collapsible;
+export default Collapsible;

resources/assets/js/components/dropdown.js

@@ -45,4 +45,4 @@ class DropDown {
 
 }
 
-module.exports = DropDown;
+export default DropDown;

resources/assets/js/components/editor-toolbox.js

@@ -44,4 +44,4 @@ class EditorToolbox {
 
 }
 
-module.exports = EditorToolbox;
+export default EditorToolbox;

resources/assets/js/components/entity-selector-popup.js

@@ -44,4 +44,4 @@ class EntitySelectorPopup {
     }
 }
 
-module.exports = EntitySelectorPopup;
+export default EntitySelectorPopup;

resources/assets/js/components/entity-selector.js

@@ -115,4 +115,4 @@ class EntitySelector {
 
 }
 
-module.exports = EntitySelector;
+export default EntitySelector;

resources/assets/js/components/expand-toggle.js

@@ -62,4 +62,4 @@ class ExpandToggle {
 
 }
 
-module.exports = ExpandToggle;
+export default ExpandToggle;

resources/assets/js/components/homepage-control.js

@@ -19,4 +19,4 @@ class HomepageControl {
 
 }
 
-module.exports = HomepageControl;
+export default HomepageControl;

resources/assets/js/components/image-picker.js

@@ -56,4 +56,4 @@ class ImagePicker {
 
 }
 
-module.exports = ImagePicker;
+export default ImagePicker;

resources/assets/js/components/index.js

@@ -1,30 +1,51 @@
+import dropdown from "./dropdown";
+import overlay from "./overlay";
+import backToTop from "./back-to-top";
+import notification from "./notification";
+import chapterToggle from "./chapter-toggle";
+import expandToggle from "./expand-toggle";
+import entitySelectorPopup from "./entity-selector-popup";
+import entitySelector from "./entity-selector";
+import sidebar from "./sidebar";
+import pagePicker from "./page-picker";
+import pageComments from "./page-comments";
+import wysiwygEditor from "./wysiwyg-editor";
+import markdownEditor from "./markdown-editor";
+import editorToolbox from "./editor-toolbox";
+import imagePicker from "./image-picker";
+import collapsible from "./collapsible";
+import toggleSwitch from "./toggle-switch";
+import pageDisplay from "./page-display";
+import shelfSort from "./shelf-sort";
+import homepageControl from "./homepage-control";
 
-let componentMapping = {
+
-    'dropdown': require('./dropdown'),
+const componentMapping = {
-    'overlay': require('./overlay'),
+    'dropdown': dropdown,
-    'back-to-top': require('./back-top-top'),
+    'overlay': overlay,
-    'notification': require('./notification'),
+    'back-to-top': backToTop,
-    'chapter-toggle': require('./chapter-toggle'),
+    'notification': notification,
-    'expand-toggle': require('./expand-toggle'),
+    'chapter-toggle': chapterToggle,
-    'entity-selector-popup': require('./entity-selector-popup'),
+    'expand-toggle': expandToggle,
-    'entity-selector': require('./entity-selector'),
+    'entity-selector-popup': entitySelectorPopup,
-    'sidebar': require('./sidebar'),
+    'entity-selector': entitySelector,
-    'page-picker': require('./page-picker'),
+    'sidebar': sidebar,
-    'page-comments': require('./page-comments'),
+    'page-picker': pagePicker,
-    'wysiwyg-editor': require('./wysiwyg-editor'),
+    'page-comments': pageComments,
-    'markdown-editor': require('./markdown-editor'),
+    'wysiwyg-editor': wysiwygEditor,
-    'editor-toolbox': require('./editor-toolbox'),
+    'markdown-editor': markdownEditor,
-    'image-picker': require('./image-picker'),
+    'editor-toolbox': editorToolbox,
-    'collapsible': require('./collapsible'),
+    'image-picker': imagePicker,
-    'toggle-switch': require('./toggle-switch'),
+    'collapsible': collapsible,
-    'page-display': require('./page-display'),
+    'toggle-switch': toggleSwitch,
-    'shelf-sort': require('./shelf-sort'),
+    'page-display': pageDisplay,
-    'homepage-control': require('./homepage-control'),
+    'shelf-sort': shelfSort,
+    'homepage-control': homepageControl,
 };
 
 window.components = {};
 
-let componentNames = Object.keys(componentMapping);
+const componentNames = Object.keys(componentMapping);
 
 /**
  * Initialize components of the given name within the given element.

resources/assets/js/components/markdown-editor.js

@@ -1,8 +1,8 @@
-const MarkdownIt = require("markdown-it");
+import MarkdownIt from "markdown-it";
-const mdTasksLists = require('markdown-it-task-lists');
+import mdTasksLists from 'markdown-it-task-lists';
-const code = require('../services/code');
+import code from '../services/code';
 
-const DrawIO = require('../services/drawio');
+import DrawIO from "../services/drawio";
 
 class MarkdownEditor {
 
@@ -427,4 +427,4 @@ class MarkdownEditor {
 
 }
 
-module.exports = MarkdownEditor ;
+export default MarkdownEditor ;

resources/assets/js/components/notification.js

@@ -43,4 +43,4 @@ class Notification {
 
 }
 
-module.exports = Notification;
+export default Notification;

resources/assets/js/components/overlay.js

@@ -36,4 +36,4 @@ class Overlay {
 
 }
 
-module.exports = Overlay;
+export default Overlay;

resources/assets/js/components/page-comments.js

@@ -1,4 +1,4 @@
-const MarkdownIt = require("markdown-it");
+import MarkdownIt from "markdown-it";
 const md = new MarkdownIt({ html: false });
 
 class PageComments {
@@ -172,4 +172,4 @@ class PageComments {
 
 }
 
-module.exports = PageComments;
+export default PageComments;

resources/assets/js/components/page-display.js

@@ -233,4 +233,4 @@ class PageDisplay {
     }
 }
 
-module.exports = PageDisplay;
+export default PageDisplay;

resources/assets/js/components/page-picker.js

@@ -59,4 +59,4 @@ function toggleElem(elem, show) {
     elem.style.display = show ? display : 'none';
 }
 
-module.exports = PagePicker;
+export default PagePicker;

resources/assets/js/components/shelf-sort.js

@@ -1,3 +1,4 @@
+import "jquery-sortable";
 
 class ShelfSort {
 
@@ -9,9 +10,8 @@ class ShelfSort {
     }
 
     initSortable() {
-        const sortable = require('jquery-sortable');
         const placeHolderContent = this.getPlaceholderHTML();
-
+        // TODO - Load sortable at this point
         return $('.scroll-box').sortable({
             group: 'shelf-books',
             exclude: '.instruction,.scroll-box-placeholder',
@@ -68,4 +68,4 @@ class ShelfSort {
 
 }
 
-module.exports = ShelfSort;
+export default ShelfSort;

resources/assets/js/components/sidebar.js

@@ -13,4 +13,4 @@ class Sidebar {
 
 }
 
-module.exports = Sidebar;
+export default Sidebar;

resources/assets/js/components/toggle-switch.js

@@ -16,4 +16,4 @@ class ToggleSwitch {
 
 }
 
-module.exports = ToggleSwitch;
+export default ToggleSwitch;

resources/assets/js/components/wysiwyg-editor.js

@@ -1,5 +1,5 @@
-const Code = require('../services/code');
+import Code from "../services/code";
-const DrawIO = require('../services/drawio');
+import DrawIO from "../services/drawio";
 
 /**
  * Handle pasting images from clipboard.
@@ -593,4 +593,4 @@ class WysiwygEditor {
 
 }
 
-module.exports = WysiwygEditor;
+export default WysiwygEditor;

resources/assets/js/services/code.js

@@ -1,27 +1,27 @@
-const CodeMirror = require('codemirror');
+import CodeMirror from "codemirror";
-const Clipboard = require("clipboard");
+import Clipboard from "clipboard";
 
 // Modes
-require('codemirror/mode/css/css');
+import 'codemirror/mode/css/css';
-require('codemirror/mode/clike/clike');
+import 'codemirror/mode/clike/clike';
-require('codemirror/mode/diff/diff');
+import 'codemirror/mode/diff/diff';
-require('codemirror/mode/go/go');
+import 'codemirror/mode/go/go';
-require('codemirror/mode/htmlmixed/htmlmixed');
+import 'codemirror/mode/htmlmixed/htmlmixed';
-require('codemirror/mode/javascript/javascript');
+import 'codemirror/mode/javascript/javascript';
-require('codemirror/mode/markdown/markdown');
+import 'codemirror/mode/markdown/markdown';
-require('codemirror/mode/nginx/nginx');
+import 'codemirror/mode/nginx/nginx';
-require('codemirror/mode/php/php');
+import 'codemirror/mode/php/php';
-require('codemirror/mode/powershell/powershell');
+import 'codemirror/mode/powershell/powershell';
-require('codemirror/mode/python/python');
+import 'codemirror/mode/python/python';
-require('codemirror/mode/ruby/ruby');
+import 'codemirror/mode/ruby/ruby';
-require('codemirror/mode/shell/shell');
+import 'codemirror/mode/shell/shell';
-require('codemirror/mode/sql/sql');
+import 'codemirror/mode/sql/sql';
-require('codemirror/mode/toml/toml');
+import 'codemirror/mode/toml/toml';
-require('codemirror/mode/xml/xml');
+import 'codemirror/mode/xml/xml';
-require('codemirror/mode/yaml/yaml');
+import 'codemirror/mode/yaml/yaml';
 
 // Addons
-require('codemirror/addon/scroll/scrollpastend');
+import 'codemirror/addon/scroll/scrollpastend';
 
 const modeMap = {
     css: 'css',
@@ -255,7 +255,7 @@ function getMetaKey() {
     return mac ? "Cmd" : "Ctrl";
 }
 
-module.exports = {
+export default {
     highlight: highlight,
     wysiwygView: wysiwygView,
     popupEditor: popupEditor,

resources/assets/js/services/drawio.js

@@ -66,4 +66,4 @@ function drawPostMessage(data) {
     iFrame.contentWindow.postMessage(JSON.stringify(data), '*');
 }
 
-module.exports = {show, close};
+export default {show, close};

resources/assets/js/services/events.js

@@ -25,4 +25,4 @@ class Events {
     }
 }
 
-module.exports = Events;
+export default Events;

resources/assets/js/services/translations.js

@@ -107,4 +107,4 @@ class Translator {
 
 }
 
-module.exports = Translator;
+export default Translator;

resources/assets/js/vues/attachment-manager.js

@@ -1,5 +1,5 @@
-const draggable = require('vuedraggable');
+import draggable from "vuedraggable";
-const dropzone = require('./components/dropzone');
+import dropzone from "./components/dropzone";
 
 function mounted() {
     this.pageId = this.$el.getAttribute('page-id');
@@ -137,6 +137,6 @@ let methods = {
 
 };
 
-module.exports = {
+export default {
     data, methods, mounted, components,
 };

resources/assets/js/vues/code-editor.js

@@ -1,4 +1,4 @@
-const codeLib = require('../services/code');
+import codeLib from "../services/code";
 
 const methods = {
     show() {
@@ -37,7 +37,7 @@ const data = {
     callback: null
 };
 
-module.exports = {
+export default {
     methods,
     data
 };

resources/assets/js/vues/components/autosuggest.js

@@ -125,4 +125,4 @@ const methods = {
 
 };
 
-module.exports = {template, data, props, methods};
+export default {template, data, props, methods};

resources/assets/js/vues/components/dropzone.js

@@ -1,4 +1,4 @@
-const DropZone = require("dropzone");
+import DropZone from "dropzone";
 
 const template = `
     <div class="dropzone-container">
@@ -60,7 +60,7 @@ const methods = {
     }
 };
 
-module.exports = {
+export default {
     template,
     props,
     mounted,

resources/assets/js/vues/entity-dashboard.js

@@ -39,6 +39,6 @@ function mounted() {
     this.type = this.$el.getAttribute('entity-type');
 }
 
-module.exports = {
+export default {
     data, computed, methods, mounted
 };

resources/assets/js/vues/image-manager.js

@@ -1,7 +1,5 @@
-
 import * as Dates from "../services/dates";
-
+import dropzone from "./components/dropzone";
-const dropzone = require('./components/dropzone');
 
 let page = 0;
 let previousClickTime = 0;
@@ -193,7 +191,7 @@ function mounted() {
     baseUrl = window.baseUrl('/images/' + this.imageType + '/all/')
 }
 
-module.exports = {
+export default {
     mounted,
     methods,
     data,

resources/assets/js/vues/page-editor.js

@@ -145,6 +145,6 @@ let computed = {
     }
 };
 
-module.exports = {
+export default {
     mounted, data, methods, computed,
 };

resources/assets/js/vues/search.js

@@ -188,6 +188,6 @@ function created() {
     this.dateParse(this.termString);
 }
 
-module.exports = {
+export default {
     data, computed, methods, created
 };

resources/assets/js/vues/tag-manager.js

@@ -1,5 +1,5 @@
-const draggable = require('vuedraggable');
+import draggable from 'vuedraggable';
-const autosuggest = require('./components/autosuggest');
+import autosuggest from './components/autosuggest';
 
 let data = {
     entityId: false,
@@ -63,6 +63,6 @@ function mounted() {
     });
 }
 
-module.exports = {
+export default {
     data, methods, mounted, components, directives
 };

resources/assets/js/vues/vues.js

@@ -1,17 +1,25 @@
-const Vue = require("vue");
+import Vue from "vue";
 
 function exists(id) {
     return document.getElementById(id) !== null;
 }
 
+import searchSystem from "./search";
+import entityDashboard from "./entity-dashboard";
+import codeEditor from "./code-editor";
+import imageManager from "./image-manager";
+import tagManager from "./tag-manager";
+import attachmentManager from "./attachment-manager";
+import pageEditor from "./page-editor";
+
 let vueMapping = {
-    'search-system': require('./search'),
+    'search-system': searchSystem,
-    'entity-dashboard': require('./entity-dashboard'),
+    'entity-dashboard': entityDashboard,
-    'code-editor': require('./code-editor'),
+    'code-editor': codeEditor,
-    'image-manager': require('./image-manager'),
+    'image-manager': imageManager,
-    'tag-manager': require('./tag-manager'),
+    'tag-manager': tagManager,
-    'attachment-manager': require('./attachment-manager'),
+    'attachment-manager': attachmentManager,
-    'page-editor': require('./page-editor'),
+    'page-editor': pageEditor,
 };
 
 window.vues = {};