Merge pull request #11484 from nextcloud/babel-fix-and-dynamic-import-settings

Babel fix and dynamic import settings

build/vue-builds.sh

@@ -8,29 +8,47 @@ then
 	echo "The build file $entryFile does not exists"
 	exit 2
 else
-	backupFile="$entryFile.orig"
 	path=$(dirname "$entryFile")
+	file=$(basename $entryFile)
 
-	# Backup original file
-	echo "Backing up $entryFile to $backupFile"
-	cp $entryFile $backupFile
+	set -e
+	cd $path
+	echo "Entering $path"
+
+	# support for multiple chunks
+	for chunk in *$file; do
+
+		# Backup original file
+		backupFile="$chunk.orig"
+		echo "Backing up $chunk to $backupFile"
+		cp $chunk $backupFile
+
+	done
 
 	# Make the app
-	set -e
-	cd "$path/../"
-	make
+	echo "Making $file"
+	cd ../
+	npm --silent install
+	npm run --silent build
 
 	# Reset
 	cd $root
+	cd $path
 
-	# Compare build files
-	echo "Comparing $entryFile to the original"
-	if ! diff -q $entryFile $backupFile &>/dev/null
-	then
-		echo "$entryFile build is NOT up-to-date! Please send the proper production build within the pull request"
-		cat $HOME/.npm/_logs/*.log
-		exit 2
-	else
-		echo "$entryFile build is up-to-date"
-	fi
+	# support for multiple chunks
+	for chunk in *$file; do
+
+		# Compare build files
+		echo "Comparing $chunk to the original"
+		backupFile="$chunk.orig"
+		if ! diff -q $chunk $backupFile &>/dev/null
+		then
+			echo "$chunk build is NOT up-to-date! Please send the proper production build within the pull request"
+			cat $HOME/.npm/_logs/*.log
+			exit 2
+		else
+			echo "$chunk build is up-to-date"
+		fi
+
+	done
 fi

settings/.babelrc.js

@@ -1,4 +1,5 @@
 module.exports = {
+	plugins: ['@babel/plugin-syntax-dynamic-import'],
 	presets: [
 		[
 			'@babel/preset-env',

settings/package-lock.json

@@ -900,6 +900,15 @@
         "@babel/helper-plugin-utils": "^7.0.0"
       }
     },
+    "@babel/plugin-syntax-dynamic-import": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.0.0.tgz",
+      "integrity": "sha512-Gt9xNyRrCHCiyX/ZxDGOcBnlJl0I3IWicpZRC4CdC0P5a/I07Ya2OAMEBU+J7GmRFVmIetqEYRko6QYRuKOESw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
     "@babel/plugin-syntax-json-strings": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.0.0.tgz",
@@ -1302,6 +1311,22 @@
         "regexpu-core": "^4.1.3"
       }
     },
+    "@babel/polyfill": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@babel/polyfill/-/polyfill-7.0.0.tgz",
+      "integrity": "sha512-dnrMRkyyr74CRelJwvgnnSUDh2ge2NCTyHVwpOdvRMHtJUyxLtMAfhBN3s64pY41zdw0kgiLPh6S20eb1NcX6Q==",
+      "requires": {
+        "core-js": "^2.5.7",
+        "regenerator-runtime": "^0.11.1"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.5.7",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz",
+          "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw=="
+        }
+      }
+    },
     "@babel/preset-env": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.1.0.tgz",
@@ -1871,32 +1896,6 @@
         "util.promisify": "^1.0.0"
       }
     },
-    "babel-polyfill": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
-      "integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
-      "requires": {
-        "babel-runtime": "^6.26.0",
-        "core-js": "^2.5.0",
-        "regenerator-runtime": "^0.10.5"
-      },
-      "dependencies": {
-        "regenerator-runtime": {
-          "version": "0.10.5",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
-          "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg="
-        }
-      }
-    },
-    "babel-runtime": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
-      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-      "requires": {
-        "core-js": "^2.4.0",
-        "regenerator-runtime": "^0.11.0"
-      }
-    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -2506,11 +2505,6 @@
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=",
       "dev": true
     },
-    "core-js": {
-      "version": "2.5.5",
-      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.5.tgz",
-      "integrity": "sha1-sU3ek2xkDAV5prUMq8wTLdYSfjs="
-    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -5085,11 +5079,11 @@
       "dev": true
     },
     "nextcloud-vue": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/nextcloud-vue/-/nextcloud-vue-0.1.2.tgz",
-      "integrity": "sha512-q6kYxt29mitH9yLF8vOH2wxKNVwvjwOQrq2BDF6ginsaDfqLTB0ROXffKPLFxCk+jrQVdPoPpPEF7PqF1Q3OMA==",
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/nextcloud-vue/-/nextcloud-vue-0.1.5.tgz",
+      "integrity": "sha512-2tFfPPzhTMtZnbBmUk91o2o+jiri3X6BEgNs+iAWf9WZq4Gcpb6kIFW2ckizZuPFccmV1rA4Ts18IpU25vGERw==",
       "requires": {
-        "babel-polyfill": "^6.26.0",
+        "@babel/polyfill": "^7.0.0",
         "v-tooltip": "^2.0.0-rc.33",
         "vue": "^2.5.16",
         "vue-click-outside": "^1.0.7",
@@ -7318,9 +7312,9 @@
       "dev": true
     },
     "vue2-datepicker": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/vue2-datepicker/-/vue2-datepicker-2.4.1.tgz",
-      "integrity": "sha512-+m1JOIY0Dbsbkiz3KMsw5O1Ai/aX1AEdRGKar/VaudAgS4JV0ImF42JGDFbNf5+HQ1cuq6NDnUkSQeyezANUWw==",
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/vue2-datepicker/-/vue2-datepicker-2.4.3.tgz",
+      "integrity": "sha512-Tw6k7AZyCl698CQgrNFKzHy1po6LVHYXBw+gQ3yozsxbpX6TCdq7MasvSpP5q0cQxgs8COlIZr1x4EjIKYjejQ==",
       "requires": {
         "fecha": "^2.3.3"
       }

settings/package.json

@@ -11,9 +11,9 @@
     "build": "webpack --progress --hide-modules --config webpack.prod.js"
   },
   "dependencies": {
+    "@babel/polyfill": "^7.0.0",
     "axios": "^0.18.0",
-    "babel-polyfill": "^6.26.0",
-    "nextcloud-vue": "^0.1.2",
+    "nextcloud-vue": "^0.1.5",
     "v-tooltip": "^2.0.0-rc.33",
     "vue": "^2.5.17",
     "vue-click-outside": "^1.0.7",
@@ -30,6 +30,7 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.1.2",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/preset-env": "^7.1.0",
     "babel-loader": "^8.0.4",
     "css-loader": "^1.0.0",

settings/src/main.js

@@ -19,17 +19,26 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+import "@babel/polyfill";
 
 import Vue from 'vue';
 import { sync } from 'vuex-router-sync';
 import App from './App.vue';
 import router from './router';
 import store from './store';
-require("babel-polyfill");
-
 
 sync(store, router);
 
+// CSP config for webpack dynamic chunk loading
+// eslint-disable-next-line
+__webpack_nonce__ = btoa(OC.requestToken)
+
+// Correct the root of the app for chunk loading
+// OC.linkTo matches the apps folders
+// OC.generateUrl ensure the index.php (or not)
+// eslint-disable-next-line
+__webpack_public_path__ = OC.linkTo('settings', 'js/')
+
 // bind to window
 Vue.prototype.t = t;
 Vue.prototype.OC = OC;

settings/src/router.js

@@ -23,8 +23,10 @@
 
 import Vue from 'vue';
 import Router from 'vue-router';
-import Users from './views/Users';
-import Apps from './views/Apps';
+
+// Dynamic loading
+const Users = () => import('./views/Users');
+const Apps = () => import('./views/Apps');
 
 Vue.use(Router);