rewrite 、update struct

.browserslistrc

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

.eslintrc.js

@@ -14,19 +14,13 @@ module.exports = {
         ecmaVersion: 2020
     },
     rules: {
-        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-        indent: [
-            'error',
-            4,
-            {
-                SwitchCase: 1
-            }
-        ],
+        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
         'prefer-const': ['error', { destructuring: 'all' }],
+        'no-async-promise-executor': 'off',
+        '@typescript-eslint/explicit-module-boundary-types': 'off',
+        '@typescript-eslint/ban-types': 'off',
         '@typescript-eslint/no-explicit-any': 'off',
-        'vue/html-indent': ['error', 4],
-        '@typescript-eslint/interface-name-prefix': 'off',
-        '@typescript-eslint/camelcase': 'off'
+        '@typescript-eslint/no-non-null-assertion': 'off'
     }
 };

.gitignore

@@ -1,8 +1,8 @@
 .DS_Store
 node_modules
-/temp
 # /dist
 
+
 # local env files
 .env.local
 .env.*.local
@@ -11,10 +11,11 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 
 # Editor directories and files
 .idea
-# .vscode
+.vscode
 *.suo
 *.ntvs*
 *.njsproj

.npmrc

@@ -1 +1 @@
-registry=https://registry.npm.taobao.org
+registry=https://registry.npm.taobao.org/

.prettierignore

@@ -1 +1,2 @@
 dist
+package.json

.prettierrc

@@ -3,5 +3,6 @@
     "trailingComma": "none",
     "tabWidth": 4,
     "endOfLine": "auto",
-    "printWidth": 120
+    "printWidth": 120,
+    "arrowParens": "avoid"
 }

.travis.yml

@@ -1,6 +1,8 @@
 language: node_js
 node_js:
-  - stable
+ - '14.15.4'
+install:
+  - npm install
 script:
   - npm run lint
-  - npm run build
+  - npm run build

babel.config.js

@@ -1,10 +1,3 @@
 module.exports = {
-    presets: [
-        [
-            '@vue/cli-plugin-babel/preset',
-            {
-                useBuiltIns: false
-            }
-        ]
-    ]
+    presets: ['@vue/cli-plugin-babel/preset']
 };

lint-staged.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    '*.{js,jsx,vue,ts,tsx}': 'vue-cli-service lint'
+};

package.json

@@ -10,12 +10,12 @@
     "registry": "https://registry.npmjs.org"
   },
   "scripts": {
+    "dev": "npm run serve",
     "serve": "vue-cli-service serve",
     "build": "sh scripts/build.sh",
-    "vue-build": "vue-cli-service build --target lib ./src/VueGitComment/index.ts",
+    "vue-build": "vue-cli-service build --target lib --name vue-git-comment src/VueGitComment/index.ts",
     "report": "npm run vue-build -- --report",
-    "lint": "vue-cli-service lint",
-    "format": "prettier --write \"./**/*.@(ts|js|vue)\""
+    "lint": "vue-cli-service lint"
   },
   "repository": {
     "type": "git",
@@ -34,31 +34,31 @@
   },
   "homepage": "https://github.com/shalldie/vue-git-comment#readme",
   "dependencies": {
-    "core-js": "^3.6.4",
+    "core-js": "^3.8.3",
     "vue": "^2.6.11",
-    "vue-class-component": "^7.2.2",
-    "vue-property-decorator": "^8.3.0"
+    "vue-class-component": "^7.2.3",
+    "vue-property-decorator": "^9.1.2"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^2.18.0",
-    "@typescript-eslint/parser": "^2.18.0",
-    "@vue/cli-plugin-babel": "~4.2.0",
-    "@vue/cli-plugin-eslint": "~4.2.0",
-    "@vue/cli-plugin-typescript": "~4.2.0",
-    "@vue/cli-service": "~4.2.0",
+    "@typescript-eslint/eslint-plugin": "^4.15.1",
+    "@typescript-eslint/parser": "^4.15.1",
+    "@vue/cli-plugin-babel": "~5.0.0-alpha.8",
+    "@vue/cli-plugin-eslint": "~5.0.0-alpha.8",
+    "@vue/cli-plugin-typescript": "~5.0.0-alpha.8",
+    "@vue/cli-service": "~5.0.0-alpha.8",
     "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/eslint-config-typescript": "^5.0.1",
-    "eslint": "^6.7.2",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-vue": "^6.1.2",
-    "prettier": "^1.19.1",
-    "sass": "^1.25.0",
-    "sass-loader": "^8.0.2",
-    "typescript": "~3.7.5",
+    "@vue/eslint-config-typescript": "^7.0.0",
+    "eslint": "^7.20.0",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-vue": "^7.6.0",
+    "lint-staged": "^10.5.4",
+    "prettier": "^2.2.1",
+    "sass": "^1.32.7",
+    "sass-loader": "^11.0.1",
+    "typescript": "~4.1.5",
     "vue-template-compiler": "^2.6.11"
   },
-  "engines": {
-    "node": ">= 6.0.0",
-    "npm": ">= 3.0.0"
+  "gitHooks": {
+    "pre-commit": "lint-staged"
   }
 }

scripts/build.sh

@@ -7,9 +7,6 @@ BASE_PATH=$(cd `dirname $BASE_PATH`; pwd)
 # 定位到 root
 cd $BASE_PATH
 
-# 删除旧的产出
-rm -rf dist
-
 # 构建
 npm run vue-build
 

src/App.vue

@@ -1,41 +1,37 @@
 <template>
-    <div id="app">
-        <button @click="toggleBgcolor" style="padding: 4px;">toggle backgroundColor</button>
-        <br />
-        <br />
-        <br />
+    <div id="app" :class="{ dark: dark }">
+        <div class="btn-wrap">
+            <button @click="toggle">toggle backgroundColor</button>
+        </div>
         <VueGitComment :options="options" />
     </div>
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { Component, BaseComponent } from '~/lib/decorators';
+import { TOptions } from './lib/store';
 import VueGitComment from './VueGitComment';
 
-import { StateStore } from './lib/store';
-
 @Component({
     components: {
         VueGitComment
     }
 })
-export default class App extends Vue {
-    options: StateStore['options'] = {
-        client_id: '3a657823527f57a63864',
-        client_secret: '80714a6e5a35b36043a5dfbd15d43795e95aaa9b',
+export default class App extends BaseComponent {
+    dark = false;
+
+    options: TOptions = {
+        clientID: '3a657823527f57a63864',
+        clientSecret: '80714a6e5a35b36043a5dfbd15d43795e95aaa9b',
         owner: 'shalldie',
         repo: 'gitment-store',
         uuid: 'esaffffdfdsaflgfdjsa',
+        // uuid: '/article/cmd-entrypoint-in-dockerfile',
         language: 'zh-CN'
     };
 
-    toggleBgcolor() {
-        const body = document.body;
-        if (body.hasAttribute('style')) {
-            body.removeAttribute('style');
-            return;
-        }
-        body.setAttribute('style', 'background: #f8f8f8');
+    toggle() {
+        this.dark = !this.dark;
     }
 }
 </script>
@@ -48,14 +44,25 @@ body {
     background: #fff;
 }
 #app {
-    font-family: 'Avenir', Helvetica, Arial, sans-serif;
+    font-family: Avenir, Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
+
     color: #333;
-    max-width: 800px;
+    max-width: 1000px;
     margin: 50px auto 0;
-    padding: 0 15px;
+    padding: 20px;
     box-sizing: border-box;
-    /* border: 1px solid #ddd; */
+
+    &.dark {
+        background: #f8f8f8;
+    }
+
+    .btn-wrap {
+        margin-bottom: 50px;
+        button {
+            padding: 4px;
+        }
+    }
 }
 </style>

src/VueGitComment/VueGitComment.vue

@@ -8,13 +8,13 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Prop, Watch, Provide } from 'vue-property-decorator';
-import store, { StateStore } from '../lib/store';
-import gitComment from '../lib/gitComment';
-import CommentHeader from '@/components/CommentHeader.vue';
-import CommentBody from '@/components/CommentBody.vue';
-import CommentPagination from '@/components/CommentPagination.vue';
-import CommentEditor from '@/components/CommentEditor.vue';
+import { Component, Prop, Watch, BaseComponent } from '~/lib/decorators';
+import CommentHeader from '~/components/CommentHeader.vue';
+import CommentBody from '~/components/CommentBody.vue';
+import CommentPagination from '~/components/CommentPagination.vue';
+import CommentEditor from '~/components/CommentEditor.vue';
+import { gm } from '~/lib/gitcomment';
+import { TOptions } from '~/lib/store';
 
 @Component({
     components: {
@@ -24,25 +24,19 @@ import CommentEditor from '@/components/CommentEditor.vue';
         CommentEditor
     }
 })
-export default class VueGitComment extends Vue {
+export default class VueGitComment extends BaseComponent {
     /**
      * 组件配置
      */
     @Prop()
-    private options!: StateStore['options'];
-
-    /**
-     * 全局store
-     */
-    @Provide()
-    store = store;
+    options!: TOptions;
 
     /**
      * 当配置更新，重新初始化组件
      */
     @Watch('options', { deep: true })
-    handleOptionsChange(options: StateStore['options']) {
-        gitComment.init(options);
+    handleOptionsChange(options: TOptions) {
+        gm.init(options);
     }
 
     mounted() {
@@ -52,8 +46,6 @@ export default class VueGitComment extends Vue {
 </script>
 
 <style lang="scss">
-@import '../assets/styles/github-markdown.css';
-
 @keyframes vue-git-comment-rotate {
     from {
         transform: rotate(0);

src/VueGitComment/index.ts

@@ -1,7 +1,8 @@
+import '~/assets/styles/github-markdown.css';
 import VueGitComment from './VueGitComment.vue';
 
-VueGitComment['install'] = function(Vue) {
-    Vue.component('vue-git-comment', VueGitComment);
+VueGitComment['install'] = Vue => {
+    Vue.component(VueGitComment.name, VueGitComment);
 };
 
 export default VueGitComment;