Move to using vue-cli-service instead of parcel (2.1MB to 850KB)

.gitignore

@@ -4,6 +4,5 @@ dist/
 dev/
 .idea/
 .vscode/
-build/base.html
+build/
-build/svg/
 .DS_Store

.posthtmlrc.js

@@ -1,7 +0,0 @@
-module.exports = {
-    "plugins": {
-        "posthtml-extend": {
-            "root": "./src"
-        },
-    }
-}

package.json

@@ -6,13 +6,13 @@
   "scripts": {
     "build": "npm run build:clean && npm run build:template && npm run build:static && npm run build:tool",
     "build:clean": "do-vue clean",
-    "build:template": "do-vue template",
+    "build:template": "do-vue template && node src/nginxconfig/build/template.js",
-    "build:static": "copyfiles --up 2 ./src/static/{*,**/*} dist",
+    "build:static": "copyfiles --up 2 src/static/{*,**/*} dist",
-    "build:tool": "do-vue tool src/nginxconfig dist",
+    "build:tool": "vue-cli-service build src/nginxconfig/mount.js --no-clean",
-    "dev": "npm run dev:prep && parcel src/nginxconfig/index.html --out-dir ./dev --port 8000",
+    "dev": "npm run build:template && npm run dev:tool",
+    "dev:tool": "vue-cli-service serve src/nginxconfig/mount.js",
+    "analyze": "npm run build:tool -- --analyze",
     "deploy:spaces:comment": "do-vue comment nginxconfig",
-    "dev:prep": "npm run build:template && npm run dev:static",
-    "dev:static": "copyfiles --up 2 ./src/static/{*,**/*} dev",
     "test": "npm run test:eslint && npm run test:scss",
     "test:fix": "npm run test:eslint:fix && npm run test:scss:fix",
     "test:eslint": "eslint 'src/**/*.{js,vue}'",
@@ -33,37 +33,33 @@
   },
   "homepage": "https://github.com/do-community/nginxconfig-vue#readme",
   "dependencies": {
-    "@babel/runtime": "^7.9.2",
-    "babel-polyfill": "^6.26.0",
     "clone": "^2.1.2",
     "copy-to-clipboard": "^3.3.1",
+    "create-hash": "^1.2.0",
     "deep-equal": "^2.0.3",
     "diff": "^4.0.2",
     "do-bulma": "git+https://github.com/do-community/do-bulma.git",
     "do-vue": "git+https://github.com/do-community/do-vue.git",
     "escape-html": "^1.0.3",
+    "get-stream": "^5.1.0",
     "node-gzip": "^1.1.2",
-    "parcel-bundler": "^1.12.4",
     "pretty-checkbox-vue": "^1.1.9",
     "prismjs": "^1.20.0",
     "qs": "^6.9.4",
-    "raw-body": "^2.4.1",
     "tar-stream": "^2.1.2",
     "vue": "^2.6.11",
-    "vue-hot-reload-api": "^2.3.3",
     "vue-select": "^3.10.3"
   },
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "^7.9.0",
+    "@vue/cli-service": "^4.3.1",
-    "@vue/component-compiler-utils": "^3.1.2",
     "copyfiles": "^2.2.0",
     "eslint": "^6.8.0",
     "eslint-plugin-vue": "^5.2.3",
-    "posthtml": "^0.11.4",
-    "posthtml-extend": "^0.3.0",
     "sass": "^1.26.3",
     "sass-lint": "^1.13.1",
     "sass-lint-auto-fix": "^0.21.0",
-    "vue-template-compiler": "^2.6.11"
+    "sass-loader": "^8.0.2",
+    "vue-template-compiler": "^2.6.11",
+    "webpack-bundle-analyzer": "^3.8.0"
   }
 }

src/nginxconfig/build/template.js

@@ -0,0 +1,14 @@
+const path = require('path');
+const fs = require('fs');
+
+// Fetch the posthtml template and convert it to an ejs template
+const main = () => {
+    const buildDir = path.join(__dirname, '..', '..', '..', 'build');
+    let template = fs.readFileSync(path.join(buildDir, 'base.html'), 'utf8');
+    template = template.replace('<block name="title"></block>', 'NGINXConfig | ');
+    template = template.replace('<block name="head"></block>', '');
+    template = template.replace('<block name="content"></block>', '<div id="app"></div>');
+    fs.writeFileSync(path.join(buildDir, 'index.html'), template);
+};
+
+main();

src/nginxconfig/index.html

@@ -1,27 +0,0 @@
-<!--
-Copyright 2020 DigitalOcean
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
--->
-
-<extends src="../build/base.html">
-    <block name="title">NGINXConfig | </block>
-    <block name="head">
-        <link rel="stylesheet" href="scss/style.scss">
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css" integrity="sha256-UzFD2WYH2U1dQpKDjjZK72VtPeWP50NoJjd26rnAdUI=" crossorigin="anonymous" />
-    </block>
-    <block name="content">
-        <div id="app"></div>
-        <script src="mount.js"></script>
-    </block>
-</extends>

src/nginxconfig/mount.js

@@ -14,8 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import 'babel-polyfill';
+import './scss/style.scss';
-
 import Vue from 'vue';
 import './util/prism_bundle';
 import App from './templates/app';

src/nginxconfig/scss/style.scss

@@ -31,8 +31,6 @@ $highlight: #f2c94c;
   $vs-state-active-bg: $primary;
   @import "~vue-select/src/scss/vue-select";
 
-  @import "~prismjs/plugins/toolbar/prism-toolbar.css";
-
   @import "tabs";
   @import "panel";
   @import "fields";

src/nginxconfig/templates/app.vue

@@ -86,11 +86,11 @@ limitations under the License.
 </template>
 
 <script>
-    import crypto from 'crypto';
     import clone from 'clone';
     import { diffLines } from 'diff';
     import escape from 'escape-html';
     import deepEqual from 'deep-equal';
+    import createHash from 'create-hash';
     import Header from 'do-vue/src/templates/header';
     import Footer from 'do-vue/src/templates/footer';
     import isChanged from '../util/is_changed';
@@ -175,7 +175,7 @@ limitations under the License.
                 if (this.$data.active === index) this.$data.active = this.$data.domains.findIndex(d => d !== null);
             },
             hash(content) {
-                return crypto.createHash('sha256').update(content).digest('base64');
+                return createHash('sha256').update(content).digest('base64');
             },
             checkChange(oldConf) {
                 // If nothing has changed for a tick, we can use the config files

src/nginxconfig/templates/setup.vue

@@ -52,7 +52,7 @@ limitations under the License.
 
 <script>
     import { pack } from 'tar-stream';
-    import getRawBody from 'raw-body';
+    import getStream from 'get-stream';
     import { gzip } from 'node-gzip';
     import copy from 'copy-to-clipboard';
     import * as Sections from './setup_sections';
@@ -116,7 +116,7 @@ limitations under the License.
 
                 // Convert the tar to a buffer and gzip it
                 tar.finalize();
-                const raw = await getRawBody(tar);
+                const raw = await getStream.buffer(tar);
                 return gzip(raw);
             },
             async downloadTar() {

src/nginxconfig/util/prism_bundle.js

@@ -3,4 +3,5 @@ import 'prismjs/components/prism-nginx';
 import 'prismjs/components/prism-bash';
 import 'prismjs/plugins/keep-markup/prism-keep-markup';
 import 'prismjs/plugins/toolbar/prism-toolbar';
+import 'prismjs/plugins/toolbar/prism-toolbar.css';
 import 'prismjs/plugins/copy-to-clipboard/prism-copy-to-clipboard';

vue.config.js

@@ -0,0 +1,21 @@
+const path = require('path');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+
+module.exports = {
+    publicPath: './',
+    outputDir: 'dist',
+    filenameHashing: false,
+    productionSourceMap: false,
+    configureWebpack: {
+        plugins: [
+            process.argv.includes('--analyze') && new BundleAnalyzerPlugin(),
+        ].filter(x => !!x),
+    },
+    chainWebpack: config => {
+        // Use a custom HTML template
+        config.plugin('html').tap(options => {
+            options[0].template = path.join(__dirname, 'build', 'index.html');
+            return options;
+        });
+    },
+}