ripple 0.2.199 → 0.2.201

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

@@ -5,6 +5,8 @@ import type { NAMESPACE_URI } from '../../runtime/internal/client/constants.js';
 import type { Parse } from '#parser';
 import type * as ESRap from 'esrap';
 import type { RippleCompileError, CompileOptions } from 'ripple/compiler';
+import type { Position } from 'acorn';
+import type { RequireAllOrNone } from '#helpers';
 
 export type RpcModules = Map<string, [string, string]>;
 
@@ -27,7 +29,9 @@ interface BaseNodeMetaData {
 }
 
 interface FunctionMetaData extends BaseNodeMetaData {
-	was_component?: boolean;
+	// needed for volar tokens to recognize component functions
+	is_component?: boolean;
+	is_method?: boolean;
 	tracked?: boolean;
 }
 
@@ -78,10 +82,23 @@ declare module 'estree' {
 		implements?: AST.TSClassImplements[];
 	}
 
-	interface Identifier extends TrackedNode {}
+	interface Identifier extends AST.TrackedNode {
+		metadata: BaseNodeMetaData & {
+			// needed for volar tokens to recognize component functions
+			is_component?: boolean;
+		};
+	}
 
+	// We mark the whole node as marked when member is @[expression]
+	// Otherwise, we only mark Identifier nodes
 	interface MemberExpression extends AST.TrackedNode {}
 
+	// These 3 are needed so that Literal can extend TrackedNode
+	// since Literal is a union type we have to extend each individually
+	interface SimpleLiteral extends AST.TrackedNode {}
+	interface RegExpLiteral extends AST.TrackedNode {}
+	interface BigIntLiteral extends AST.TrackedNode {}
+
 	interface TrackedNode {
 		tracked?: boolean;
 	}
@@ -149,11 +166,11 @@ declare module 'estree' {
 		key?: AST.Expression | null;
 	}
 
-	interface ServerIdentifier extends AST.BaseNode {
+	interface ServerIdentifier extends AST.BaseExpression {
 		type: 'ServerIdentifier';
 	}
 
-	interface StyleIdentifier extends AST.BaseNode {
+	interface StyleIdentifier extends AST.BaseExpression {
 		type: 'StyleIdentifier';
 	}
 
@@ -211,7 +228,6 @@ declare module 'estree' {
 		body: AST.Node[];
 		css: CSS.StyleSheet | null;
 		metadata: BaseNodeMetaData & {
-			inherited_css?: boolean;
 			topScopedClasses?: TopScopedClasses;
 			styleClasses?: StyleClasses;
 			styleIdentifierPresent?: boolean;
@@ -237,7 +253,8 @@ declare module 'estree' {
 
 	interface Element extends AST.BaseNode {
 		type: 'Element';
-		id: AST.Identifier;
+		// MemberExpression for namespaced or dynamic elements
+		id: AST.Identifier | AST.MemberExpression;
 		attributes: RippleAttribute[];
 		children: AST.Node[];
 		selfClosing?: boolean;
@@ -267,7 +284,7 @@ declare module 'estree' {
 		innerComments?: Comment[];
 	}
 
-	export interface TextNode extends AST.BaseNode {
+	export interface TextNode extends AST.BaseExpression {
 		type: 'Text';
 		expression: AST.Expression;
 		loc?: AST.SourceLocation;
@@ -299,7 +316,7 @@ declare module 'estree' {
 		elements: (AST.Expression | AST.SpreadElement | null)[];
 	}
 
-	interface TrackedExpression extends AST.BaseNode {
+	interface TrackedExpression extends AST.BaseExpression {
 		argument: AST.Expression;
 		type: 'TrackedExpression';
 	}
@@ -309,12 +326,12 @@ declare module 'estree' {
 		properties: (AST.Property | AST.SpreadElement)[];
 	}
 
-	interface TrackedMapExpression extends AST.BaseNode {
+	interface TrackedMapExpression extends AST.BaseExpression {
 		type: 'TrackedMapExpression';
 		arguments: (AST.Expression | AST.SpreadElement)[];
 	}
 
-	interface TrackedSetExpression extends AST.BaseNode {
+	interface TrackedSetExpression extends AST.BaseExpression {
 		type: 'TrackedSetExpression';
 		arguments: (AST.Expression | AST.SpreadElement)[];
 	}
@@ -365,6 +382,14 @@ declare module 'estree' {
 		body: (Program['body'][number] | Component)[];
 	}
 
+	interface RippleMethodDefinition extends Omit<AST.MethodDefinition, 'value'> {
+		value: AST.MethodDefinition['value'] | Component;
+	}
+
+	interface RippleProperty extends Omit<AST.Property, 'value'> {
+		value: AST.Property['value'] | Component;
+	}
+
 	export type RippleAttribute = Attribute | SpreadAttribute | RefAttribute;
 
 	export namespace CSS {
@@ -569,6 +594,14 @@ declare module 'estree-jsx' {
 		computed?: boolean;
 	}
 
+	interface RippleJSXOpeningElement extends Omit<JSXOpeningElement, 'name'> {
+		name: AST.MemberExpression | JSXIdentifier | JSXNamespacedName;
+	}
+
+	interface RippleJSXClosingElement extends Omit<JSXClosingElement, 'name'> {
+		name: AST.MemberExpression | JSXIdentifier | JSXNamespacedName;
+	}
+
 	interface ExpressionMap {
 		JSXIdentifier: JSXIdentifier;
 	}
@@ -678,9 +711,10 @@ declare module 'estree' {
 	interface TSArrayType extends Omit<AcornTSNode<TSESTree.TSArrayType>, 'elementType'> {
 		elementType: TypeNode;
 	}
-	interface TSAsExpression extends AcornTSNode<TSESTree.TSAsExpression> {
+	interface TSAsExpression extends Omit<AcornTSNode<TSESTree.TSAsExpression>, 'typeAnnotation'> {
 		// Have to override it to use our Expression for required properties like metadata
 		expression: AST.Expression;
+		typeAnnotation: TypeNode;
 	}
 	interface TSBigIntKeyword extends AcornTSNode<TSESTree.TSBigIntKeyword> {}
 	interface TSBooleanKeyword extends AcornTSNode<TSESTree.TSBooleanKeyword> {}
@@ -865,8 +899,10 @@ declare module 'estree' {
 	interface TSRestType extends Omit<AcornTSNode<TSESTree.TSRestType>, 'typeAnnotation'> {
 		typeAnnotation: TypeNode;
 	}
-	interface TSSatisfiesExpression extends AcornTSNode<TSESTree.TSSatisfiesExpression> {
+	interface TSSatisfiesExpression
+		extends Omit<AcornTSNode<TSESTree.TSSatisfiesExpression>, 'typeAnnotation'> {
 		expression: AST.Expression;
+		typeAnnotation: TypeNode;
 	}
 	interface TSStringKeyword extends AcornTSNode<TSESTree.TSStringKeyword> {}
 	interface TSSymbolKeyword extends AcornTSNode<TSESTree.TSSymbolKeyword> {}
@@ -961,8 +997,6 @@ declare module 'estree' {
 	}
 }
 
-import type { Comment, Position } from 'acorn';
-
 /**
  * Parse error information
  */
@@ -1175,15 +1209,22 @@ export interface TransformServerState extends BaseState {
 	namespace: NameSpace;
 	server_block_locals: AST.VariableDeclaration[];
 	server_exported_names: string[];
+	dynamicElementName?: AST.TemplateLiteral;
+	applyParentCssScope?: AST.CSS.StyleSheet['hash'];
 }
 
-type UpdateList = Array<{
-	identity?: AST.Identifier | AST.Expression;
-	initial?: AST.Expression;
-	operation: (expr?: AST.Expression, prev?: AST.Expression) => AST.ExpressionStatement;
-	expression?: AST.Expression;
-	needsPrevTracking?: boolean;
-}> & { async?: boolean };
+type UpdateList = Array<
+	RequireAllOrNone<
+		{
+			identity?: AST.Identifier | AST.Expression;
+			initial?: AST.Expression;
+			operation: (expr?: AST.Expression, prev?: AST.Expression) => AST.ExpressionStatement;
+			expression?: AST.Expression;
+			needsPrevTracking?: boolean;
+		},
+		'initial' | 'identity' | 'expression'
+	>
+> & { async?: boolean };
 
 export interface TransformClientState extends BaseState {
 	events: Set<string>;
@@ -1200,6 +1241,7 @@ export interface TransformClientState extends BaseState {
 	template: Array<string | AST.Expression> | null;
 	update: UpdateList | null;
 	errors: RippleCompileError[];
+	applyParentCssScope?: AST.CSS.StyleSheet['hash'];
 }
 
 /** Override zimmerframe types and provide our own */

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

@@ -934,7 +934,8 @@ export namespace Parse {
 			| AST.TrackedArrayExpression
 			| AST.TrackedObjectExpression
 			| AST.Component
-			| AST.Identifier;
+			| AST.Identifier
+			| AST.Literal;
 
 		/** Default handler for parseExprAtom when no other case matches */
 		parseExprAtomDefault(): AST.Expression;
@@ -1196,6 +1197,7 @@ export namespace Parse {
 						requireName?: boolean;
 						isDefault?: boolean;
 						declareName?: boolean;
+						skipName?: boolean;
 				  }
 				| undefined,
 		): AST.Component;

package/src/compiler/utils.js

@@ -584,6 +584,40 @@ export function is_element_dom_element(node) {
 	);
 }
 
+/**
+ * Returns true if element is a dynamic element
+ * @param {AST.Element} node
+ * @returns {boolean}
+ */
+export function is_element_dynamic(node) {
+	return is_id_dynamic(node.id);
+}
+
+/**
+ * @param {AST.Identifier | AST.MemberExpression | AST.Literal} node
+ * @returns {boolean}
+ */
+function is_id_dynamic(node) {
+	if (node.type === 'Identifier' || node.type === 'Literal') {
+		if (node.tracked) {
+			return true;
+		}
+
+		return false;
+	} else if (node.type === 'MemberExpression') {
+		if (/** @type {AST.Identifier} */ (node.object).tracked === true) {
+			return true;
+		}
+		if (node.property.type === 'MemberExpression') {
+			return is_id_dynamic(node.property);
+		}
+
+		return !!(/** @type {AST.Identifier} */ (node.property).tracked);
+	}
+
+	return false;
+}
+
 /**
  * Normalizes children nodes (merges adjacent text, removes empty)
  * @param {AST.Node[]} children

package/src/helpers.d.ts

@@ -0,0 +1,5 @@
+export type RequireAllOrNone<T, K extends keyof T> =
+	| (T & Required<Pick<T, K>>)
+	| (T & { [P in K]?: never });
+
+export type RequiredPresent<T, K extends keyof T> = Omit<T, K> & Required<Pick<T, K>>;

package/src/runtime/index-server.js

@@ -1,52 +1,16 @@
-/** @import { Component, Derived, Tracked } from '#server' */
-
-import { DERIVED, TRACKED, UNINITIALIZED } from './internal/client/constants.js';
-import { is_tracked_object } from './internal/client/utils.js';
-import { active_component, get, set, untrack } from './internal/server/index.js';
+import { get, set, untrack, track, track_split } from './internal/server/index.js';
 
 export { Context } from './internal/server/context.js';
 
-export { get, set, untrack };
-
-export function effect() {
-	// NO-OP
-}
-
-var empty_get_set = { get: undefined, set: undefined };
-
-/**
- * @param {any} v
- * @param {Function} [get]
- * @param {Function} [set]
- * @returns {Tracked | Derived}
- */
-export function track(v, get, set) {
-	var is_tracked = is_tracked_object(v);
-
-	if (is_tracked) {
-		return v;
-	}
+export { get, set, untrack, track, track_split as trackSplit };
 
-	if (typeof v === 'function') {
-		return {
-			a: get || set ? { get, set } : empty_get_set,
-			c: 0,
-			co: active_component,
-			d: null,
-			f: TRACKED | DERIVED,
-			fn: v,
-			v: UNINITIALIZED,
-		};
-	}
+function noop() {}
 
-	return {
-		a: get || set ? { get, set } : empty_get_set,
-		c: 0,
-		d: null,
-		f: TRACKED,
-		v,
-	};
-}
+export const effect = noop;
+export const createRefKey = noop;
+export const on = noop;
+export const tick = noop;
+export const flushSync = noop;
 
 export const TrackedObject = globalThis.Object;
 export const TrackedArray = globalThis.Array;
@@ -72,7 +36,23 @@ export function MediaQuery(query, matches = false) {
  * @param {any} _
  */
 export function createSubscriber(_) {
-	return () => {
-		/* NO-OP */
-	};
+	return noop;
 }
+
+export const bindValue = noop;
+export const bindChecked = noop;
+export const bindGroup = noop;
+export const bindClientWidth = noop;
+export const bindClientHeight = noop;
+export const bindContentRect = noop;
+export const bindContentBoxSize = noop;
+export const bindBorderBoxSize = noop;
+export const bindDevicePixelContentBoxSize = noop;
+export const bindFiles = noop;
+export const bindIndeterminate = noop;
+export const bindInnerHTML = noop;
+export const bindInnerText = noop;
+export const bindTextContent = noop;
+export const bindNode = noop;
+export const bindOffsetWidth = noop;
+export const bindOffsetHeight = noop;

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

@@ -2,6 +2,7 @@
 
 import { branch, destroy_block, render, render_spread } from './blocks.js';
 import { COMPOSITE_BLOCK, DEFAULT_NAMESPACE, NAMESPACE_URI } from './constants.js';
+import { hydrate_next, hydrating } from './hydration.js';
 import { active_block, active_namespace, with_ns } from './runtime.js';
 import { top_element_to_ns } from './utils.js';
 
@@ -13,6 +14,10 @@ import { top_element_to_ns } from './utils.js';
  * @returns {void}
  */
 export function composite(get_component, node, props) {
+	if (hydrating) {
+		hydrate_next();
+	}
+
 	var anchor = node;
 	/** @type {Block | null} */
 	var b = null;

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

@@ -98,20 +98,14 @@ export function handle_event_propagation(event) {
 	// parent of the __root node, which indicates that there's nested
 	// mounted apps. In this case we don't want to trigger events multiple times.
 	var path_idx = 0;
-
-	// @ts-expect-error is added below
 	var handled_at = last_propagated_event === event && event.__root;
 
 	if (handled_at) {
 		var at_idx = path.indexOf(handled_at);
-		if (
-			at_idx !== -1 &&
-			(handler_element === document || handler_element === /** @type {any} */ (window))
-		) {
+		if (at_idx !== -1 && (handler_element === document || handler_element === window)) {
 			// This is the fallback document listener or a window listener, but the event was already handled
 			// -> ignore, but set handle_at to document/window so that we're resetting the event
 			// chain in case someone manually dispatches the same event object again.
-			// @ts-expect-error
 			event.__root = handler_element;
 			return;
 		}
@@ -174,7 +168,6 @@ export function handle_event_propagation(event) {
 				null;
 
 			try {
-				// @ts-expect-error
 				var delegated = current_target['__' + event_name];
 
 				if (delegated !== undefined && !(/** @type {any} */ (current_target).disabled)) {
@@ -210,7 +203,6 @@ export function handle_event_propagation(event) {
 		}
 	} finally {
 		set_active_block(previous_block);
-		// @ts-expect-error is used above
 		event.__root = handler_element;
 		// @ts-ignore remove proxy on currentTarget
 		delete event.currentTarget;

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

@@ -3,7 +3,7 @@
 import { IS_CONTROLLED, IS_INDEXED } from '../../../constants.js';
 import { branch, destroy_block, destroy_block_children, render } from './blocks.js';
 import { FOR_BLOCK, TRACKED_ARRAY } from './constants.js';
-import { hydrate_next, hydrating, set_hydrate_node } from './hydration.js';
+import { hydrate_next, hydrate_node, hydrating, set_hydrate_node } from './hydration.js';
 import { create_text, get_first_child, get_last_child, next_sibling } from './operations.js';
 import { active_block, set, tracked, untrack } from './runtime.js';
 import { array_from, is_array } from './utils.js';
@@ -112,11 +112,9 @@ export function for_block(node, get_collection, render_fn, flags) {
 	var anchor = /** @type {Element | Text} */ (node);
 
 	if (is_controlled) {
-		var parent_node = /** @type {Element} */ (node);
-
 		if (hydrating) {
+			var parent_node = /** @type {Element} */ (node);
 			/** @type {Element | Text} */ (set_hydrate_node(get_first_child(parent_node)));
-			anchor = /** @type {Element | Text} */ (get_last_child(parent_node));
 		} else {
 			anchor = node.appendChild(create_text());
 		}
@@ -135,6 +133,10 @@ export function for_block(node, get_collection, render_fn, flags) {
 			untrack(() => {
 				reconcile_by_ref(anchor, block, array, render_fn, is_controlled, is_indexed);
 			});
+
+			if (hydrating) {
+				anchor = /** @type {Element | Text} */ (hydrate_node);
+			}
 		},
 		null,
 		FOR_BLOCK,

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

@@ -1,5 +1,5 @@
-import { HYDRATION_ERROR } from '../../../constants';
-import { get_next_sibling } from './operations';
+import { HYDRATION_ERROR } from '../../../constants.js';
+import { get_next_sibling } from './operations.js';
 
 export let hydrating = false;
 

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

@@ -66,7 +66,7 @@ export { try_block as try, aborted, suspend } from './try.js';
 
 export { switch_block as switch } from './switch.js';
 
-export { template, append } from './template.js';
+export { template, append, text } from './template.js';
 
 export { tracked_array } from '../../array.js';
 

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

@@ -18,7 +18,7 @@ export var is_firefox;
 export function init_operations() {
 	var node_prototype = Node.prototype;
 	var element_prototype = Element.prototype;
-	var event_target_prototype = EventTarget.prototype;
+	var event_target_prototype = Event.prototype;
 
 	is_firefox = /Firefox/.test(navigator.userAgent);
 	document = window.document;
@@ -34,9 +34,7 @@ export function init_operations() {
 	);
 
 	// the following assignments improve perf of lookups on DOM nodes
-	// @ts-expect-error
 	element_prototype.__click = undefined;
-	// @ts-expect-error
 	event_target_prototype.__root = undefined;
 }
 
@@ -124,7 +122,9 @@ export function next_sibling(node, is_text) {
 	let next_sibling = hydrating ? hydrate_node : node;
 	var last_sibling;
 
-	next_sibling = /** @type {ChildNode | null} */ (get_next_sibling(node));
+	next_sibling = /** @type {ChildNode | null} */ (
+		get_next_sibling(/** @type {ChildNode} */ (next_sibling))
+	);
 	last_sibling = next_sibling;
 
 	if (!hydrating) {

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

@@ -22,9 +22,7 @@ import { normalize_css_property_name } from '../../../utils/normalize_css_proper
 export function set_text(text, value) {
 	// For objects, we apply string coercion
 	var str = value == null ? '' : typeof value === 'object' ? value + '' : value;
-	// @ts-expect-error
 	if (str !== (text.__t ??= text.nodeValue)) {
-		// @ts-expect-error
 		text.__t = str;
 		text.nodeValue = str + '';
 	}

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

@@ -7,7 +7,7 @@ import {
 	TEMPLATE_MATHML_NAMESPACE,
 } from '../../../constants.js';
 import { hydrate_next, hydrate_node, hydrating, pop } from './hydration.js';
-import { get_first_child, is_firefox } from './operations.js';
+import { create_text, get_first_child, is_firefox } from './operations.js';
 import { active_block, active_namespace } from './runtime.js';
 
 /**
@@ -118,6 +118,14 @@ export function append(anchor, dom) {
 	anchor.before(/** @type {Node} */ (dom));
 }
 
+export function text(data = '') {
+	if (hydrating) {
+		assign_nodes(/** @type {Node} */ (hydrate_node), /** @type {Node} */ (hydrate_node));
+		return /** @type {Node} */ (hydrate_node);
+	}
+	return create_text(data);
+}
+
 /**
  * Create fragment with proper namespace using Svelte's wrapping approach
  * @param {string} content

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

@@ -63,3 +63,21 @@ export type CompatApi = {
 export type CompatOptions = {
 	[key: string]: CompatApi;
 };
+
+declare global {
+	interface Element {
+		__attributes?: {
+			checked?: boolean;
+			value?: string;
+		};
+		__click?: () => void;
+	}
+
+	interface Event {
+		__root?: EventTarget;
+	}
+
+	interface Text {
+		__t?: string | null;
+	}
+}

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

@@ -33,7 +33,7 @@ export var array_prototype = Array.prototype;
  */
 export function create_anchor() {
 	var t = document.createTextNode('');
-	/** @type {any} */ (t).__t = '';
+	t.__t = '';
 	return t;
 }