ripple 0.2.206 → 0.2.207

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.206",
+  "version": "0.2.207",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -76,7 +76,7 @@
   },
   "dependencies": {
     "@jridgewell/sourcemap-codec": "^1.5.5",
-    "@sveltejs/acorn-typescript": "^1.0.6",
+    "@sveltejs/acorn-typescript": "^1.0.9",
     "acorn": "^8.15.0",
     "clsx": "^2.1.1",
     "devalue": "^5.3.2",
@@ -97,6 +97,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.2.206"
+    "ripple": "0.2.207"
   }
 }

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

@@ -104,30 +104,28 @@ function visit_function(node, context) {
 		}
 	}
 
-	let body = context.visit(node.body, {
-		...state,
-		// we are new context so tracking no longer applies
-		metadata: { ...state.metadata, tracking: false },
-	});
-
-	if (metadata?.tracked === true) {
-		const new_body = [];
-
-		if (!is_inside_component(context, true) && is_component_level_function(context)) {
-			new_body.push(b.var('__block', b.call('_$_.scope')));
-		}
-		if (body.type === 'BlockStatement') {
-			new_body.push(...body.body);
-		}
+	let body = /** @type {AST.BlockStatement | AST.Expression} */ (
+		context.visit(node.body, {
+			...state,
+			// we are new context so tracking no longer applies
+			metadata: { ...state.metadata, tracking: false },
+		})
+	);
 
-		return {
-			...node,
-			params: node.params.map((param) => context.visit(param, state)),
-			body: body.type === 'BlockStatement' ? { ...body, body: new_body } : body,
-		};
+	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] };
 	}
 
-	return context.next(state);
+	return {
+		...node,
+		params: node.params.map((param) => context.visit(param, state)),
+		body,
+	};
 }
 
 /**
@@ -2896,12 +2894,20 @@ function transform_children(children, context) {
 				: node.type == 'Text'
 					? state.scope.generate('text')
 					: state.scope.generate('node'),
+			/** @type {AST.NodeWithLocation} */ (node.type === 'Element' ? node.openingElement : node),
 		);
 	};
 
 	/** @param {AST.Node} node */
 	const create_initial = (node) => {
-		const id = is_fragment ? b.id(state.scope.generate('fragment')) : get_id(node);
+		const id = is_fragment
+			? b.id(
+					state.scope.generate('fragment'),
+					/** @type {AST.NodeWithLocation} */ (
+						node.type === 'Element' ? node.openingElement : node
+					),
+				)
+			: get_id(node);
 		initial = id;
 		template_id = state.scope.generate('root');
 		state.init?.push(b.var(id, b.call(template_id)));

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

@@ -31,7 +31,11 @@ function remove() {
  */
 function remove_when_css_loaded(callback) {
 	/** @type {HTMLLinkElement[]} */
-	const links = Array.from(document.querySelectorAll('link[rel="stylesheet"]'));
+	const links = Array.from(
+		/** @type {NodeListOf<HTMLLinkElement>} */ (
+			document.querySelectorAll('link[rel="stylesheet"]')
+		),
+	);
 	let remaining = links.length;
 
 	if (remaining === 0) {

package/src/utils/builders.js

@@ -320,10 +320,14 @@ export function get(name, body) {
 
 /**
  * @param {string} name
+ * @param {AST.NodeWithLocation} [loc_info]
  * @returns {AST.Identifier}
  */
-export function id(name) {
-	return { type: 'Identifier', name, metadata: { path: [] } };
+export function id(name, loc_info) {
+	/** @type {AST.Identifier} */
+	const node = { type: 'Identifier', name, metadata: { path: [] } };
+
+	return set_location(node, loc_info);
 }
 
 /**

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

@@ -231,4 +231,47 @@ describe('basic client > rendering & text', () => {
 		render(App);
 		expect(container).toMatchSnapshot();
 	});
+
+	it('should handle consecutive text nodes without duplication', () => {
+		component App() {
+			const Something = conditional('a');
+
+			<Something />
+
+			function conditional(item: 'a') {
+				let hello = 'Hello';
+				const obj = {
+					a: component() {
+						<div>
+							{'a'}
+							{' '}
+							{hello}
+						</div>
+					},
+				};
+
+				return obj[item];
+			}
+		}
+
+		render(App);
+		const div = container.querySelector('div');
+		expect(div.textContent).toEqual('a Hello');
+	});
+
+	it('should handle multiple consecutive text expressions', () => {
+		component App() {
+			let name = 'World';
+			<div>
+				{'Hello'}
+				{' '}
+				{name}
+				{'!'}
+			</div>
+		}
+
+		render(App);
+		const div = container.querySelector('div');
+		expect(div.textContent).toEqual('Hello World!');
+	});
 });