As we prepare TSRX for 1.0, we’ve decided to remove “lazy destructuring”.
This reflects the direction we want to take TSRX: an extension of JSX, rather than an entirely new language.
We’ve written more about the reasoning behind the change here:
tsrx.dev/blog/removin...
![// Counter.tsrx — hooks next to output, no rules of hooks
import { useState, useEffect } from 'octane';
export function Counter(props) @{
const [count, setCount] = useState(0);
// A hook behind a condition is fine — slots are
// assigned by call site, not call order.
if (!props.paused) {
useEffect(() => {
console.log('count is now', count);
}); // the compiler infers [count]
}
<button onClick={() => setCount(count + 1)}>{'Count: ' + count}</button>
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:e32yv4womglmqogqi2vvuk6b/bafkreihuwq3jfzwx2mxzm25vcynkwi6nk4rosykpohovghmng3e3nzerhq)
![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.](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:e32yv4womglmqogqi2vvuk6b/bafkreifkmnpcoeaonmce5lalxtbfukinmjygsuvcsyhkzff5fcihineri4)
![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>
}](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:e32yv4womglmqogqi2vvuk6b/bafkreiektdg4hcldchb7a7knxbynun5coy2jvb352for6dizluq4edi6uy)
