Add: support for tsx

src/App.css

@@ -0,0 +1,12 @@
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}

src/App.tsx

@@ -0,0 +1,23 @@
+import { defineComponent } from "vue";
+import HelloWorld from "./components/HelloWorld";
+import "./App.css";
+
+export default defineComponent({
+  props: {},
+
+  setup() {
+    return () => (
+      <>
+        <div>
+          <a href="https://vitejs.dev" target="_blank">
+            <img src="/vite.svg" class="logo" alt="Vite logo" />
+          </a>
+          <a href="https://vuejs.org/" target="_blank">
+            <img src="/static/img/vue.svg" class="logo vue" alt="Vue logo" />
+          </a>
+        </div>
+        <HelloWorld msg="Vite + Vue" />
+      </>
+    );
+  },
+});

src/components/HelloWorld.css

@@ -0,0 +1,3 @@
+.read-the-docs {
+    color: #888;
+}

src/components/HelloWorld.tsx

@@ -0,0 +1,53 @@
+import { ref, withModifiers, defineComponent } from "vue";
+import "./HelloWorld.css";
+
+export default defineComponent({
+  props: {
+    msg: String,
+  },
+
+  setup(props) {
+    const count = ref(0);
+    const { msg } = props;
+
+    const inc = () => {
+      count.value++;
+    };
+
+    return () => (
+      <>
+        <h1>{ msg }</h1>
+
+        <div class="card">
+          <button type="button" onClick={withModifiers(inc, ["self"])}>
+            count is:{count.value}
+          </button>
+          <p>
+            Edit
+            <code>components/HelloWorld.vue</code> to test HMR
+          </p>
+        </div>
+        <p>
+          Check out
+          <a
+            href="https://vuejs.org/guide/quick-start.html#local"
+            target="_blank"
+          >
+            create-vue
+          </a>
+          , the official Vue + Vite starter
+        </p>
+        <p>
+          Install
+          <a href="https://github.com/vuejs/language-tools" target="_blank">
+            Volar
+          </a>
+          in your IDE for a better DX
+        </p>
+        <p class="read-the-docs">
+          Click on the Vite and Vue logos to learn more
+        </p>
+      </>
+    );
+  },
+});

src/main.ts

@@ -1,5 +1,5 @@
 import { createApp } from 'vue'
 import './style.css'
-import App from './App.vue'
+import App from './App'
 
 createApp(App).mount('#app')

vite.config.ts

@@ -1,8 +1,30 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import vueJsx from '@vitejs/plugin-vue-jsx'
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import vueJsx from "@vitejs/plugin-vue-jsx";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue(),vueJsx()],
-})
+  plugins: [vue(), vueJsx()],
+  build: {
+    rollupOptions: {
+      output: {
+        assetFileNames: (assetInfo) => {
+          var info = assetInfo.name.split(".");
+          var extType = info[info.length - 1];
+          if (
+            /\.(mp4|webm|ogg|mp3|wav|wma|flac|aac|3gp|avi|flv|mkv|mov|rmvb|ts|vob|webm|wmv)(\?.*)?$/i.test(assetInfo.name)
+          ) {
+            extType = "media";
+          } else if (/\.(png|jpe?g|gif|svg|bmp|tiff|webp)(\?.*)?$/i.test(assetInfo.name)) {
+            extType = "img";
+          } else if (/\.(woff2?|eot|ttf|otf|ttc|fnt)(\?.*)?$/i.test(assetInfo.name)) {
+            extType = "fonts";
+          }
+          return `static/${extType}/[name]-[hash][extname]`;
+        },
+        chunkFileNames: "static/js/[name]-[hash].js",
+        entryFileNames: "static/js/[name]-[hash].js",
+      },
+    },
+  },
+});