refactor: component props

Cweili · Jul 14, 2023 · e0ca1c2 · e0ca1c2
1 parent 64babf0
commit e0ca1c2
Show file tree

Hide file tree

Showing 10 changed files with 106 additions and 107 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -8,7 +8,7 @@ module.exports = {
     'vue',
   ],
   transform: {
-    '.*\\.vue$': 'vue3-jest',
+    '.*\\.vue$': '@vue/vue3-jest',
     '.*\\.tsx?$': 'ts-jest',
     '.*\\.jsx?$': 'babel-jest',
   },

diff --git a/package.json b/package.json
@@ -45,23 +45,24 @@
     "@cweili/fa-test-util": "^1.0.0",
     "@fortawesome/fontawesome-common-types": "6.4.0",
     "@fortawesome/free-solid-svg-icons": "6.4.0",
+    "@jest/globals": "^29.6.1",
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@rollup/plugin-replace": "^5.0.2",
     "@rollup/plugin-typescript": "^11.1.1",
-    "@types/jest": "^27.0.3",
     "@typescript-eslint/eslint-plugin": "^5.7.0",
     "@typescript-eslint/parser": "^5.7.0",
     "@vue/compiler-sfc": "^3.2.9",
     "@vue/eslint-config-typescript": "^10.0.0",
     "@vue/server-renderer": "^3.2.9",
+    "@vue/vue3-jest": "^29.2.4",
     "autoprefixer": "^10.3.4",
     "eslint": "^8.4.1",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-plugin-import": "^2.25.3",
     "eslint-plugin-jest": "^27.2.2",
     "eslint-plugin-vue": "^8.2.0",
-    "jest": "^27.4.5",
+    "jest": "^29.6.1",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.3.6",
     "postcss-csso": "^6.0.0",
@@ -71,11 +72,10 @@
     "rollup-plugin-typescript2": "^0.35.0",
     "rollup-plugin-vue": "^6.0.0",
     "sirv-cli": "^2.0.2",
-    "ts-jest": "^27.0.5",
+    "ts-jest": "^29.1.1",
     "typescript": "^4.4.2",
     "vue": "^3.2.9",
-    "vue-eslint-parser": "^9.0.3",
-    "vue3-jest": "^27.0.0-alpha.1"
+    "vue-eslint-parser": "^9.0.3"
   },
   "peerDependencies": {
     "@fortawesome/fontawesome-common-types": "*",

diff --git a/src/fa-layers-text.vue b/src/fa-layers-text.vue
@@ -10,14 +10,16 @@
 import {
   defineComponent,
   computed,
-  PropType,
 } from 'vue';
 
 import {
-  validFlip,
-  typeNumber,
-  Flip,
-} from './types';
+  size,
+  color,
+  scale,
+  translate,
+  flip,
+  rotate,
+} from './props';
 
 import {
   getStyles,
@@ -26,29 +28,14 @@ import {
 
 export default defineComponent({
   props: {
-    size: {
-      type: String,
-      validator: (value: string) => /^(lg|xs|sm|([\d.]+)x)$/.test(value),
-    },
-    color: String,
+    size,
+    color,
 
-    scale: {
-      ...typeNumber,
-      default: 1,
-    },
-    translateX: {
-      ...typeNumber,
-      default: 0,
-    },
-    translateY: {
-      ...typeNumber,
-      default: 0,
-    },
-    flip: {
-      type: String as PropType<Flip>,
-      validator: (value: Flip) => validFlip.indexOf(value) >= 0,
-    },
-    rotate: typeNumber,
+    scale,
+    translateX: translate,
+    translateY: translate,
+    flip,
+    rotate,
   },
 
   setup(props) {

diff --git a/src/fa-layers.vue b/src/fa-layers.vue
@@ -11,28 +11,21 @@
 import {
   defineComponent,
   computed,
-  PropType,
 } from 'vue';
 
 import {
-  validPull,
-  Pull,
-} from './types';
+  size,
+  pull,
+} from './props';
 
 import {
   getStyles,
 } from './utils';
 
 export default defineComponent({
   props: {
-    size: {
-      type: String,
-      validator: (value: string) => /^(lg|xs|sm|([\d.]+)x)$/.test(value),
-    },
-    pull: {
-      type: String as PropType<Pull>,
-      validator: (value: Pull) => validPull.indexOf(value) >= 0,
-    },
+    size,
+    pull,
   },
 
   setup(props) {

diff --git a/src/fa.vue b/src/fa.vue
@@ -49,15 +49,17 @@ import {
   computed,
   PropType,
 } from 'vue';
+import { IconDefinition } from '@fortawesome/fontawesome-common-types/index.d';
 
 import {
-  validFlip,
-  validPull,
-  typeNumber,
-  IconDefinition,
-  Flip,
-  Pull,
-} from './types';
+  size,
+  color,
+  pull,
+  scale,
+  translate,
+  flip,
+  rotate,
+} from './props';
 
 import {
   getStyles,
@@ -71,41 +73,23 @@ export default defineComponent({
       required: true,
     },
 
-    size: {
-      type: String,
-      validator: (value: string) => /^(lg|xs|sm|([\d.]+)x)$/.test(value),
-    },
-    color: String,
+    size,
+    color,
 
     fw: Boolean,
-    pull: {
-      type: String as PropType<Pull>,
-      validator: (value: Pull) => validPull.indexOf(value) >= 0,
-    },
+    pull,
 
-    scale: {
-      ...typeNumber,
-      default: 1,
-    },
-    translateX: {
-      ...typeNumber,
-      default: 0,
-    },
-    translateY: {
-      ...typeNumber,
-      default: 0,
-    },
-    flip: {
-      type: String as PropType<Flip>,
-      validator: (value: Flip) => validFlip.indexOf(value) >= 0,
-    },
-    rotate: typeNumber,
+    scale,
+    translateX: translate,
+    translateY: translate,
+    flip,
+    rotate,
 
     spin: Boolean,
     pulse: Boolean,
 
-    primaryColor: String,
-    secondaryColor: String,
+    primaryColor: color,
+    secondaryColor: color,
     primaryOpacity: {
       type: [
         Number,

diff --git a/src/props.ts b/src/props.ts
@@ -0,0 +1,53 @@
+import {
+  PropType,
+} from 'vue';
+
+const validFlip = [
+  'horizontal',
+  'vertical',
+  'both',
+] as const;
+type Flip = typeof validFlip[number];
+
+const validPull = [
+  'right',
+  'left',
+] as const;
+type Pull = typeof validPull[number];
+
+const typeNumber = {
+  type: [
+    Number,
+    String,
+  ],
+  validator: (value: number | string): boolean => /^[-\d.]+$/.test(`${value}`),
+};
+
+export const size = {
+  type: String,
+  validator: (value: string) => /^(lg|xs|sm|([\d.]+)x)$/.test(value),
+};
+
+export const color = String;
+
+export const pull = {
+  type: String as PropType<Pull>,
+  validator: (value: Pull) => validPull.indexOf(value) >= 0,
+};
+
+export const scale = {
+  ...typeNumber,
+  default: 1,
+};
+
+export const translate = {
+  ...typeNumber,
+  default: 0,
+};
+
+export const flip = {
+  type: String as PropType<Flip>,
+  validator: (value: Flip) => validFlip.indexOf(value) >= 0,
+};
+
+export const rotate = typeNumber;
diff --git a/src/types.ts b/src/types.ts
diff --git a/test/expected/layering.html b/test/expected/layering.html
@@ -1 +1 @@
-<span class="vue-fa-layers" style="float:left;width:1.25em;height:1em;font-size:4em;text-align:center;vertical-align:-.125em;transform-origin:center;overflow:visible;"><!--[--><svg viewBox="0 0 448 512" class="vue-fa" style="height:1em;vertical-align:-.125em;transform-origin:center;overflow:visible;" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(224 256)" transform-origin="112 0"><g transform="translate(0,0) scale(1,1) "><path d="M64 32C64 14.3 49.7 0 32 0S0 14.3 0 32V64 368 480c0 17.7 14.3 32 32 32s32-14.3 32-32V352l64.3-16.1c41.1-10.3 84.6-5.5 122.5 13.4c44.2 22.1 95.5 24.8 141.7 7.4l34.7-13c12.5-4.7 20.8-16.6 20.8-30V66.1c0-23-24.2-38-44.8-27.7l-9.6 4.8c-46.3 23.2-100.8 23.2-147.1 0c-35.1-17.6-75.4-22-113.5-12.5L64 48V32z" fill="currentColor" transform="translate(-224 -256)"></path></g></g></svg><span class="vue-fa-layers-text" style="font-weight:900;"><span style="height:1em;vertical-align:-.125em;transform-origin:center;overflow:visible;color:white;transform:translate(0em,0em) scale(0.25,0.25) rotate(-30deg);"><!--[--> NEW <!--]--></span></span><!--]--></span>
+<span class="vue-fa-layers" style="float:left;width:1.25em;height:1em;font-size:4em;text-align:center;vertical-align:-.125em;transform-origin:center;overflow:visible;"><!--[--><svg viewBox="0 0 448 512" class="vue-fa" style="height:1em;vertical-align:-.125em;transform-origin:center;overflow:visible;" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(224 256)" transform-origin="112 0"><g transform="translate(0,0) scale(1,1) "><path d="M64 32C64 14.3 49.7 0 32 0S0 14.3 0 32V64 368 480c0 17.7 14.3 32 32 32s32-14.3 32-32V352l64.3-16.1c41.1-10.3 84.6-5.5 122.5 13.4c44.2 22.1 95.5 24.8 141.7 7.4l34.7-13c12.5-4.7 20.8-16.6 20.8-30V66.1c0-23-24.2-38-44.8-27.7l-9.6 4.8c-46.3 23.2-100.8 23.2-147.1 0c-35.1-17.6-75.4-22-113.5-12.5L64 48V32z" fill="currentColor" transform="translate(-224 -256)"></path></g></g></svg><span class="vue-fa-layers-text" style="font-weight:900;"><span style="height:1em;line-height:.75em;font-size:1.33333em;vertical-align:-.225em;transform-origin:center;overflow:visible;color:white;transform:translate(0em,0em) scale(-0.25,-0.25) rotate(-30deg);"><!--[--> NEW <!--]--></span></span><!--]--></span>
diff --git a/test/template/layering.html b/test/template/layering.html
@@ -6,8 +6,10 @@
   <FaLayersText
     :scale="0.25"
     :rotate="-30"
+    flip="both"
     color="white"
     style="font-weight: 900"
+    size="lg"
   >
     NEW
   </FaLayersText>

diff --git a/test/vue-fa.test.ts b/test/vue-fa.test.ts
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
 import { promisify } from 'util';
 import { resolve } from 'path';
 import {
@@ -6,6 +8,10 @@ import {
   readdirSync,
 } from 'fs';
 
+import {
+  test,
+  expect,
+} from '@jest/globals';
 import { createSSRApp } from 'vue';
 import { renderToString } from '@vue/server-renderer';
 import pretty from 'pretty';