"Content goes here."
"Loading..."
5 break; 6 case 'success': 7"Done!"
8 break; 9 default: 10"Unknown status."
11 } 12 } ``` -------------------------------- ### Async Boundaries with Try/Pending/Catch Source: https://tsrx.dev/features Handle asynchronous operations and lazy-loaded components using `try`/`pending`/`catch`. The `pending` branch displays while data is loading, and `catch` handles errors. ```typescript 1 const UserProfile = lazy(() => import('./UserProfile.tsrx')); 2 3 export component App() { 4 try { 5"Loading..."
8 } catch (e) { 9"Something went wrong."
10 } 11 } ``` -------------------------------- ### Configure React + Turbopack Plugin Source: https://tsrx.dev/getting-started Wrap your Next.js config with the TSRX React Turbopack helper to register a Turbopack rule for .tsrx files. ```javascript 1 import tsrxReactTurbopack from '@tsrx/turbopack-plugin-react'; 2 3 export default tsrxReactTurbopack({ 4 reactStrictMode: true, 5 }); ``` -------------------------------- ### Configure Vite for Vue Source: https://tsrx.dev/getting-started Integrate tsrxVue and vueJsxVapor plugins into your Vite configuration. Ensure tsrxVue is listed first. ```javascript 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' }, }), ], }); ``` -------------------------------- ### Configure React + Vite Plugin Source: https://tsrx.dev/getting-started Add the TSRX React Vite plugin to your Vite configuration file. ```javascript 1 import { defineConfig } from 'vite'; 2 import tsrxReact from '@tsrx/vite-plugin-react'; 3 4 export default defineConfig({ 5 plugins: [tsrxReact()], 6 }); ``` -------------------------------- ### Configure Preact + Vite Plugin Source: https://tsrx.dev/getting-started Add the TSRX Preact Vite plugin to your Vite configuration. Optionally, configure the suspense source. ```javascript 1 import { defineConfig } from 'vite'; 2 import tsrxPreact from '@tsrx/vite-plugin-preact'; 3 4 export default defineConfig({ 5 plugins: [tsrxPreact()], 6 }); ``` -------------------------------- ### Configure Preact + Bun Plugin Source: https://tsrx.dev/getting-started Use the TSRX Preact Bun plugin in your Bun build script. It targets Preact's JSX runtime and supports overriding the default Suspense import. ```javascript 1 import tsrxPreact from '@tsrx/bun-plugin-preact'; 2 3 await Bun.build({ 4 entrypoints: ['./src/App.tsrx'], 5 outdir: './dist', 6 target: 'browser', 7 plugins: [tsrxPreact()], 8 }); ``` -------------------------------- ### Configure Preact + Rspack Plugin Source: https://tsrx.dev/getting-started Add the TSRX Preact Rspack plugin to your Rspack configuration. It chains SWC loader and handles CSS modules. ```javascript 1 import { TsrxPreactRspackPlugin } from '@tsrx/rspack-plugin-preact'; 2 3 export default { 4 plugins: [new TsrxPreactRspackPlugin()], 5 }; ``` -------------------------------- ### Add Typecheck Script to package.json Source: https://tsrx.dev/getting-started Add this script to your package.json to enable command-line type checking of .tsrx files using the tsrx-tsc binary. Run with `pnpm typecheck`. ```json { "scripts": { "typecheck": "tsrx-tsc --noEmit" } } ``` -------------------------------- ### Configure React + Rspack Plugin Source: https://tsrx.dev/getting-started Add the TSRX React Rspack plugin to your Rspack configuration. It uses SWC loader and handles CSS modules. ```javascript 1 import { TsrxReactRspackPlugin } from '@tsrx/rspack-plugin-react'; 2 3 export default { 4 plugins: [new TsrxReactRspackPlugin()], 5 }; ``` -------------------------------- ### React/Preact Ref Object with Callback Refs Source: https://tsrx.dev/llms.txt Combines a React/Preact `useRef` object with anonymous and named callback refs on a single input element. Requires importing `useRef`. ```tsrx // React/Preact ref object + anonymous and named callback refs. import { useRef } from 'react'; component SearchBox() { const inputRef = useRef"Please sign in."
return; }"Here is your dashboard."
} ``` -------------------------------- ### Configure Prettier for TSRX Source: https://tsrx.dev/getting-started Add the TSRX Prettier plugin to your .prettierrc configuration file. ```json { "plugins": ["@tsrx/prettier-plugin"] } ``` -------------------------------- ### TSRX Conditional Rendering with If/Else Statements Source: https://tsrx.dev/features Demonstrates conditional rendering directly within TSRX templates using standard `if`/`else if`/`else` statements. This avoids the need for ternaries or wrapper components. ```typescript 1 component StatusBadge({ status }: { status: string }) { 2Body
} /> ``` -------------------------------- ### Lazy Array Destructuring with Signals in tsrx Source: https://tsrx.dev/llms.txt Illustrates lazy array destructuring using `&[ ... ]` with Solid's `createSignal`. This preserves per-access signal reactivity. ```tsrx let &[count, setCount] = createSignal(0);{count()}
``` -------------------------------- ### TSRX async boundaries with try/pending/catch Source: https://tsrx.dev/llms.txt Handle asynchronous operations and their loading/error states using 'try', 'pending', and 'catch'. This pattern is used for lazy-loaded components and suspended data fetching. ```tsrx const UserProfile = lazy(() => import('./UserProfile.tsrx')); export component App() { try {"Loading..."
} catch (e) {"Something went wrong."
} } ``` -------------------------------- ### TSRX DOM Refs: Using React useRef with Callbacks Source: https://tsrx.dev/features Shows how to combine a native ref object (like React's `useRef`) with anonymous and named callback refs on a single element. This allows for multiple ref attachments. ```typescript 1 import { useRef } from 'react'; 2 3 component SearchBox() { 4 // Use the target's native ref object when you want an object slot. 5 const inputRef = useRef"Something went wrong."
7{short_bio}
}"Welcome to TSRX."
} ``` -------------------------------- ### Add TSRX MCP via Claude Code CLI Source: https://tsrx.dev/getting-started Add the TSRX MCP server directly from the command line for Claude Code. This command registers the necessary configuration for the AI tool. ```bash claude mcp add tsrx -- npx -y @tsrx/mcp ``` -------------------------------- ### Generated React Code for FeatureCard Source: https://tsrx.dev/playground Shows the transpiled React output for the FeatureCard component, including JSX with class names and conditional rendering logic using ternary operators. Also includes the associated CSS. ```jsx const FeatureCard__static1 = ({'Loading output...'}
); export function FeatureCard({ title, items, ready, }: { title: string; items: string[]; ready: boolean; }) { return ("Please sign in."
4 return; 5 } 6 7"Here is your dashboard."
9 } ``` -------------------------------- ### TSRX Render Props: Using Function-Valued Props Source: https://tsrx.dev/features Illustrates render props in TSRX, which are function-valued props. They can be passed as `children` or a named prop like `render`. Wrap returned TSRX in `"Loading..."
break; case 'success':"Done!"
break; default:"Unknown status."
} } ``` -------------------------------- ### TSRX Submodule Declarations Source: https://tsrx.dev/specification Defines the syntax for submodule declarations and imports, aligning with TC39 module proposals. ```typescript SubmoduleDeclaration : module Identifier { ModuleItemListopt } ``` ```typescript SubmoduleImportDeclaration : import ImportClause from Identifier ; ``` -------------------------------- ### Prop Shorthands for Matching Props Source: https://tsrx.dev/features Utilize prop shorthands `{propName}` when the prop name matches the variable name, simplifying syntax from `propName={propName}` to `{propName}`. This applies to all attributes and event handlers. ```typescript 1 // Instead of repeating the name: 2 3 4 // Use the shorthand: 5 ``` -------------------------------- ### Bailing out of Template Rules with Inline Functions Source: https://tsrx.dev/llms.txt Use plain inline JavaScript/TypeScript functions for unconstrained logic like loops or imperative control flow within component bodies. Call these functions from event handlers or expressions. ```tsrx export component Counter() { let count = 0; // Plain JS — no template restrictions apply const increment = () => { if (count >= 10) { count = 0; } else { count += 1; } }; } ``` -------------------------------- ### TSRX try/catch for error boundaries Source: https://tsrx.dev/llms.txt Wrap component trees in 'try { } catch (e) { }' to render fallback UI when a child throws an error. The 'pending { }' clause handles async operations. ```tsrx component SafeProfile({ userId }: { userId: string }) { try {"Something went wrong."
"Content goes here."
5