🔧 (vite) migrate to vite (#7)

2023-07-01 23:08:53 +02:00
parent 077c04b482
commit e4bba8246b
10 changed files with 370 additions and 5939 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,7 +1,8 @@
 module.exports = {
  root: true,
  env: {
-    node: true
+    node: true,
+    es2022: true
  },
  extends: [
    'plugin:vue/vue3-essential',
@@ -11,9 +12,6 @@ module.exports = {
    '@vue/prettier/@typescript-eslint',
    'plugin:prettier-vue/recommended'
  ],
-  parserOptions: {
-    ecmaVersion: 2020
-  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
--- a/public/index.html
+++ b/public/index.html
@@ -4,17 +4,17 @@
    <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="<%= BASE_URL %>favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
    <title>Lite note</title>
  </head>
  <body>
    <noscript>
      <strong
-        >We're sorry but Lite note doesn't work properly without JavaScript
+        >We're sorry but this app doesn't work properly without JavaScript
        enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div id="app"></div>
-    <!-- built files will be auto injected -->
+    <script type="module" src="/src/main.ts"></script>
  </body>
 </html>
--- a/package.json
+++ b/package.json
@@ -3,20 +3,21 @@
  "version": "0.1.0",
  "private": true,
  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
    "test": "vitest",
-    "lint": "vue-cli-service lint",
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
    "pwa:asset": "npx vue-pwa-asset-generator -a public/img/logo.png --no-manifest"
  },
  "dependencies": {
-    "@octokit/core": "^3.5.1",
-    "@octokit/rest": "^18.12.0",
+    "@octokit/core": "^4.2.4",
+    "@octokit/rest": "^19.0.13",
    "@toycode/markdown-it-class": "^1.2.4",
    "@vueuse/core": "^7.2.2",
    "bulma": "^0.9.4",
-    "core-js": "^3.31.0",
    "date-fns": "^2.30.0",
+    "isomorphic-fetch": "^3.0.0",
    "markdown-it": "^12.3.0",
    "markdown-it-block-embed": "^0.0.3",
    "markdown-it-checkbox": "^1.1.0",
@@ -30,8 +31,8 @@
    "register-service-worker": "^1.7.2",
    "retrobus": "^1.9.1",
    "sanitize-html": "^2.11.0",
-    "vue": "^3.2.24",
-    "vue-i18n": "^9.0.0",
+    "vue": "^3.3.4",
+    "vue-i18n": "^9.2.2",
    "vue-router": "^4.0.0-rc.2",
    "vuex": "^4.0.0-rc.1"
  },
@@ -43,13 +44,7 @@
    "@types/sanitize-html": "^2.6.0",
    "@typescript-eslint/eslint-plugin": "^5.6.0",
    "@typescript-eslint/parser": "^5.6.0",
-    "@vue/cli-plugin-babel": "~5.0.8",
-    "@vue/cli-plugin-eslint": "~5.0.8",
-    "@vue/cli-plugin-pwa": "~5.0.8",
-    "@vue/cli-plugin-router": "~5.0.8",
-    "@vue/cli-plugin-typescript": "~5.0.8",
-    "@vue/cli-plugin-vuex": "~5.0.8",
-    "@vue/cli-service": "~5.0.8",
+    "@vitejs/plugin-vue": "^4.2.3",
    "@vue/compiler-sfc": "^3.2.24",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^9.1.0",
@@ -61,8 +56,9 @@
    "eslint-plugin-vue": "^8.2.0",
    "node-sass": "^9.0.0",
    "prettier": "^2.5.1",
-    "sass-loader": "^13.3.2",
+    "sass": "^1.63.6",
    "typescript": "~4.5.3",
+    "vite": "^4.3.9",
    "vitest": "^0.32.2",
    "webpack": "^5.0.0"
  }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/registerServiceWorker.ts
+++ b/src/registerServiceWorker.ts
@@ -3,8 +3,8 @@
 import { serviceWorkerBusEvent } from '@/bus/serviceWorkerEventBus'
 import { register } from 'register-service-worker'

-if (process.env.NODE_ENV === 'production') {
-  register(`${process.env.BASE_URL}service-worker.js`, {
+if (import.meta.env.NODE_ENV === 'production') {
+  register(`${import.meta.env.BASE_URL}service-worker.js`, {
    ready() {
      console.log(
        'App is being served from cache by a service worker.\n' +
--- a/src/router/router.ts
+++ b/src/router/router.ts
@@ -6,8 +6,7 @@ const routes: Array<RouteRecordRaw> = [
  {
    path: '/repo-list',
    name: 'RepoList',
-    component: () =>
-      import(/* webpackChunkName: "repo-list" */ '@/views/RepoList.vue')
+    component: () => import('@/views/RepoList.vue')
  },
  {
    path: '/:user?/:repo?',
@@ -19,56 +18,45 @@ const routes: Array<RouteRecordRaw> = [
    path: '/:user/:repo/share/:note',
    name: 'ShareNotes',
    props: true,
-    component: () =>
-      import(/* webpackChunkName: "share-notes" */ '@/views/ShareNotes.vue')
+    component: () => import('@/views/ShareNotes.vue')
  },
  {
    path: '/:user/:repo/inbox',
    name: 'FleetingNotes',
    props: true,
-    component: () =>
-      import(/* webpackChunkName: "inbox" */ '@/views/FleetingNotes.vue')
+    component: () => import('@/views/FleetingNotes.vue')
  },
  {
    path: '/:user/:repo/draft',
    name: 'DraftNotes',
    props: true,
-    component: () =>
-      import(/* webpackChunkName: "draft-notes" */ '@/views/DraftNotes.vue')
+    component: () => import('@/views/DraftNotes.vue')
  },
  {
    path: '/:user/:repo/history',
    name: 'HistoricNotes',
    props: true,
-    component: () =>
-      import(
-        /* webpackChunkName: "historic-notes" */ '@/views/HistoricNotes.vue'
-      )
+    component: () => import('@/views/HistoricNotes.vue')
  },
  {
    path: '/:user/:repo/spaced-repetition',
    name: 'SpacedRepetitionCard',
    props: true,
-    component: () =>
-      import(
-        /* webpackChunkName: "spaced-repetition-card" */ '@/views/SpacedRepetitionCard.vue'
-      )
+    component: () => import('@/views/SpacedRepetitionCard.vue')
  },
  {
    path: '/about',
    name: 'About',
-    component: () =>
-      import(/* webpackChunkName: "about" */ '@/views/AboutApp.vue')
+    component: () => import('@/views/AboutApp.vue')
  },
  {
    path: '/:catchAll(.*)',
    name: 'SpaceCowboy',
-    component: () =>
-      import(/* webpackChunkName: "space-cowboy" */ '@/views/SpaceCowboy.vue')
+    component: () => import('@/views/SpaceCowboy.vue')
  }
 ]

 export const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
+  history: createWebHistory(import.meta.env.BASE_URL),
  routes
 })
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -26,7 +26,7 @@ $family-primary: 'Courier Prime', monospace;
  --note-width: 620px;
 }

-@import '~bulma/bulma.sass';
+@import '../../node_modules/bulma/bulma.sass';

 html {
  overflow-y: auto;
@@ -41,6 +41,7 @@ body {
 }

@media screen and (min-width: 769px) {
+
  html,
  body {
    overflow-y: hidden;
@@ -91,6 +92,7 @@ a {
 }

@media print {
+
  html,
  body {
    overflow-y: auto;
@@ -110,4 +112,4 @@ pre {

 code {
  font-family: var(--font-family);
-}
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,7 +12,7 @@
    "sourceMap": true,
    "baseUrl": ".",
    "resolveJsonModule": true,
-    "types": ["node"],
+    "types": ["node", "vite/client"],
    "paths": {
      "@/*": ["src/*"]
    },
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,13 @@
+import vue from '@vitejs/plugin-vue'
+import path from 'path'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      'node-fetch': 'isomorphic-fetch'
+    }
+  }
+})
--- a/vitest.config.ts
+++ b/vitest.config.ts
@@ -1,9 +0,0 @@
-import path from 'path'
-
-export default {
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, './src')
-    }
-  }
-}