ripple 0.2.189 → 0.2.190

package/src/compiler/phases/3-transform/client/index.js

@@ -8,7 +8,6 @@
 	VisitorClientContext,
 	TransformClientState,
 	ScopeInterface,
-	Visitor,
 	Visitors
 }	from '#compiler';
  */
@@ -52,7 +51,12 @@ import {
 	determine_namespace_for_children,
 	index_to_key,
 } from '../../../utils.js';
-import { obfuscate_imported } from '../../../import-utils.js';
+import {
+	CSS_HASH_IDENTIFIER,
+	STYLE_IDENTIFIER,
+	SERVER_IDENTIFIER,
+	obfuscate_identifier,
+} from '../../../identifier-utils.js';
 import is_reference from 'is-reference';
 import { object } from '../../../../utils/ast.js';
 import { render_stylesheets } from '../stylesheet.js';
@@ -316,7 +320,7 @@ function visit_title_element(node, context) {
  * @returns {string}
  */
 function set_hidden_import_from_ripple(name, context) {
-	name = obfuscate_imported(name);
+	name = obfuscate_identifier(name);
 	if (!context.state.imports.has(`import { ${name} } from 'ripple/compiler/internal/import'`)) {
 		context.state.imports.add(`import { ${name} } from 'ripple/compiler/internal/import'`);
 	}
@@ -359,7 +363,7 @@ const visitors = {
 							name: capitalized_name,
 							metadata: {
 								...node.metadata,
-								original_name: node.name,
+								source_name: node.name,
 								is_capitalized: true,
 							},
 						};
@@ -395,12 +399,44 @@ const visitors = {
 	},
 
 	ServerIdentifier(node, context) {
-		return b.id('_$_server_$_');
+		const id = b.id(SERVER_IDENTIFIER);
+		id.metadata.source_name = '#server';
+		id.loc = node.loc;
+		return id;
+	},
+
+	StyleIdentifier(node, context) {
+		const id = b.id(STYLE_IDENTIFIER);
+		id.metadata.source_name = '#style';
+		id.loc = node.loc;
+		return id;
 	},
 
-	/** @type {Visitor<AST.ImportDeclaration, TransformClientState, AST.Node>} */
 	ImportDeclaration(node, context) {
-		if (!context.state.to_ts && node.importKind === 'type') {
+		const { state } = context;
+
+		if (!state.to_ts && node.importKind === 'type') {
+			return b.empty;
+		}
+
+		if (state.to_ts && state.inside_server_block) {
+			/** @type {AST.VariableDeclaration[]} */
+			const locals = state.server_block_locals;
+			for (const spec of node.specifiers) {
+				const original_name = spec.local.name;
+				const name = obfuscate_identifier(original_name);
+				if (
+					spec.type !== 'ImportSpecifier' ||
+					(spec.imported && /** @type {AST.Identifier} */ (spec.imported).name !== spec.local.name)
+				) {
+					spec.local.name = name;
+				} else {
+					spec.local = b.id(name);
+				}
+				spec.local.metadata.source_name = original_name;
+				locals.push(b.const(original_name, b.id(name)));
+			}
+			state.imports.add(node);
 			return b.empty;
 		}
 
@@ -408,8 +444,7 @@ const visitors = {
 			...node,
 			specifiers: node.specifiers
 				.filter(
-					(spec) =>
-						context.state.to_ts || /** @type {AST.ImportSpecifier} */ (spec).importKind !== 'type',
+					(spec) => state.to_ts || /** @type {AST.ImportSpecifier} */ (spec).importKind !== 'type',
 				)
 				.map((spec) => context.visit(spec)),
 		});
@@ -422,7 +457,6 @@ const visitors = {
 		return context.visit(/** @type {AST.Expression} */ (node.expression));
 	},
 
-	/** @type {Visitor<AST.CallExpression, TransformClientState, AST.Node>} */
 	CallExpression(node, context) {
 		if (!context.state.to_ts) {
 			delete node.typeArguments;
@@ -543,7 +577,7 @@ const visitors = {
 				const calleeId = b.id(alias);
 				calleeId.loc = callee.loc;
 				calleeId.metadata = {
-					tracked_shorthand: callee.type === 'TrackedMapExpression' ? '#Map' : '#Set',
+					source_name: callee.type === 'TrackedMapExpression' ? '#Map' : '#Set',
 					path: [...context.path],
 				};
 				/** @type {AST.NewExpression} */
@@ -648,7 +682,6 @@ const visitors = {
 		return b.call('_$_.get', /** @type {AST.Expression} */ (context.visit(node.argument)));
 	},
 
-	/** @type {Visitor<AST.MemberExpression, TransformClientState, AST.Node>} */
 	MemberExpression(node, context) {
 		if (context.state.metadata?.tracking === false) {
 			context.state.metadata.tracking = true;
@@ -712,7 +745,6 @@ const visitors = {
 		return context.next();
 	},
 
-	/** @type {Visitor<AST.VariableDeclarator, TransformClientState, AST.Node>} */
 	VariableDeclarator(node, context) {
 		// In TypeScript mode, capitalize identifiers that are used as dynamic components
 		if (context.state.to_ts) {
@@ -732,7 +764,7 @@ const visitors = {
 							name: capitalized_name,
 							metadata: {
 								...pattern.metadata,
-								original_name: pattern.name,
+								source_name: pattern.name,
 								is_capitalized: true,
 							},
 						};
@@ -1588,6 +1620,37 @@ const visitors = {
 		let prop_statements;
 		const metadata = { await: false };
 
+		/** @type {AST.Statement[]} */
+		const style_statements = [];
+
+		/** @type {'const' | 'var'} */
+		let var_method_type = 'var';
+		if (context.state.to_ts) {
+			var_method_type = 'const';
+		}
+
+		if (node.css !== null && node.metadata.styleIdentifierPresent) {
+			/** @type {AST.Property[]} */
+			const properties = [];
+			if (node.metadata.topScopedClasses && node.metadata.topScopedClasses.size > 0) {
+				const hash = b[var_method_type](b.id(CSS_HASH_IDENTIFIER), b.literal(node.css.hash));
+				style_statements.push(hash);
+				for (const [className] of node.metadata.topScopedClasses) {
+					properties.push(
+						b.prop(
+							'init',
+							b.key(className),
+							b.template(
+								[b.quasi('', false), b.quasi(` ${className}`, true)],
+								[b.id(CSS_HASH_IDENTIFIER)],
+							),
+						),
+					);
+				}
+			}
+			style_statements.push(b[var_method_type](b.id(STYLE_IDENTIFIER), b.object(properties)));
+		}
+
 		if (context.state.to_ts) {
 			const body_statements = [
 				...transform_body(node.body, {
@@ -1602,7 +1665,7 @@ const visitors = {
 					(param) =>
 						/** @type {AST.Pattern} */ (context.visit(param, { ...context.state, metadata })),
 				),
-				b.block(body_statements),
+				b.block([...style_statements, ...body_statements]),
 			);
 			// Mark that this function was originally a component
 			func.metadata = /** @type {AST.FunctionExpression['metadata']} */ ({
@@ -1645,6 +1708,7 @@ const visitors = {
 				? [b.id('__anchor'), props, b.id('__block')]
 				: [b.id('__anchor'), b.id('_'), b.id('__block')],
 			b.block([
+				...style_statements,
 				...(prop_statements ?? []),
 				...(metadata.await
 					? [b.stmt(b.call('_$_.async', b.thunk(b.block(body_statements), true)))]
@@ -1998,6 +2062,17 @@ const visitors = {
 			return b.empty;
 		}
 
+		if (context.state.to_ts && context.state.inside_server_block) {
+			const declaration = node.declaration;
+
+			if (declaration && declaration.type === 'FunctionDeclaration') {
+				return context.visit(declaration);
+			} else {
+				// TODO
+				throw new Error('Not implemented');
+			}
+		}
+
 		return context.next();
 	},
 
@@ -2101,15 +2176,64 @@ const visitors = {
 	},
 
 	ServerBlock(node, context) {
+		if (context.state.to_ts) {
+			// Convert Imports inside ServerBlock to local variables
+			// ImportDeclaration() visitor will add imports to the top of the module
+			/** @type {AST.VariableDeclaration[]} */
+			const server_block_locals = [];
+
+			const block = /** @type {AST.BlockStatement} */ (
+				context.visit(node.body, {
+					...context.state,
+					inside_server_block: true,
+					server_block_locals,
+				})
+			);
+
+			/** @type {AST.Property[]} */
+			const properties = [];
+
+			// Extract and preserve original function declarations
+			for (const stmt of node.body.body) {
+				if (
+					stmt.type === 'ExportNamedDeclaration' &&
+					stmt.declaration?.type === 'FunctionDeclaration' &&
+					stmt.declaration.id
+				) {
+					// create new nodes to avoid same node.loc issue
+					// that would result in double definitions
+					const id = b.id(stmt.declaration.id.name);
+					properties.push(b.prop('init', id, id, false, true));
+				}
+			}
+
+			const value = b.call(
+				b.thunk(b.block([...server_block_locals, ...block.body, b.return(b.object(properties))])),
+			);
+			value.loc = node.loc;
+
+			const server_identifier = b.id(SERVER_IDENTIFIER);
+			server_identifier.loc = node.loc;
+			// Add source_name to properly map longer generated back to '#server'
+			server_identifier.metadata.source_name = '#server';
+
+			const server_const = b.const(server_identifier, value);
+			server_const.loc = node.loc;
+
+			return server_const;
+		}
+
 		const exports = node.metadata.exports;
 
-		if (exports.length === 0) {
+		if (!context.state.serverIdentifierPresent) {
+			// no point printing the client-side block if #server.func is not used
 			return b.empty;
 		}
+
 		const file_path = context.state.filename;
 
-		return b.const(
-			'_$_server_$_',
+		return b.var(
+			SERVER_IDENTIFIER,
 			b.object(
 				/** @type {AST.ServerBlock['metadata']['exports']} */ (exports).map((name) => {
 					const func_path = file_path + '#' + name;
@@ -2130,7 +2254,6 @@ const visitors = {
 		);
 	},
 
-	/** @type {Visitor<AST.Program, TransformClientState, AST.Node>} */
 	Program(node, context) {
 		/** @type {Array<AST.Statement | AST.Directive | AST.ModuleDeclaration>} */
 		const statements = [];
@@ -2318,9 +2441,9 @@ function transform_ts_child(node, context) {
 					end: node.id.loc.end,
 				};
 				// Add metadata if this was capitalized
-				if (node.metadata?.ts_name && node.metadata?.original_name) {
+				if (node.metadata?.ts_name && node.metadata?.source_name) {
 					opening_name_element.metadata = {
-						original_name: node.metadata.original_name,
+						source_name: node.metadata.source_name,
 						is_capitalized: true,
 						path: [...node.metadata.path],
 					};
@@ -2357,14 +2480,14 @@ function transform_ts_child(node, context) {
 							column:
 								closing_tag_start +
 								3 +
-								(node.metadata?.original_name?.length ||
+								(node.metadata?.source_name?.length ||
 									/** @type {string} */ (type_expression).length),
 						},
 					};
 					// Add metadata if this was capitalized
-					if (node.metadata?.ts_name && node.metadata?.original_name) {
+					if (node.metadata?.ts_name && node.metadata?.source_name) {
 						closing_name_element.metadata = {
-							original_name: node.metadata.original_name,
+							source_name: node.metadata.source_name,
 							is_capitalized: true,
 							path: [...node.metadata.path],
 						};
@@ -2399,8 +2522,7 @@ function transform_ts_child(node, context) {
 			// - '<' is at node.loc.end.column - type_expression.length - 3
 			// - '>' is at node.loc.end.column - 1
 			const tag_name_length = node.id.tracked
-				? (node.metadata?.original_name?.length || /** @type {string} */ (type_expression).length) +
-					1 // +1 for '@'
+				? (node.metadata?.source_name?.length || /** @type {string} */ (type_expression).length) + 1 // +1 for '@'
 				: /** @type {string} */ (type_expression).length;
 
 			jsxElement.closingElement.loc = {
@@ -2416,10 +2538,10 @@ function transform_ts_child(node, context) {
 		}
 
 		// Preserve metadata from Element node for mapping purposes
-		if (node.metadata && (node.metadata.ts_name || node.metadata.original_name)) {
+		if (node.metadata && (node.metadata.ts_name || node.metadata.source_name)) {
 			jsxElement.metadata = {
 				ts_name: node.metadata.ts_name,
-				original_name: node.metadata.original_name,
+				source_name: node.metadata.source_name,
 				path: [...node.metadata.path],
 			};
 		}
@@ -2928,13 +3050,17 @@ function create_tsx_with_typescript_support() {
 	 * @param {TransformClientContext} context
 	 */
 	const handle_function = (node, context) => {
+		const loc = /** @type {AST.SourceLocation} */ (node.loc);
+
 		if (node.async) {
+			context.location(loc.start.line, loc.start.column);
 			context.write('async ');
+			context.location(loc.start.line, loc.start.column + 6);
+			context.write('function');
+		} else {
+			context.write('function', node);
 		}
-		// Write 'function' keyword with node location for source mapping
-		// This creates a mapping from the source position (which may have 'component')
-		// to the generated 'function' keyword
-		context.write('function', node);
+
 		if (node.generator) {
 			context.write('*');
 		}
@@ -3461,6 +3587,9 @@ export function transform_client(filename, source, analysis, to_ts, minify_css)
 		flush_node: null,
 		scope: analysis.scope,
 		scopes: analysis.scopes,
+		inside_server_block: false,
+		serverIdentifierPresent: analysis.metadata.serverIdentifierPresent,
+		server_block_locals: [],
 		stylesheets: [],
 		to_ts,
 		filename,
@@ -3482,7 +3611,11 @@ export function transform_client(filename, source, analysis, to_ts, minify_css)
 	}
 
 	for (const import_node of state.imports) {
-		program.body.unshift(b.stmt(b.id(import_node)));
+		if (typeof import_node === 'string') {
+			program.body.unshift(b.stmt(b.id(import_node)));
+		} else {
+			program.body.unshift(import_node);
+		}
 	}
 
 	if (state.events.size > 0) {

package/src/compiler/phases/3-transform/segments.js

@@ -354,18 +354,11 @@ export function convert_source_map_to_mappings(
 				// Only create mappings for identifiers with location info (from source)
 				// Synthesized identifiers (created by builders) don't have .loc and are skipped
 				if (node.name && node.loc) {
-					// Check if this identifier has tracked_shorthand metadata (e.g., TrackedMap -> #Map)
-					if (node.metadata?.tracked_shorthand) {
+					// Check if this identifier was changed in metadata (e.g., #Map -> TrackedMap)
+					// Or if it was capitalized during transformation
+					if (node.metadata?.source_name) {
 						tokens.push({
-							source: node.metadata.tracked_shorthand,
-							generated: node.name,
-							loc: node.loc,
-						});
-					} else if (node.metadata?.is_capitalized) {
-						// This identifier was capitalized during transformation
-						// Map the original lowercase name to the capitalized generated name
-						tokens.push({
-							source: node.metadata.original_name,
+							source: node.metadata.source_name,
 							generated: node.name,
 							loc: node.loc,
 						});
@@ -391,7 +384,7 @@ export function convert_source_map_to_mappings(
 				if (node.loc && node.name) {
 					if (node.metadata?.is_capitalized) {
 						tokens.push({
-							source: node.metadata.original_name,
+							source: node.metadata.source_name,
 							generated: node.name,
 							loc: node.loc,
 						});
@@ -657,7 +650,7 @@ export function convert_source_map_to_mappings(
 					);
 					if (closingNameNode.metadata?.is_capitalized) {
 						tokens.push({
-							source: closingNameNode.metadata.original_name,
+							source: closingNameNode.metadata.source_name,
 							generated: closingNameNode.name,
 							loc: closingNameNode.loc,
 						});
@@ -679,16 +672,35 @@ export function convert_source_map_to_mappings(
 				// Add function/component keyword token
 				if (node.type === 'FunctionDeclaration' || node.type === 'FunctionExpression') {
 					const node_fn = /** @type (typeof node) & AST.NodeWithLocation */ (node);
-					const source_keyword = node.metadata?.was_component ? 'component' : 'function';
-					// Add token for the keyword - esrap already mapped it via context.write('function', node)
+					const source_func_keyword = node.metadata?.was_component ? 'component' : 'function';
+					let start_col = node_fn.loc.start.column;
+					const async_keyword = 'async';
+
+					// We explicitly mapped async and function in esrap
+					if (node_fn.async) {
+						tokens.push({
+							source: async_keyword,
+							generated: async_keyword,
+							loc: {
+								start: { line: node_fn.loc.start.line, column: start_col },
+								end: {
+									line: node_fn.loc.start.line,
+									column: start_col + async_keyword.length,
+								},
+							},
+						});
+
+						start_col += async_keyword.length + 1; // +1 for space
+					}
+
 					tokens.push({
-						source: source_keyword,
+						source: source_func_keyword,
 						generated: 'function',
 						loc: {
-							start: { line: node_fn.loc.start.line, column: node_fn.loc.start.column },
+							start: { line: node_fn.loc.start.line, column: start_col },
 							end: {
 								line: node_fn.loc.start.line,
-								column: node_fn.loc.start.column + source_keyword.length,
+								column: start_col + source_func_keyword.length,
 							},
 						},
 					});
@@ -887,7 +899,27 @@ export function convert_source_map_to_mappings(
 				if (node.object) {
 					visit(node.object);
 				}
-				if (!node.computed && node.property) {
+				if (node.computed && node.property && node.loc) {
+					// Need to cover the whole computed property ['something'] or obj[expr]:
+					// Add a mapping for the closing bracket ']'
+					// ESRap sourcemap includes the opening bracket '[' in the property loc,
+					// but for the closing bracket it also includes what comes after it
+					// so we never get the mapping that covers just the computed property.
+					tokens.push({
+						source: ']',
+						generated: ']',
+						loc: {
+							start: {
+								line: node.loc.end.line,
+								column: node.loc.end.column - 1,
+							},
+							end: node.loc.end,
+						},
+					});
+
+					// Also visit the property for its own mapping
+					visit(node.property);
+				} else if (!node.computed && node.property) {
 					visit(node.property);
 				}
 				return;

package/src/compiler/phases/3-transform/server/index.js

@@ -30,6 +30,11 @@ import { escape } from '../../../../utils/escaping.js';
 import { is_event_attribute } from '../../../../utils/events.js';
 import { render_stylesheets } from '../stylesheet.js';
 import { createHash } from 'node:crypto';
+import {
+	STYLE_IDENTIFIER,
+	CSS_HASH_IDENTIFIER,
+	obfuscate_identifier,
+} from '../../../identifier-utils.js';
 
 /**
  * @param {AST.Node[]} children
@@ -127,22 +132,47 @@ const visitors = {
 		}
 
 		const metadata = { await: false };
-		const body_statements = [
+
+		/** @type {AST.Statement[]} */
+		const body_statements = [];
+
+		if (node.css !== null) {
+			const hash_id = b.id(CSS_HASH_IDENTIFIER);
+			const hash = b.var(hash_id, b.literal(node.css.hash));
+			context.state.stylesheets.push(node.css);
+
+			// Register CSS hash during rendering
+			body_statements.push(
+				hash,
+				b.stmt(b.call(b.member(b.id('__output'), b.id('register_css')), hash_id)),
+			);
+
+			if (node.metadata.styleIdentifierPresent) {
+				/** @type {AST.Property[]} */
+				const properties = [];
+				if (node.metadata.topScopedClasses && node.metadata.topScopedClasses.size > 0) {
+					for (const [className] of node.metadata.topScopedClasses) {
+						properties.push(
+							b.prop(
+								'init',
+								b.key(className),
+								b.template([b.quasi('', false), b.quasi(` ${className}`, true)], [hash_id]),
+							),
+						);
+					}
+				}
+				body_statements.push(b.var(b.id(STYLE_IDENTIFIER), b.object(properties)));
+			}
+		}
+
+		body_statements.push(
 			b.stmt(b.call('_$_.push_component')),
 			...transform_body(node.body, {
 				...context,
 				state: { ...context.state, component: node, metadata },
 			}),
 			b.stmt(b.call('_$_.pop_component')),
-		];
-
-		if (node.css !== null && node.css) {
-			context.state.stylesheets.push(node.css);
-			// Register CSS hash during rendering
-			body_statements.unshift(
-				b.stmt(b.call(b.member(b.id('__output'), b.id('register_css')), b.literal(node.css.hash))),
-			);
-		}
+		);
 
 		let component_fn = b.function(
 			node.id,
@@ -617,6 +647,7 @@ const visitors = {
 			}
 		}
 	},
+
 	SwitchStatement(node, context) {
 		if (!is_inside_component(context)) {
 			return context.next();
@@ -811,9 +842,31 @@ const visitors = {
 		return b.id('_$_server_$_');
 	},
 
-	/** @type {Visitor<AST.ImportDeclaration, TransformServerState, AST.Node>} */
+	StyleIdentifier(node, context) {
+		return b.id(STYLE_IDENTIFIER);
+	},
+
 	ImportDeclaration(node, context) {
-		if (!context.state.to_ts && node.importKind === 'type') {
+		const { state } = context;
+
+		if (!state.to_ts && node.importKind === 'type') {
+			return b.empty;
+		}
+
+		if (state.inside_server_block) {
+			if (!node.specifiers.length) {
+				return b.empty;
+			}
+
+			/** @type {AST.VariableDeclaration[]} */
+			const locals = state.server_block_locals;
+			for (const spec of node.specifiers) {
+				const original_name = spec.local.name;
+				const name = obfuscate_identifier(original_name);
+				spec.local = b.id(name);
+				locals.push(b.const(original_name, b.id(name)));
+			}
+			state.imports.add(node);
 			return b.empty;
 		}
 
@@ -915,8 +968,7 @@ const visitors = {
 
 	AwaitExpression(node, context) {
 		const { state } = context;
-		state.scope.server_block = true;
-		state.inside_server_block = true;
+
 		if (state.to_ts) {
 			return context.next();
 		}
@@ -1007,13 +1059,27 @@ const visitors = {
 	ServerBlock(node, context) {
 		const exports = node.metadata.exports;
 
+		// Convert Imports inside ServerBlock to local variables
+		// ImportDeclaration() visitor will add imports to the top of the module
+		/** @type {AST.VariableDeclaration[]} */
+		const server_block_locals = [];
+
+		const block = /** @type {AST.BlockStatement} */ (
+			context.visit(node.body, {
+				...context.state,
+				inside_server_block: true,
+				server_block_locals,
+			})
+		);
+
 		if (exports.length === 0) {
-			return context.visit(node.body);
+			return {
+				...block,
+				body: [...server_block_locals, ...block.body],
+			};
 		}
+
 		const file_path = context.state.filename;
-		const block = /** @type {AST.BlockStatement} */ (
-			context.visit(node.body, { ...context.state, inside_server_block: true })
-		);
 		const rpc_modules = globalThis.rpc_modules;
 
 		if (rpc_modules) {
@@ -1032,6 +1098,7 @@ const visitors = {
 					b.thunk(
 						b.block([
 							b.var('_$_server_$_', b.object([])),
+							...server_block_locals,
 							...block.body,
 							b.return(b.id('_$_server_$_')),
 						]),
@@ -1059,9 +1126,11 @@ export function transform_server(filename, source, analysis, minify_css) {
 		init: null,
 		scope: analysis.scope,
 		scopes: analysis.scopes,
+		serverIdentifierPresent: analysis.metadata.serverIdentifierPresent,
 		stylesheets: [],
 		component_metadata,
 		inside_server_block: false,
+		server_block_locals: [],
 		filename,
 		namespace: 'html',
 		// TODO: should we remove all `to_ts` usages we use the client rendering for that?
@@ -1071,7 +1140,7 @@ export function transform_server(filename, source, analysis, minify_css) {
 
 	state.imports.add(`import * as _$_ from 'ripple/internal/server'`);
 
-	const program = walk(analysis.ast, { ...state }, visitors);
+	const program = /** @type {AST.Program} */ (walk(analysis.ast, { ...state }, visitors));
 
 	const css = render_stylesheets(state.stylesheets, minify_css);
 
@@ -1090,7 +1159,11 @@ export function transform_server(filename, source, analysis, minify_css) {
 
 	// Add async property to component functions
 	for (const import_node of state.imports) {
-		/** @type {AST.Program} */ (program).body.unshift(b.stmt(b.id(import_node)));
+		if (typeof import_node === 'string') {
+			program.body.unshift(b.stmt(b.id(import_node)));
+		} else {
+			program.body.unshift(import_node);
+		}
 	}
 
 	const js = print(program, /** @type {Visitors<AST.Node, TransformServerState>} */ (ts()), {