@tsrx/mcp 0.0.35 → 0.0.37

package/package.json

@@ -3,7 +3,7 @@
   "description": "MCP server for TSRX documentation and project context",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.0.35",
+  "version": "0.0.37",
   "type": "module",
   "repository": {
     "type": "git",
@@ -37,8 +37,8 @@
     "@modelcontextprotocol/sdk": "^1.29.0",
     "prettier": "^3.8.3",
     "zod": "^4.3.6",
-    "@tsrx/core": "0.1.22",
-    "@tsrx/prettier-plugin": "0.3.74"
+    "@tsrx/core": "0.1.24",
+    "@tsrx/prettier-plugin": "0.3.76"
   },
   "devDependencies": {
     "@types/node": "^24.3.0",

package/src/analyze.js

@@ -87,6 +87,17 @@ function create_advice(input) {
 		});
 	}
 
+	if (error_codes.has(DIAGNOSTIC_CODES.FORGOTTEN_STATEMENT_CONTAINER)) {
+		advice.push({
+			kind: 'forgotten-statement-container',
+			severity: 'error',
+			title: 'Add @ before statement-container braces',
+			message:
+				'A function body with TypeScript setup followed by bare TSRX output must use a JSX statement container. Change the opening `{` to `@{`, or use an ordinary `return` when the function only returns JSX.',
+			documentation: ['tsrx://docs/components.md', 'tsrx://docs/expression-values.md'],
+		});
+	}
+
 	if (
 		error_messages.has(TSRX_LOOP_RETURN_ERROR) ||
 		error_messages.has(TSRX_LOOP_BREAK_ERROR) ||
@@ -97,7 +108,7 @@ function create_advice(input) {
 			severity: 'error',
 			title: 'Filter before TSRX for...of loops',
 			message:
-				'Direct continue, break, and return statements are not valid inside TSRX @for loops. Filter the iterable before rendering, use  { ... } for the no-items fallback, and keep ordinary JavaScript control flow inside nested functions.',
+				'Direct continue, break, and return statements are not valid inside TSRX @for loops. Filter the iterable before rendering, use @empty { ... } for the no-items fallback, and keep ordinary JavaScript control flow inside nested functions.',
 			documentation: ['tsrx://docs/control-flow.md'],
 		});
 	}

package/src/format.js

@@ -104,7 +104,7 @@ export async function format_tsrx(input) {
 		...(project_config ?? {}),
 		...user_overrides,
 		filepath: resolved_filename,
-		parser: 'ripple',
+		parser: 'tsrx',
 		plugins: [tsrx_prettier_plugin],
 	};
 

package/src/generated/docs.js

@@ -19,7 +19,7 @@ export const documentation_sections = [
 		use_cases:
 			'components, functions, props, authoring .tsrx files, jsx return syntax',
 		content:
-			'# Function Components\n\nAuthor UI as ordinary TypeScript functions. Components can return JSX directly, or use a JSX statement container when setup and output should live together.\n\n```tsx\nexport function Button({ label }: { label: string }) @{\n  <button>{label}</button>\n}\n```\n\nInside `@{ ... }`, put any setup statements first and end with one rendered output node. No JavaScript setup can appear after that output.\n\nSource: website-tsrx/src/pages/specification.tsrx#components',
+			'# Function Components\n\nAuthor UI as ordinary TypeScript functions. Components can return JSX directly, or use a JSX statement container when setup and output should live together.\n\n```tsx\nexport function Button({ label }: { label: string }) @{\n  <button>{label}</button>\n}\n```\n\nInside `@{ ... }`, put any setup statements first and end with one rendered output node. No JavaScript setup can appear after that output.\n\nIf a normal function body contains setup statements followed by bare TSRX output, add the missing `@` before the opening brace. Plain `{ ... }` is JavaScript; `@{ ... }` is the statement-container form.\n\nSource: website-tsrx/src/pages/specification.tsrx#components',
 	},
 	{
 		slug: 'text-and-template-expressions',
@@ -27,7 +27,7 @@ export const documentation_sections = [
 		use_cases:
 			'text children, jsx text, comments, string literals, expression containers',
 		content:
-			'# Text and Template Expressions\n\nStatic text is JSXText and can be written directly between tags. Dynamic values use normal JSX expression containers.\n\n```tsx\nfunction Greeting({ name }: { name: string }) @{\n  <>\n  <h1>Hello</h1>\n  <p>{name}</p>\n  </>\n}\n```\n\nJavaScript comments are also allowed between template children and are not rendered. Use braces for JavaScript expressions, including string literals that should be evaluated as JavaScript.\n\nSpecification grammar:\n\n```text\nJSXTextChild :\n  JSXTextCharacters\n\nJSXExpressionContainer :\n  { AssignmentExpression }\n\nJSXCodeBlock :\n  @{ StatementListItemListopt TemplateOutput }\n\nTemplateBlock :\n  { TemplateChildrenopt }\n  { StatementListItemList TemplateOutput }\n\nJSXIfExpression :\n  @if ( Expression ) TemplateBlock\n  @if ( Expression ) TemplateBlock else TemplateBlock\n\nJSXForExpression :\n  @for ( ForHeader TemplateForOptionsopt ) TemplateBlock\n  @for ( ForHeader TemplateForOptionsopt ) TemplateBlock empty TemplateBlock\n\nJSXSwitchExpression :\n  @switch ( Expression ) { JSXSwitchCaseListopt }\n\nJSXSwitchCase :\n  case Expression : TemplateBlock\n  default : TemplateBlock\n\nJSXTryExpression :\n  @try TemplateBlock pending TemplateBlock\n  @try TemplateBlock catch ( CatchParameteropt ) TemplateBlock\n  @try TemplateBlock finally TemplateBlock\n```\n\nSource: website-tsrx/src/pages/specification.tsrx#templates',
+			'# Text and Template Expressions\n\nStatic text is JSXText and can be written directly between tags. Dynamic values use normal JSX expression containers.\n\n```tsx\nfunction Greeting({ name }: { name: string }) @{\n  <>\n  <h1>Hello</h1>\n  <p>{name}</p>\n  </>\n}\n```\n\nJavaScript comments are also allowed between template children and are not rendered. Use braces for JavaScript expressions, including string literals that should be evaluated as JavaScript.\n\nSpecification grammar:\n\n```text\nJSXTextChild :\n  JSXTextCharacters\n\nJSXExpressionContainer :\n  { AssignmentExpression }\n\nJSXCodeBlock :\n  @{ StatementListItemListopt TemplateOutput }\n\nTemplateBlock :\n  { TemplateChildrenopt }\n  { StatementListItemList TemplateOutput }\n\nJSXIfExpression :\n  @if ( Expression ) TemplateBlock\n  @if ( Expression ) TemplateBlock @else TemplateBlock\n  @if ( Expression ) TemplateBlock @else JSXIfExpression\n\nJSXForExpression :\n  @for ( ForHeader TemplateForOptionsopt ) TemplateBlock\n  @for ( ForHeader TemplateForOptionsopt ) TemplateBlock @empty TemplateBlock\n\nJSXSwitchExpression :\n  @switch ( Expression ) { JSXSwitchCaseListopt }\n\nJSXSwitchCase :\n  @case Expression : TemplateBlock\n  @default : TemplateBlock\n\nJSXTryExpression :\n  @try TemplateBlock @pending TemplateBlock\n  @try TemplateBlock @catch ( CatchParameteropt ) TemplateBlock\n```\n\nSource: website-tsrx/src/pages/specification.tsrx#templates',
 	},
 	{
 		slug: 'expression-values',
@@ -35,7 +35,7 @@ export const documentation_sections = [
 		use_cases:
 			'fragments, pass template as prop, return template from helper, render props, expression position jsx',
 		content:
-			'# Expression Values\n\nTSRX uses JSX-shaped expression values. A single JSXElement can be assigned, passed, or returned directly. Use a JSXFragment when the value needs multiple children, or use a JSX statement container when setup needs to produce one final output.\n\n```tsx\nfunction App() @{\n  const title = <span class="title">Settings</span>;\n  const badge = (label: string) => @{\n    const normalized = label.trim();\n\n    <span class="badge">{normalized}</span>\n  };\n\n  <Card title={title}>{badge(\'New\')}</Card>\n}\n```\n\n`@{ ... }` is a JSX statement container. A normal JSX fragment, element body, or control-flow branch can also contain setup before output, but that scope must still end with one output node. Use a fragment when the output is text, an expression container, or multiple siblings.\n\nSpecification grammar:\n\n```text\nPrimaryExpression :\n  JSXElement\n  JSXFragment\n  JSXStyleElement\n  JSXCodeBlock\n  JSXIfExpression\n  JSXForExpression\n  JSXSwitchExpression\n  JSXTryExpression\n```\n\nSource: website-tsrx/src/pages/specification.tsrx#expression-values',
+			'# Expression Values\n\nTSRX uses JSX-shaped expression values. A single JSXElement can be assigned, passed, or returned directly. Use a JSXFragment when the value needs multiple children, or use a JSX statement container when setup needs to produce one final output.\n\n```tsx\nfunction App() @{\n  const title = <span class="title">Settings</span>;\n  const badge = (label: string) => @{\n    const normalized = label.trim();\n\n    <span class="badge">{normalized}</span>\n  };\n\n  <Card title={title}>{badge(\'New\')}</Card>\n}\n```\n\n`@{ ... }` is a JSX statement container. A normal JSX fragment, element body, or control-flow branch can also contain setup before output, but that scope must still end with one output node. Use a fragment when the output is text, an expression container, or multiple siblings.\n\nWhen generating code, prefer `function Component(props) @{ ... }` for component bodies that need hooks, setup, guard returns, and final template output together. Do not silently drop the `@`; the compiler treats plain braces as a normal JavaScript function body.\n\nSpecification grammar:\n\n```text\nPrimaryExpression :\n  JSXElement\n  JSXFragment\n  JSXStyleElement\n  JSXCodeBlock\n  JSXIfExpression\n  JSXForExpression\n  JSXSwitchExpression\n  JSXTryExpression\n```\n\nSource: website-tsrx/src/pages/specification.tsrx#expression-values',
 	},
 	{
 		slug: 'control-flow',
@@ -43,7 +43,7 @@ export const documentation_sections = [
 		use_cases:
 			'if else, for loops, switch, try catch, conditional rendering, lists, guard returns',
 		content:
-			'# Control Flow\n\nTemplate control flow uses directive-prefixed expressions inside JSX children.\n\n```tsx\nfunction List({ items }: { items: string[] }) @{\n  <>\n  @if (items.length === 0) {\n    <p>No items</p>\n  } @else {\n    <ul>\n      @for (const item of items.filter(Boolean); index i; key item) {\n        <li>{item}</li>\n      } @empty {\n        <li>No items</li>\n      }\n    </ul>\n  }\n  </>\n}\n```\n\nUse normal function returns for guard exits before entering template output. Filter a collection before passing it to `@for` when some items should not render, and use ` { ... }` for the no-items fallback.\n\n`return` statements are not template output. Put guard returns before the JSX statement container or return value, or render conditionally with `@if`. Inside TSRX `@if` branches and `@for ... of` loops, direct `continue`, `break`, and `return` statements are invalid. Inside a TSRX `@switch` case body, both `break` and `return` are invalid because cases are isolated template blocks.\n\nTSRX rendering supports `@for ... of` list loops. Regular `for`, `for...in`, `while`, and `do...while` loops are not rendering constructs. Move imperative loops into setup code, a nested function, event handler, effect, or helper where normal JavaScript control-flow rules apply.\n\nSource: website-tsrx/src/pages/features.tsrx#for',
+			'# Control Flow\n\nTemplate control flow uses directive-prefixed expressions inside JSX children.\n\n```tsx\nfunction List({ items }: { items: string[] }) @{\n  <>\n  @if (items.length === 0) {\n    <p>No items</p>\n  } @else {\n    <ul>\n      @for (const item of items.filter(Boolean); index i; key item) {\n        <li>{item}</li>\n      } @empty {\n        <li>No items</li>\n      }\n    </ul>\n  }\n  </>\n}\n```\n\nUse normal function returns for guard exits before entering template output. Filter a collection before passing it to `@for` when some items should not render, and use `@empty { ... }` for the no-items fallback.\n\n`return` statements are not template output. Put guard returns before the JSX statement container or return value, or render conditionally with `@if`. Inside TSRX `@if` branches and `@for ... of` loops, direct `continue`, `break`, and `return` statements are invalid. Inside a TSRX `@switch` case body, both `break` and `return` are invalid because cases are isolated template blocks.\n\nTSRX rendering supports `@for ... of` list loops. Regular `for`, `for...in`, `while`, and `do...while` loops are not rendering constructs. Move imperative loops into setup code, a nested function, event handler, effect, or helper where normal JavaScript control-flow rules apply.\n\nSource: website-tsrx/src/pages/features.tsrx#for',
 	},
 	{
 		slug: 'lazy-destructuring',
@@ -60,6 +60,14 @@ export const documentation_sections = [
 		content:
 			'# Style and Server Extensions\n\nAssign a `<style>` expression to expose scoped CSS class names declared in the current module.\n\n```tsx\nconst styles = <style>\n  .card { padding: 1rem; }\n</style>;\n\nexport function ChildCard() @{\n  <>\n  <Child class={styles.card} />\n  </>\n}\n```\n\n`module server { ... }` declares a server-oriented submodule in the Ripple host profile. Import exported functions with `import { load } from server` before use.\n\nSpecification grammar:\n\n```text\nJSXStyleElement :\n  <style JSXAttributesopt> CSSSource </style>\n\nSubmoduleDeclaration :\n  module Identifier { ModuleItemListopt }\n\nSubmoduleImportDeclaration :\n  import ImportClause from Identifier ;\n\n```\n\nSource: website-tsrx/src/pages/specification.tsrx#style',
 	},
+	{
+		slug: 'dynamic-elements-and-components',
+		title: 'Dynamic Elements and Components',
+		use_cases:
+			'dynamic elements, dynamic components, Dynamic component, is prop, runtime tag, runtime component, removed <@tag syntax',
+		content:
+			"# Dynamic Elements and Components\n\nUse the target runtime `Dynamic` component when the element tag or component constructor is chosen at runtime. The source form is ordinary JSX: `<Dynamic is={value} />`.\n\nImport `Dynamic` from the active target runtime module:\n\n| Target | Import |\n| --- | --- |\n| React | `import { Dynamic } from '@tsrx/react/dynamic';` |\n| Preact | `import { Dynamic } from '@tsrx/preact/dynamic';` |\n| Solid | `import { Dynamic } from '@tsrx/solid/dynamic';` |\n| Vue | `import { Dynamic } from '@tsrx/vue/dynamic';` |\n| Ripple | `import { Dynamic } from 'ripple';` |\n\n```tsx\nimport { Dynamic } from '@tsrx/react/dynamic';\n\ntype Tag = 'section' | 'article';\n\nexport function Panel({ as = 'section', title }: { as?: Tag; title: string }) @{\n  <Dynamic is={as} className=\"panel\">\n    <h2>{title}</h2>\n  </Dynamic>\n}\n```\n\nThe `is` prop can be a string tag name or a component value:\n\n```tsx\nconst Body = expanded ? ExpandedBody : CompactBody;\n\n<Dynamic is={Body} item={item} />\n```\n\nFor React host classes, use `className`. For Preact, Solid, Vue, and Ripple host classes, use `class`.\n\nDo not use removed dynamic tag syntax such as `<@tag />` or `<@Component />`. Use `<Dynamic is={...} />` instead.\n\nSource: website-tsrx/src/pages/features.tsrx#dynamic",
+	},
 	{
 		slug: 'target-integration',
 		title: 'Target Integration',

package/src/server.js

@@ -307,8 +307,9 @@ ${project_context_step}
 3. For syntax uncertainty, use \`list-sections\`, \`get-documentation\`, or read \`tsrx://docs/{slug}.md\`.
 4. Keep core TSRX advice target-neutral: component functions, JSX expression values, JSX statement containers \`@{ ... }\`, JSX text, directive control flow, lazy destructuring, style identifiers, and submodule declarations.
 5. Use \`tsrx://targets/{target}.md\` as the handoff point for target-specific responsibilities.
-5a. In template output, render lists with \`@for (... of ...)\`; filter the iterable before rendering when items should be skipped, and use \` { ... }\` for the no-items fallback; use \`@if\`, \`@switch\`, and \`@try\` for rendering control flow. Every directive body uses a \`{...}\` template block. When a scope mixes setup with output, setup comes first and the scope ends with exactly one JSX element, JSX fragment, or JSX control-flow expression.
+5a. In template output, render lists with \`@for (... of ...)\`; filter the iterable before rendering when items should be skipped, and use \`@empty { ... }\` for the no-items fallback; use \`@if\`, \`@switch\`, and \`@try\` for rendering control flow. Every directive body uses a \`{...}\` template block. When a scope mixes setup with output, setup comes first and the scope ends with exactly one JSX element, JSX fragment, or JSX control-flow expression.
 5b. \`return\` is JavaScript function control flow, not template output. Use guard returns before a JSX statement container or return value, or render conditionally with \`@if\`. Do not use \`continue\`, \`break\`, or \`return\` inside \`@if\` template branches or \`@for\` template loops. \`@switch\` cases are isolated blocks and do not use \`break\` or \`return\`.
+5c. If a component body has setup statements followed by bare JSX/template output, use \`@{ ... }\`, not plain \`{ ... }\`. Plain braces are an ordinary JavaScript function body; the missing \`@\` is the common fix.
 ${file_validation_step}
 ${compile_step}
 ${authoring_step}