refactor with composition api and tsx

Author: BobbyTalvin

.storybook/config.js

@@ -6,7 +6,10 @@ import { withOptions } from '@storybook/addon-options';
 import { setConsoleOptions } from '@storybook/addon-console';
 import { addReadme } from 'storybook-readme/vue';
 import useVuetify from './vuetify';
+import Vue from 'vue';
+import VueCompositionAPI from '@vue/composition-api';
 
+Vue.use(VueCompositionAPI);
 addDecorator(addReadme);
 addDecorator(() => ({
   vuetify: useVuetify(),

.storybook/webpack.config.js

@@ -5,7 +5,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /.(js|ts)$/,
+        test: /.(js|jsx|ts|tsx)$/,
         use: [
           {loader: 'babel-loader'}
         ],

@types/global.d.ts

@@ -22,8 +22,21 @@ declare module '*.md' {
 }
 
 declare module '*.vue' {
-  import Vue from 'vue';
-  export default Vue;
+  import type { VueConstructor } from 'vue';
+  import type { defineComponent } from '@vue/composition-api';
+  const component: ReturnType<typeof defineComponent> & {
+    install(app: VueConstructor<Vue>): void
+  };
+  export default component;
+}
+
+declare module '*.tsx' {
+  import type { VueConstructor } from 'vue';
+  import type { defineComponent } from '@vue/composition-api';
+  const VueComponent: ReturnType<typeof defineComponent> & {
+    install(app: VueConstructor<Vue>): void
+  };
+  export default VueComponent;
 }
 
 declare module '@foxone/uikit';

@types/shim-tsx.d.ts

@@ -0,0 +1,15 @@
+import type { VNode } from 'vue';
+import type { ComponentRenderProxy } from '@vue/composition-api';
+
+declare global {
+  namespace JSX {
+    interface Element extends VNode { }
+    interface ElementClass extends ComponentRenderProxy { }
+    interface ElementAttributesProperty {
+      $props: any;
+    }
+    interface IntrinsicElements {
+      [elem: string]: any;
+    }
+  }
+}

babel.config.js

@@ -5,23 +5,16 @@ module.exports = function (api) {
   const presets = [
     '@babel/preset-env',
     'babel-preset-vue',
+    ['@vue/babel-preset-jsx', { compositionAPI: true }],
     '@babel/preset-typescript'
   ];
 
   const plugins = [
     '@babel/plugin-transform-runtime',
-    ['@babel/proposal-decorators', {
-      legacy: true
-    }],
-    ['@babel/proposal-class-properties', {
-      loose: true
-    }],
-    ['@babel/plugin-proposal-private-property-in-object', {
-      loose: true
-    }],
-    ['@babel/plugin-proposal-private-methods', {
-      loose: true
-    }]
+    ['@babel/plugin-proposal-decorators', { legacy: true }],
+    ['@babel/plugin-proposal-class-properties', { loose: true }],
+    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
+    ['@babel/plugin-proposal-private-methods', { loose: true }]
   ];
 
   const env = {

jest.config.js

@@ -7,18 +7,20 @@ module.exports = {
 
   moduleFileExtensions: [
     'js',
+    'jsx',
     'json',
     'ts',
+    'tsx',
     'vue'
   ],
 
   roots: ['<rootDir>/src'],
 
   testRegex:
-    '(test|__test__)/.*.test.(vue|ts|js)?$',
+    '(test|__test__)/.*.test.(vue|ts|tsx|js|jsx)?$',
 
   transform: {
-    '^.+.ts$': 'ts-jest',
+    '^.+.tsx?$': 'babel-jest',
     '^.+.vue$': 'vue-jest',
     '^.+\\.svg$': 'jest-svg-transformer'
   },
@@ -35,6 +37,7 @@ module.exports = {
 
   transformIgnorePatterns: [
     '/node_modules/(?!(vuetify)/)/',
-    '/node_modules/(?!(@foxone/uikit)/)/'
+    '/node_modules/(?!(@foxone/uikit)/)/',
+    '/node_modules/(?!(@vue/composition-api)/)/'
   ]
 };

package.json

@@ -40,6 +40,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@vue/composition-api": "^1.0.0-rc.13",
     "classnames": "~2.2.6",
     "vue-slider-component": "~3.2.13"
   },
@@ -55,7 +56,7 @@
     "@commitlint/cli": "8.3.5",
     "@foxone/uikit": "~2.0.59",
     "@mdi/js": "^5.9.55",
-    "@omni-door/cli": "^2.5.0",
+    "@omni-door/cli": "^2.5.1",
     "@storybook/addon-actions": "5.3.21",
     "@storybook/addon-console": "1.2.2",
     "@storybook/addon-docs": "5.3.21",
@@ -72,6 +73,8 @@
     "@types/node": "~14.0.27",
     "@typescript-eslint/eslint-plugin": "~3.8.0",
     "@typescript-eslint/parser": "~3.8.0",
+    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
+    "@vue/babel-preset-jsx": "^1.2.4",
     "@vue/test-utils": "^1.2.0",
     "babel-jest": "~26.6.3",
     "babel-loader": "~8.1.0",
@@ -127,7 +130,7 @@
     "ts-jest": "^25.5.1",
     "ts-node": "8.6.2",
     "ttypescript": "~1.5.12",
-    "typescript": "~3.9.7",
+    "typescript": "~4.3.5",
     "typescript-transform-paths": "~2.0.3",
     "url-loader": "~3.0.0",
     "vue": "~2.6.8",

src/AssetRangeInput/__stories__/index.stories.ts

@@ -3,7 +3,7 @@ import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
 import { themes } from '@storybook/theming';
 import { AssetRangeInput } from '../';
 import { RiskSlider } from '../../RiskSlider';
-import { ConnectWallet } from '../../ConnectWallet';
+import ConnectWallet from '../../ConnectWallet';
 import '../style';
 
 const asset = {

src/ConnectWallet/ConnectWallet.ts

@@ -0,0 +1,38 @@
+import {
+  defineComponent,
+  onMounted
+} from '@vue/composition-api';
+import classnames from '@utils/classnames';
+/* import types */
+import type { CreateElement, VNode } from 'vue';
+
+export default defineComponent({
+  name: 'ConnectWallet',
+  props: {
+    className: {
+      type: String,
+      default: ''
+    },
+    text: {
+      type: [String, Object],
+      default: 'Connect Wallet'
+    }
+  },
+  setup() {
+    const classes = classnames('connect-wallet');
+    onMounted(() => {
+      console.info('ConnectWallet mounted!');
+    });
+
+    return { classes };
+  },
+  render(h: CreateElement): VNode {
+    return (
+      <div class={this.classes(void 0, this.className)}>
+        <span class={this.classes('text', 'f-greyscale-1 f-caption font-weight-bold pr-4')}>
+          { this.text }
+        </span>
+      </div>
+    );
+  }
+});