@tsrx/vue 0.0.18 → 0.0.20

package/package.json

@@ -3,7 +3,7 @@
   "description": "Vue compiler built on @tsrx/core",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -30,7 +30,7 @@
   "dependencies": {
     "esrap": "^2.1.0",
     "zimmerframe": "^1.1.2",
-    "@tsrx/core": "0.0.23"
+    "@tsrx/core": "0.0.25"
   },
   "peerDependencies": {
     "vue": ">=3.5",

package/src/transform.js

@@ -120,9 +120,10 @@ function component_to_vapor_component_declaration(component, transform_context,
 	}
 
 	const component_id = clone_identifier(component.id);
+	const fn_id = fn.type === 'FunctionDeclaration' ? fn.id : null;
 	component_id.metadata = {
 		...component_id.metadata,
-		...(fn.id?.metadata || {}),
+		...(fn_id?.metadata || {}),
 		path: component_id.metadata?.path || [],
 	};
 	/** @type {any} */ (component_id.metadata).hover = create_component_hover_replacement(fn.params);
@@ -229,9 +230,14 @@ function render_for_of_as_vapor_template(node, loop_params, body_statements) {
 	}
 
 	const rendered = statement.argument;
+	if (expression_can_skip_rendering(rendered)) {
+		return render_for_of_as_flat_map(node, loop_params, rendered);
+	}
+
 	const key_expression = node.key
 		? clone_expression_node(node.key)
-		: find_jsx_key_expression(rendered);
+		: (find_jsx_key_expression(rendered) ??
+			(node.index ? clone_expression_node(node.index) : null));
 	strip_top_level_jsx_keys(rendered);
 	const children = rendered.type === 'JSXFragment' ? rendered.children : [rendered];
 	const attributes = [
@@ -277,6 +283,109 @@ function render_for_of_as_vapor_template(node, loop_params, body_statements) {
 	});
 }
 
+/**
+ * @param {any} node
+ * @param {any[]} loop_params
+ * @param {any} rendered
+ * @returns {any}
+ */
+function render_for_of_as_flat_map(node, loop_params, rendered) {
+	return to_jsx_expression_container({
+		type: 'CallExpression',
+		callee: {
+			type: 'MemberExpression',
+			object: clone_expression_node(node.right),
+			property: { type: 'Identifier', name: 'flatMap', metadata: { path: [] } },
+			computed: false,
+			optional: false,
+			metadata: { path: [] },
+		},
+		arguments: [
+			{
+				type: 'ArrowFunctionExpression',
+				params: loop_params,
+				body: {
+					type: 'BlockStatement',
+					body: [
+						{
+							type: 'ReturnStatement',
+							argument: to_array_render_expression(rendered),
+							metadata: { path: [] },
+						},
+					],
+					metadata: { path: [] },
+				},
+				async: false,
+				generator: false,
+				expression: false,
+				metadata: { path: [] },
+			},
+		],
+		async: false,
+		optional: false,
+		metadata: { path: [] },
+	});
+}
+
+/**
+ * `<template v-for>` preserves one rendered slot per source item in the current
+ * Vue runtime path. Loop bodies that can return `null` need the shared callback
+ * lowering so `continue` truly skips the iteration.
+ *
+ * @param {any} node
+ * @returns {boolean}
+ */
+function expression_can_skip_rendering(node) {
+	if (!node || typeof node !== 'object') {
+		return false;
+	}
+
+	if (node.type === 'Literal' && node.value === null) {
+		return true;
+	}
+
+	if (node.type === 'ConditionalExpression') {
+		return (
+			expression_can_skip_rendering(node.consequent) ||
+			expression_can_skip_rendering(node.alternate)
+		);
+	}
+
+	if (node.type === 'LogicalExpression' && node.operator === '&&') {
+		return true;
+	}
+
+	return false;
+}
+
+/**
+ * @param {any} node
+ * @returns {any}
+ */
+function to_array_render_expression(node) {
+	if (node?.type === 'Literal' && node.value === null) {
+		return builders.array([]);
+	}
+
+	if (node?.type === 'ConditionalExpression') {
+		return builders.conditional(
+			node.test,
+			to_array_render_expression(node.consequent),
+			to_array_render_expression(node.alternate),
+		);
+	}
+
+	if (node?.type === 'LogicalExpression' && node.operator === '&&') {
+		return builders.conditional(
+			node.left,
+			to_array_render_expression(node.right),
+			builders.array([]),
+		);
+	}
+
+	return builders.array([node]);
+}
+
 /**
  * @param {any[]} loop_params
  * @returns {any}
@@ -346,6 +455,16 @@ function strip_top_level_jsx_keys(node) {
  * @returns {any}
  */
 function function_declaration_to_expression(fn) {
+	if (fn.type === 'ArrowFunctionExpression') {
+		return {
+			...fn,
+			metadata: {
+				...(fn.metadata || {}),
+				path: fn.metadata?.path || [],
+			},
+		};
+	}
+
 	return {
 		...fn,
 		type: 'FunctionExpression',