@tsrx/core 0.1.36 → 0.1.38

package/package.json

@@ -3,7 +3,7 @@
   "description": "Core compiler infrastructure for TSRX syntax",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.1.36",
+  "version": "0.1.38",
   "type": "module",
   "repository": {
     "type": "git",

package/src/plugin.js

@@ -465,12 +465,17 @@ export function TSRXPlugin(config) {
 				return !!node && node.metadata?.templateMode !== 'template';
 			}
 
-			#isStyleOpeningTagStart() {
+			/**
+			 * Whether the `<` token at `this.start` opens the given raw-text element
+			 * (`<style` or `<script` followed by `>`, `/`, or whitespace).
+			 * @param {string} tagName
+			 */
+			#isRawTextOpeningTagStart(tagName) {
 				let index = this.start + 1;
 				if (this.input.charCodeAt(index) === CharCode.slash) return false;
-				if (this.input.slice(index, index + 'style'.length) !== 'style') return false;
+				if (this.input.slice(index, index + tagName.length) !== tagName) return false;
 
-				const after = this.input.charCodeAt(index + 'style'.length);
+				const after = this.input.charCodeAt(index + tagName.length);
 				return (
 					after === CharCode.greaterThan ||
 					after === CharCode.slash ||
@@ -2051,34 +2056,22 @@ export function TSRXPlugin(config) {
 			}
 
 			/**
+			 * Read a raw-text element body: capture everything between the opening `>`
+			 * and the literal `</tagName>` verbatim (never as template markup),
+			 * synthesize the closing element, and restore the tokenizer state past it.
+			 * Shared by `<style>` and `<script>`.
+			 *
 			 * @param {ESTreeJSX.JSXOpeningElement & AST.NodeWithLocation} open
-			 * @param {AST.JSXStyleElement} node
-			 * @param {boolean} insideHead
+			 * @param {AST.JSXStyleElement | AST.TSRXJSXElement} node
+			 * @param {'style' | 'script'} tagName
+			 * @returns {string} The raw body text
 			 */
-			#parseStyleElement(open, node, insideHead) {
-				const filename = this.#filename;
-				if (!filename) {
-					throw new Error(
-						'<style> elements require a filename: pass one to parse so style scope hashes are unique per file.',
-					);
-				}
+			#parseRawTextElement(open, node, tagName) {
+				const closeTag = `</${tagName}>`;
 				const contentStart = open.end;
 				const input = this.input.slice(contentStart);
-				const relativeCloseStart = input.indexOf('</style>');
+				const relativeCloseStart = input.indexOf(closeTag);
 				const content = relativeCloseStart === -1 ? input : input.slice(0, relativeCloseStart);
-				const parsedCss = parse_style(
-					content,
-					{
-						filename,
-						line: open.loc.start.line,
-						column: open.loc.start.column,
-					},
-					{ loose: this.#loose },
-				);
-
-				if (!insideHead) {
-					node.metadata.styleScopeHash = parsedCss.hash;
-				}
 
 				const newLines = content.match(regex_newline_characters)?.length;
 				if (newLines) {
@@ -2091,7 +2084,7 @@ export function TSRXPlugin(config) {
 					const closingLineInfo = acorn.getLineInfo(this.input, closingStart);
 					const closingStartLoc = new acorn.Position(closingLineInfo.line, closingLineInfo.column);
 					const nameStart = closingStart + 2;
-					const nameEnd = nameStart + 'style'.length;
+					const nameEnd = nameStart + tagName.length;
 					const nameStartInfo = acorn.getLineInfo(this.input, nameStart);
 					const nameEndInfo = acorn.getLineInfo(this.input, nameEnd);
 					const name = /** @type {ESTreeJSX.JSXIdentifier} */ (
@@ -2100,14 +2093,14 @@ export function TSRXPlugin(config) {
 							new acorn.Position(nameStartInfo.line, nameStartInfo.column),
 						)
 					);
-					name.name = 'style';
+					name.name = tagName;
 					this.finishNodeAt(
 						name,
 						'JSXIdentifier',
 						nameEnd,
 						new acorn.Position(nameEndInfo.line, nameEndInfo.column),
 					);
-					const closingEnd = closingStart + '</style>'.length;
+					const closingEnd = closingStart + closeTag.length;
 					const closingEndInfo = acorn.getLineInfo(this.input, closingEnd);
 					const closingElement =
 						/** @type {ESTreeJSX.TSRXJSXClosingElement & AST.NodeWithLocation} */ (
@@ -2131,8 +2124,8 @@ export function TSRXPlugin(config) {
 					this.curLine = closingEndInfo.line;
 					this.lineStart = closingEnd - closingEndInfo.column;
 					if (insideTemplate && relativeCloseStart === 0) {
-						// Acorn has already tokenized the adjacent </style>; TSRX synthesizes
-						// that close manually, so drop the stale style tag context.
+						// Acorn has already tokenized the adjacent closing tag; TSRX
+						// synthesizes that close manually, so drop the stale tag context.
 						if (this.curContext() === tstc.tc_oTag) {
 							this.context.pop();
 						}
@@ -2153,15 +2146,85 @@ export function TSRXPlugin(config) {
 				} else {
 					this.#report_broken_markup_error(
 						open.end,
-						"Unclosed tag '<style>'. Expected '</style>' before end of template.",
+						`Unclosed tag '<${tagName}>'. Expected '${closeTag}' before end of template.`,
 					);
 					node.unclosed = true;
 				}
 
+				return content;
+			}
+
+			/**
+			 * @param {ESTreeJSX.JSXOpeningElement & AST.NodeWithLocation} open
+			 * @param {AST.JSXStyleElement} node
+			 * @param {boolean} insideHead
+			 */
+			#parseStyleElement(open, node, insideHead) {
+				const filename = this.#filename;
+				if (!filename) {
+					throw new Error(
+						'<style> elements require a filename: pass one to parse so style scope hashes are unique per file.',
+					);
+				}
+				const content = this.#parseRawTextElement(open, node, 'style');
+				const parsedCss = parse_style(
+					content,
+					{
+						filename,
+						line: open.loc.start.line,
+						column: open.loc.start.column,
+					},
+					{ loose: this.#loose },
+				);
+
+				if (!insideHead) {
+					node.metadata.styleScopeHash = parsedCss.hash;
+				}
+
 				node.css = content;
 				node.children = [parsedCss];
 			}
 
+			/**
+			 * Parse a `<script>` element as a raw-text element, exactly like `<style>`:
+			 * the body is captured verbatim as `node.content`, letting authors write real
+			 * JS/TS (with `<`, `{`, `}`) and letting the editor treat the body as an
+			 * embedded TypeScript/JavaScript document.
+			 *
+			 * Mirroring `JSXStyleElement` (raw `css` string + parsed children), the body
+			 * is exposed twice: verbatim on `content`, and as a single `JSXText` child so
+			 * generic element paths (factory targets, static hoisting, printers) emit the
+			 * body without knowing about raw-text elements. Consumers that handle
+			 * `content` directly (the Ripple transforms, the prettier plugin) must skip
+			 * the children instead of emitting both.
+			 *
+			 * @param {ESTreeJSX.JSXOpeningElement & AST.NodeWithLocation} open
+			 * @param {AST.TSRXJSXElement} node
+			 */
+			#parseScriptElement(open, node) {
+				const content = this.#parseRawTextElement(open, node, 'script');
+				node.content = content;
+				node.children = [];
+
+				if (content.length > 0) {
+					const bodyStartInfo = acorn.getLineInfo(this.input, open.end);
+					const text = /** @type {ESTreeJSX.JSXText} */ (
+						this.startNodeAt(open.end, new acorn.Position(bodyStartInfo.line, bodyStartInfo.column))
+					);
+					text.value = content;
+					text.raw = content;
+					const bodyEnd = open.end + content.length;
+					const bodyEndInfo = acorn.getLineInfo(this.input, bodyEnd);
+					this.finishNodeAt(
+						text,
+						'JSXText',
+						bodyEnd,
+						new acorn.Position(bodyEndInfo.line, bodyEndInfo.column),
+					);
+					node.children = [/** @type {AST.Node} */ (text)];
+				}
+			}
+
 			#parseNativeTemplateExpressionContainer() {
 				const allow_trailing_semicolon = this.#allowExpressionContainerTrailingSemicolon;
 				this.#allowExpressionContainerTrailingSemicolon = true;
@@ -2888,9 +2951,18 @@ export function TSRXPlugin(config) {
 					this.exprAllowed = false;
 				}
 
+				// A `/` or `#` in template TEXT position joins the text run as a
+				// literal character (`<div>5/2</div>`, `<div>#tag</div>`). This must
+				// not fire in the JS positions that can sit under a template element
+				// on the path: inside a `{ … }` expression container (an attribute or
+				// child expression — `<rect x={a / 2}/>`, `{this.#x}`) or inside a
+				// control-flow directive header (`@if (a / 2 > 1)`), where `/` is
+				// division and `#` is a private-field access.
 				if (
 					(code === CharCode.numberSign || code === CharCode.slash) &&
 					this.#functionBodyDepth === 0 &&
+					this.#jsxExpressionContainerDepth === 0 &&
+					!this.#readingJSXControlFlowHeader &&
 					this.#isNativeTemplateNode(this.#path.at(-1)) &&
 					!(
 						code === CharCode.slash &&
@@ -4161,7 +4233,7 @@ export function TSRXPlugin(config) {
 			 */
 			jsx_parseElement() {
 				if (this.#forceScriptJSXElementDepth > 0 || this.#isInsideNativeTemplateScriptSection()) {
-					if (this.#isStyleOpeningTagStart()) {
+					if (this.#isRawTextOpeningTagStart('style') || this.#isRawTextOpeningTagStart('script')) {
 						this.next();
 						return /** @type {ESTreeJSX.JSXElement | AST.JSXStyleElement} */ (
 							/** @type {unknown} */ (this.parseElement())
@@ -4294,6 +4366,7 @@ export function TSRXPlugin(config) {
 				const tag_name = open.name ? this.getElementName(open.name) : null;
 				const is_dynamic = this.#isDynamicJSXElementName(open.name);
 				const is_style = tag_name === 'style';
+				const is_script = tag_name === 'script';
 				const inside_head = this.#path.findLast((n) => this.#isNativeElementNamed(n, 'head'));
 
 				// Fragments (<>) produce JSXOpeningFragment with no `name` property
@@ -4348,6 +4421,9 @@ export function TSRXPlugin(config) {
 				} else if (is_style) {
 					this.#parseStyleElement(open, /** @type {AST.JSXStyleElement} */ (node), !!inside_head);
 					this.#path.pop();
+				} else if (is_script) {
+					this.#parseScriptElement(open, /** @type {AST.TSRXJSXElement} */ (node));
+					this.#path.pop();
 				} else {
 					this.#parseNativeTemplateBody(node, /** @type {AST.Node[]} */ (node.children), {
 						enterScope: true,
@@ -4391,7 +4467,7 @@ export function TSRXPlugin(config) {
 					}
 				}
 
-				if (is_style && /** @type {AST.JSXStyleElement} */ (node).closingElement) {
+				if ((is_style || is_script) && /** @type {AST.JSXStyleElement} */ (node).closingElement) {
 					const closing = /** @type {ESTreeJSX.JSXClosingElement & AST.NodeWithLocation} */ (
 						/** @type {AST.JSXStyleElement} */ (node).closingElement
 					);

package/src/transform/jsx/index.js

@@ -3634,7 +3634,16 @@ function to_jsx_element(
 		transform_context,
 		node,
 	);
-	const walked_children = node.children || [];
+	let walked_children = node.children || [];
+	// A raw-text `<script>` body (mirrored by the parser as a JSXText child of
+	// `node.content`) must not appear in the type-only editor TSX: raw JS/TS
+	// (`{`, `<`) doesn't lex as JSX text there and would surface bogus syntactic
+	// diagnostics. The embedded TS document built from `scriptMappings` covers
+	// the body in the editor; runtime output keeps the text child.
+	if (transform_context.typeOnly && typeof node.content === 'string') {
+		walked_children = [];
+		raw_children = [];
+	}
 	let selfClosing = !!source_opening.selfClosing;
 	let children;
 	const child_transform = transform_context.platform.hooks?.transformElementChildren?.(

package/src/transform/segments.js

@@ -22,6 +22,12 @@
 	content: string,
 	id: string,
 }} CssSourceRegion;
+@typedef {{
+	start: number,
+	end: number,
+	content: string,
+	id: string,
+}} ScriptSourceRegion;
 @typedef {{
 	source: string | null | undefined;
 	generated: string;
@@ -130,12 +136,40 @@ function get_style_region_id(hash, fallback) {
  * @param {{
  * 	regions: CssSourceRegion[],
  * 	css_element_info: CssElementInfo,
+ * 	script_regions: ScriptSourceRegion[],
  * }} param2
  * @returns {void}
  */
-function visit_source_ast(ast, src_line_offsets, { regions, css_element_info }) {
+function visit_source_ast(ast, src_line_offsets, { regions, css_element_info, script_regions }) {
 	let region_id = 0;
+	let script_region_id = 0;
 	walk(ast, null, {
+		JSXElement(node, context) {
+			// Raw-text `<script>` elements carry their body verbatim on `node.content`
+			// (see the parser's `#parseScriptElement`). Expose that body as an embedded
+			// TypeScript region so the editor can offer intellisense inside it,
+			// mirroring how `<style>` bodies become embedded CSS regions below. The
+			// editor treats every script body as TypeScript (a superset of JS, matching
+			// the TextMate/tree-sitter/prettier treatment); the `type` attribute only
+			// matters to the runtime transforms, which read it off the AST.
+			const element_name = node.openingElement?.name;
+			const content = node.content;
+			if (
+				element_name?.type === 'JSXIdentifier' &&
+				element_name.name === 'script' &&
+				typeof content === 'string'
+			) {
+				const start = /** @type {AST.NodeWithLocation} */ (node.openingElement).end;
+				script_regions.push({
+					start,
+					end: start + content.length,
+					content,
+					id: `script_${script_region_id++}`,
+				});
+			}
+
+			context.next();
+		},
 		JSXStyleElement(node, context) {
 			if (node.css) {
 				const openLoc = /** @type {ESTreeJSX.JSXOpeningElement & AST.NodeWithLocation} */ (
@@ -370,10 +404,13 @@ export function convert_source_map_to_mappings(
 	const css_regions = [];
 	/** @type {CssElementInfo} */
 	const css_element_info = new Map();
+	/** @type {ScriptSourceRegion[]} */
+	const script_regions = [];
 
 	visit_source_ast(ast_from_source, src_line_offsets, {
 		regions: css_regions,
 		css_element_info,
+		script_regions,
 	});
 
 	/** @type {Map<string, number>} */
@@ -2320,10 +2357,30 @@ export function convert_source_map_to_mappings(
 		});
 	}
 
+	/** @type {CodeMapping[]} */
+	const scriptMappings = [];
+	for (let i = 0; i < script_regions.length; i++) {
+		const region = script_regions[i];
+		scriptMappings.push({
+			sourceOffsets: [region.start],
+			generatedOffsets: [0],
+			lengths: [region.content.length],
+			generatedLengths: [region.content.length],
+			data: {
+				...mapping_data,
+				customData: {
+					embeddedId: region.id,
+					content: region.content,
+				},
+			},
+		});
+	}
+
 	return {
 		code: generated_code,
 		mappings,
 		cssMappings,
+		scriptMappings,
 	};
 }
 

package/types/index.d.ts

@@ -327,6 +327,15 @@ declare module 'estree' {
 		isDynamic?: boolean;
 		/** Loose-mode recovery: the element was never closed. */
 		unclosed?: boolean;
+		/**
+		 * Raw-text `<script>` body captured verbatim by the parser's
+		 * `#parseScriptElement` (analogous to {@link JSXStyleElement.css}). Present only
+		 * on `<script>` elements that have a body. The parser also mirrors the body as
+		 * a single `JSXText` child so generic element consumers emit it; consumers that
+		 * handle `content` directly (the Ripple transforms, the prettier plugin, the
+		 * type-only editor output) skip the children instead of emitting both.
+		 */
+		content?: string;
 		/**
 		 * The parser emits {@link TSRXJSXChild}; the compile pre-passes lower
 		 * template children in place (retyped directives, code-block IIFEs,
@@ -1687,6 +1696,14 @@ export interface VolarMappingsResult {
 	code: string;
 	mappings: CodeMapping[];
 	cssMappings: CodeMapping[];
+	/**
+	 * Embedded raw-text `<script>` body regions, each mapped to its source range so
+	 * the editor can treat the body as an embedded TypeScript document (TS is a
+	 * superset of JS, so every body is treated as TypeScript regardless of the
+	 * `type` attribute — that attribute only matters to the runtime transforms).
+	 * Mirrors {@link cssMappings} for `<style>` bodies.
+	 */
+	scriptMappings: CodeMapping[];
 	errors: CompileError[];
 	sourceAst: AST.Program;
 }