refactor: convert to vite

convert - Change from vue cli to vite for better dev - Update UI with tailwindcss
boydaihungst · Dec 13, 2021 · 3bd1da7 · 3bd1da7
1 parent 9dd1f45
commit 3bd1da7
Show file tree

Hide file tree

Showing 36 changed files with 2,659 additions and 9,478 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -3,11 +3,19 @@ module.exports = {
   env: {
     node: true,
   },
-  extends: ['plugin:vue/essential', '@vue/prettier', '@vue/typescript'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:vue/vue3-recommended',
+    'prettier',
+  ],
   rules: {
     'no-console': 'off',
     'no-debugger': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
   },
+  parser: 'vue-eslint-parser',
   parserOptions: {
     parser: '@typescript-eslint/parser',
   },

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -19,4 +19,4 @@ jobs:
           node-version: 12
       - run: yarn
       - run: yarn lint
-      - run: yarn build:element
+      - run: yarn build
diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
@@ -17,7 +17,7 @@ jobs:
           node-version: 12
       - run: yarn
       - run: yarn lint
-      - run: yarn build:element
+      - run: yarn build
 
   publish-npm:
     needs: build
@@ -29,7 +29,7 @@ jobs:
           node-version: 12
           registry-url: https://registry.npmjs.org/
       - run: yarn
-      - run: yarn build:element
+      - run: yarn build
       - run: yarn publish
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
diff --git a/.npmignore b/.npmignore
@@ -14,3 +14,6 @@ yarn.lock
 postcss.config.js
 babel.config.js
 .browserslistrc
+.vscode
+tailwind.config.js
+vite.config.js
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["johnsoncodehk.volar"]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,7 @@
 {
-  "css.customData": [".vscode/css_custom_data.json"]
+  "css.customData": [".vscode/css_custom_data.json"],
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
 }
diff --git a/README.md b/README.md
@@ -13,10 +13,10 @@ Install the `altair-graphql-plugin-github-sync` plugin from Avaiable Plugins > A
 ## Configure
 
 1. Create a [personal access token](https://github.com/settings/tokens) to your GitHub account, with `gist` scope/permission.
-![image](https://user-images.githubusercontent.com/38396158/145697965-3f6e6a04-e946-43eb-9353-b08c589caef7.png)
+   ![image](https://user-images.githubusercontent.com/38396158/145697965-3f6e6a04-e946-43eb-9353-b08c589caef7.png)
 
 2. Go to Altair Graphql Client, click on Gist Sync tab:
-![image](https://user-images.githubusercontent.com/38396158/145697934-10a4e019-1bf4-4524-be2e-77a01beed5be.png)
+   ![image](https://user-images.githubusercontent.com/38396158/145697934-10a4e019-1bf4-4524-be2e-77a01beed5be.png)
 
 3. Filling with Gist API Key (generated on step 1), select a existent Gist or select "Create new..." to create a new Gist.
 
@@ -30,8 +30,9 @@ Install the `altair-graphql-plugin-github-sync` plugin from Avaiable Plugins > A
 1. Download and Open the Altair GraphQL Client
 2. Open the settings modal
 3. Toggle "ON" the "Enable experimental features in Altair. Note: The features might be unstable"
-4. Add "url:altair-graphql-plugin-github-sync@1.0.1::[url]->[http://localhost:8002]" to the plugins list and hit "Save" at the bottom of the settings modal
-5. After refresh Gist Sync panel will show in the left
+4. Add "url:altair-graphql-plugin-github-sync@1.0.2::[url]->[http://localhost:8002]" to the plugins list and hit "Save" at the bottom of the settings modal
+5. Run `yarn preview` to build in watch mode and open http server
+6. After refresh Gist Sync panel will show in the left
 
 ## Credit
 

diff --git 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>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/jest.config.js b/jest.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  moduleFileExtensions: ['js', 'ts', 'json', 'vue'],
+  transform: {
+    '^.+\\.ts$': 'ts-jest',
+    '^.+\\.vue$': 'vue-jest',
+  },
+};
diff --git a/manifest.json b/manifest.json
@@ -1,16 +1,12 @@
 {
   "manifest_version": 2,
   "name": "altair-graphql-plugin-github-sync",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "display_name": "Altair Github Sync",
   "description": "Save altair collections to github gist",
   "author_email": "[email protected]",
   "author": "Huy Hoang",
   "plugin_class": "AltairGistSync",
-  "scripts": [
-    "dist/altair-graphql-plugin-github-sync-element.min.js"
-  ],
-  "styles": [
-    "dist/style.css"
-  ]
+  "scripts": ["dist/github-sync.umd.js"],
+  "styles": ["dist/style.css"]
 }
diff --git a/package.json b/package.json
@@ -1,75 +1,80 @@
 {
   "name": "altair-graphql-plugin-github-sync",
-  "description": "Altair Sync Gist plugin",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "private": false,
-  "license": "MIT",
-  "homepage": "https://github.com/boydaihungst/altair-graphql-plugin-github-sync",
-  "repository": {
-    "url": "https://github.com/boydaihungst/altair-graphql-plugin-github-sync"
-  },
-  "bugs": {
-    "url": "https://github.com/boydaihungst/altair-graphql-plugin-github-sync/issues"
-  },
+  "description": "Altair Sync Gist plugin",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "test:unit": "vue-cli-service test:unit",
-    "lint": "vue-cli-service lint",
-    "build:element": "vue-cli-service build --target wc --inline-vue --name altair-graphql-plugin-github-sync-element src/index.ts && cp -f src/assets/style.css dist/style.css",
-    "web-server": "http-server ./ -p 8002 -c-1 --cors",
+    "clean": "rimraf dist",
+    "dev": "vite",
+    "build": "yarn clean && vue-tsc --noEmit && vite build",
+    "build:watch": "yarn build --watch",
+    "preview": "run-p build:watch web-server",
+    "test": "jest src",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx,.vue",
     "postinstall": "husky install",
+    "postpublish": "pinst --enable",
     "prepublishOnly": "pinst --disable",
-    "postpublish": "pinst --enable"
+    "web-server": "http-server ./ -p 8002 -c-1 --cors"
   },
   "dependencies": {
     "@emotion/core": "^10.0.35",
     "@types/uuid": "^8.3.3",
-    "@vue/web-component-wrapper": "^1.2.0",
     "axios": "^0.21.1",
     "dexie": "^3.2.0",
     "lodash": "^4.17.21",
     "uuid": "^8.3.2",
-    "vue": "^2.6.10",
-    "vue-inline-svg": "^2.1.0"
+    "vue": "3.2.26"
   },
   "devDependencies": {
     "@commitlint/cli": "^15.0.0",
     "@commitlint/config-conventional": "^15.0.0",
+    "@tailwindcss/aspect-ratio": "^0.4.0",
+    "@tailwindcss/forms": "^0.4.0",
+    "@tailwindcss/jit": "^0.1.18",
+    "@tailwindcss/line-clamp": "^0.3.0",
+    "@tailwindcss/typography": "^0.5.0",
     "@types/jest": "^24.0.11",
     "@types/lodash": "^4.14.178",
-    "@typescript-eslint/eslint-plugin": "^3.4.0",
-    "@typescript-eslint/parser": "^3.4.0",
-    "@vue/cli-plugin-babel": "^4.0.0",
-    "@vue/cli-plugin-eslint": "^4.0.0",
-    "@vue/cli-plugin-typescript": "^4.0.0",
-    "@vue/cli-plugin-unit-jest": "^4.0.0",
-    "@vue/cli-service": "^4.0.0",
-    "@vue/eslint-config-prettier": "^5.0.0",
-    "@vue/eslint-config-typescript": "^4.0.0",
-    "@vue/test-utils": "1.0.0-beta.29",
+    "@typescript-eslint/eslint-plugin": "^5.6.0",
+    "@typescript-eslint/parser": "^5.6.0",
+    "@vitejs/plugin-vue": "^2.0.0",
     "altair-graphql-core": "^4.2.1",
-    "esbuild": "^0.14.2",
-    "eslint": "^5.16.0",
-    "eslint-config-prettier": "^6.11.0",
-    "eslint-import-resolver-typescript": "^2.0.0",
-    "eslint-plugin-import": "^2.21.2",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-vue": "^5.0.0",
+    "autoprefixer": "^10.4.0",
+    "eslint": "^8.4.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-import-resolver-typescript": "^2.5.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.2.0",
     "http-server": "^0.11.1",
     "husky": "^7.0.4",
+    "npm-run-all": "^4.1.5",
     "pinst": "^2.1.6",
-    "prettier": "^1.18.2",
+    "postcss": "^8.4.5",
+    "postcss-import": "^14.0.2",
+    "prettier": "^2.4.1",
+    "rimraf": "^3.0.2",
     "sass": "^1.45.0",
     "sass-loader": "^10",
     "standard-version": "^9.3.0",
     "tailwindcss": "^3.0.1",
-    "typescript": "~3.5.3",
-    "vue-template-compiler": "^2.6.10"
+    "typescript": "^4.4.4",
+    "vite": "^2.7.1",
+    "vite-svg-loader": "^3.1.1",
+    "vue-eslint-parser": "^8.0.1",
+    "vue-tsc": "^0.29.8"
+  },
+  "bugs": {
+    "url": "https://github.com/boydaihungst/altair-graphql-plugin-github-sync/issues"
   },
   "commitlint": {
     "extends": [
       "@commitlint/config-conventional"
     ]
+  },
+  "homepage": "https://github.com/boydaihungst/altair-graphql-plugin-github-sync",
+  "license": "MIT",
+  "repository": {
+    "url": "https://github.com/boydaihungst/altair-graphql-plugin-github-sync"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,5 +1,7 @@
 module.exports = {
   plugins: {
+    'postcss-import': {},
+    'postcss-nested': {},
     tailwindcss: {},
     autoprefixer: {},
   },

diff --git a/src/@types/gist.d.ts b/src/@types/gist.d.ts
@@ -0,0 +1,6 @@
+export interface IGistFile {
+  filename: string;
+  displayName: string;
+  rawUrl?: string;
+  gistId: string;
+}
diff --git a/src/@types/shims-tsx.d.ts b/src/@types/shims-tsx.d.ts
diff --git a/src/@types/shims-vue.d.ts b/src/@types/shims-vue.d.ts
@@ -1,5 +1,8 @@
+/// <reference types="vite/client" />
+
 declare module '*.vue' {
-  import Vue from 'vue';
-  export default Vue;
+  import { DefineComponent } from 'vue';
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
 }
-declare module '@vue/web-component-wrapper';
diff --git a/src/App.vue b/src/App.vue
@@ -1,31 +1,51 @@
 <template>
   <div id="app">
-    <GistSync :props="{}" />
+    <GistSync :context="context" />
   </div>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent, PropType } from 'vue';
 import GistSync from './components/GistSync.vue';
+import { AltairContext } from './@types/altair';
 
-export default Vue.extend({
-  name: 'app',
+export default defineComponent({
+  name: 'App',
   components: {
     GistSync,
   },
-  async mounted() {
-    await import('./components/GistSync.vue');
+  props: {
+    context: {
+      type: Object as PropType<AltairContext>,
+      default: null
+    },
   },
+  // async mounted() {
+  //   await import('./components/GistSync.vue');
+  // },
 });
 </script>
 
 <style lang="scss">
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer utilities {
+  .bg-theme {
+    background-color: var(--theme-bg-color);
+  }
+  .text-theme {
+    color: var(--theme-font-color);
+  }
+  .text-indigo-500 {
+    color: var(--primary-color);
+  }
+}
 #app {
-  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  font-family: "Avenir", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
 }
 </style>
diff --git a/src/assets/check-circle-solid.svg b/src/assets/check-circle-solid.svg
diff --git a/src/assets/exclamation-triangle-solid.svg b/src/assets/exclamation-triangle-solid.svg