ripple 0.2.165 → 0.2.167

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

@@ -0,0 +1,156 @@
+import { error } from '../../errors.js';
+
+const invalid_nestings = {
+	// <p> cannot contain block-level elements
+	p: new Set([
+		'address',
+		'article',
+		'aside',
+		'blockquote',
+		'details',
+		'div',
+		'dl',
+		'fieldset',
+		'figcaption',
+		'figure',
+		'footer',
+		'form',
+		'h1',
+		'h2',
+		'h3',
+		'h4',
+		'h5',
+		'h6',
+		'header',
+		'hgroup',
+		'hr',
+		'main',
+		'menu',
+		'nav',
+		'ol',
+		'p',
+		'pre',
+		'section',
+		'table',
+		'ul',
+	]),
+	// <span> cannot contain block-level elements
+	span: new Set([
+		'address',
+		'article',
+		'aside',
+		'blockquote',
+		'details',
+		'div',
+		'dl',
+		'fieldset',
+		'figcaption',
+		'figure',
+		'footer',
+		'form',
+		'h1',
+		'h2',
+		'h3',
+		'h4',
+		'h5',
+		'h6',
+		'header',
+		'hgroup',
+		'hr',
+		'main',
+		'menu',
+		'nav',
+		'ol',
+		'p',
+		'pre',
+		'section',
+		'table',
+		'ul',
+	]),
+	// Interactive elements cannot be nested
+	a: new Set(['a', 'button']),
+	button: new Set(['a', 'button']),
+	// Form elements
+	label: new Set(['label']),
+	form: new Set(['form']),
+	// Headings cannot be nested within each other
+	h1: new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+	h2: new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+	h3: new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+	h4: new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+	h5: new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+	h6: new Set(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+	// Table structure
+	table: new Set(['table', 'tr', 'td', 'th']), // Can only contain caption, colgroup, thead, tbody, tfoot
+	thead: new Set(['caption', 'colgroup', 'thead', 'tbody', 'tfoot', 'td', 'th']), // Can only contain tr
+	tbody: new Set(['caption', 'colgroup', 'thead', 'tbody', 'tfoot', 'td', 'th']), // Can only contain tr
+	tfoot: new Set(['caption', 'colgroup', 'thead', 'tbody', 'tfoot', 'td', 'th']), // Can only contain tr
+	tr: new Set(['caption', 'colgroup', 'thead', 'tbody', 'tfoot', 'tr']), // Can only contain td and th
+	td: new Set(['td', 'th']), // Cannot nest td/th elements
+	th: new Set(['td', 'th']), // Cannot nest td/th elements
+	// Media elements
+	picture: new Set(['picture']),
+	// Main landmark - only one per document, cannot be nested
+	main: new Set(['main']),
+	// Other semantic restrictions
+	figcaption: new Set(['figcaption']),
+	dt: new Set([
+		'header',
+		'footer',
+		'article',
+		'aside',
+		'nav',
+		'section',
+		'h1',
+		'h2',
+		'h3',
+		'h4',
+		'h5',
+		'h6',
+	]),
+	// No interactive content inside summary
+	summary: new Set(['summary']),
+};
+
+/**
+ * @param {any} element
+ * @returns {string | null}
+ */
+function get_element_tag(element) {
+	return element.id.type === 'Identifier' ? element.id.name : null;
+}
+
+/**
+ * @param {any} element
+ * @param {any} state
+ * @param {any} context
+ */
+export function validate_nesting(element, state, context) {
+	const tag = get_element_tag(element);
+
+	if (tag === null) {
+		return;
+	}
+
+	for (let i = context.path.length - 1; i >= 0; i--) {
+		const parent = context.path[i];
+		if (parent.type === 'Element') {
+			const parent_tag = get_element_tag(parent);
+			if (parent_tag === null) {
+				continue;
+			}
+
+			if (parent_tag in invalid_nestings) {
+				const validation_set =
+					invalid_nestings[/** @type {keyof typeof invalid_nestings} */ (parent_tag)];
+				if (validation_set.has(tag)) {
+					error(
+						`Invalid HTML nesting: <${tag}> cannot be a descendant of <${parent_tag}>.`,
+						state.analysis.module.filename,
+						context,
+					);
+				}
+			}
+		}
+	}
+}

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

@@ -1,4 +1,4 @@
-/** @import {Expression, FunctionExpression, Node, Program} from 'estree' */
+/** @import {Expression, FunctionExpression, Node, Program, Statement} from 'estree' */
 
 /** @typedef {Map<number, {offset: number, delta: number}>} PostProcessingChanges */
 /** @typedef {number[]} LineOffsets */
@@ -129,7 +129,7 @@ function visit_head_element(node, context) {
 	}
 }
 
-function apply_updates(init, update) {
+function apply_updates(init, update, state) {
 	if (update.length === 1) {
 		init.push(
 			b.stmt(
@@ -155,8 +155,25 @@ function apply_updates(init, update) {
 		const render_statements = [];
 		let index = 0;
 
+		const grouped_updates = new Map();
+
 		for (const u of update) {
 			if (u.initial) {
+				const id =
+					u.identity.type === 'Identifier' ? state.scope.get(u.identity.name)?.initial : u.identity;
+				let updates = grouped_updates.get(id);
+
+				if (updates === undefined) {
+					updates = [];
+					grouped_updates.set(id, updates);
+				}
+				updates.push(u);
+			}
+		}
+
+		for (const [, updates] of grouped_updates) {
+			if (updates.length === 1) {
+				const u = updates[0];
 				const key = index_to_key(index);
 				index_map.set(u.operation, key);
 				initial.push(b.prop('init', b.id(key), u.initial));
@@ -171,6 +188,29 @@ function apply_updates(init, update) {
 				);
 				index++;
 			} else {
+				const key = index_to_key(index);
+				/** @type {Array<Statement>} */
+				const if_body = [
+					b.stmt(b.assignment('=', b.member(b.id('__prev'), b.id(key)), b.id('__' + key))),
+				];
+				initial.push(b.prop('init', b.id(key), updates[0].initial));
+				render_statements.push(
+					b.var('__' + key, updates[0].expression),
+					b.if(
+						b.binary('!==', b.member(b.id('__prev'), b.id(key)), b.id('__' + key)),
+						b.block(if_body),
+					),
+				);
+				for (const u of updates) {
+					index_map.set(u.operation, key);
+					if_body.push(u.operation(b.id('__' + key)));
+					index++;
+				}
+			}
+		}
+
+		for (const u of update) {
+			if (!u.initial) {
 				render_statements.push(u.operation);
 			}
 		}
@@ -835,6 +875,7 @@ const visitors = {
 		if (is_dom_element) {
 			let class_attribute = null;
 			let style_attribute = null;
+			/** @type {Array<Statement>} */
 			const local_updates = [];
 			const is_void = is_void_element(node.id.name);
 
@@ -997,9 +1038,11 @@ const visitors = {
 								});
 							} else {
 								local_updates.push({
-									operation: b.stmt(
-										b.call('_$_.set_attribute', id, b.literal(attribute), expression),
-									),
+									operation: (key) =>
+										b.stmt(b.call('_$_.set_attribute', id, b.literal(attribute), key)),
+									expression,
+									identity: attr.value,
+									initial: b.void0,
 								});
 							}
 						} else {
@@ -1044,6 +1087,7 @@ const visitors = {
 							operation: (key) =>
 								b.stmt(b.call('_$_.set_class', id, key, hash_arg, b.literal(is_html))),
 							expression,
+							identity: class_attribute.value,
 							initial: b.literal(''),
 						});
 					} else {
@@ -1063,14 +1107,16 @@ const visitors = {
 					const id = state.flush_node();
 					const metadata = { tracking: false, await: false };
 					const expression = visit(style_attribute.value, { ...state, metadata });
-					const name = style_attribute.name.name;
-
-					const statement = b.stmt(b.call('_$_.set_attribute', id, b.literal(name), expression));
 
 					if (metadata.tracking) {
-						local_updates.push({ operation: statement });
+						local_updates.push({
+							operation: (key) => b.stmt(b.call('_$_.set_style', id, key)),
+							identity: style_attribute.value,
+							expression,
+							initial: b.void0,
+						});
 					} else {
-						state.init.push(statement);
+						state.init.push(b.stmt(b.call('_$_.set_style', id, expression)));
 					}
 				}
 			}
@@ -1084,7 +1130,9 @@ const visitors = {
 				);
 			}
 
+			/** @type {Array<Statement>} */
 			const init = [];
+			/** @type {Array<Statement>} */
 			const update = [];
 
 			if (!is_void) {
@@ -1100,7 +1148,7 @@ const visitors = {
 
 			if (update.length > 0) {
 				if (state.scope.parent.declarations.size > 0) {
-					apply_updates(init, update);
+					apply_updates(init, update, state);
 				} else {
 					state.update.push(...update);
 				}
@@ -2252,6 +2300,7 @@ function transform_children(children, context) {
 					state.update.push({
 						operation: (key) => b.stmt(b.call('_$_.set_text', id, key)),
 						expression,
+						identity: node.expression,
 						initial: b.literal(' '),
 					});
 					if (metadata.await) {
@@ -2279,6 +2328,7 @@ function transform_children(children, context) {
 					state.update.push({
 						operation: (key) => b.stmt(b.call('_$_.set_text', id, key)),
 						expression,
+						identity: node.expression,
 						initial: b.literal(' '),
 					});
 					if (metadata.await) {
@@ -2356,7 +2406,7 @@ function transform_body(body, { visit, state }) {
 			// In TypeScript mode, just add the update statements directly
 			body_state.init.push(...body_state.update);
 		} else {
-			apply_updates(body_state.init, body_state.update);
+			apply_updates(body_state.init, body_state.update, state);
 		}
 	}
 

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

@@ -24,6 +24,65 @@ function is_in_global_block(path) {
 	return path.some((node) => node.type === 'Rule' && node.metadata.is_global_block);
 }
 
+/**
+ * Check if we're inside a pseudo-class selector that's INSIDE a :global() wrapper
+ * or adjacent to a :global modifier
+ * @param {any[]} path
+ */
+function is_in_global_pseudo(path) {
+	// Walk up the path to find if we're inside a :global() pseudo-class selector with args
+	// or if we're in a pseudo-class that's in the same RelativeSelector as a :global modifier
+	for (let i = path.length - 1; i >= 0; i--) {
+		const node = path[i];
+
+		// Case 1: :global(...) with args - we're inside it
+		if (node.type === 'PseudoClassSelector' && node.name === 'global' && node.args !== null) {
+			return true;
+		}
+
+		// Case 2: We're in a PseudoClassSelector (like :is, :where, :has, :not)
+		// Check if there's a :global modifier in the same RelativeSelector
+		if (
+			node.type === 'PseudoClassSelector' &&
+			(node.name === 'is' || node.name === 'where' || node.name === 'has' || node.name === 'not')
+		) {
+			// Look for the parent RelativeSelector
+			for (let j = i - 1; j >= 0; j--) {
+				const ancestor = path[j];
+				if (ancestor.type === 'RelativeSelector') {
+					// Check if this RelativeSelector has a :global modifier (no args)
+					const hasGlobalModifier = ancestor.selectors.some(
+						(s) => s.type === 'PseudoClassSelector' && s.name === 'global' && s.args === null,
+					);
+					if (hasGlobalModifier) {
+						return true;
+					}
+					break;
+				}
+			}
+		}
+	}
+	return false;
+}
+
+/**
+ * Check if a rule has :global in the middle (like `div :global p`)
+ * These rules should treat nested selectors as global
+ * @param {AST.CSS.Rule} rule
+ */
+function has_global_in_middle(rule) {
+	for (const complex_selector of rule.prelude.children) {
+		for (let i = 0; i < complex_selector.children.length; i++) {
+			const child = complex_selector.children[i];
+			// Check if this is a :global selector that's not at the start
+			if (i > 0 && child.metadata.is_global) {
+				return true;
+			}
+		}
+	}
+	return false;
+}
+
 function remove_global_pseudo_class(selector, combinator, state) {
 	if (selector.args === null) {
 		let start = selector.start;
@@ -75,13 +134,19 @@ function is_empty(rule, is_in_global_block) {
 		return rule.block.children.length === 0;
 	}
 
+	// Rules with :global in the middle (like `div :global p`) should treat nested rules as global
+	const has_mid_global = has_global_in_middle(rule);
+
 	for (const child of rule.block.children) {
 		if (child.type === 'Declaration') {
 			return false;
 		}
 
 		if (child.type === 'Rule') {
-			if ((is_used(child) || is_in_global_block) && !is_empty(child, is_in_global_block)) {
+			if (
+				(is_used(child) || is_in_global_block || has_mid_global) &&
+				!is_empty(child, is_in_global_block || has_mid_global)
+			) {
 				return false;
 			}
 		}
@@ -196,8 +261,10 @@ const visitors = {
 	},
 	SelectorList(node, { state, next, path }) {
 		// Only add comments if we're not inside a complex selector that itself is unused or a global block
+		// or inside a pseudo-class that's part of a global selector
 		if (
 			!is_in_global_block(path) &&
+			!is_in_global_pseudo(path) &&
 			!path.find((n) => n.type === 'ComplexSelector' && !n.metadata.used)
 		) {
 			const children = node.children;
@@ -280,8 +347,39 @@ const visitors = {
 	ComplexSelector(node, context) {
 		const before_bumped = context.state.specificity.bumped;
 
+		// Check if we're inside a :has/:is/:where/:not pseudo-class that's part of a global selector
+		// In that case, we should still scope the contents even though the parent is global
+		const parentPath = context.path;
+		let insideScopingPseudo = false;
+
+		// Walk up the path to find if we're inside args of :has/:is/:where/:not
+		for (let i = parentPath.length - 1; i >= 0; i--) {
+			const pathNode = parentPath[i];
+
+			// Check if we're inside a SelectorList that belongs to a scoping pseudo-class
+			if (pathNode.type === 'SelectorList' && i > 0) {
+				const parent = parentPath[i - 1];
+				if (
+					parent.type === 'PseudoClassSelector' &&
+					(parent.name === 'has' ||
+						parent.name === 'is' ||
+						parent.name === 'where' ||
+						parent.name === 'not')
+				) {
+					// Now check if this pseudo-class is part of a global RelativeSelector
+					for (let j = i - 2; j >= 0; j--) {
+						if (parentPath[j].type === 'RelativeSelector' && parentPath[j].metadata?.is_global) {
+							insideScopingPseudo = true;
+							break;
+						}
+					}
+					break;
+				}
+			}
+		}
+
 		for (const relative_selector of node.children) {
-			if (relative_selector.metadata.is_global) {
+			if (relative_selector.metadata.is_global && !insideScopingPseudo) {
 				const global = /** @type {AST.CSS.PseudoClassSelector} */ (relative_selector.selectors[0]);
 				remove_global_pseudo_class(global, relative_selector.combinator, context.state);
 
@@ -303,7 +401,8 @@ const visitors = {
 				}
 			}
 
-			if (relative_selector.metadata.scoped) {
+			// Skip scoping if we're inside a global block
+			if (relative_selector.metadata.scoped && !is_in_global_block(context.path)) {
 				if (relative_selector.selectors.length === 1) {
 					// skip standalone :is/:where/& selectors
 					const selector = relative_selector.selectors[0];

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

@@ -9,6 +9,7 @@ export {
 export {
 	set_text,
 	set_class,
+	set_style,
 	set_attribute,
 	set_value,
 	set_checked,

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

@@ -28,12 +28,6 @@ export function init_operations() {
 	// @ts-expect-error
 	element_prototype.__click = undefined;
 	// @ts-expect-error
-	element_prototype.__attributes = null;
-	// @ts-expect-error
-	element_prototype.__styles = null;
-	// @ts-expect-error
-	element_prototype.__e = undefined;
-	// @ts-expect-error
 	event_target_prototype.__root = undefined;
 }
 

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

@@ -1,7 +1,7 @@
 /** @import { Block } from '#client' */
 
 import { destroy_block, ref } from './blocks.js';
-import { REF_PROP, TRACKED, TRACKED_OBJECT } from './constants.js';
+import { REF_PROP } from './constants.js';
 import {
 	get_descriptors,
 	get_own_property_symbols,
@@ -69,25 +69,29 @@ function get_setters(element) {
 
 /**
  * @param {Element} element
- * @param {string} attribute
  * @param {any} value
  * @returns {void}
  */
-export function set_attribute(element, attribute, value) {
-	// @ts-expect-error
-	var attributes = (element.__attributes ??= {});
-
-	if (attributes[attribute] === (attributes[attribute] = value)) return;
-
-	if (attribute === 'style' && '__styles' in element) {
-		// reset styles to force style: directive to update
-		element.__styles = {};
+export function set_style(element, value) {
+	if (value == null) {
+		element.removeAttribute('style');
+	} else if (typeof value !== 'string') {
+		apply_styles(/** @type {HTMLElement} */ (element), value);
+	} else {
+		// @ts-ignore
+		element.style.cssText = value;
 	}
+}
 
+/**
+ * @param {Element} element
+ * @param {string} attribute
+ * @param {any} value
+ * @returns {void}
+ */
+export function set_attribute(element, attribute, value) {
 	if (value == null) {
 		element.removeAttribute(attribute);
-	} else if (attribute === 'style' && typeof value !== 'string') {
-		apply_styles(/** @type {HTMLElement} */ (element), value);
 	} else if (typeof value !== 'string' && get_setters(element).includes(attribute)) {
 		/** @type {any} */ (element)[attribute] = value;
 	} else {
@@ -97,13 +101,13 @@ export function set_attribute(element, attribute, value) {
 
 /**
  * @param {HTMLElement} element
- * @param {HTMLElement['style']} newStyles
+ * @param {HTMLElement['style']} new_styles
  */
-export function apply_styles(element, newStyles) {
+export function apply_styles(element, new_styles) {
 	const style = element.style;
 	const new_properties = new Set();
 
-	for (const [property, value] of Object.entries(newStyles)) {
+	for (const [property, value] of Object.entries(new_styles)) {
 		const normalized_property = normalize_css_property_name(property);
 		const normalized_value = String(value);
 
@@ -132,6 +136,8 @@ function set_attribute_helper(element, key, value) {
 	if (key === 'class') {
 		const is_html = element.namespaceURI === 'http://www.w3.org/1999/xhtml';
 		set_class(/** @type {HTMLElement} */ (element), value, undefined, is_html);
+	} else if (key === 'style') {
+		set_style(/** @type {HTMLElement} */ (element), value);
 	} else if (key === '#class') {
 		// Special case for static class when spreading props
 		element.classList.add(value);