ripple 0.3.12 → 0.3.14

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

@@ -1,4 +1,6 @@
 import type { Context } from './context.js';
+import type { OutputInterface } from './index.js';
+import type { BlockFunction, CatchFunction, PendingFunction } from './blocks.js';
 
 export type Component = {
 	c: null | Map<Context<any>, any>;
@@ -13,6 +15,7 @@ export type Dependency = {
 
 export type Derived = {
 	a: { get?: Function; set?: Function };
+	b: Block;
 	c: number;
 	co: null | Component;
 	d: null | Dependency;
@@ -31,9 +34,41 @@ export type Tracked = {
 	c: number;
 	f: number;
 	v: any;
+	aa: AbortController | null;
+	ap: PromiseLike<any> | null;
 	readonly [0]: any;
 	[1]: Tracked;
 	value: any;
 	readonly length: 2;
 	[Symbol.iterator](): Iterator<any | Tracked>;
 };
+
+export type Block = {
+	co: Component | null;
+	f: number;
+	fn: BlockFunction;
+	o: OutputInterface;
+	p: Block | null;
+	s: any;
+	first: Block | null;
+	last: Block | null;
+	next: Block | null;
+	prev: Block | null;
+};
+
+export type TryBlockState = {
+	p?: PendingFunction | null;
+	c?: CatchFunction | null;
+};
+
+export type TryBlock = Block & {
+	s: TryBlockState;
+};
+
+export type TryBlockWithCatch = TryBlock & {
+	s: TryBlockState & { c: CatchFunction };
+};
+
+export type TryBlockWithPending = TryBlock & {
+	s: TryBlockState & { p: PendingFunction };
+};

package/src/runtime/media-query.js

@@ -2,47 +2,48 @@ import { on } from './internal/client/events.js';
 import { get, safe_scope, set, tracked, with_scope } from './internal/client/index.js';
 import { ReactiveValue } from './reactive-value.js';
 
+/** @typedef {import('#public').ReactiveValue<boolean>} ReactiveValueBoolean */
+
 const parenthesis_regex = /\(.+\)/;
 const non_parenthesized_keywords = new Set(['all', 'print', 'screen', 'and', 'or', 'not', 'only']);
 
 /**
- * @constructor
- * @param {string} query
- * @param {boolean | undefined} [fallback]
- * @returns {ReactiveValue<boolean>}
+ * @type {new (query: string, fallback?: boolean | undefined) => ReactiveValueBoolean}
  */
-export function MediaQuery(query, fallback) {
-	if (!new.target) {
-		throw new TypeError('MediaQuery must be called with new');
-	}
+export const MediaQuery = /** @type {any} */ (
+	function MediaQuery(/** @type {string} */ query, /** @type {boolean | undefined} */ fallback) {
+		if (!new.target) {
+			throw new TypeError('MediaQuery must be called with new');
+		}
 
-	var block = safe_scope();
+		var block = safe_scope();
 
-	let final_query =
-		parenthesis_regex.test(query) ||
-		// we need to use `some` here because technically this `window.matchMedia('random,screen')` still returns true
-		query.split(/[\s,]+/).some((keyword) => non_parenthesized_keywords.has(keyword.trim()))
-			? query
-			: `(${query})`;
-	const q = window.matchMedia(final_query);
-	const matches = tracked(q.matches, block);
+		let final_query =
+			parenthesis_regex.test(query) ||
+			// we need to use `some` here because technically this `window.matchMedia('random,screen')` still returns true
+			query.split(/[\s,]+/).some((keyword) => non_parenthesized_keywords.has(keyword.trim()))
+				? query
+				: `(${query})`;
+		const q = window.matchMedia(final_query);
+		const matches = tracked(q.matches, block);
 
-	return new ReactiveValue(
-		() => get(matches),
-		() =>
-			on(
-				q,
-				'change',
-				() => {
-					// skip wrapping in untrack as createSubscriber already does it
-					if (q.matches !== get(matches)) {
-						set(matches, q.matches);
-					}
-				},
-				{ delegated: false },
-			),
-	);
-}
+		return new ReactiveValue(
+			() => get(matches),
+			() =>
+				on(
+					q,
+					'change',
+					() => {
+						// skip wrapping in untrack as createSubscriber already does it
+						if (q.matches !== get(matches)) {
+							set(matches, q.matches);
+						}
+					},
+					{ delegated: false },
+				),
+		);
+	}
+);
 
 /**
  * @param {import('#client').Block} block

package/src/runtime/object.js

@@ -4,18 +4,15 @@ import { object_proxy } from './proxy.js';
 
 /**
  * @template {object} T
- * @constructor
- * @param {T} obj
- * @returns {RippleObject<T>}
  */
-export function RippleObject(obj) {
-	if (!new.target) {
-		throw new Error("RippleObject must be called with 'new'");
+export class RippleObject {
+	/**
+	 * @param {T} obj
+	 */
+	constructor(obj) {
+		var block = safe_scope();
+		return /** @type {RippleObject<any>} */ (/** @type {unknown} */ (ripple_object(block, obj)));
 	}
-
-	var block = safe_scope();
-
-	return ripple_object(block, obj);
 }
 
 /**

package/src/runtime/proxy.js

@@ -1,6 +1,5 @@
 /** @import { Block, Tracked } from '#client' */
-/** @import { RippleArray } from './array.js' */
-/** @import { RippleObject } from './object.js' */
+/** @import { RippleArray, RippleObject } from '#public' */
 
 import { get, set, tracked } from './internal/client/runtime.js';
 import {
@@ -295,7 +294,7 @@ export function array_proxy({ elements, block, from_static = false, use_array =
 		arr = new Array(...elements);
 	}
 
-	return proxy(arr, block);
+	return /** @type {RippleArray<T>} */ (proxy(arr, block));
 }
 
 /**

package/src/runtime/reactive-value.js

@@ -1,29 +1,31 @@
 /** @import { Derived } from '#client' */
+/** @import { ReactiveValue as ReactiveValueT } from '#public' */
 import { createSubscriber } from './create-subscriber.js';
 import { safe_scope, derived } from './internal/client/runtime.js';
 
 /**
- * @template V
- * @constructor
- * @param {() => V} fn
- * @param {() => void | (() => void)} start
- * @returns {Derived}
+ * @type {new <V>(fn: () => V, start: () => void | (() => void)) => ReactiveValueT<V>}
  */
-export function ReactiveValue(fn, start) {
-	if (!new.target) {
-		throw new TypeError('`ReactiveValue` must be called with new');
-	}
+export const ReactiveValue = /** @type {any} */ (
+	function ReactiveValue(
+		/** @type {() => any} */ fn,
+		/** @type {() => void | (() => void)} */ start,
+	) {
+		if (!new.target) {
+			throw new TypeError('`ReactiveValue` must be called with new');
+		}
 
-	const s = createSubscriber(start);
-	const block = safe_scope();
+		const s = createSubscriber(start);
+		const block = safe_scope();
 
-	return derived(
-		fn,
-		block,
-		() => {
-			s();
-			return fn();
-		},
-		(_, prev) => prev,
-	);
-}
+		return derived(
+			fn,
+			block,
+			() => {
+				s();
+				return fn();
+			},
+			(/** @type {any} */ _, /** @type {any} */ prev) => prev,
+		);
+	}
+);

package/src/server/index.js

@@ -1,5 +1,5 @@
 // SSR helpers
-export { render, renderToStream } from '../runtime/internal/server/index.js';
+export { create_ssr_stream, render } from '../runtime/internal/server/index.js';
 export { get_css_for_hashes } from '../runtime/internal/server/css-registry.js';
 export { executeServerFunction } from '../runtime/internal/server/rpc.js';
 

package/src/utils/ast.js

@@ -1,4 +1,4 @@
-/** @import * as AST from 'estree' */
+/** @import * as AST from '@tsrx/core/types/estree' */
 
 /**
  * Represents the path of a destructured assignment from either a declaration

package/src/utils/async.js

@@ -0,0 +1,35 @@
+/**
+ * @param {any} value
+ * @returns {value is PromiseLike<any>}
+ */
+export function is_promise_like(value) {
+	return (
+		(typeof value === 'object' || typeof value === 'function') &&
+		value !== null &&
+		typeof value.then === 'function'
+	);
+}
+
+/**
+ * @param {any} value
+ * @param {'deferred'} [type]
+ * @returns {{ promise: PromiseLike<any>, abort_controller: AbortController | null, type?: 'deferred' } | null}
+ */
+export function get_async_track_result(value, type) {
+	if (is_promise_like(value)) {
+		return { promise: value, abort_controller: null, type: type };
+	}
+
+	if (typeof value === 'object' && value !== null && is_promise_like(value.promise)) {
+		return {
+			promise: value.promise,
+			abort_controller:
+				typeof value.abortController === 'object' && value.abortController !== null
+					? value.abortController
+					: null,
+			type: type,
+		};
+	}
+
+	return null;
+}

package/src/utils/attributes.js

@@ -0,0 +1,43 @@
+/**
+ * Attributes that are boolean, i.e. they are present or not present.
+ */
+const DOM_BOOLEAN_ATTRIBUTES = [
+	'allowfullscreen',
+	'async',
+	'autofocus',
+	'autoplay',
+	'checked',
+	'controls',
+	'default',
+	'disabled',
+	'formnovalidate',
+	'hidden',
+	'indeterminate',
+	'inert',
+	'ismap',
+	'loop',
+	'multiple',
+	'muted',
+	'nomodule',
+	'novalidate',
+	'open',
+	'playsinline',
+	'readonly',
+	'required',
+	'reversed',
+	'seamless',
+	'selected',
+	'webkitdirectory',
+	'defer',
+	'disablepictureinpicture',
+	'disableremoteplayback',
+];
+
+/**
+ * Returns true if name is a boolean DOM attribute
+ * @param {string} name
+ * @returns {boolean}
+ */
+export function is_boolean_attribute(name) {
+	return DOM_BOOLEAN_ATTRIBUTES.includes(name);
+}

package/src/utils/builders.js

@@ -1,5 +1,5 @@
-/** @import * as AST from 'estree' */
-/** @import * as ESTreeJSX from 'estree-jsx' */
+/** @import * as AST from '@tsrx/core/types/estree' */
+/** @import * as ESTreeJSX from '@tsrx/core/types/estree-jsx' */
 
 import { regex_is_valid_identifier } from './patterns.js';
 import { sanitize_template_string } from './sanitize_template_string.js';
@@ -1051,15 +1051,17 @@ export function try_builder(block, handler = null, finalizer = null, pending = n
 
 /**
  * @param {AST.Pattern | null} param
+ * @param {AST.Pattern | null} reset_param
  * @param {AST.BlockStatement} body
  * @param {AST.NodeWithLocation} [loc_info]
  * @return {AST.CatchClause}
  */
-export function catch_clause_builder(param, body, loc_info) {
+export function catch_clause_builder(param, reset_param, body, loc_info) {
 	/** @type {AST.CatchClause} */
 	const node = {
 		type: 'CatchClause',
 		param,
+		resetParam: reset_param,
 		body,
 		metadata: { path: [] },
 	};

package/tests/client/__snapshots__/computed-properties.test.rsrx.snap

@@ -0,0 +1,49 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`computed tracked properties > should update a property using assignment 1`] = `
+<div>
+  <div>
+    0
+  </div>
+  <button>
+    Increment
+  </button>
+  
+</div>
+`;
+
+exports[`computed tracked properties > should update a property using assignment 2`] = `
+<div>
+  <div>
+    1
+  </div>
+  <button>
+    Increment
+  </button>
+  
+</div>
+`;
+
+exports[`computed tracked properties > should update a property using update expressions 1`] = `
+<div>
+  <div>
+    0
+  </div>
+  <button>
+    Increment
+  </button>
+  
+</div>
+`;
+
+exports[`computed tracked properties > should update a property using update expressions 2`] = `
+<div>
+  <div>
+    1
+  </div>
+  <button>
+    Increment
+  </button>
+  
+</div>
+`;