Vite migration

2022-05-06 10:24:39 +00:00
parent e4a9bfec3c
commit e57e664cd2
18 changed files with 3947 additions and 12529 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -0,0 +1,10 @@
+/* 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
+  }
+}
--- a/2
+++ b/2
@@ -1,4 +1,4 @@
-FROM node:10-slim
+FROM node:16-slim
 WORKDIR /app
 COPY package*.json ./
 RUN npm install
--- a/README.md
+++ b/README.md
@@ -1,29 +1,35 @@
-# sensor-web-v2
+# vue-project

-## Project setup
-```
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
 npm install
 ```

-### Compiles and hot-reloads for development
-```
-npm run serve
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
 ```

-### Compiles and minifies for production
-```
+### Compile and Minify for Production
+
+```sh
 npm run build
 ```

-### Run your tests
-```
-npm run test
-```
+### Lint with [ESLint](https://eslint.org/)

-### Lints and fixes files
-```
+```sh
 npm run lint
 ```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +0,0 @@
-module.exports = {
-  presets: [
-    '@vue/app'
-  ]
-}
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -0,0 +1,12 @@
+version: "3.8"
+services:
+  frontend:
+    build:
+      context: ./
+      network: host
+    env_file: .env
+    image: sensor-web-v2
+    ports:
+      - 3000:3000
+    restart: unless-stopped
+    container_name: sensor-web-v2
--- a/index.html
+++ b/index.html
@@ -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>dht22</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,57 +1,30 @@
 {
  "name": "sensor-web-v2",
-  "version": "0.1.0",
-  "private": true,
+  "version": "1.0.0",
  "scripts": {
-    "serve": "vue-cli-service serve --port 8080",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview --port 5050",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
  },
  "dependencies": {
-    "dayjs": "^1.8.14",
-    "dotenv": "^8.0.0",
-    "express": "^4.17.1",
-    "highcharts": "^7.1.2",
-    "mongodb": "^3.2.7",
-    "vue": "^3.0.3",
-    "vue-router": "^4.0.0-rc.5"
+    "bulma": "^0.9.3",
+    "dayjs": "^1.11.1",
+    "dotenv": "^16.0.0",
+    "express": "^4.18.1",
+    "highcharts": "^10.1.0",
+    "mongodb": "^4.5.0",
+    "sass": "^1.51.0",
+    "vue": "^3.2.33",
+    "vue-router": "^4.0.14"
  },
  "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.5.4",
-    "@vue/cli-plugin-eslint": "^4.5.4",
-    "@vue/cli-service": "^4.5.4",
-    "@vue/compiler-sfc": "^3.0.3",
-    "@vue/eslint-config-standard": "^4.0.0",
-    "babel-eslint": "^10.1.0",
-    "bulma": "^0.7.5",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.1.0",
-    "node-sass": "^4.12.0",
-    "sass-loader": "^8.0.2"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/vue3-essential",
-      "@vue/standard"
-    ],
-    "rules": {
-      "space-before-function-paren": "off"
-    },
-    "parserOptions": {
-      "parser": "babel-eslint"
-    }
-  },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions"
-  ]
+    "@rushstack/eslint-patch": "^1.1.0",
+    "@vitejs/plugin-vue": "^2.3.1",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "eslint": "^8.5.0",
+    "eslint-plugin-vue": "^8.2.0",
+    "prettier": "^2.5.1",
+    "vite": "^2.9.5"
+  }
 }
--- a/public/index.html
+++ b/public/index.html
@@ -1,17 +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">
-    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌡️</text></svg>">
-    <title>dht22</title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but sensor-web-v2 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>
--- a/server/index.js
+++ b/server/index.js
@@ -1,3 +1,4 @@
+/* eslint-env node */
 require('dotenv').config()
 const express = require('express')
 const app = express()
@@ -6,7 +7,7 @@ const mongo = require('mongodb')
 const MongoClient = mongo.MongoClient
 console.log('Starting with parameters:')
 const parameters = ['PORT', 'MONGO_SERVER', 'MONGO_DB']
-parameters.forEach(parameter => console.log(`${parameter}=${process.env[parameter]}`))
+parameters.forEach((parameter) => console.log(`${parameter}=${process.env[parameter]}`))
 app.listen(process.env.PORT, () => {
  console.log('Listening on ' + process.env.PORT)
 })
@@ -50,7 +51,7 @@ app.get('/type/:type/startDate/:startDate/endDate/:endDate/sample/:sample', asyn
    const docs = await db.collection('dht22').find(query).toArray()
    const sampledDocs = docs
      .filter((value, index) => index % sample === 0)
-      .map(doc => {
+      .map((doc) => {
        return { ...doc, date: dateFromObjectId(doc._id) }
      })
    res.json(sampledDocs)
--- a/src/components/Chart.vue
+++ b/src/components/Chart.vue
@@ -8,7 +8,7 @@
 import { ref, watch, toRefs, nextTick } from 'vue'
 import Highcharts from 'highcharts'
 import 'highcharts/css/highcharts.scss'
-import Loader from '@/components/Loader'
+import Loader from '@/components/Loader.vue'
 import { capitalizeFirstLetter } from '@/utils/helpers'

 Highcharts.setOptions({
--- a/src/components/Main.vue
+++ b/src/components/Main.vue
@@ -11,9 +11,9 @@
 <script>
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import NavBar from '@/components/NavBar'
-import TimeWindows from '@/components/TimeWindows'
-import Chart from '@/components/Chart'
+import NavBar from '@/components/NavBar.vue'
+import TimeWindows from '@/components/TimeWindows.vue'
+import Chart from '@/components/Chart.vue'
 export default {
  components: {
    NavBar,
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
-import App from '@/App'
+import App from '@/App.vue'
 import router from '@/router'
 import '@/style/style.scss'

--- a/src/router.js
+++ b/src/router.js
@@ -1,8 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import Main from '@/components/Main'
+import Main from '@/components/Main.vue'
 export default createRouter({
-  history: createWebHistory(),
-  base: process.env.BASE_URL,
+  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/:type?/:window?',
--- a/src/style/_variables.scss
+++ b/src/style/_variables.scss
@@ -4,4 +4,4 @@ $tabs-link-active-border-bottom-color: #3498db;
 $family-sans-serif: 'Fira Sans', sans-serif;
 $gap: 32px !default;
 $navbar-breakpoint: 960px + (2 * $gap);
-@import "~bulma/sass/utilities/_all.sass";
+@import "bulma/sass/utilities/_all.sass";
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -5,4 +5,4 @@ html, body {
    overflow: auto!important;
 }
@import "./variables";
-@import "~bulma/bulma";
+@import "bulma/bulma";
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,17 @@
+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))
+    }
+  },
+  server: {
+    port: '8080'
+  }
+})
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,3 +0,0 @@
-module.exports = {
-  productionSourceMap: false
-}