From 7083711fd5ded21886be0fdbbc6edefd3678c2b3 Mon Sep 17 00:00:00 2001 From: ModZero Date: Sun, 6 Oct 2019 23:53:59 +0200 Subject: [PATCH] Add Vue --- package-lock.json | 190 +++++++++++++++++++++++++++++++++++++ package.json | 4 + src/frontend/App.vue | 13 +++ src/frontend/index.ts | 17 +++- src/frontend/noise.ts | 3 - src/frontend/tslint.json | 6 ++ src/frontend/vue-shim.d.ts | 4 + tsconfig.json | 2 +- tslint.json | 17 ++-- views/index.pug | 6 +- webpack.config.ts | 13 ++- 11 files changed, 256 insertions(+), 19 deletions(-) create mode 100644 src/frontend/App.vue delete mode 100644 src/frontend/noise.ts create mode 100644 src/frontend/tslint.json create mode 100644 src/frontend/vue-shim.d.ts diff --git a/package-lock.json b/package-lock.json index fac42f1..907a567 100644 --- a/package-lock.json +++ b/package-lock.json @@ -439,6 +439,41 @@ "@types/node": "*" } }, + "@vue/component-compiler-utils": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.0.0.tgz", + "integrity": "sha512-am+04/0UX7ektcmvhYmrf84BDVAD8afFOf4asZjN84q8xzxFclbk5x0MtxuKGfp+zjN5WWPJn3fjFAWtDdIGSw==", + "dev": true, + "requires": { + "consolidate": "^0.15.1", + "hash-sum": "^1.0.2", + "lru-cache": "^4.1.2", + "merge-source-map": "^1.1.0", + "postcss": "^7.0.14", + "postcss-selector-parser": "^5.0.0", + "prettier": "1.16.3", + "source-map": "~0.6.1", + "vue-template-es2015-compiler": "^1.9.0" + }, + "dependencies": { + "lru-cache": { + "version": "4.1.5", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz", + "integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==", + "dev": true, + "requires": { + "pseudomap": "^1.0.2", + "yallist": "^2.1.2" + } + }, + "yallist": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz", + "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=", + "dev": true + } + } + }, "@webassemblyjs/ast": { "version": "1.8.5", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.8.5.tgz", @@ -1696,6 +1731,15 @@ "date-now": "^0.1.4" } }, + "consolidate": { + "version": "0.15.1", + "resolved": "https://registry.npmjs.org/consolidate/-/consolidate-0.15.1.tgz", + "integrity": "sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==", + "dev": true, + "requires": { + "bluebird": "^3.1.1" + } + }, "constantinople": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-3.1.2.tgz", @@ -1866,6 +1910,12 @@ "randomfill": "^1.0.3" } }, + "cssesc": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-2.0.0.tgz", + "integrity": "sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg==", + "dev": true + }, "currently-unhandled": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz", @@ -1907,6 +1957,12 @@ "meow": "^3.3.0" } }, + "de-indent": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz", + "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=", + "dev": true + }, "debounce": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.0.tgz", @@ -3542,6 +3598,12 @@ "safe-buffer": "^5.0.1" } }, + "hash-sum": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz", + "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=", + "dev": true + }, "hash.js": { "version": "1.1.7", "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.7.tgz", @@ -3552,6 +3614,12 @@ "minimalistic-assert": "^1.0.1" } }, + "he": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", + "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", + "dev": true + }, "helmet": { "version": "3.21.1", "resolved": "https://registry.npmjs.org/helmet/-/helmet-3.21.1.tgz", @@ -3723,6 +3791,12 @@ "repeating": "^2.0.0" } }, + "indexes-of": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/indexes-of/-/indexes-of-1.0.1.tgz", + "integrity": "sha1-8w9xbI4r00bHtn0985FVZqfAVgc=", + "dev": true + }, "infer-owner": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/infer-owner/-/infer-owner-1.0.4.tgz", @@ -4305,6 +4379,15 @@ "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=" }, + "merge-source-map": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/merge-source-map/-/merge-source-map-1.1.0.tgz", + "integrity": "sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==", + "dev": true, + "requires": { + "source-map": "^0.6.1" + } + }, "methods": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", @@ -5146,6 +5229,39 @@ "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=", "dev": true }, + "postcss": { + "version": "7.0.18", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.18.tgz", + "integrity": "sha512-/7g1QXXgegpF+9GJj4iN7ChGF40sYuGYJ8WZu8DZWnmhQ/G36hfdk3q9LBJmoK+lZ+yzZ5KYpOoxq7LF1BxE8g==", + "dev": true, + "requires": { + "chalk": "^2.4.2", + "source-map": "^0.6.1", + "supports-color": "^6.1.0" + }, + "dependencies": { + "supports-color": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz", + "integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, + "postcss-selector-parser": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-5.0.0.tgz", + "integrity": "sha512-w+zLE5Jhg6Liz8+rQOWEAwtwkyqpfnmsinXjXg6cY7YIONZZtgvE0v2O0uhQBs0peNomOJwWRKt6JBfTdTd3OQ==", + "dev": true, + "requires": { + "cssesc": "^2.0.0", + "indexes-of": "^1.0.1", + "uniq": "^1.0.1" + } + }, "postgres-array": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/postgres-array/-/postgres-array-2.0.0.tgz", @@ -5169,6 +5285,12 @@ "xtend": "^4.0.0" } }, + "prettier": { + "version": "1.16.3", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.16.3.tgz", + "integrity": "sha512-kn/GU6SMRYPxUakNXhpP0EedT/KmaPzr0H5lIsDogrykbaxOpOfAFfk5XA7DZrJyMAv1wlMV3CPcZruGXVVUZw==", + "dev": true + }, "process": { "version": "0.11.10", "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz", @@ -5237,6 +5359,12 @@ "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=", "dev": true }, + "pseudomap": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz", + "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=", + "dev": true + }, "public-encrypt": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/public-encrypt/-/public-encrypt-4.0.3.tgz", @@ -6597,6 +6725,11 @@ "tsconfig": "^7.0.0" } }, + "ts-vue-plugin": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/ts-vue-plugin/-/ts-vue-plugin-0.1.2.tgz", + "integrity": "sha512-Vj1ErgEuXDvb4eEEJVHLcGEK6GMF5OF+YONjFFiWPoalQe9uh/KXACc6ZhiDFvqF47q/Iv0xyLQYEQ0qQxSG0w==" + }, "tsconfig": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/tsconfig/-/tsconfig-7.0.0.tgz", @@ -6750,6 +6883,12 @@ "set-value": "^2.0.1" } }, + "uniq": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz", + "integrity": "sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8=", + "dev": true + }, "unique-filename": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz", @@ -6924,6 +7063,57 @@ "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz", "integrity": "sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=" }, + "vue": { + "version": "2.6.10", + "resolved": "https://registry.npmjs.org/vue/-/vue-2.6.10.tgz", + "integrity": "sha512-ImThpeNU9HbdZL3utgMCq0oiMzAkt1mcgy3/E6zWC/G6AaQoeuFdsl9nDhTDU3X1R6FK7nsIUuRACVcjI+A2GQ==", + "dev": true + }, + "vue-hot-reload-api": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz", + "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==", + "dev": true + }, + "vue-loader": { + "version": "15.7.1", + "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.7.1.tgz", + "integrity": "sha512-fwIKtA23Pl/rqfYP5TSGK7gkEuLhoTvRYW+TU7ER3q9GpNLt/PjG5NLv3XHRDiTg7OPM1JcckBgds+VnAc+HbA==", + "dev": true, + "requires": { + "@vue/component-compiler-utils": "^3.0.0", + "hash-sum": "^1.0.2", + "loader-utils": "^1.1.0", + "vue-hot-reload-api": "^2.3.0", + "vue-style-loader": "^4.1.0" + } + }, + "vue-style-loader": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz", + "integrity": "sha512-0ip8ge6Gzz/Bk0iHovU9XAUQaFt/G2B61bnWa2tCcqqdgfHs1lF9xXorFbE55Gmy92okFT+8bfmySuUOu13vxQ==", + "dev": true, + "requires": { + "hash-sum": "^1.0.2", + "loader-utils": "^1.0.2" + } + }, + "vue-template-compiler": { + "version": "2.6.10", + "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.10.tgz", + "integrity": "sha512-jVZkw4/I/HT5ZMvRnhv78okGusqe0+qH2A0Em0Cp8aq78+NK9TII263CDVz2QXZsIT+yyV/gZc/j/vlwa+Epyg==", + "dev": true, + "requires": { + "de-indent": "^1.0.2", + "he": "^1.1.0" + } + }, + "vue-template-es2015-compiler": { + "version": "1.9.1", + "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz", + "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==", + "dev": true + }, "watchpack": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz", diff --git a/package.json b/package.json index 196805c..27bab8d 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "pg-promise": "^9.2.1", "pino": "^5.13.3", "pug": "^2.0.4", + "ts-vue-plugin": "^0.1.2", "tweetnacl": "^1.0.1", "tweetnacl-util": "^0.15.0" }, @@ -52,6 +53,9 @@ "tslint": "^5.20.0", "tslint-config-prettier": "^1.18.0", "typescript": "^3.6.3", + "vue": "^2.6.10", + "vue-loader": "^15.7.1", + "vue-template-compiler": "^2.6.10", "webpack": "^4.41.0", "webpack-cli": "^3.3.9", "webpack-dev-middleware": "^3.7.2" diff --git a/src/frontend/App.vue b/src/frontend/App.vue new file mode 100644 index 0000000..3402ec9 --- /dev/null +++ b/src/frontend/App.vue @@ -0,0 +1,13 @@ + + + diff --git a/src/frontend/index.ts b/src/frontend/index.ts index 454c4d1..6e714f4 100644 --- a/src/frontend/index.ts +++ b/src/frontend/index.ts @@ -1,3 +1,16 @@ -import { noise } from "./noise"; +import Vue from "vue"; +import App from "./App.vue"; -window.onload = noise; +export const app = new Vue({ + components: { + App + }, + el: "#body", + render(createElement) { + return createElement(App, { + props: { + message: "blab" + } + }); + } +}); diff --git a/src/frontend/noise.ts b/src/frontend/noise.ts deleted file mode 100644 index b05cca4..0000000 --- a/src/frontend/noise.ts +++ /dev/null @@ -1,3 +0,0 @@ -export const noise = () => { - alert("Hello!"); -}; diff --git a/src/frontend/tslint.json b/src/frontend/tslint.json new file mode 100644 index 0000000..4555a9d --- /dev/null +++ b/src/frontend/tslint.json @@ -0,0 +1,6 @@ +{ + "extends": "../../tslint.json", + "rules": { + "no-implicit-dependencies": [true, "dev"] + } +} \ No newline at end of file diff --git a/src/frontend/vue-shim.d.ts b/src/frontend/vue-shim.d.ts new file mode 100644 index 0000000..0660bd6 --- /dev/null +++ b/src/frontend/vue-shim.d.ts @@ -0,0 +1,4 @@ +declare module "*.vue" { + import Vue from "vue"; + export default Vue; +} diff --git a/tsconfig.json b/tsconfig.json index 9e56bba..e10e8b3 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -11,7 +11,7 @@ "*" ] }, - "esModuleInterop": true + "esModuleInterop": true, }, "include": [ "./src/**/*" diff --git a/tslint.json b/tslint.json index 2028204..91cb305 100644 --- a/tslint.json +++ b/tslint.json @@ -1,14 +1,17 @@ { "defaultSeverity": "error", - "extends": [ - "tslint:latest", - "tslint-config-prettier" - ], + "extends": ["tslint:latest", "tslint-config-prettier"], "jsRules": {}, "rules": { - "interface-name": [ true, "never-prefix"], - "no-submodule-imports": [true, "graphql/language", "graphql/type", "@kredens"], + "interface-name": [true, "never-prefix"], + "no-submodule-imports": [ + true, + "graphql/language", + "graphql/type", + "vue-loader/lib/plugin", + "@kredens" + ], "no-implicit-dependencies": [true, ["@kredens"]] }, "rulesDirectory": [] -} \ No newline at end of file +} diff --git a/views/index.pug b/views/index.pug index a782fe2..d695bcc 100644 --- a/views/index.pug +++ b/views/index.pug @@ -1,8 +1,8 @@ html head title= title - script(src="/assets/main.bundle.js") body h1= message - p hahaha - \ No newline at end of file + div#body + p I am a placeholder + script(src="/assets/main.bundle.js") \ No newline at end of file diff --git a/webpack.config.ts b/webpack.config.ts index bd8555f..48ab253 100644 --- a/webpack.config.ts +++ b/webpack.config.ts @@ -1,4 +1,5 @@ import path from "path"; +import VueLoaderPlugin from "vue-loader/lib/plugin"; // tslint:disable-line:no-implicit-dependencies import webpack from "webpack"; // tslint:disable-line:no-implicit-dependencies const config: webpack.Configuration = { @@ -9,8 +10,13 @@ const config: webpack.Configuration = { rules: [ { exclude: /node_modules/, - test: /\.tsx?$/, - use: "ts-loader" + loader: "ts-loader", + options: { appendTsSuffixTo: [/\.vue$/] }, + test: /\.ts?$/ + }, + { + loader: "vue-loader", + test: /.vue$/ } ] }, @@ -19,8 +25,9 @@ const config: webpack.Configuration = { path: path.resolve(__dirname, "dist"), publicPath: "/assets/" }, + plugins: [new VueLoaderPlugin()], resolve: { - extensions: [".tsx", ".ts", ".js"] + extensions: [".ts", ".js"] } };