Dockery/Homer
1
0
Fork 0
mirror of https://github.com/bastienwirtz/homer.git synced 2025-10-31 10:25:49 +01:00
Code Issues Packages Projects Releases Activity

Migrate to VueJS 3

Browse Source
This commit is contained in:
Bastien Wirtz
2022-06-04 22:40:48 +02:00
parent 95c589ba71
commit cbbed6346a
15 changed files with 2672 additions and 7394 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.browserslistrc
View File

@@ -1,3 +0,0 @@
> 1%
last 2 versions
not dead

14
.eslintrc.cjs Normal file
View File

@@ -0,0 +1,14 @@
/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution");
module.exports = {
root: true,
extends: [
"plugin:vue/vue3-essential",
"eslint:recommended",
"@vue/eslint-config-prettier",
],
env: {
"vue/setup-compiler-macros": true,
},
};

15
.eslintrc.js
View File

@@ -1,15 +0,0 @@
module.exports = {
root: true,
env: {
node: true,
},
extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
parserOptions: {
parser: "babel-eslint",
},
rules: {
"no-console": "off",
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
"vue/require-v-for-key": "off",
},
};

3
babel.config.js
View File

@@ -1,3 +0,0 @@
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
};

13
index.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

33
package.json
View File

@@ -2,34 +2,29 @@
"name": "homer", "name": "homer",
"version": "21.09.1", "version": "21.09.1",
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "dev": "vite",
"build": "vue-cli-service build", "build": "vite build",
"lint": "vue-cli-service lint" "preview": "vite preview --port 5050",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
}, },
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-free": "^6.1.1", "@fortawesome/fontawesome-free": "^6.1.1",
"bulma": "^0.9.4", "bulma": "^0.9.4",
"core-js": "^3.22.7",
"js-yaml": "^4.1.0", "js-yaml": "^4.1.0",
"lodash.merge": "^4.6.2", "lodash.merge": "^4.6.2",
"register-service-worker": "^1.7.2", "register-service-worker": "^1.7.2",
"vue": "^2.6.14" "vue": "^3.2.33"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "~4.5.19", "@rushstack/eslint-patch": "^1.1.0",
"@vue/cli-plugin-eslint": "~4.5.19", "@vitejs/plugin-vue": "^2.3.1",
"@vue/cli-plugin-pwa": "~4.5.19", "@vue/cli-plugin-pwa": "^5.0.4",
"@vue/cli-service": "~4.5.19", "@vue/eslint-config-prettier": "^7.0.0",
"@vue/eslint-config-prettier": "^6.0.0", "eslint": "^8.5.0",
"babel-eslint": "^10.1.0", "eslint-plugin-vue": "^8.2.0",
"eslint": "^6.7.2", "prettier": "^2.5.1",
"eslint-plugin-prettier": "^3.3.1", "sass": "^1.52.2",
"eslint-plugin-vue": "^6.2.2", "vite": "^2.9.9"
"prettier": "^2.2.1",
"raw-loader": "^4.0.2",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.12"
}, },
"license": "Apache-2.0" "license": "Apache-2.0"
} }

18
public/index.html
View File

@@ -1,18 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<meta name="robots" content="noindex">
<link rel="icon" href="<%= BASE_URL %>favicon.png">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

6
src/App.vue
View File

@@ -140,8 +140,8 @@
</template> </template>
<script> <script>
const jsyaml = require("js-yaml"); import jsyaml from "js-yaml";
const merge = require("lodash.merge"); import merge from "lodash.merge";
import Navbar from "./components/Navbar.vue"; import Navbar from "./components/Navbar.vue";
import GetStarted from "./components/GetStarted.vue"; import GetStarted from "./components/GetStarted.vue";
@@ -153,7 +153,7 @@ import SettingToggle from "./components/SettingToggle.vue";
import DarkMode from "./components/DarkMode.vue"; import DarkMode from "./components/DarkMode.vue";
import DynamicTheme from "./components/DynamicTheme.vue"; import DynamicTheme from "./components/DynamicTheme.vue";
import defaultConfig from "./assets/defaults.yml"; import defaultConfig from "./assets/defaults.yml?raw";
export default { export default {
name: "App", name: "App",

2
src/assets/app.scss
View File

@@ -2,7 +2,7 @@
@import "./webfonts/webfonts.scss"; @import "./webfonts/webfonts.scss";
@import "bulma"; @import "../../node_modules/bulma/bulma";
// Themes import // Themes import
@import "./themes/sui.scss"; @import "./themes/sui.scss";

2
src/components/SearchInput.vue
View File

@@ -75,7 +75,7 @@ export default {
this.$emit("input", value.toLowerCase()); this.$emit("input", value.toLowerCase());
}, },
}, },
beforeDestroy() { beforeUnmount() {
document.removeEventListener("keydown", this._keyListener); document.removeEventListener("keydown", this._keyListener);
}, },
}; };

5
src/components/Service.vue
View File

@@ -1,8 +1,9 @@
<template> <template>
<component v-bind:is="component" :item="item" :proxy="proxy"></component> <component :is="component" :item="item" :proxy="proxy"></component>
</template> </template>
<script> <script>
import { defineAsyncComponent } from "vue";
import Generic from "./services/Generic.vue"; import Generic from "./services/Generic.vue";
export default { export default {
@@ -17,7 +18,7 @@ export default {
if (type === "Generic") { if (type === "Generic") {
return Generic; return Generic;
} }
return () => import(`./services/${type}.vue`); return defineAsyncComponent(() => import(`./services/${type}.vue`));
}, },
}, },
}; };

16
src/main.js
View File

@@ -1,19 +1,13 @@
import Vue from "vue"; import { createApp, h } from "vue";
import App from "./App.vue"; import App from "./App.vue";
import "./registerServiceWorker";
import "@fortawesome/fontawesome-free/css/all.css"; import "@fortawesome/fontawesome-free/css/all.css";
import "./assets/app.scss"; import "./assets/app.scss";
Vue.config.productionTip = false; const app = createApp(App);
Vue.component("DynamicStyle", { app.component("DynamicStyle", (_props, context) => {
render: function (createElement) { return h("style", {}, context.slots);
return createElement("style", this.$slots.default);
},
}); });
new Vue({ app.mount("#app");
render: (h) => h(App),
}).$mount("#app");

15
vite.config.js Normal file
View File

@@ -0,0 +1,15 @@
import { fileURLToPath, URL } from "url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
});

32
vue.config.js
View File

@@ -1,32 +0,0 @@
const manifestOptions = require("./public/assets/manifest.json");
module.exports = {
chainWebpack: (config) => {
config.module
.rule("yaml")
.test(/\.ya?ml$/)
.use("raw-loader")
.loader("raw-loader")
.end();
},
publicPath: "",
pwa: {
manifestPath: "assets/manifest.json",
manifestCrossorigin: "use-credentials",
appleMobileWebAppStatusBarStyle: "black",
appleMobileWebAppCapable: "yes",
name: manifestOptions.name,
themeColor: manifestOptions.theme_color,
manifestOptions,
iconPaths: {
favicon32: "assets/icons/favicon-32x32.png",
favicon16: "assets/icons/favicon-16x16.png",
appleTouchIcon: "assets/icons/icon-maskable.png",
maskIcon: "assets/icons/safari-pinned-tab.svg",
msTileImage: "assets/icons/icon-any.png",
},
},
devServer: {
disableHostCheck: true,
},
};

9889
yarn.lock
View File

File diff suppressed because it is too large Load Diff