ripple 0.2.212 → 0.2.213

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # ripple
 
+## 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.213",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -96,6 +96,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.2.212"
+    "ripple": "0.2.213"
   }
 }

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] };

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/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/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);

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

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

package/tests/hydration/compiled/client/if-children.js

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
 export function StaticText(__output) {
@@ -345,7 +346,7 @@ function Actions(__output, { playgroundVisible = false }) {
 		__output.push('</a>');
 		__output.push('<!--[-->');
 
-		if (_$_.get(playgroundVisible)) {
+		if (playgroundVisible) {
 			__output.push('<a');
 			__output.push(' href="/playground"');
 			__output.push(' class="playground-link"');

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

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
 export async function Layout(__output, { children }) {

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

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
 import { track } from 'ripple/server';

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

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
 import { track } from 'ripple/server';

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

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
 import { track } from 'ripple/server';

package/tests/hydration/compiled/server/html.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
 import { track } from 'ripple/server';

package/tests/hydration/compiled/server/if-children.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
 import { track } from 'ripple/server';

package/tests/hydration/compiled/server/if.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
 import { track } from 'ripple/server';

package/tests/hydration/compiled/server/portal.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
 import { Portal } from 'ripple/server';

package/tests/hydration/compiled/server/reactivity.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
 import { track } from 'ripple/server';

package/tests/hydration/compiled/server/return.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
 import { track } from 'ripple/server';

package/tests/hydration/compiled/server/switch.js

@@ -1,3 +1,4 @@
+// @ts-nocheck
 import * as _$_ from 'ripple/internal/server';
 
 import { track } from 'ripple/server';

package/tests/hydration/components/basic.ripple

@@ -1,4 +1,5 @@
 // Basic static components for hydration testing
+import type { Component } from 'ripple';
 
 export component StaticText() {
 	<div>{'Hello World'}</div>
@@ -96,7 +97,7 @@ component Actions({ playgroundVisible = false }: { playgroundVisible: boolean })
 	</div>
 }
 
-component Layout({ children }) {
+component Layout({ children }: { children: Component }) {
 	<main>
 		<div class="container">
 			<children />

package/tests/hydration/components/composite.ripple

@@ -1,4 +1,6 @@
-export component Layout({ children }) {
+import type { Component } from 'ripple';
+
+export component Layout({ children }: { children?: Component }) {
 	<div class="layout">
 		<children />
 	</div>

package/tests/hydration/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": ["../../src/**/*", "../**/*"],
+  "exclude": [
+    "../client",
+    "../client.d.ts",
+    "../setup-client.js",
+    "../server",
+    "../server.d.ts",
+    "../setup-server.js"
+  ]
+}

package/tests/hydration.d.ts

@@ -0,0 +1,14 @@
+export {};
+
+interface CustomMatchers<R = unknown> {
+	/**
+	 * Compares HTML strings after stripping hydration markers.
+	 * Hydration markers are: <!--[--> <!--[!--> <!--]-->
+	 */
+	toBeHtml(expected: string): R;
+}
+
+declare module 'vitest' {
+	interface Assertion<T = any> extends CustomMatchers<T> {}
+	interface AsymmetricMatchersContaining extends CustomMatchers {}
+}