Merge pull request #1 from cznethub/vite-migration

[WIP] Vite + Vue 3 Migration

.env.template

@@ -0,0 +1 @@
+VITE_APP_GOOGLE_MAPS_API_KEY=

.eslintignore

@@ -0,0 +1,7 @@
+.vscode/
+.yarn/
+coverage/
+dist/
+public/assets/
+tsconfig.*.json
+components.d.ts

.eslintrc.yml

@@ -0,0 +1,96 @@
+env:
+  browser: true
+  es2021: true
+extends:
+  - plugin:vue/recommended
+  - standard-with-typescript
+  - plugin:import/recommended
+  - plugin:import/typescript
+  - plugin:vuejs-accessibility/recommended
+  - plugin:yaml/recommended
+  - '@vue/eslint-config-prettier'
+parser: vue-eslint-parser
+parserOptions:
+  ecmaVersion: latest
+  parser: '@typescript-eslint/parser'
+  sourceType: module
+  createDefaultProgram: true
+  project:
+    - ./tsconfig.app.json
+    - ./tsconfig.node.json
+    - ./tsconfig.vitest.json
+  extraFileExtensions:
+    - .vue
+plugins:
+  - import
+  - tsdoc
+  - html
+  - yaml
+  - vue
+rules:
+  require-jsdoc: warn
+  no-unused-vars: warn
+  '@typescript-eslint/array-type':
+    - error
+    - default: array # const lines: string[] = []; style
+  '@typescript-eslint/ban-ts-comment': off # Enable @ts-ignore etc.
+  '@typescript-eslint/consistent-generic-constructors':
+    - error
+    - type-annotation # Left-hand side style
+  '@typescript-eslint/consistent-type-imports': # Enable import sort order, see bellow.
+    - off
+    - prefer: type-imports
+  '@typescript-eslint/explicit-function-return-type': off # Fix for pinia
+  '@typescript-eslint/no-confusing-void-expression':
+    - error
+    - ignoreArrowShorthand: true # Allow short land for pretter
+  '@typescript-eslint/strict-boolean-expressions': off # Fix for vite import.meta.env
+  '@typescript-eslint/triple-slash-reference': off # Fix for vite env.d.ts.
+  import/default: off # Fix for Vue setup style
+  import/no-default-export: off # Fix for Vue setup style
+  import/order: # Sort Import Order. see https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md#importorder-enforce-a-convention-in-module-import-order
+    - error
+    - groups:
+        ['builtin', 'external', 'parent', 'sibling', 'index', 'object', 'type']
+      pathGroups:
+        # Vue Core
+        - pattern: '{vue,vue-router,vuex,@/store,vue-i18n,pinia,vite,vitest,vitest/**,@vitejs/**,@vue/**,@logue/vue2-helpers}'
+          group: external
+          position: before
+        # UI Library
+        - pattern: '{vuetify,vuetify/**,@mdi/**,webfontloader}'
+          group: parent
+          position: before
+        # Internal Codes
+        - pattern: '{@/**}'
+          group: internal
+          position: before
+      pathGroupsExcludedImportTypes:
+        - builtin
+      alphabetize:
+        order: asc
+      newlines-between: ignore
+  tsdoc/syntax: warn
+  vue/html-self-closing: # A tag with no content should be written like <br />.
+    - error
+    - html:
+        void: always
+  vue/multi-word-component-names: warn # Mitigate non-multiword component name errors to warnings.
+settings:
+  import/parsers:
+    '@typescript-eslint/parser':
+      - .ts
+    vue-eslint-parser:
+      - .vue
+  import/resolver:
+    typescript: true
+    alias:
+      map:
+        - ['@', './src']
+        - ['~', './node_modules']
+      extensions:
+        - .js
+        - .ts
+        - .vue
+  vite:
+    configPath: ./vite.config.ts

.github/dependabot.yml

@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "daily"

.gitignore

@@ -1,22 +1,23 @@
-.DS_Store
-node_modules
-/dist
-lib
-stats.html
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+coverage
+dist
+dist-ssr
+*.local
 
 # Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
-.vscode
+.DS_Store
 *.suo
 *.ntvs*
 *.njsproj

.ncurc.yml

@@ -0,0 +1,10 @@
+upgrade: true
+reject:
+  - '@vue/test-utils'
+  - eslint-plugin-vuetify
+  - sass
+  - vue
+  - vue-router
+  - vue-template-compiler
+  - vuetify
+  - vuex

.prettierignore

@@ -0,0 +1,6 @@
+.vscode/
+.yarn/
+dist/
+coverage/
+public/assets/
+components.d.ts

.prettierrc.yml

@@ -0,0 +1,11 @@
+printWidth: 80
+tabWidth: 2
+useTabs: false
+semi: true
+singleQuote: true
+trailingComma: es5
+bracketSpacing: true
+bracketSameLine: false
+arrowParens: avoid
+htmlWhitespaceSensitivity: ignore
+endOfLine: lf

.stylelintignore

@@ -0,0 +1,5 @@
+.vscode/
+.yarn/
+coverage/
+dist/
+public/assets/

.stylelintrc.yml

@@ -0,0 +1,14 @@
+customSyntax: postcss-html
+extends:
+  - stylelint-config-html/vue
+  - stylelint-config-recommended-scss
+  - stylelint-config-recommended-vue/scss
+plugins:
+  - stylelint-scss
+ignoreFiles:
+  - 'dist/**/*'
+rules:
+  color-function-notation: legacy
+  function-no-unknown: null
+  no-descending-specificity: null
+  scss/no-global-function-names: null

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    // "Vue.volar",
+    "Vue.vscode-typescript-vue-plugin",
+    "octref.vetur"
+  ]
+}

README.md

@@ -1,24 +1,18 @@
-# cznet-vue-core
+# Vue 3 + TypeScript + Vite
 
-## Project setup
-```
-npm install
-```
+This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
 
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
+## Recommended IDE Setup
 
-### Compiles and minifies for production
-```
-npm run build
-```
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
 
-### Lints and fixes files
-```
-npm run lint
-```
+## Type Support For `.vue` Imports in TS
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
+
+If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
+
+1. Disable the built-in TypeScript Extension
+   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
+   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
+2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.

index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/czcnet_logo_circle.png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>CZNet Vue 3 Core</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+
+</html>

license.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright © 2022 Faizal Andyka
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.