Dominic Gannaway

@trueadm.dev

2343 Followers 130 Following

I'm a software engineer at OpenAI. Author of Inferno, Lexical, Ripple and Octane. Former React core team engineer, and core maintainer of Svelte.

Vue + Vite
Install the Vue compiler, its Vite plugin, the Vue runtime, and the Vapor JSX plugin:

pnpm install @tsrx/vue @tsrx/vite-plugin-vue vue vue-jsx-vapor
Then wire both plugins into your Vite config (order matters — tsrxVue first):

import { defineConfig } from 'vite';
import tsrxVue from '@tsrx/vite-plugin-vue';
import vueJsxVapor from 'vue-jsx-vapor/vite';

export default defineConfig({
plugins: [
tsrxVue(),
vueJsxVapor({
macros: true,
compiler: { runtimeModuleName: 'vue-jsx-vapor' },
}),
],
});
@tsrx/vite-plugin-vue compiles .tsrx modules into Vue-flavoured TSX, and vue-jsx-vapor/vite performs the downstream Vapor JSX transform. For editor typechecking, set jsxImportSource: "vue-jsx-vapor" in your tsconfig.json.

export component Greeting({ name }: { name?: string }) {
<div class="card">
if (name) {
<p>{`Hello, ${name}`}</p>
} else {
<p>{'Hello, stranger'}</p>
}
</div>

<style>
.card { padding: 1rem; }
</style>
}

export component App() {
// This is a tracked array using #[] syntax
let cities = #['London', 'New York', 'Tokyo', 'Sydney'];

// index and key syntax has shipped
for (const city of cities; index i) {
<div>{i + ' - ' + city}</div>
}

<button onClick={() => {
cities.push(randomCity());
}}>{"Add random city"}</button>

<head>
<title>{"You can also update the title!"}</title>
</head>
}

Shows the code:

```js
export component App() {
let $show = true;

<div class="container">
<h1>{"Inferno X"}</h1>

let $count = 0;
let $double = $count * 2;

<button onClick={() => {
$count += 1;
}}>{'Count: ' + $count}</button>

<span>{'Double: ' + $double}</span>

if ($show) {
<div>{"Showing"}</div>
}

<button onClick={() => {
$show = !$show;
}}>{$show ? 'Hide' : 'Show'}</button>
</div>
}
```