ripple 0.2.198 → 0.2.199

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.198",
+  "version": "0.2.199",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -55,6 +55,10 @@
     "./internal/server": {
       "default": "./src/runtime/internal/server/index.js"
     },
+    "./ssr": {
+      "types": "./types/index.d.ts",
+      "default": "./src/runtime/index-server.js"
+    },
     "./jsx-runtime": {
       "types": "./src/jsx-runtime.d.ts",
       "import": "./src/jsx-runtime.js",
@@ -92,6 +96,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.2.198"
+    "ripple": "0.2.199"
   }
 }

package/src/compiler/comment-utils.js

@@ -11,7 +11,7 @@ export function is_ts_pragma(comment) {
 	if (comment.type !== 'Line') return false;
 
 	const pragmas = ['@ts-ignore', '@ts-expect-error', '@ts-nocheck', '@ts-check'];
-	return pragmas.some((pragma) => comment.value.includes(pragma));
+	return pragmas.some((pragma) => comment.value.trimStart().startsWith(pragma));
 }
 
 /**

package/src/compiler/index.d.ts

@@ -4,7 +4,7 @@ import type {
 	Mapping as VolarMapping,
 } from '@volar/language-core';
 import type { DocumentHighlightKind } from 'vscode-languageserver-types';
-import type { SourceMapMappings } from '@jridgewell/sourcemap-codec';
+import type { RawSourceMap } from 'source-map';
 
 // ============================================================================
 // Compiler API Exports
@@ -18,7 +18,7 @@ export interface CompileResult {
 	/** The generated JavaScript code with source map */
 	js: {
 		code: string;
-		map: SourceMapMappings;
+		map: RawSourceMap;
 	};
 	/** The generated CSS */
 	css: string;

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

@@ -1,7 +1,7 @@
 /**
 @import * as AST from 'estree';
 @import * as ESTreeJSX from 'estree-jsx';
-@import { SourceMapMappings } from '@jridgewell/sourcemap-codec';
+@import { RawSourceMap } from 'source-map';
 @import {
 	AnalysisResult,
 	TransformClientContext,
@@ -330,6 +330,33 @@ function set_hidden_import_from_ripple(name, context) {
 	return name;
 }
 
+/**
+ * @param {TransformClientContext} context
+ * @param {Partial<TransformClientState>} [more_state]
+ * @return TransformClientContext
+ */
+function SetContextForOutsideComponent(context, more_state = {}) {
+	return /** @type {TransformClientContext} */ ({
+		...context,
+		state: SetStateForOutsideComponent(context.state, more_state),
+	});
+}
+
+/**
+ * @param {TransformClientState} state
+ * @param {Partial<TransformClientState>} [more_state]
+ * @return TransformClientState
+ */
+function SetStateForOutsideComponent(state, more_state = {}) {
+	return /** @type {TransformClientState} */ ({
+		...state,
+		...more_state,
+		init: null,
+		update: null,
+		final: null,
+	});
+}
+
 /** @type {Visitors<AST.Node, TransformClientState>} */
 const visitors = {
 	_(node, { next, state, path }) {
@@ -1404,6 +1431,27 @@ const visitors = {
 					}),
 				);
 				state.template?.push(`</${node.id.name}>`);
+
+				// We need to check if any child nodes are dynamic to determine
+				// if we need to pop the hydration stack to the parent node
+				const needs_pop = node.children.some(
+					(child) =>
+						child.type === 'IfStatement' ||
+						child.type === 'TryStatement' ||
+						child.type === 'ForOfStatement' ||
+						child.type === 'SwitchStatement' ||
+						child.type === 'TsxCompat' ||
+						child.type === 'Html' ||
+						(child.type === 'Element' &&
+							(child.id.type !== 'Identifier' || !is_element_dom_element(child))) ||
+						(child.type === 'Text' && child.expression.type !== 'Literal'),
+				);
+
+				if (needs_pop) {
+					const id = state.flush_node?.();
+
+					init.push(b.stmt(b.call('_$_.pop', id)));
+				}
 			}
 
 			update.push(...local_updates);
@@ -1882,7 +1930,7 @@ const visitors = {
 			context.state.template?.push('<!>');
 		}
 
-		const id = context.state.flush_node?.(is_controlled);
+		const id = context.state.flush_node?.(false, is_controlled);
 		const pattern = /** @type {AST.VariableDeclaration} */ (node.left).declarations[0].id;
 		const body_scope = /** @type {ScopeInterface} */ (context.state.scopes.get(node.body));
 
@@ -1916,7 +1964,7 @@ const visitors = {
 	SwitchStatement(node, context) {
 		if (!is_inside_component(context)) {
 			if (context.state.to_ts) {
-				return transform_ts_child(node, context);
+				return transform_ts_child(node, SetContextForOutsideComponent(context));
 			}
 
 			return context.next();
@@ -1991,7 +2039,7 @@ const visitors = {
 	IfStatement(node, context) {
 		if (!is_inside_component(context)) {
 			if (context.state.to_ts) {
-				return transform_ts_child(node, context);
+				return transform_ts_child(node, SetContextForOutsideComponent(context));
 			}
 
 			return context.next();
@@ -2390,7 +2438,7 @@ function transform_ts_child(node, context) {
 					attr.value === null
 						? b.literal(true)
 						: // reset init, update, final to avoid adding attr value to the component body
-							visit(attr.value, { ...state, metadata, init: null, update: null, final: null });
+							visit(attr.value, SetStateForOutsideComponent(state, { metadata }));
 
 				// Handle both regular identifiers and tracked identifiers
 				/** @type {string} */
@@ -2533,7 +2581,12 @@ function transform_ts_child(node, context) {
 			);
 		}
 
-		const result = b.if(/** @type {AST.Expression} */ (visit(node.test)), consequent, alternate);
+		const result = b.if(
+			/** @type {AST.Expression} */ (visit(node.test)),
+			consequent,
+			alternate,
+			/** @type {AST.NodeWithLocation} */ (node),
+		);
 		if (!state.init) {
 			return result;
 		}
@@ -2799,30 +2852,33 @@ function transform_children(children, context) {
 			const current_prev = prev;
 			/** @type {AST.Identifier | null} */
 			let cached;
-			/** @param {boolean} [is_controlled] */
-			const flush_node = (is_controlled) => {
+			/**
+			 * @param {boolean} [is_text]
+			 * @param {boolean} [is_controlled]
+			 * */
+			const flush_node = (is_text, is_controlled) => {
 				if (cached && !is_controlled) {
 					return cached;
 				} else if (current_prev !== null) {
 					const id = get_id(node);
-					state.init?.push(b.var(id, b.call('_$_.sibling', current_prev())));
+					state.init?.push(b.var(id, b.call('_$_.sibling', current_prev(), is_text && b.true)));
 					cached = id;
 					return id;
 				} else if (initial !== null) {
 					if (is_fragment) {
 						const id = get_id(node);
-						state.init?.push(b.var(id, b.call('_$_.child_frag', initial)));
+						state.init?.push(b.var(id, b.call('_$_.first_child_frag', initial, is_text && b.true)));
 						cached = id;
 						return id;
 					}
 					return initial;
 				} else if (state.flush_node !== null) {
 					if (is_controlled) {
-						return state.flush_node?.();
+						return state.flush_node?.(is_text);
 					}
 
 					const id = get_id(node);
-					state.init?.push(b.var(id, b.call('_$_.child', state.flush_node?.())));
+					state.init?.push(b.var(id, b.call('_$_.child', state.flush_node?.(), is_text && b.true)));
 					cached = id;
 					return id;
 				} else {
@@ -2849,7 +2905,7 @@ function transform_children(children, context) {
 			} else if (node.type === 'Html') {
 				context.state.template?.push('<!>');
 
-				const id = flush_node();
+				const id = flush_node(false);
 				state.update?.push({
 					operation: () =>
 						b.stmt(
@@ -2865,7 +2921,7 @@ function transform_children(children, context) {
 			} else if (node.type === 'Text') {
 				if (metadata?.tracking) {
 					state.template?.push(' ');
-					const id = flush_node();
+					const id = flush_node(true);
 					state.update?.push({
 						operation: (key) => b.stmt(b.call('_$_.set_text', id, key)),
 						expression: /** @type {AST.Expression} */ (expression),
@@ -2884,14 +2940,14 @@ function transform_children(children, context) {
 						) {
 							state.template?.push(escape_html(expr.value));
 						} else {
-							const id = flush_node();
+							const id = flush_node(true);
 							state.init?.push(
 								b.var(/** @type {AST.Identifier} */ (id), b.call('_$_.create_text', expr)),
 							);
 							state.final?.push(b.stmt(b.call('_$_.append', b.id('__anchor'), id)));
 						}
 					} else {
-						const id = flush_node();
+						const id = flush_node(true);
 						state.template?.push(' ');
 						// avoid set_text overhead for single text nodes
 						state.init?.push(
@@ -2906,16 +2962,22 @@ function transform_children(children, context) {
 					}
 				} else {
 					// Handle Text nodes in fragments
-					state.template?.push(' ');
-					const id = flush_node();
-					state.update?.push({
-						operation: (key) => b.stmt(b.call('_$_.set_text', id, key)),
-						expression: /** @type {AST.Expression} */ (expression),
-						identity: node.expression,
-						initial: b.literal(' '),
-					});
-					if (metadata?.await) {
-						/** @type {NonNullable<TransformClientState['update']>} */ (state.update).async = true;
+					const expr = /** @type {AST.Expression} */ (expression);
+					if (expr.type === 'Literal') {
+						state.template?.push(escape_html(expr.value));
+					} else {
+						state.template?.push(' ');
+						const id = flush_node(true);
+						state.update?.push({
+							operation: (key) => b.stmt(b.call('_$_.set_text', id, key)),
+							expression: /** @type {AST.Expression} */ (expression),
+							identity: node.expression,
+							initial: b.literal(' '),
+						});
+						if (metadata?.await) {
+							/** @type {NonNullable<TransformClientState['update']>} */ (state.update).async =
+								true;
+						}
 					}
 				}
 			} else if (node.type === 'ForOfStatement') {
@@ -3815,7 +3877,7 @@ function create_tsx_with_typescript_support(comments) {
  * @param {AnalysisResult} analysis - Analysis result
  * @param {boolean} to_ts - Whether to generate TypeScript output
  * @param {boolean} minify_css - Whether to minify CSS output
- * @returns {{ ast: AST.Program, js: { code: string, map: SourceMapMappings, post_processing_changes?: PostProcessingChanges, line_offsets?: LineOffsets }, css: string, errors:  RippleCompileError[]}}
+ * @returns {{ ast: AST.Program, js: { code: string, map: RawSourceMap, post_processing_changes?: PostProcessingChanges, line_offsets?: LineOffsets }, css: string, errors:  RippleCompileError[]}}
  */
 export function transform_client(filename, source, analysis, to_ts, minify_css) {
 	/** @type {TransformClientState} */
@@ -3851,26 +3913,32 @@ export function transform_client(filename, source, analysis, to_ts, minify_css)
 
 	const program = /** @type {AST.Program} */ (walk(analysis.ast, { ...state }, visitors));
 
-	for (const hoisted of state.hoisted) {
-		program.body.unshift(hoisted);
-	}
+	const body = [];
 
 	for (const import_node of state.imports) {
 		if (typeof import_node === 'string') {
-			program.body.unshift(b.stmt(b.id(import_node)));
+			body.push(b.stmt(b.id(import_node)));
 		} else {
-			program.body.unshift(import_node);
+			body.push(import_node);
 		}
 	}
 
+	for (const hoisted of state.hoisted) {
+		body.push(hoisted);
+	}
+
+	body.push(...program.body);
+
 	if (state.events.size > 0) {
-		program.body.push(
+		body.push(
 			b.stmt(
 				b.call('_$_.delegate', b.array(Array.from(state.events).map((name) => b.literal(name)))),
 			),
 		);
 	}
 
+	program.body = body;
+
 	const language_handler = to_ts
 		? create_tsx_with_typescript_support(analysis.comments)
 		: /** @type {Visitors<AST.Node, TransformClientState>} */ (tsx());

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

@@ -2,7 +2,7 @@
 @import * as AST from 'estree';
 @import * as ESTreeJSX from 'estree-jsx';
 @import { DocumentHighlightKind } from 'vscode-languageserver-types';
-@import { SourceMapMappings } from '@jridgewell/sourcemap-codec';
+@import { RawSourceMap } from 'source-map';
 @import {
 	CustomMappingData,
 	PluginActionOverrides,
@@ -267,7 +267,7 @@ function extract_classes(node, src_to_gen_map, gen_line_offsets, src_line_offset
  * @param {AST.Node} ast_from_source - The original AST from source
  * @param {string} source - Original source code
  * @param {string} generated_code - Generated code (returned in output, not used for searching)
- * @param {SourceMapMappings} source_map - Esrap source map for accurate position lookup
+ * @param {RawSourceMap} source_map - Esrap source map for accurate position lookup
  * @param {PostProcessingChanges } post_processing_changes - Optional post-processing changes
  * @param {number[]} line_offsets - Pre-computed line offsets array for generated code
  * @returns {Omit<VolarMappingsResult, 'errors'>}

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

@@ -1,6 +1,5 @@
 /** @import * as AST from 'estree'; */
-/** @import { SourceMapMappings } from '@jridgewell/sourcemap-codec'; */
-/** @import { TSESTree } from '@typescript-eslint/types'; */
+/** @import { RawSourceMap } from 'source-map'; */
 /**
 @import {
 	TransformServerContext,
@@ -8,7 +7,6 @@
 	Visitors,
 	AnalysisResult,
 	ScopeInterface,
-	Visitor
 } from '#compiler' */
 
 import * as b from '../../../../utils/builders.js';
@@ -36,6 +34,7 @@ import {
 	CSS_HASH_IDENTIFIER,
 	obfuscate_identifier,
 } from '../../../identifier-utils.js';
+import { BLOCK_CLOSE, BLOCK_OPEN } from '../../../../constants.js';
 
 /**
  * @param {AST.Node[]} children
@@ -771,6 +770,10 @@ const visitors = {
 		}
 		const body_scope = context.state.scopes.get(node.body);
 
+		context.state.init?.push(
+			b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(BLOCK_OPEN))),
+		);
+
 		const body = transform_body(/** @type {AST.BlockStatement} */ (node.body).body, {
 			...context,
 			state: { ...context.state, scope: /** @type {ScopeInterface} */ (body_scope) },
@@ -789,6 +792,10 @@ const visitors = {
 				b.block(body),
 			),
 		);
+
+		context.state.init?.push(
+			b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(BLOCK_CLOSE))),
+		);
 	},
 
 	IfStatement(node, context) {
@@ -812,6 +819,10 @@ const visitors = {
 			}),
 		);
 
+		context.state.init?.push(
+			b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(BLOCK_OPEN))),
+		);
+
 		/** @type {AST.BlockStatement | AST.IfStatement | null} */
 		let alternate = null;
 		if (node.alternate) {
@@ -832,6 +843,10 @@ const visitors = {
 		context.state.init?.push(
 			b.if(/** @type {AST.Expression} */ (context.visit(node.test)), consequent, alternate),
 		);
+
+		context.state.init?.push(
+			b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(BLOCK_CLOSE))),
+		);
 	},
 
 	AssignmentExpression(node, context) {
@@ -1225,7 +1240,7 @@ const visitors = {
  * @param {string} source
  * @param {AnalysisResult} analysis
  * @param {boolean} minify_css
- * @returns {{ ast: AST.Program; js: { code: string; map: SourceMapMappings | null }; css: string; }}
+ * @returns {{ ast: AST.Program; js: { code: string; map: RawSourceMap | null }; css: string; }}
  */
 export function transform_server(filename, source, analysis, minify_css) {
 	// Use component metadata collected during the analyze phase

package/src/compiler/source-map-utils.js

@@ -3,6 +3,7 @@
  @import * as AST from 'estree';
  @import { CodeMapping } from 'ripple/compiler';
  @import { CodeMapping as VolarCodeMapping } from '@volar/language-core';
+ @import { RawSourceMap } from 'source-map';
  */
 
 /**
@@ -72,7 +73,7 @@ export const offset_to_line_col = (offset, line_offsets) => {
 /**
  * Build a source-to-generated position lookup map from an esrap source map
  * Applies post-processing adjustments during map building for efficiency
- * @param {object} source_map - The source map object from esrap (v3 format)
+ * @param {RawSourceMap} source_map - The source map object from esrap (v3 format)
  * @param {PostProcessingChanges} post_processing_changes - Optional post-processing changes to apply
  * @param {LineOffsets} line_offsets - Pre-computed line offsets array
  * @param {string} generated_code - The final generated code (after post-processing)
@@ -90,7 +91,6 @@ export function build_src_to_gen_map(
 	const reverse_map = new Map();
 
 	// Decode the VLQ-encoded mappings string
-	// @ts-ignore
 	const decoded = decode(source_map.mappings);
 
 	/**

package/src/compiler/types/index.d.ts

@@ -1189,7 +1189,7 @@ export interface TransformClientState extends BaseState {
 	events: Set<string>;
 	filename: string;
 	final: Array<AST.Statement> | null;
-	flush_node: ((is_controlled?: boolean) => AST.Identifier) | null;
+	flush_node: ((is_text?: boolean, is_controlled?: boolean) => AST.Identifier) | null;
 	hoisted: Array<AST.Statement>;
 	imports: Set<string | AST.ImportDeclaration>;
 	server_block_locals: AST.VariableDeclaration[];

package/src/compiler/types/parse.d.ts

@@ -14,8 +14,8 @@ import type * as acorn from 'acorn';
 import type * as AST from 'estree';
 import type * as ESTreeJSX from 'estree-jsx';
 import type * as ESRap from 'esrap';
-import type * as SourceMap from '@jridgewell/sourcemap-codec';
 import type * as RippleCompiler from '#compiler';
+import type { RawSourceMap } from 'source-map';
 import type { RippleCompileError } from 'ripple/compiler';
 
 type ForInit = boolean | 'await';
@@ -42,7 +42,7 @@ declare module 'esrap' {
 		ast: AST.Node,
 		visitors: V,
 		options?: ESRap.PrintOptions,
-	): { code: string; map: SourceMap.SourceMapMappings };
+	): { code: string; map: RawSourceMap };
 }
 
 declare module 'esrap/languages/tsx' {

package/src/constants.js

@@ -4,3 +4,18 @@ export const IS_CONTROLLED = 1 << 2;
 export const IS_INDEXED = 1 << 3;
 export const TEMPLATE_SVG_NAMESPACE = 1 << 5;
 export const TEMPLATE_MATHML_NAMESPACE = 1 << 6;
+
+export const HYDRATION_START = '[';
+export const HYDRATION_START_ELSE = '[!';
+export const HYDRATION_END = ']';
+export const HYDRATION_ERROR = {};
+
+export const BLOCK_OPEN = `<!--${HYDRATION_START}-->`;
+export const BLOCK_OPEN_ELSE = `<!--${HYDRATION_START_ELSE}-->`;
+export const BLOCK_CLOSE = `<!--${HYDRATION_END}-->`;
+export const EMPTY_COMMENT = `<!---->`;
+
+export const ELEMENT_NODE = 1;
+export const TEXT_NODE = 3;
+export const COMMENT_NODE = 8;
+export const DOCUMENT_FRAGMENT_NODE = 11;