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

This commit is contained in:
MattIPv4 2020-05-26 23:23:07 +01:00
parent 5ccb6ddfbe
commit 2f6ad2634e
12 changed files with 4725 additions and 105 deletions

3
.gitignore vendored
View File

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

View File

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

4716
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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:static": "copyfiles --up 2 ./src/static/{*,**/*} dist",
"build:tool": "do-vue tool src/nginxconfig dist",
"dev": "npm run dev:prep && parcel src/nginxconfig/index.html --out-dir ./dev --port 8000",
"build:template": "do-vue template && node src/nginxconfig/build/template.js",
"build:static": "copyfiles --up 2 src/static/{*,**/*} dist",
"build:tool": "vue-cli-service build src/nginxconfig/mount.js --no-clean",
"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/component-compiler-utils": "^3.1.2",
"@vue/cli-service": "^4.3.1",
"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"
}
}

View File

@ -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();

View File

@ -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>

View File

@ -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';

View File

@ -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";

View File

@ -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

View File

@ -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() {

View File

@ -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';

21
vue.config.js Normal file
View File

@ -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;
});
},
}