ripple 0.2.212 → 0.2.214

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # ripple
 
+## 0.2.214
+
+### Patch Changes
+
+- Updated dependencies []:
+  - ripple@0.2.214
+
+## 0.2.213
+
+### Patch Changes
+
+- Updated dependencies []:
+  - ripple@0.2.213
+
 ## 0.2.212
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.212",
+  "version": "0.2.214",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -15,7 +15,7 @@
   "bugs": {
     "url": "https://github.com/Ripple-TS/ripple/issues"
   },
-  "homepage": "https://ripplejs.com",
+  "homepage": "https://ripple-ts.com",
   "keywords": [
     "ripple",
     "UI",
@@ -96,6 +96,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.2.212"
+    "ripple": "0.2.214"
   }
 }

package/src/compiler/phases/1-parse/index.js

@@ -2667,7 +2667,7 @@ function get_comment_handlers(source, comments, index = 0) {
 		},
 
 		/**
-		 * @param {AST.Node} ast
+		 * @param {AST.Node | AST.CSS.StyleSheet} ast
 		 */
 		add_comments: (ast) => {
 			if (comments.length === 0) return;
@@ -2685,7 +2685,7 @@ function get_comment_handlers(source, comments, index = 0) {
 
 			walk(ast, null, {
 				_(node, { next, path }) {
-					const metadata = node?.metadata;
+					const metadata = /** @type {AST.Node} */ (node)?.metadata;
 
 					/**
 					 * Check if a comment is inside an attribute expression
@@ -2758,6 +2758,36 @@ function get_comment_handlers(source, comments, index = 0) {
 						return element;
 					}
 
+					// Skip CSS nodes entirely - they use CSS-local positions (relative to
+					// the <style> tag content) which would incorrectly match against
+					// absolute source positions of JS/HTML comments. Also consume any
+					// CSS comments (which have absolute positions) that fall within the
+					// parent <style> element's content range so they don't leak to
+					// subsequent JS nodes.
+					if (node.type === 'StyleSheet') {
+						const styleElement = /** @type {AST.Element & AST.NodeWithLocation | undefined} */ (
+							path.findLast(
+								(ancestor) =>
+									ancestor &&
+									ancestor.type === 'Element' &&
+									ancestor.id &&
+									/** @type {AST.Identifier} */ (ancestor.id).name === 'style',
+							)
+						);
+						if (styleElement) {
+							const cssStart =
+								/** @type {AST.NodeWithLocation} */ (styleElement.openingElement)?.end ??
+								styleElement.start;
+							const cssEnd =
+								/** @type {AST.NodeWithLocation} */ (styleElement.closingElement)?.start ??
+								styleElement.end;
+							while (comments[0] && comments[0].start >= cssStart && comments[0].end <= cssEnd) {
+								comments.shift();
+							}
+						}
+						return;
+					}
+
 					if (metadata && metadata.commentContainerId !== undefined) {
 						// For empty template elements, keep comments as `innerComments`.
 						// The Prettier plugin uses `innerComments` to preserve them and
@@ -2771,6 +2801,24 @@ function get_comment_handlers(source, comments, index = 0) {
 								comments[0].context.containerId === metadata.commentContainerId &&
 								comments[0].context.beforeMeaningfulChild
 							) {
+								// Check that the comment is actually in this element's own content
+								// area, not positionally inside a child element. This handles the
+								// case where jsx_parseOpeningElementAt() triggers jsx_readToken()
+								// before the child element is pushed to the parser's #path, causing
+								// comments inside the child to get the parent's containerId.
+								const commentStart = comments[0].start;
+								const isInsideChildElement = /** @type {AST.NodeWithChildren} */ (
+									node
+								).children?.some(
+									(child) =>
+										child &&
+										child.start !== undefined &&
+										child.end !== undefined &&
+										commentStart >= child.start &&
+										commentStart < child.end,
+								);
+								if (isInsideChildElement) break;
+
 								const elementComment = /** @type {AST.CommentWithLocation} */ (comments.shift());
 
 								(metadata.elementLeadingComments ||= []).push(elementComment);

package/src/compiler/phases/2-analyze/index.js

@@ -285,35 +285,19 @@ const visitors = {
 			}
 		}
 
-		if (
-			binding?.kind === 'prop' ||
-			binding?.kind === 'prop_fallback' ||
-			binding?.kind === 'for_pattern'
-		) {
-			mark_as_tracked(context.path);
-			if (context.state.metadata?.tracking === false) {
-				context.state.metadata.tracking = true;
-			}
-		}
-
-		if (
-			is_reference(node, /** @type {AST.Node} */ (parent)) &&
-			node.tracked &&
-			binding?.node !== node
-		) {
-			mark_as_tracked(context.path);
-			if (context.state.metadata?.tracking === false) {
-				context.state.metadata.tracking = true;
-			}
-		}
-
-		if (
-			is_reference(node, /** @type {AST.Node} */ (parent)) &&
-			node.tracked &&
-			binding?.node !== node
-		) {
-			if (context.state.metadata?.tracking === false) {
-				context.state.metadata.tracking = true;
+		if (node.tracked && binding) {
+			if (
+				binding.kind === 'prop' ||
+				binding.kind === 'prop_fallback' ||
+				binding.kind === 'for_pattern' ||
+				(is_reference(node, /** @type {AST.Node} */ (parent)) &&
+					node.tracked &&
+					binding.node !== node)
+			) {
+				mark_as_tracked(context.path);
+				if (context.state.metadata?.tracking === false) {
+					context.state.metadata.tracking = true;
+				}
 			}
 		}
 

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

@@ -116,7 +116,6 @@ function visit_function(node, context) {
 	if (
 		metadata?.tracked === true &&
 		!is_inside_component(context, true) &&
-		is_component_level_function(context) &&
 		body.type === 'BlockStatement'
 	) {
 		body = { ...body, body: [b.var('__block', b.call('_$_.scope')), ...body.body] };
@@ -3130,7 +3129,11 @@ function transform_children(children, context) {
 					(node.id.type !== 'Identifier' || !is_element_dom_element(node))),
 		) ||
 		normalized.filter(
-			(node) => node.type !== 'VariableDeclaration' && node.type !== 'EmptyStatement',
+			(node) =>
+				node.type !== 'VariableDeclaration' &&
+				node.type !== 'EmptyStatement' &&
+				node.type !== 'BreakStatement' &&
+				node.type !== 'ContinueStatement',
 		).length > 1;
 	/** @type {AST.Identifier | null} */
 	let initial = null;

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

@@ -394,7 +394,9 @@ declare module 'estree' {
 		value: AST.Property['value'] | Component;
 	}
 
-	export type RippleAttribute = Attribute | SpreadAttribute | RefAttribute;
+	export type RippleAttribute = AST.Attribute | AST.SpreadAttribute | AST.RefAttribute;
+
+	export type NodeWithChildren = AST.Element | AST.TsxCompat;
 
 	export namespace CSS {
 		export interface BaseNode {

package/src/runtime/internal/client/hmr.js

@@ -0,0 +1 @@
+// TODO

package/src/runtime/internal/client/html.js

@@ -20,7 +20,7 @@ export function html(node, get_html, svg = false, mathml = false) {
 
 	render(() => {
 		var block = /** @type {Block} */ (active_block);
-		var new_html = get_html() + '';
+		var new_html = (get_html() ?? '') + '';
 
 		// If the HTML hasn't changed, skip the update (but still hydrate on first run)
 		if (html === new_html) {

package/src/runtime/internal/client/template.js

@@ -63,11 +63,11 @@ export function create_fragment_from_html(
 export function template(content, flags) {
 	var is_fragment = (flags & TEMPLATE_FRAGMENT) !== 0;
 	var use_import_node = (flags & TEMPLATE_USE_IMPORT_NODE) !== 0;
-	var use_svg_namespace = (flags & TEMPLATE_SVG_NAMESPACE) !== 0;
-	var use_mathml_namespace = (flags & TEMPLATE_MATHML_NAMESPACE) !== 0;
+	var is_comment = content === '<!>';
+	var use_svg_namespace = !is_comment && (flags & TEMPLATE_SVG_NAMESPACE) !== 0;
+	var use_mathml_namespace = !is_comment && (flags & TEMPLATE_MATHML_NAMESPACE) !== 0;
 	/** @type {Node | DocumentFragment | undefined} */
 	var node;
-	var is_comment = content === '<!>';
 	var has_start = !is_comment && !content.startsWith('<!>');
 
 	// For fragments, eagerly create the node so we can walk its children
@@ -147,8 +147,8 @@ export function template(content, flags) {
 			return /** @type {Node} */ (hydrate_node);
 		}
 		// If using runtime namespace, check active_namespace
-		var svg = !is_comment && (use_svg_namespace || active_namespace === 'svg');
-		var mathml = !is_comment && (use_mathml_namespace || active_namespace === 'mathml');
+		var svg = use_svg_namespace || (!is_comment && active_namespace === 'svg');
+		var mathml = use_mathml_namespace || (!is_comment && active_namespace === 'mathml');
 
 		if (node === undefined || use_svg_namespace !== svg || use_mathml_namespace !== mathml) {
 			node = create_fragment_from_html(has_start ? content : '<!>' + content, svg, mathml);

package/tests/client/compiler/compiler.basic.test.ripple

@@ -357,4 +357,28 @@ export component App() {
 `;
 		expect(() => compile(code, 'test.ripple')).not.toThrow();
 	});
+
+	it('should inject __block for track() calls inside class constructors', () => {
+		const source = `
+import { track } from 'ripple';
+
+class Store {
+	constructor() {
+		this.count = track(0);
+		this.items = #[1, 2, 3];
+	}
+}
+
+export component App() {
+	const store = new Store();
+	<div>{store.count}</div>
+}
+`;
+		const result = compile(source, 'test.ripple', { mode: 'client' });
+		const code = result.js.code;
+
+		// The constructor's compiled output should contain __block = _$_.scope()
+		expect(code).toContain('__block');
+		expect(code).toContain('_$_.scope()');
+	});
 });

package/tests/client/svg.test.ripple

@@ -438,4 +438,48 @@ describe('SVG namespace handling', () => {
 			expect(path.tagName.toLowerCase()).toBe('path');
 		});
 	});
+
+	it('should render dynamic SVG elements dispatched via a switch inside a for loop', () => {
+		component App() {
+			const iconNodes: [string, Record<string, string>][] = [
+				['path', { d: 'm14 12 4 4 4-4' }],
+				['circle', { cx: '12', cy: '12', r: '4' }],
+				['path', { d: 'M18 16V7' }],
+			];
+
+			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+				for (const [tag, attrs] of iconNodes) {
+					switch (tag) {
+						case 'path':
+							<path {...attrs} />
+							break;
+						case 'circle':
+							<circle {...attrs} />
+							break;
+					}
+				}
+			</svg>
+		}
+
+		render(App);
+
+		const svg = container.querySelector('svg');
+		expect(svg).toBeTruthy();
+		expect(svg.namespaceURI).toBe('http://www.w3.org/2000/svg');
+
+		const paths = svg.querySelectorAll('path');
+		const circles = svg.querySelectorAll('circle');
+
+		expect(paths.length).toBe(2);
+		expect(circles.length).toBe(1);
+
+		paths.forEach((path) => {
+			expect(path.namespaceURI).toBe('http://www.w3.org/2000/svg');
+		});
+		expect(circles[0].namespaceURI).toBe('http://www.w3.org/2000/svg');
+
+		expect(paths[0].getAttribute('d')).toBe('m14 12 4 4 4-4');
+		expect(circles[0].getAttribute('cx')).toBe('12');
+		expect(paths[1].getAttribute('d')).toBe('M18 16V7');
+	});
 });

package/tests/hydration/build-components.js

@@ -57,7 +57,7 @@ function buildComponents() {
 		const clientResult = compile(source, file, {
 			mode: 'client',
 		});
-		writeFileSync(join(clientOutDir, outputName), clientResult.js.code);
+		writeFileSync(join(clientOutDir, outputName), '// @ts-nocheck\n' + clientResult.js.code);
 
 		// Compile for server
 		const serverResult = compile(source, file, {
@@ -65,7 +65,7 @@ function buildComponents() {
 		});
 		// Transform imports to use server runtime
 		const serverCode = transformServerImports(serverResult.js.code);
-		writeFileSync(join(serverOutDir, outputName), serverCode);
+		writeFileSync(join(serverOutDir, outputName), '// @ts-nocheck\n' + serverCode);
 
 		console.log(`Compiled ${file} -> client & server`);
 	}

package/tests/hydration/compiled/client/basic.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
 var root = _$_.template(`<div>Hello World</div>`, 0);
@@ -255,7 +256,7 @@ function Actions(__anchor, __props, __block) {
 			};
 
 			_$_.if(node_5, (__render) => {
-				if (_$_.get(_$_.fallback(__props.playgroundVisible, false))) __render(consequent);
+				if (_$_.fallback(__props.playgroundVisible, false)) __render(consequent);
 			});
 		}
 

package/tests/hydration/compiled/client/composite.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
 var root = _$_.template(`<div class="layout"><!></div>`, 0);

package/tests/hydration/compiled/client/events.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
 var root = _$_.template(`<div><button class="increment">Increment</button><span class="count"> </span></div>`, 0);

package/tests/hydration/compiled/client/for.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
 var root_1 = _$_.template(`<li> </li>`, 0);

package/tests/hydration/compiled/client/head.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as _$_ from 'ripple/internal/client';
 
 var root = _$_.template(`<div>Content</div>`, 0);