refactor: convert Functional API to Option API

The `vue-jest@5` is still incompatible with the Functional API.
fengyuanchen · Jan 22, 2021 · 3c115cd · 3c115cd
1 parent 3d34f86
commit 3c115cd
Show file tree

Hide file tree

Showing 10 changed files with 307 additions and 336 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -6,6 +6,7 @@ module.exports = {
   },
   extends: [
     'airbnb-typescript/base',
+    'plugin:@typescript-eslint/recommended',
     'plugin:vue/vue3-recommended',
   ],
   parser: 'vue-eslint-parser',
@@ -20,6 +21,8 @@ module.exports = {
     'vue',
   ],
   rules: {
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
     'no-restricted-properties': 'off',
   },
   overrides: [

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -20,5 +20,5 @@ jobs:
     - run: npm install
     - run: npm run lint
     - run: npm run build
-    # - run: npm test
-    # - run: npm run test:coverage
+    - run: npm test
+    - run: npm run test:coverage
diff --git a/docs/app.vue b/docs/app.vue
@@ -146,93 +146,93 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-  .markdown-body {
-    table {
-      display: table;
-    }
+.markdown-body {
+  table {
+    display: table;
+  }
 
-    code {
-      white-space: nowrap;
-    }
+  code {
+    white-space: nowrap;
+  }
+}
+
+.carbonads {
+  border: 1px solid #ccc;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+  overflow: hidden;
+  padding: 1rem;
+
+  @media (min-width: 768px) {
+    float: right;
+    margin-bottom: -1rem;
+    margin-top: -1rem;
+    max-width: 360px;
   }
+}
 
-  .carbonads {
-    border: 1px solid #ccc;
-    border-radius: 0.25rem;
-    font-size: 0.875rem;
+.carbon {
+  &-wrap {
     overflow: hidden;
-    padding: 1rem;
-
-    @media (min-width: 768px) {
-      float: right;
-      margin-bottom: -1rem;
-      margin-top: -1rem;
-      max-width: 360px;
-    }
   }
 
-  .carbon {
-    &-wrap {
-      overflow: hidden;
-    }
-
-    &-img {
-      clear: left;
-      display: block;
-      float: left;
-    }
-
-    &-text,
-    &-poweredby {
-      display: block;
-      margin-left: 140px;
-
-      &,
-      &:focus,
-      &:hover {
-        color: #fff;
-        text-decoration: none;
-      }
-    }
-
-    &-poweredby {
-      color: #ddd;
-    }
+  &-img {
+    clear: left;
+    display: block;
+    float: left;
   }
 
-  .heart {
-    color: #ddd;
+  &-text,
+  &-poweredby {
     display: block;
-    height: 2rem;
-    line-height: 2rem;
-    margin-bottom: 0;
-    margin-top: 1rem;
-    position: relative;
-    text-align: center;
-    width: 100%;
+    margin-left: 140px;
 
+    &,
+    &:focus,
     &:hover {
-      color: #ff4136;
+      color: #fff;
+      text-decoration: none;
     }
+  }
 
-    &::before {
-      border-top: 1px solid #eee;
-      content: '';
-      display: block;
-      height: 0;
-      left: 0;
-      position: absolute;
-      right: 0;
-      top: 50%;
-    }
+  &-poweredby {
+    color: #ddd;
+  }
+}
+
+.heart {
+  color: #ddd;
+  display: block;
+  height: 2rem;
+  line-height: 2rem;
+  margin-bottom: 0;
+  margin-top: 1rem;
+  position: relative;
+  text-align: center;
+  width: 100%;
+
+  &:hover {
+    color: #ff4136;
+  }
 
-    &::after {
-      background-color: #fff;
-      content: '♥';
-      padding-left: 0.5rem;
-      padding-right: 0.5rem;
-      position: relative;
-      z-index: 1;
-    }
+  &::before {
+    border-top: 1px solid #eee;
+    content: '';
+    display: block;
+    height: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 50%;
+  }
+
+  &::after {
+    background-color: #fff;
+    content: '♥';
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    position: relative;
+    z-index: 1;
   }
+}
 </style>
diff --git a/docs/components/demo-block.vue b/docs/components/demo-block.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="demo">
+  <div class="demo-block">
     <slot />
   </div>
 </template>
@@ -13,20 +13,20 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-  .demo {
-    border: 1px solid #eee;
-    border-top-left-radius: 0.25rem;
-    border-top-right-radius: 0.25rem;
-    padding: 1rem;
-    position: relative;
+.demo-block {
+  border: 1px solid #eee;
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+  padding: 1rem;
+  position: relative;
 
-    & + pre {
-      border: 1px solid #eee;
-      border-radius: 0.25rem;
-      border-top: 0;
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-      margin-bottom: 1rem;
-    }
+  & + pre {
+    border: 1px solid #eee;
+    border-radius: 0.25rem;
+    border-top: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    margin-bottom: 1rem;
   }
+}
 </style>
diff --git a/rollup.config.js b/rollup.config.js
@@ -25,7 +25,7 @@ export default ['umd', 'esm'].map((format) => ({
       file: pkg.main,
       globals: {
         vue: 'Vue',
-        feather: 'feather',
+        'feather-icons': 'feather',
       },
     };