chore: use typescript to refactor test and fix some bugs(#42)

* style: formate code

* chore: disable no-non-null-assertion

* chore: test vHtml and vText

* chore: set optimize as true in test

* style: fix eslint warning

* chore: v-model test

* fix: v-model has not type should use vModelText

* chore: use typescript to refactor test

* fix: slots test

* feat: support isCustomElement

Author: Amour1688

.eslintrc.js

@@ -30,7 +30,8 @@ module.exports = {
     'import/extensions': [2, 'ignorePackages', { ts: 'never' }],
     '@typescript-eslint/ban-ts-comment': [0],
     '@typescript-eslint/explicit-module-boundary-types': [0],
-    '@typescript-eslint/no-explicit-any': [0]
+    '@typescript-eslint/no-explicit-any': [0],
+    '@typescript-eslint/no-non-null-assertion': [0]
   },
   settings: {
     'import/resolver': {

global.d.ts

@@ -1,2 +1,3 @@
+declare module '*.js';
 declare module '@babel/helper-module-imports';
 declare module '@babel/plugin-syntax-jsx';

packages/babel-plugin-jsx/babel.config.js

@@ -1,14 +1,10 @@
 module.exports = {
   presets: [
-    [
-      '@babel/env',
-      {
-        // modules: 'cjs',
-      },
-    ],
+    '@babel/preset-env',
+    '@babel/preset-typescript',
   ],
   plugins: [
     /* eslint-disable-next-line global-require */
-    [require('./dist/index.js'), { transformOn: true }],
+    [require('./dist/index.js'), { optimize: true, isCustomElement: (tag) => /^x-/.test(tag) }],
   ],
 };

packages/babel-plugin-jsx/example/index.js

@@ -1,53 +1,30 @@
-import { createApp, ref, defineComponent } from 'vue';
+import { createApp, defineComponent } from 'vue';
 
-const SuperButton = (props, context) => {
-  const obj = {
-    mouseover: () => {
-      context.emit('mouseover');
-    },
-    click: () => {
-      context.emit('click');
-    },
-  };
-  return (
-    <div class={props.class}>
-      Super
-      <button
-        on={obj}
-      >
-        { props.buttonText }
-        {context.slots.default()}
-      </button>
-    </div>
-  );
-};
+const Child = defineComponent({
+  props: ['foo'],
+  setup(props) {
+    return () => <div>{props.foo}</div>;
+  },
+});
 
-SuperButton.inheritAttrs = false;
+Child.inheritAttrs = false;
 
-const App = defineComponent(() => {
-  const count = ref(0);
-  const inc = () => {
-    count.value++;
-  };
+const App = defineComponent({
+  data: () => ({
+    test: '1',
+  }),
+  render() {
+    return (
+      <>
+        <input type="radio" value="1" v-model={this.test} name="test" />
+        <input type="radio" value="2" v-model={this.test} name="test" />
+      </>
+    );
+  },
+});
 
-  const obj = {
-    click: inc,
-    mouseover: inc,
-  };
+const app = createApp(App);
 
-  return () => (
-    <div>
-      Foo {count.value}
-      <SuperButton
-        buttonText="VueComponent"
-        class="xxx"
-        vShow={true}
-        on={obj}
-      >
-        <button>1234</button>
-      </SuperButton>
-    </div>
-  );
-});
+app.mount('#app');
 
-createApp(App).mount('#app');
+console.log(app);

packages/babel-plugin-jsx/jest.config.js

@@ -1,3 +1,11 @@
 module.exports = {
-  setupFiles: ['./test/setup.js'],
+  setupFiles: ['./test/setup.ts'],
+  transform: {
+    '\\.(ts|tsx)$': 'ts-jest',
+  },
+  globals: {
+    'ts-jest': {
+      babelConfig: true,
+    },
+  },
 };

packages/babel-plugin-jsx/package.json

@@ -36,7 +36,9 @@
   "devDependencies": {
     "@babel/core": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
+    "@babel/preset-typescript": "^7.10.4",
     "@rollup/plugin-babel": "^5.0.3",
+    "@types/jest": "^26.0.7",
     "@types/svg-tags": "^1.0.0",
     "@typescript-eslint/eslint-plugin": "^3.6.1",
     "@typescript-eslint/parser": "^3.6.1",
@@ -47,6 +49,7 @@
     "jest": "^26.0.1",
     "regenerator-runtime": "^0.13.5",
     "rollup": "^2.13.1",
+    "ts-jest": "^26.1.3",
     "typescript": "^3.9.6",
     "vue": "3.0.0-rc.4",
     "webpack": "^4.43.0",