ripple 0.3.13 → 0.3.15

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # ripple
 
+## 0.3.15
+
+### Patch Changes
+
+- [`a14097a`](https://github.com/Ripple-TS/ripple/commit/a14097a688ad85c236a6619cef527c78787ab367)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Fix children prop precedence
+  when invoking components so that template children always win over an explicit
+  `children=` attribute, while still respecting JSX-like ordering between explicit
+  props and spreads when no template children are present.
+
+- Updated dependencies
+  [[`a14097a`](https://github.com/Ripple-TS/ripple/commit/a14097a688ad85c236a6619cef527c78787ab367)]:
+  - ripple@0.3.15
+
+## 0.3.14
+
+### Patch Changes
+
+- [#866](https://github.com/Ripple-TS/ripple/pull/866)
+  [`228f1bb`](https://github.com/Ripple-TS/ripple/commit/228f1bb36cd3e8506c422ed0997164bf5a0b5fe2)
+  Thanks [@trueadm](https://github.com/trueadm)! - Extract compiler into
+  `@tsrx/core` and `@tsrx/ripple` packages
+  - `@tsrx/core`: Core compiler infrastructure — parser factory, scope management,
+    utilities, constants, and type definitions
+  - `@tsrx/ripple`: Ripple-specific compiler — RipplePlugin, analyze,
+    client/server transforms
+  - Remove compiler source code from `ripple` package (consumers should use
+    `@tsrx/ripple`)
+  - Migrate eslint-plugin type imports to `@tsrx/core/types/*`
+  - Remove unused compiler dependencies from `ripple` package
+
+- Updated dependencies
+  [[`228f1bb`](https://github.com/Ripple-TS/ripple/commit/228f1bb36cd3e8506c422ed0997164bf5a0b5fe2)]:
+  - ripple@0.3.14
+
 ## 0.3.13
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.3.13",
+  "version": "0.3.15",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -33,29 +33,12 @@
       "types": "./types/server.d.ts",
       "default": "./src/server/index.js"
     },
-    "./compiler": {
-      "types": "./src/compiler/index.d.ts",
-      "require": "./src/compiler/index.js",
-      "default": "./src/compiler/index.js"
-    },
-    "./types/estree": {
-      "types": "./src/compiler/types/estree.d.ts"
-    },
-    "./types/estree-jsx": {
-      "types": "./src/compiler/types/estree-jsx.d.ts"
-    },
-    "./types/acorn": {
-      "types": "./src/compiler/types/acorn.d.ts"
-    },
     "./compiler/internal/import": {
       "types": "./src/compiler/types/import.d.ts"
     },
     "./compiler/internal/rpc": {
       "types": "./src/compiler/types/rpc.d.ts"
     },
-    "./compiler/internal/identifier/utils": {
-      "default": "./src/compiler/identifier-utils.js"
-    },
     "./validator": {
       "types": "./types/index.d.ts",
       "require": "./validator/index.js",
@@ -83,23 +66,13 @@
     "#client": "./src/runtime/internal/client/types.d.ts",
     "#client/constants": "./src/internal/client/constants.js",
     "#server": "./src/runtime/internal/server/types.d.ts",
-    "#compiler": "./src/compiler/types/index.d.ts",
-    "#parser": "./src/compiler/types/parse.d.ts",
     "#public": "./types/index.d.ts",
     "#helpers": "./src/helpers.d.ts"
   },
   "dependencies": {
-    "@jridgewell/sourcemap-codec": "^1.5.5",
-    "@sveltejs/acorn-typescript": "^1.0.9",
-    "acorn": "^8.15.0",
     "clsx": "^2.1.1",
     "devalue": "^5.6.3",
     "esm-env": "^1.2.2",
-    "esrap": "^2.1.0",
-    "is-reference": "^3.0.3",
-    "magic-string": "^0.30.18",
-    "muggle-string": "^0.4.1",
-    "zimmerframe": "^1.1.2",
     "@types/estree": "^1.0.8",
     "@types/estree-jsx": "^1.0.5"
   },
@@ -108,9 +81,11 @@
     "@typescript-eslint/types": "^8.40.0",
     "typescript": "^5.9.3",
     "@volar/language-core": "~2.4.28",
-    "vscode-languageserver-types": "^3.17.5"
+    "vscode-languageserver-types": "^3.17.5",
+    "@tsrx/core": "0.0.2",
+    "@tsrx/ripple": "0.0.3"
   },
   "peerDependencies": {
-    "ripple": "0.3.13"
+    "ripple": "0.3.15"
   }
 }

package/src/runtime/array.js

@@ -4,49 +4,49 @@ import { array_proxy } from './proxy.js';
 
 /**
  * @template T
- * @constructor
- * @param {...T} elements
- * @returns {RippleArray<T>}
  */
-export function RippleArray(...elements) {
-	if (!new.target) {
-		throw new Error("RippleArray must be called with 'new'");
+export class RippleArray {
+	/**
+	 * @param {...T} elements
+	 */
+	constructor(...elements) {
+		var block = safe_scope();
+		return /** @type {RippleArray<any>} */ (
+			/** @type {unknown} */ (ripple_array(block, ...elements))
+		);
 	}
 
-	var block = safe_scope();
-	return ripple_array(block, ...elements);
-}
-
-/**
- * @template T
- * @param {ArrayLike<T> | Iterable<T>} arrayLike
- * @param {(v: T, k: number) => any | undefined} [mapFn]
- * @param {*} [thisArg]
- * @returns {RippleArray<T>}
- */
-RippleArray.from = function (arrayLike, mapFn, thisArg) {
-	return ripple_array.from(safe_scope(), arrayLike, mapFn, thisArg);
-};
+	/**
+	 * @template U
+	 * @param {ArrayLike<U> | Iterable<U>} arrayLike
+	 * @param {(v: U, k: number) => any | undefined} [mapFn]
+	 * @param {*} [thisArg]
+	 * @returns {RippleArray<U>}
+	 */
+	static from(arrayLike, mapFn, thisArg) {
+		return ripple_array.from(safe_scope(), arrayLike, mapFn, thisArg);
+	}
 
-/**
- * @template T
- * @param {...T} items
- * @returns {RippleArray<T>}
- */
-RippleArray.of = function (...items) {
-	return ripple_array.of(safe_scope(), ...items);
-};
+	/**
+	 * @template U
+	 * @param {...U} items
+	 * @returns {RippleArray<U>}
+	 */
+	static of(...items) {
+		return ripple_array.of(safe_scope(), ...items);
+	}
 
-/**
- * @template T
- * @param {ArrayLike<T> | Iterable<T>} arrayLike
- * @param {(v: T, k: number) => any | undefined} [mapFn]
- * @param {any} [thisArg]
- * @returns {Promise<RippleArray<T>>}
- */
-RippleArray.fromAsync = async function (arrayLike, mapFn, thisArg) {
-	return ripple_array.fromAsync(safe_scope(), arrayLike, mapFn, thisArg);
-};
+	/**
+	 * @template U
+	 * @param {ArrayLike<U> | Iterable<U>} arrayLike
+	 * @param {(v: U, k: number) => any | undefined} [mapFn]
+	 * @param {any} [thisArg]
+	 * @returns {Promise<RippleArray<U>>}
+	 */
+	static async fromAsync(arrayLike, mapFn, thisArg) {
+		return ripple_array.fromAsync(safe_scope(), arrayLike, mapFn, thisArg);
+	}
+}
 
 /**
  * @template T

package/src/runtime/create-subscriber.js

@@ -1,8 +1,8 @@
-/** @import { createSubscriber } from '#public' */
+/** @import { createSubscriber as createSubscriberType } from '#public' */
 import { untrack, queue_microtask } from './internal/client/runtime.js';
 import { effect } from './internal/client/blocks.js';
 
-/** @type {createSubscriber} */
+/** @type {typeof createSubscriberType} */
 export function createSubscriber(start) {
 	let subscribers = 0;
 	/** @type {(() => void) | void} */

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

@@ -1,11 +1,9 @@
 /** @import { Tracked } from '#client' */
 
-/**
-@typedef {(v: unknown) => void} SetFunction
-@typedef {() => any} BindGetter
-@typedef {(v: unknown) => void} BindSetter
-@typedef {{getter: BindGetter, setter: BindSetter}} BindGetSet
-*/
+/** @typedef {(v: unknown) => void} SetFunction */
+/** @typedef {() => any} BindGetter */
+/** @typedef {(v: unknown) => void} BindSetter */
+/** @typedef {{getter: BindGetter, setter: BindSetter}} BindGetSet */
 
 import { effect, render } from './blocks.js';
 import { on } from './events.js';

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

@@ -277,8 +277,9 @@ function create_event(event_name, dom, handler, options) {
 	}
 
 	/**
-	 * @type {EventListener}
 	 * @this {Element}
+	 * @param {Event} event
+	 * @returns {any}
 	 */
 	function target_handler(event) {
 		var previous_block = active_block;
@@ -295,7 +296,7 @@ function create_event(event_name, dom, handler, options) {
 				handle_event_propagation.call(dom, event);
 			}
 			if (!event.cancelBubble) {
-				return handler?.call(this, event);
+				return handler?.call(/** @type {Element} */ (this), event);
 			}
 		} finally {
 			set_active_block(previous_block);
@@ -380,6 +381,7 @@ export function delegate(events) {
 
 /** @param {Element} target */
 export function handle_root_events(target) {
+	/** @type {Set<string>} */
 	var registered_events = new Set();
 	root_target = target;
 
@@ -417,7 +419,10 @@ export function handle_root_events(target) {
 
 	return () => {
 		for (var event_name of registered_events) {
-			target.removeEventListener(event_name, handle_event_propagation);
+			target.removeEventListener(
+				event_name,
+				/** @type {EventListener} */ (handle_event_propagation),
+			);
 		}
 		root_event_handles.delete(event_handle);
 		root_target = null;

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

@@ -6,21 +6,9 @@ import { hydrate_node, hydrating } from './hydration.js';
 import { branch, destroy_block, render } from './blocks.js';
 import { active_block, get, set, tracked } from './runtime.js';
 
-/**
-@typedef {
-	(anchor: Node, props: any, block: Block | null) => void
-} Component
-
-@typedef {
-	Component & {
-		[HMR]: {
-			fn: Component;
-			current: Tracked | undefined;
-			update: (incoming: ComponentWrapper) => void;
-		}
-	}
-} ComponentWrapper
- */
+/** @typedef {(anchor: Node, props: any, block: Block | null) => void} Component */
+
+/** @typedef {Component & { [HMR]: { fn: Component; current: Tracked | undefined; update: (incoming: ComponentWrapper) => void; } }} ComponentWrapper */
 
 /**
  * Wraps a component function for HMR (Hot Module Replacement).
@@ -35,10 +23,9 @@ export function hmr(fn) {
 	var current;
 
 	/**
-	 * @type {ComponentWrapper}
 	 * @param {Node} anchor
 	 * @param {any} props
-	 * @param {Block | null} block
+	 * @param {Block | null} [block]
 	 */
 	function wrapper(anchor, props, block = active_block) {
 		if (current === undefined) {
@@ -88,6 +75,7 @@ export function hmr(fn) {
 	wrapper[HMR] = {
 		fn,
 		current,
+		/** @param {ComponentWrapper} incoming */
 		update: (incoming) => {
 			fn = incoming[HMR].fn;
 			wrapper[HMR].fn = fn;

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

@@ -394,6 +394,7 @@ class TrackedValue {
 		this.a = a;
 		this.b = block;
 		this.c = 0;
+		/** @type {DeferredTrackedEntry[] | null} */
 		this.d = null;
 		this.f = TRACKED;
 		this.__v = v;

package/src/runtime/internal/server/blocks.js

@@ -1,15 +1,13 @@
 /**
-@import { Block, TryBlock, TryBlockWithCatch } from '#server';
-@import { OutputInterface } from './index.js';
+ * @import { Block, TryBlock, TryBlockWithCatch } from '#server';
+ * @import { OutputInterface } from './index.js';
  */
 
-/**
-@typedef {Error} SSRError
-@typedef {(__output: OutputInterface) => void} BlockFunction
-@typedef {() => void} TryFunction
-@typedef {(error: SSRError) => void} CatchFunction
-@typedef {() => void} PendingFunction
- */
+/** @typedef {Error} SSRError */
+/** @typedef {(__output: OutputInterface) => void} BlockFunction */
+/** @typedef {() => void} TryFunction */
+/** @typedef {(error: SSRError) => void} CatchFunction */
+/** @typedef {() => void} PendingFunction */
 
 import { ASYNC_DERIVED_READ_THROWN } from '../client/constants.js';
 import {

package/src/runtime/internal/server/index.js

@@ -1,29 +1,17 @@
 /**
-@import { Component, Dependency, Derived, Tracked, Block, TryBlockWithCatch } from '#server';
-@import { NestedArray } from '#helpers';
-@import { Props } from '#public';
-@import { RenderResult, BaseRenderOptions, RenderStreamResult, Stream, StreamSink } from 'ripple/server';
-*/
+ * @import { Component, Dependency, Derived, Tracked, Block, TryBlockWithCatch } from '#server';
+ * @import { NestedArray } from '#helpers';
+ * @import { Props } from '#public';
+ * @import { RenderResult, BaseRenderOptions, RenderStreamResult, Stream, StreamSink } from 'ripple/server';
+ */
 
 // Export-only Types
-/**
-@typedef {Output} OutputInterface;
- */
+/** @typedef {Output} OutputInterface */
 
 // Internal Types
-/**
-@typedef {(props?: Props) => void} RenderComponent
-@typedef {{
-	tag: string;
-	parent: undefined | ElementContext;
-	filename: undefined | string;
-	line: number;
-	column: number;
-}} ElementContext;
-@typedef {{
-	cancel: () => void,
-}} RegisteredAsyncOperation;
-*/
+/** @typedef {(props?: Props) => void} RenderComponent */
+/** @typedef {{ tag: string; parent: undefined | ElementContext; filename: undefined | string; line: number; column: number; }} ElementContext */
+/** @typedef {{ cancel: () => void }} RegisteredAsyncOperation */
 
 import {
 	DERIVED,
@@ -36,7 +24,7 @@ import {
 } from '../client/constants.js';
 import { is_ripple_object, array_slice } from '../client/utils.js';
 import { escape } from '../../../utils/escaping.js';
-import { is_boolean_attribute } from '../../../compiler/utils.js';
+import { is_boolean_attribute } from '../../../utils/attributes.js';
 import { clsx } from 'clsx';
 import { normalize_css_property_name } from '../../../utils/normalize_css_property_name.js';
 import { BLOCK_CLOSE, BLOCK_OPEN } from '../../../constants.js';
@@ -586,6 +574,7 @@ export async function render(component, passed_in_options = {}) {
 	var top_level_error = null;
 	var head = '';
 	var body = '';
+	/** @type {Set<string>} */
 	var css = new Set();
 	/** @type {Block | null} */
 	var root_block = null;
@@ -977,7 +966,9 @@ class TrackedValue {
 	 */
 	constructor(v, a) {
 		this.a = a;
+		/** @type {AbortController | null} */
 		this.aa = null;
+		/** @type {PromiseLike<any> | null} */
 		this.ap = null;
 		this.c = 0;
 		this.f = TRACKED;
@@ -1022,6 +1013,7 @@ class DerivedValue {
 		this.b = /** @type {Block} */ (active_block);
 		this.c = 0;
 		this.co = active_component;
+		/** @type {Dependency | null} */
 		this.d = null;
 		this.f = DERIVED;
 		this.fn = fn;

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/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/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';