ripple 0.2.112 → 0.2.114

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.112",
+  "version": "0.2.114",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",

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

@@ -1306,6 +1306,7 @@ function RipplePlugin(config) {
 				}
 
 				if (this.value === 'component') {
+					this.awaitPos = 0;
 					const node = this.startNode();
 					node.type = 'Component';
 					node.css = null;

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

@@ -204,7 +204,7 @@ const visitors = {
 		return {
 			...node,
 			specifiers: node.specifiers
-				.filter((spec) => spec.importKind !== 'type')
+				.filter((spec) => context.state.to_ts || spec.importKind !== 'type')
 				.map((spec) => context.visit(spec)),
 		};
 	},
@@ -1462,23 +1462,28 @@ function transform_ts_child(node, context) {
 			}
 		}
 
-		const opening_type = b.jsx_id(type);
+		let tracked_type;
+
+		// Make VSCode happy about tracked components, as they're lowercase in the AST
+		// so VSCode doesn't bother tracking them as components, so this fixes that
+		if (node.id.tracked) {
+			tracked_type = state.scope.generate(type[0].toUpperCase() + type.slice(1));
+			state.init.push(
+				b.const(tracked_type, b.member(node.id, b.literal('#v'), true)),
+			);
+		}
+
+		const opening_type = tracked_type
+			? b.jsx_id(tracked_type)
+			: b.jsx_id(type);
 		opening_type.loc = node.id.loc;
 
 		let closing_type = undefined;
 
 		if (!node.selfClosing) {
-			closing_type = b.jsx_id(type);
-			closing_type.loc = {
-				start: {
-					line: node.loc.end.line,
-					column: node.loc.end.column - type.length - 1,
-				},
-				end: {
-					line: node.loc.end.line,
-					column: node.loc.end.column - 1,
-				},
-			};
+			closing_type = tracked_type
+				? b.jsx_id(tracked_type)
+				: b.jsx_id(type);
 		}
 
 		state.init.push(

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

@@ -119,7 +119,7 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 						visit(specifier);
 					}
 				}
-				// Skip source (just a string literal)
+				visit(node.source);
 				return;
 			} else if (node.type === 'ImportSpecifier') {
 				// If local and imported are the same, only visit local to avoid duplicates

package/src/runtime/index-client.js

@@ -1,10 +1,10 @@
-/** @import { Block, Derived, Tracked } from '#client' */
+/** @import { Block, Tracked } from '#client' */
 
-import { destroy_block, root } from './internal/client/blocks.js';
-import { handle_root_events } from './internal/client/events.js';
+import { destroy_block, effect, render, root } from './internal/client/blocks.js';
+import { handle_root_events, on } from './internal/client/events.js';
 import { init_operations } from './internal/client/operations.js';
-import { active_block, tracked, derived } from './internal/client/runtime.js';
-import { create_anchor } from './internal/client/utils.js';
+import { active_block, get, set, tick } from './internal/client/runtime.js';
+import { create_anchor, is_array, is_tracked_object } from './internal/client/utils.js';
 import { remove_ssr_css } from './internal/client/css.js';
 
 // Re-export JSX runtime functions for jsxImportSource: "ripple"
@@ -77,3 +77,183 @@ export { Portal } from './internal/client/portal.js';
 export { ref_prop as createRefKey } from './internal/client/runtime.js';
 
 export { on } from './internal/client/events.js';
+
+/**
+ * @param {string} value
+ */
+function to_number(value) {
+	return value === '' ? null : +value;
+}
+
+/**
+ * @param {HTMLInputElement} input
+ */
+function is_numberlike_input(input) {
+	var type = input.type;
+	return type === 'number' || type === 'range';
+}
+
+/** @param {HTMLOptionElement} option */
+function get_option_value(option) {
+	return option.value;
+}
+
+/**
+ * Selects the correct option(s) (depending on whether this is a multiple select)
+ * @template V
+ * @param {HTMLSelectElement} select
+ * @param {V} value
+ * @param {boolean} mounting
+ */
+function select_option(select, value, mounting = false) {
+	if (select.multiple) {
+		// If value is null or undefined, keep the selection as is
+		if (value == undefined) {
+			return;
+		}
+
+		// If not an array, warn and keep the selection as is
+		if (!is_array(value)) {
+			// TODO
+		}
+
+		// Otherwise, update the selection
+		for (var option of select.options) {
+			option.selected = /** @type {string[]} */ (value).includes(get_option_value(option));
+		}
+
+		return;
+	}
+
+	for (option of select.options) {
+		var option_value = get_option_value(option);
+		if (option_value === value) {
+			option.selected = true;
+			return;
+		}
+	}
+
+	if (!mounting || value !== undefined) {
+		select.selectedIndex = -1; // no option should be selected
+	}
+}
+
+/**
+ * @param {unknown} maybe_tracked
+ * @returns {(node: HTMLInputElement | HTMLSelectElement) => void}
+ */
+export function bindValue(maybe_tracked) {
+	if (!is_tracked_object(maybe_tracked)) {
+		throw new TypeError('bindValue() argument is not a tracked object');
+	}
+
+	var block = /** @type {Block} */ (active_block);
+	var tracked = /** @type {Tracked} */ (maybe_tracked);
+
+	return (node) => {
+		var clear_event;
+
+		if (node.tagName === 'SELECT') {
+			var select = /** @type {HTMLSelectElement} */ (node);
+			var mounting = true;
+
+			clear_event = on(select, 'change', async () => {
+				var query = ':checked';
+				/** @type {unknown} */
+				var value;
+
+				if (select.multiple) {
+					value = [].map.call(select.querySelectorAll(query), get_option_value);
+				} else {
+					/** @type {HTMLOptionElement | null} */
+					var selected_option =
+						select.querySelector(query) ??
+						// will fall back to first non-disabled option if no option is selected
+						select.querySelector('option:not([disabled])');
+					value = selected_option && get_option_value(selected_option);
+				}
+
+				set(tracked, value, block);
+			});
+
+			effect(() => {
+				var value = get(tracked);
+				select_option(select, value, mounting);
+
+				// Mounting and value undefined -> take selection from dom
+				if (mounting && value === undefined) {
+					/** @type {HTMLOptionElement | null} */
+					var selected_option = select.querySelector(':checked');
+					if (selected_option !== null) {
+						value = get_option_value(selected_option);
+						set(tracked, value, block);
+					}
+				}
+
+				mounting = false;
+			});
+		} else {
+			var input = /** @type {HTMLInputElement} */ (node);
+
+			clear_event = on(input, 'input', async () => {
+				/** @type {any} */
+				var value = input.value;
+				value = is_numberlike_input(input) ? to_number(value) : value;
+				set(tracked, value, block);
+
+				await tick();
+
+				if (value !== (value = get(tracked))) {
+					var start = input.selectionStart;
+					var end = input.selectionEnd;
+					input.value = value ?? '';
+
+					// Restore selection
+					if (end !== null) {
+						input.selectionStart = start;
+						input.selectionEnd = Math.min(end, input.value.length);
+					}
+				}
+			});
+
+			render(() => {
+				var value = get(tracked);
+
+				if (is_numberlike_input(input) && value === to_number(input.value)) {
+					return;
+				}
+
+				if (input.type === 'date' && !value && !input.value) {
+					return;
+				}
+
+				if (value !== input.value) {
+					input.value = value ?? '';
+				}
+			});
+
+			return clear_event;
+		}
+	};
+}
+
+/**
+ * @param {unknown} maybe_tracked
+ * @returns {(node: HTMLInputElement) => void}
+ */
+export function bindChecked(maybe_tracked) {
+	if (!is_tracked_object(maybe_tracked)) {
+		throw new TypeError('bindChecked() argument is not a tracked object');
+	}
+
+	const block = /** @type {any} */ (active_block);
+	const tracked = /** @type {Tracked<any>} */ (maybe_tracked);
+
+	return (input) => {
+		const clear_event = on(input, 'change', () => {
+			set(tracked, input.checked, block);
+		});
+
+		return clear_event;
+	};
+}

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

@@ -269,16 +269,16 @@ var empty_get_set = { get: undefined, set: undefined };
 /**
  *
  * @param {any} v
- * @param {Block} b
+ * @param {Block} block
  * @param {(value: any) => any} [get]
  * @param {(next: any, prev: any) => any} [set]
  * @returns {Tracked}
  */
-export function tracked(v, b, get, set) {
+export function tracked(v, block, get, set) {
 	// TODO: now we expose tracked, we should likely block access in DEV somehow
 	return {
 		a: get || set ? { get, set } : empty_get_set,
-		b,
+		b: block || active_block,
 		c: 0,
 		f: TRACKED,
 		v,
@@ -295,7 +295,7 @@ export function tracked(v, b, get, set) {
 export function derived(fn, block, get, set) {
 	return {
 		a: get || set ? { get, set } : empty_get_set,
-		b: block,
+		b: block || active_block,
 		blocks: null,
 		c: 0,
 		co: active_component,

package/src/runtime/internal/client/types.d.ts

@@ -17,12 +17,12 @@ export type Dependency = {
 	n: null | Dependency;
 };
 
-export type Tracked = {
+export type Tracked<V = any> = {
 	a: { get?: Function, set?: Function };
 	b: Block;
 	c: number;
 	f: number;
-	v: any;
+	v: V;
 };
 
 export type Derived = {