ripple 0.2.204 → 0.2.205

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.204",
+  "version": "0.2.205",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -97,6 +97,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.2.204"
+    "ripple": "0.2.205"
   }
 }

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

@@ -1749,15 +1749,7 @@ function RipplePlugin(config) {
 			jsx_parseAttributeValue() {
 				switch (this.type) {
 					case tt.braceL:
-						const t = this.jsx_parseExpressionContainer();
-						return (
-							t.expression.type === 'JSXEmptyExpression' &&
-								this.raise(
-									/** @type {AST.NodeWithLocation} */ (t).start,
-									'attributes must only be assigned a non-empty expression',
-								),
-							t
-						);
+						return this.jsx_parseExpressionContainer();
 					case tstt.jsxTagStart:
 					case tt.string:
 						return this.parseExprAtom();

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

@@ -10,7 +10,10 @@
 	StyleClasses,
 } from '#compiler';
  */
-/** @import * as AST from 'estree' */
+/**
+@import * as AST from 'estree';
+@import * as ESTreeJSX from 'estree-jsx';
+*/
 
 import * as b from '../../../utils/builders.js';
 import { walk } from 'zimmerframe';
@@ -959,6 +962,31 @@ const visitors = {
 
 			for (const attr of node.attributes) {
 				if (attr.type === 'Attribute') {
+					if (attr.value && attr.value.type === 'JSXEmptyExpression') {
+						const value = /** @type {ESTreeJSX.JSXEmptyExpression & AST.NodeWithLocation} */ (
+							attr.value
+						);
+						error(
+							'attributes must only be assigned a non-empty expression',
+							state.analysis.module.filename,
+							{
+								...value,
+								start: value.start - 1,
+								end: value.end + 1,
+								loc: {
+									start: {
+										line: value.loc.start.line,
+										column: value.loc.start.column - 1,
+									},
+									end: {
+										line: value.loc.end.line,
+										column: value.loc.end.column + 1,
+									},
+								},
+							},
+							context.state.loose ? context.state.analysis.errors : undefined,
+						);
+					}
 					if (attr.name.type === 'Identifier') {
 						attribute_names.add(attr.name);
 

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

@@ -2492,11 +2492,16 @@ function transform_ts_child(node, context) {
 			if (attr.type === 'Attribute') {
 				const metadata = { await: false };
 				const name = visit(attr.name, { ...state, metadata });
+				const attr_value = /** @type { AST.Expression & AST.NodeWithLocation | null} */ (
+					attr.value
+				);
 				const value =
-					attr.value === null
-						? b.literal(true)
+					attr_value === null
+						? // <div attr>, not adding `name` for loc because `jsx_name` below
+							// will take care of the mapping JSXAttribute's JSXIdentifier
+							b.literal(true)
 						: // reset init, update, final to avoid adding attr value to the component body
-							visit(attr.value, SetStateForOutsideComponent(state, { metadata }));
+							visit(attr_value, SetStateForOutsideComponent(state, { metadata }));
 
 				// Handle both regular identifiers and tracked identifiers
 				/** @type {string} */
@@ -2524,7 +2529,23 @@ function transform_ts_child(node, context) {
 					jsx_name,
 					b.jsx_expression_container(
 						/** @type {AST.Expression} */ (value),
-						/** @type {AST.NodeWithLocation} */ (attr.value),
+						attr_value === null
+							? /** @type {AST.NodeWithLocation} */ (value)
+							: // account location for opening and closing braces around the expression
+								/** @type {AST.NodeWithLocation} */ ({
+									start: attr_value.start - 1,
+									end: attr_value.end + 1,
+									loc: {
+										start: {
+											line: attr_value.loc.start.line,
+											column: attr_value.loc.start.column - 1,
+										},
+										end: {
+											line: attr_value.loc.end.line,
+											column: attr_value.loc.end.column + 1,
+										},
+									},
+								}),
 					),
 					attr.shorthand ?? false,
 					/** @type {AST.NodeWithLocation} */ (attr),
@@ -3587,6 +3608,16 @@ function create_tsx_with_typescript_support(comments) {
 			context.write(node.name);
 			context.location(loc.end.line, loc.end.column);
 		},
+		JSXExpressionContainer(node, context) {
+			const loc = /** @type {AST.SourceLocation} */ (node.loc);
+			if (!loc) {
+				base_tsx.JSXExpressionContainer?.(node, context);
+				return;
+			}
+			context.location(loc.start.line, loc.start.column);
+			base_tsx.JSXExpressionContainer?.(node, context);
+			context.location(loc.end.line, loc.end.column);
+		},
 		MethodDefinition(node, context) {
 			node.value.metadata.is_method = true;
 			/** @type {AST.Position | undefined} */

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

@@ -652,6 +652,11 @@ export function convert_source_map_to_mappings(
 				}
 				return;
 			} else if (node.type === 'JSXExpressionContainer') {
+				if (node.loc) {
+					mappings.push(
+						get_mapping_from_node(node, src_to_gen_map, gen_line_offsets, mapping_data_verify_only),
+					);
+				}
 				// Visit the expression inside {}
 				if (node.expression) {
 					visit(node.expression);

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

@@ -131,6 +131,7 @@ declare module 'estree' {
 		StyleIdentifier: StyleIdentifier;
 		ServerIdentifier: ServerIdentifier;
 		Text: TextNode;
+		JSXEmptyExpression: ESTreeJSX.JSXEmptyExpression;
 	}
 
 	// Missing estree type

package/src/runtime/date.js

@@ -15,7 +15,7 @@ export class TrackedDate extends Date {
 		// @ts-ignore
 		super(...params);
 
-		var block = this.#block = safe_scope();
+		var block = (this.#block = safe_scope());
 		this.#time = tracked(super.getTime(), block);
 
 		if (!init) this.#init();

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

@@ -216,11 +216,12 @@ export function bindValue(maybe_tracked, set_func = undefined) {
 					value = [].map.call(select.querySelectorAll(query), get_option_value);
 				} else {
 					/** @type {HTMLOptionElement | null} */
-					// @ts-ignore
 					var selected_option =
-						select.querySelector(query) ??
+						/** @type {HTMLOptionElement | null} */ (select.querySelector(query)) ??
 						// will fall back to first non-disabled option if no option is selected
-						select.querySelector('option:not([disabled])');
+						/** @type {HTMLOptionElement | null} */ (
+							select.querySelector('option:not([disabled])')
+						);
 					value = selected_option && get_option_value(selected_option);
 				}
 
@@ -234,8 +235,9 @@ export function bindValue(maybe_tracked, set_func = undefined) {
 				// Mounting and value undefined -> take selection from dom
 				if (mounting && value === undefined) {
 					/** @type {HTMLOptionElement | null} */
-					// @ts-ignore
-					var selected_option = select.querySelector(':checked');
+					var selected_option = /** @type {HTMLOptionElement | null} */ (
+						select.querySelector(':checked')
+					);
 					if (selected_option !== null) {
 						value = get_option_value(selected_option);
 						setter(value);
@@ -532,11 +534,9 @@ export function bind_content_editable(maybe_tracked, property, set_func = undefi
 			var value = getter();
 			if (element[property] !== value) {
 				if (value == null) {
-					// @ts-ignore
 					var non_null_value = element[property];
 					setter(non_null_value);
 				} else {
-					// @ts-ignore
 					element[property] = value + '';
 				}
 			}