add TSX support

.eslintrc.json

@@ -28,6 +28,9 @@
     "no-unsafe-optional-chaining": "off",
     "no-useless-backreference": "off",
     "default-case-last": "off",
-    "no-nonoctal-decimal-escape": "off"
+    "no-nonoctal-decimal-escape": "off",
+    "import/extensions": "off",
+    "class-methods-use-this": "off",
+    "import/no-unresolved": "off"
   }
 }

README.md

@@ -3,9 +3,10 @@
 My ideal starting point for Vue projects. (continuously updating)
 
 ## Features
+
 - Vue 3 + Typescript: initialized as a Vue 3 project with Typescript support. (also support js)
 - ESLint (AirBnB): comes with the AirBnB eslint ruleset for vscode & Vue compiler.
-- Class Components: write your Vue components using the new class component.
+- TSX + Class Components: write your Vue components using the new class component and TSX.
 - Built-in Cypress E2E Testing: out-of-the-box Cypress with support for Vue 3 + Typescript.
 - Github Workflow: out-of-the-box Github workflow that runs e2e tests under src/
 

package.json

@@ -24,6 +24,7 @@
     "@types/mocha": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "^4.18.0",
     "@typescript-eslint/parser": "^4.18.0",
+    "@vue/babel-plugin-jsx": "^1.1.1",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-typescript": "~4.5.0",
@@ -66,7 +67,10 @@
       "no-unsafe-optional-chaining": "off",
       "no-useless-backreference": "off",
       "default-case-last": "off",
-      "no-nonoctal-decimal-escape": "off"
+      "no-nonoctal-decimal-escape": "off",
+      "import/extensions": "off",
+      "class-methods-use-this": "off",
+      "import/no-unresolved": "off"
     }
   },
   "browserslist": [

src/App.vue → src/App.tsx

@@ -1,10 +1,5 @@
-<template>
-  <Foo/>
-</template>
-
-<script lang="ts">
 import { Options, Vue } from 'vue-class-component';
-import Foo from './components/Foo.vue';
+import Foo from './components/Foo';
 
 @Options({
   components: {
@@ -13,12 +8,11 @@ import Foo from './components/Foo.vue';
 })
 
 class App extends Vue {
-
+  render() {
+    return (
+      <Foo/>
+    );
+  }
 }
 
 export default App;
-</script>
-
-<style>
-
-</style>

src/components/Foo.vue → src/components/Foo.tsx

@@ -1,11 +1,5 @@
-<template>
-  <div>
-    <button @click.stop="onClick">clicked: {{ count }}</button>
-  </div>
-</template>
-
-<script lang="ts">
 import { Options, Vue } from 'vue-class-component';
+import './Foo.css';
 
 @Options({
   props: {
@@ -19,11 +13,15 @@ class Foo extends Vue {
   onClick() {
     this.count += 1;
   }
+
+  render() {
+    return (
+      <div>
+        <button onClick={this.onClick}>clicked: {this.count}</button>
+      </div>
+    );
+  }
 }
 
 export default Foo;
-</script>
-
-<style scoped>
-
-</style>
+export { Foo };

src/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const classes: { [key: string]: string };
+  export = classes;
+}

src/jsx.d.ts

@@ -0,0 +1,19 @@
+/* eslint-disable */
+
+import Vue, {VNode} from "vue";
+
+declare global {
+  namespace JSX {
+    interface Element extends VNode {}
+
+    interface ElementClass extends Vue {}
+
+    interface ElementAttributesProperty {
+      $props: {};
+    }
+
+    interface IntrinsicElements {
+      [elemName: string]: any;
+    }
+  }
+}

src/main.ts

@@ -1,4 +1,4 @@
 import { createApp } from 'vue';
-import App from './App.vue';
+import App from './App.js';
 
 createApp(App).mount('#app');

src/tests/Foo.spec.ts

@@ -2,14 +2,12 @@
 no-undef,
 no-unused-vars,
 prefer-arrow-callback,
-import/no-unresolved,
-import/extensions,
 import/no-extraneous-dependencies,
 func-names
 */
 
 import { mount } from '@cypress/vue';
-import Foo from '../components/Foo.vue';
+import Foo from '../components/Foo';
 
 describe('Test', () => {
   it('renders a message', () => {

tsconfig.json

@@ -35,7 +35,7 @@
     "src/**/*.vue",
     "tests/**/*.ts",
     "tests/**/*.tsx"
-, "cypress/integration/Foo.spec.ts"  ],
+  ],
   "exclude": [
     "node_modules"
   ]

vue.config.js

@@ -1 +1,12 @@
-// module.exports = {};
+module.exports = {
+  configureWebpack: {
+    module: {
+      rules: [
+        {
+          test: /\*.css$/,
+          use: ['vue-style-loader', 'css-loader'],
+        },
+      ],
+    },
+  },
+};

yarn.lock

@@ -1430,7 +1430,7 @@
   resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.0.2.tgz#9b9c691cd06fc855221a2475c3cc831d774bc7dc"
   integrity sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==
 
-"@vue/babel-plugin-jsx@^1.0.3":
+"@vue/babel-plugin-jsx@^1.0.3", "@vue/babel-plugin-jsx@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.1.1.tgz#0c5bac27880d23f89894cd036a37b55ef61ddfc1"
   integrity sha512-j2uVfZjnB5+zkcbc/zsOc0fSNGCMMjaEXP52wdwdIfn0qjFfEYpYZBFKFg+HHnQeJCVrjOeO0YxgaL7DMrym9w==