ripple 0.2.3 → 0.2.5

package/README.md

@@ -1,356 +1,10 @@
-# Ripple
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="assets/ripple-dark.png">
+  <img src="assets/ripple-light.png" alt="Ripple - the elegant UI framework for the web" />
+</picture>
 
-> Currently, this project is still in early development, and should not be used in production.
-
-Ripple is a TypeScript UI framework for the web.
-
-I wrote Ripple as a love letter for frontend web – and this is largely a project that I built in less than a week, so it's very raw.
-
-Personally, I ([@trueadm](https://github.com/trueadm)) have been involved in some truly amazing frontend frameworks along their journeys – from [Inferno](https://github.com/infernojs/inferno), where it all began, to [React](https://github.com/facebook/react) and the journey of React Hooks, to creating [Lexical](https://github.com/facebook/lexical), to [Svelte 5](https://github.com/sveltejs/svelte) and its new compiler and signal-based reactivity runtime. Along that journey, I collected ideas, and intriguing thoughts that may or may not pay off. Given my time between roles, I decided it was the best opportunity to try them out, and for open source to see what I was cooking.
-
-Ripple was designed to be a JS/TS-first framework, rather than HTML-first. Ripple modules have their own `.ripple` extension and these modules
-fully support TypeScript. By introducing a new extension, it affords Ripple to invent its own superset language, that plays really nicely with
-TypeScript and JSX, but with a few interesting touches. In my experience, this has led to better DX not only for humans, but also for LLMs.
-
-Right now, there will be plenty of bugs, things just won't work either and you'll find TODOs everywhere. At this stage, Ripple is more of an early alpha version of something that _might_ be, rather than something you should try and adopt. If anything, maybe some of the ideas can be shared and incubated back into other frameworks. There's also a lot of similarities with Svelte 5, and that's not by accident, that's because of my recent time working on Svelte 5.
-
-## Features
-
-- **Reactive State Management**: Built-in reactivity with `$` prefixed variables
-- **Component-Based Architecture**: Clean, reusable components with props and children
-- **JSX-like Syntax**: Familiar templating with Ripple-specific enhancements
-- **TypeScript Support**: Full TypeScript integration with type checking
-- **VSCode Integration**: Rich editor support with diagnostics, syntax highlighting, and IntelliSense
-
-## Missing Features
-
-- **SSR**: Ripple is currently an SPA only, this is because I haven't gotten around to it
-- **Testing & Types**: The codebase is very raw with limited types (I've opted for JavaScript only to avoid build problems). There aren't any tests either – I've been using the `playground` directory to manually test things as I go
-
-## Quick Start
-
-### Installation
-
-```bash
-pnpm i --save ripple
-```
-
-You'll also need Vite and Ripple's Vite plugin to compile Ripple:
-
-```bash
-pnpm i --save-dev vite-plugin-ripple
-```
-
-You can see a working example in the [playground demo app](https://github.com/trueadm/ripple/tree/main/playground).
-
-### Mounting your app
-
-You can use the `mount` API from the `ripple` package to render your Ripple component, using the `target`
-option to specify what DOM element you want to render the component.
-
-```ts
-// index.ts
-import { mount } from 'ripple';
-import { App } from '/App.ripple';
-
-mount(App, {
-  props: {
-    title: 'Hello world!'
-  },
-  target: document.getElementById('root')
-});
-```
-
-## Key Concepts
-
-### Components
-
-Define reusable components with the `component` keyword. These are similar to functions in that they have `props`, but crucially,
-they allow for a JSX-like syntax to be defined alongside standard TypeScript. That means you do not _return JSX_ like in other frameworks,
-but you instead use it like a JavaScript statement, as shown:
-
-```ripple
-component Button(props: { text: string, onClick: () => void }) {
-  <button onClick={props.onClick}>
-    {props.text}
-  </button>
-}
-
-// Usage
-<Button text="Click me" onClick={() => console.log("Clicked!")} />
-```
-
-### Reactive Variables
-
-Variables prefixed with `$` are automatically reactive:
-
-```ripple
-let $name = "World";
-let $count = 0;
-
-// Updates automatically trigger re-renders
-$count++;
-```
-
-Object properties prefixed with `$` are also automatically reactive:
-
-```ripple
-let counter = { $current: 0 };
-
-// Updates automatically trigger re-renders
-counter.$current++;
-```
-
-Derived values are simply `$` variables that combined different parts of state:
-
-```ripple
-let $count = 0;
-let $double = $count * 2;
-let $quadruple = $double * 2;
-```
-
-That means `$count` itself might be derived if it were to reference another reactive property. For example:
-
-```ripple
-component Counter({ $startingCount }) {
-  let $count = $startingCount;
-  let $double = $count * 2;
-  let $quadruple = $double * 2;
-}
-```
-
-Now given `$startingCount` is reactive, it would mean that `$count` might reset each time an incoming change to `$startingCount` occurs. That might not be desirable, so Ripple provides a way to `untrack` reactivity in those cases:
-
-```ripple
-import { untrack } from 'ripple';
-
-component Counter({ $startingCount }) {
-  let $count = untrack(() => $startingCount);
-  let $double = $count * 2;
-  let $quadruple = $double * 2;
-}
-```
-
-Now `$count` will only reactively create its value on initialization.
-
-> Note: you cannot define reactive variables in module/global scope, they have to be created on access from an active component
-
-### Effects
-
-When dealing with reactive state, you might want to be able to create side-effects based upon changes that happen upon updates.
-To do this, you can use `effect`:
-
-```ripple
-import { effect } from 'ripple';
-
-component App() {
-  let $count = 0;
-
-  effect(() => {
-    console.log($count);
-  });
-
-  <button onClick={() => $count++}>Increment</button>
-}
-```
-
-### Control flow
+# What is Ripple?
 
-The JSX-like syntax might take some time to get used to if you're coming from another framework. For one, templating in Ripple
-can only occur _inside_ a `component` body – you can't create JSX inside functions, or assign it to variables as an expression.
-
-```ripple
-<div>
-  // you can create variables inside the template!
-  const str = "hello world";
-
-  console.log(str); // and function calls too!
-
-  debugger; // you can put breakpoints anywhere to help debugging!
-
-  {str}
-</div>
-```
-
-Note that strings inside the template need to be inside `{"string"}`, you can't do `<div>hello</div>` as Ripple
-has no idea if `hello` is a string or maybe some JavaScript code that needs evaluating, so just ensure you wrap them
-in curly braces. This shouldn't be an issue in the real-world anyway, as you'll likely use an i18n library that means
-using JavaScript expressions regardless.
-
-### If statements
-
-If blocks work seemlessly with Ripple's templating language, you can put them inside the JSX-like
-statements, making control-flow far easier to read and reason with.
-
-```ripple
-component Truthy({ x }) {
-  <div>
-    if (x) {
-      <span>
-        {"x is truthy"}
-      </span>
-    } else {
-      <span>
-        {"x is truthy"}
-      </span>
-    }
-  </div>
-}
-```
-
-### For statements
-
-You can render collections using a `for...of` block, and you don't need to specify a `key` prop like
-other frameworks.
-
-```ripple
-component ListView({ title, items }) {
-  <h2>{title}</h2>
-  <ul>
-    for (const item of items) {
-      <li>{item.text}</li>
-    }
-  </ul>
-}
-```
-
-### Try statements
-
-Try blocks work to building the foundation for **error boundaries**, when the runtime encounters
-an error in the `try` block, you can easily render a fallback in the `catch` block.
-
-```ripple
-import { reportError } from 'some-library';
-
-component ErrorBoundary() {
-  <div>
-    try {
-      <ComponentThatFails />
-    } catch (e) {
-      reportError(e);
-
-      <div>{"An error occured! " + e.message}</div>
-    }
-  </div>
-}
-```
-
-### Props
-
-If you want a prop to be reactive, you should also give it a `$` prefix.
-
-```ripple
-component Button(props: { $text: string, onClick: () => void }) {
-  <button onClick={props.onClick}>
-    {props.$text}
-  </button>
-}
-
-// Usage
-<Button $text={some_text} onClick={() => console.log("Clicked!")} />
-```
-
-### Children
-
-Use `$children` prop and the `<$component />` directive for component composition.
-
-When you pass in children to a component, it gets implicitly passed as the `$children` prop, in the form of a component.
-
-```ripple
-import type { Component } from 'ripple';
-
-component Card(props: { $children: Component }) {
-  <div class="card">
-    <$component />
-  </div>
-}
-
-// Usage
-<Card>
-  <p>{"Card content here"}</p>
-</Card>
-```
-
-You could also explicitly write the same code as shown:
-
-```ripple
-import type { Component } from 'ripple';
-
-component Card(props: { $children: Component }) {
-  <div class="card">
-    <$component />
-  </div>
-}
-
-// Usage with explicit component
-<Card>
-  component $children() {
-    <p>{"Card content here"}</p>
-  }
-</Card>
-```
-
-### Events
-
-Like React, events are props that start with `on` and then continue with an uppercase character, such as:
-
-- `onClick`
-- `onPointerMove`
-- `onPointerDown`
-- `onKeyDown`
-
-For `capture` phase events, just add `Capture` to the end of the prop name:
-
-- `onClickCapture`
-- `onPointerMoveCapture`
-- `onPointerDownCapture`
-- `onKeyDownCapture`
-
-> Note: Some events are automatically delegated where possible by Ripple to improve runtime performance.
-
-### Styling
-
-Ripple supports native CSS styling that is localized to the given component using the `<style>` element.
-
-```ripple
-component MyComponent() {
-  <div class="container">
-    <h1>{"Hello World"}</h1>
-  </div>
-  
-  <style>
-    .container {
-      background: blue;
-      padding: 1rem;
-    }
-    
-    h1 {
-      color: white;
-      font-size: 2rem;
-    }
-  </style>
-}
-```
-
-> Note: the `<style>` element must be top-level within a `component`.
-
-## VSCode Extension
-
-The Ripple VSCode extension provides:
-
-- **Syntax Highlighting** for `.ripple` files
-- **Real-time Diagnostics** for compilation errors
-- **TypeScript Integration** for type checking
-- **IntelliSense** for autocompletion
-
-Clone the repository, and manually install the extension from the `packages/ripple-vscode-plugin/` directory.
-
-## Playground
-
-Feel free to play around with how Ripple works. If you clone the repo, you can then:
-
-```bash
-pnpm i && cd playground && pnpm dev
-```
+> Currently, this project is still in early development, and should not be used in production.
 
-The playground uses Ripple's Vite plugin, where you can play around with things inside the `playground/src` directory.
+Ripple is a TypeScript UI framework for the web. To find out more, view [Ripple's Github README](https://github.com/trueadm/ripple).

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is a TypeScript UI framework for the web",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

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

@@ -9,8 +9,8 @@ function convert_from_jsx(node) {
 		node.type = 'Identifier';
 	} else if (node.type === 'JSXMemberExpression') {
 		node.type = 'MemberExpression';
-		node.object = convert_from_jsx(node.object)
-		node.property = convert_from_jsx(node.property)
+		node.object = convert_from_jsx(node.object);
+		node.property = convert_from_jsx(node.property);
 	}
 	return node;
 }
@@ -24,6 +24,38 @@ function RipplePlugin(config) {
 		class RippleParser extends Parser {
 			#path = [];
 
+			parseExportDefaultDeclaration() {
+				// Check if this is "export default component"
+				if (this.value === 'component') {
+					const node = this.startNode();
+					node.type = 'Component';
+					node.css = null;
+					node.default = true;
+					this.next();
+					this.enterScope(0);
+					
+					node.id = this.type.label === 'name' ? this.parseIdent() : null;
+					
+					this.parseFunctionParams(node);
+					this.eat(tt.braceL);
+					node.body = [];
+					this.#path.push(node);
+
+					this.parseTemplateBody(node.body);
+
+					this.#path.pop();
+					this.exitScope();
+
+					this.next();
+					this.finishNode(node, 'Component');
+					this.awaitPos = 0;
+
+					return node;
+				}
+				
+				return super.parseExportDefaultDeclaration();
+			}
+
 			shouldParseExportStatement() {
 				if (super.shouldParseExportStatement()) {
 					return true;
@@ -253,10 +285,7 @@ function RipplePlugin(config) {
 						case 62: // '>'
 						case 125: {
 							// '}'
-							if (
-								ch === 125 &&
-								(this.#path.at(-1).type === 'Component')
-							) {
+							if (ch === 125 && this.#path.at(-1).type === 'Component') {
 								return original.readToken.call(this, ch);
 							}
 							this.raise(
@@ -318,7 +347,7 @@ function RipplePlugin(config) {
 				if (open.name.type === 'JSXIdentifier') {
 					open.name.type = 'Identifier';
 				}
-				
+
 				element.id = convert_from_jsx(open.name);
 				element.attributes = open.attributes;
 				element.selfClosing = open.selfClosing;
@@ -364,6 +393,37 @@ function RipplePlugin(config) {
 				return element;
 			}
 
+			parseSubscript(base, startPos, startLoc, noCalls, maybeAsyncArrow, optionalChained, forInit) {
+				if (this.value === '<' && this.#path.findLast((n) => n.type === 'Component')) {
+					// Check if this looks like JSX by looking ahead
+					const ahead = this.lookahead();
+					if (ahead.type.label === 'name' || ahead.value === '/' || ahead.value === '>') {
+						// This is JSX, rewind to the end of the object expression
+						// and let ASI handle the semicolon insertion naturally
+						this.pos = base.end;
+						this.type = tt.braceR;
+						this.value = '}';
+						this.start = base.end - 1;
+						this.end = base.end;
+						const position = this.curPosition();
+						this.startLoc = position;
+						this.endLoc = position;
+						this.next();
+
+						return base;
+					}
+				}
+				return super.parseSubscript(
+					base,
+					startPos,
+					startLoc,
+					noCalls,
+					maybeAsyncArrow,
+					optionalChained,
+					forInit
+				);
+			}
+
 			parseTemplateBody(body) {
 				var inside_func =
 					this.context.some((n) => n.token === 'function') || this.scopeStack.length > 1;
@@ -456,10 +516,7 @@ function RipplePlugin(config) {
 			parseBlock(createNewLexicalScope, node, exitStrict) {
 				const parent = this.#path.at(-1);
 
-				if (
-					parent?.type === 'Component' ||
-					parent?.type === 'Element'
-				) {
+				if (parent?.type === 'Component' || parent?.type === 'Element') {
 					if (createNewLexicalScope === void 0) createNewLexicalScope = true;
 					if (node === void 0) node = this.startNode();
 

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

@@ -71,7 +71,13 @@ function mark_as_tracked(path) {
 }
 
 const visitors = {
-	_(node, { state, next }) {
+	_(node, { state, next, path }) {
+		// Set up metadata.path for each node (needed for CSS pruning)
+		if (!node.metadata) {
+			node.metadata = {};
+		}
+		node.metadata.path = [...path];
+
 		const scope = state.scopes.get(node);
 		next(scope !== undefined && scope !== state.scope ? { ...state, scope } : state);
 	},
@@ -439,20 +445,6 @@ const visitors = {
 						attribute
 					);
 				}
-			} else if (name === 'ref') {
-				if (is_dom_element) {
-					error(
-						'Cannot have a `ref` prop on an element, did you mean `$ref`?',
-						state.analysis.module.filename,
-						attribute
-					);
-				} else {
-					error(
-						'Cannot have a `ref` prop on a component, did you mean `$ref`?',
-						state.analysis.module.filename,
-						attribute
-					);
-				}
 			}
 
 			if (is_tracked_name(name)) {

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

@@ -2,6 +2,41 @@ import { walk } from 'zimmerframe';
 
 const seen = new Set();
 const regex_backslash_and_following_character = /\\(.)/g;
+const FORWARD = 0;
+const BACKWARD = 1;
+
+// CSS selector constants
+const descendant_combinator = { name: ' ', type: 'Combinator' };
+const nesting_selector = { 
+	type: 'NestingSelector', 
+	name: '&',
+	selectors: [],
+	metadata: { scoped: false }
+};
+const any_selector = {
+	type: 'RelativeSelector',
+	selectors: [{ type: 'TypeSelector', name: '*' }],
+	combinator: null,
+	metadata: { scoped: false }
+};
+
+// Whitelist for attribute selectors on specific elements
+const whitelist_attribute_selector = new Map([
+	['details', ['open']],
+	['dialog', ['open']],
+	['form', ['novalidate']],
+	['iframe', ['allow', 'allowfullscreen', 'allowpaymentrequest', 'loading', 'referrerpolicy']],
+	['img', ['loading']],
+	['input', ['accept', 'autocomplete', 'capture', 'checked', 'disabled', 'max', 'maxlength', 'min', 'minlength', 'multiple', 'pattern', 'placeholder', 'readonly', 'required', 'size', 'step']],
+	['object', ['typemustmatch']],
+	['ol', ['reversed', 'start', 'type']],
+	['optgroup', ['disabled']],
+	['option', ['disabled', 'selected']],
+	['script', ['async', 'defer', 'nomodule', 'type']],
+	['select', ['disabled', 'multiple', 'required', 'size']],
+	['textarea', ['autocomplete', 'disabled', 'maxlength', 'minlength', 'placeholder', 'readonly', 'required', 'rows', 'wrap']],
+	['video', ['autoplay', 'controls', 'loop', 'muted', 'playsinline']]
+]);
 
 function get_relative_selectors(node) {
 	const selectors = truncate(node);
@@ -62,14 +97,14 @@ function truncate(node) {
 	});
 }
 
-function apply_selector(relative_selectors, rule, element) {
-	const parent_selectors = relative_selectors.slice();
-	const relative_selector = parent_selectors.pop();
+function apply_selector(relative_selectors, rule, element, direction) {
+	const rest_selectors = relative_selectors.slice();
+	const relative_selector = direction === FORWARD ? rest_selectors.shift() : rest_selectors.pop();
 
 	const matched =
 		!!relative_selector &&
-		relative_selector_might_apply_to_node(relative_selector, rule, element) &&
-		apply_combinator(relative_selector, parent_selectors, rule, element);
+		relative_selector_might_apply_to_node(relative_selector, rule, element, direction) &&
+		apply_combinator(relative_selector, rest_selectors, rule, element, direction);
 
 	if (matched) {
 		if (!is_outer_global(relative_selector)) {
@@ -82,55 +117,163 @@ function apply_selector(relative_selectors, rule, element) {
 	return matched;
 }
 
-function apply_combinator(relative_selector, parent_selectors, rule, node) {
-	if (!relative_selector.combinator) return true;
+function get_ancestor_elements(node, adjacent_only, seen = new Set()) {
+	const ancestors = [];
 
-	const name = relative_selector.combinator.name;
+	const path = node.metadata.path;
+	let i = path.length;
 
-	switch (name) {
-		case ' ':
-		case '>': {
-			let parent_matched = false;
+	while (i--) {
+		const parent = path[i];
 
-			const path = node.metadata.path;
-			let i = path.length;
+		if (parent.type === 'Element') {
+			ancestors.push(parent);
+			if (adjacent_only) {
+				break;
+			}
+		}
+	}
 
-			while (i--) {
-				const parent = path[i];
+	return ancestors;
+}
 
-				if (parent.type === 'Element') {
-					if (apply_selector(parent_selectors, rule, parent)) {
-						parent_matched = true;
-					}
+function get_descendant_elements(node, adjacent_only) {
+	const descendants = [];
+
+	function visit(current_node, depth = 0) {
+		if (current_node.type === 'Element' && current_node !== node) {
+			descendants.push(current_node);
+			if (adjacent_only) return; // Only direct children for '>' combinator
+		}
+
+		// Visit children based on Ripple's AST structure
+		if (current_node.children) {
+			for (const child of current_node.children) {
+				visit(child, depth + 1);
+			}
+		}
+
+		if (current_node.body) {
+			for (const child of current_node.body) {
+				visit(child, depth + 1);
+			}
+		}
+
+		// For template nodes and text interpolations
+		if (current_node.expression && typeof current_node.expression === 'object') {
+			visit(current_node.expression, depth + 1);
+		}
+	}
+
+	// Start from node's children
+	if (node.children) {
+		for (const child of node.children) {
+			visit(child);
+		}
+	}
+
+	if (node.body) {
+		for (const child of node.body) {
+			visit(child);
+		}
+	}
 
-					if (name === '>') return parent_matched;
+	return descendants;
+}
+
+function get_possible_element_siblings(node, direction, adjacent_only) {
+	const siblings = new Map();
+	const parent = get_element_parent(node);
+	
+	if (!parent) {
+		return siblings;
+	}
+
+	// Get the container that holds the siblings
+	const container = parent.children || parent.body || [];
+	const node_index = container.indexOf(node);
+
+	if (node_index === -1) return siblings;
+
+	// Determine which siblings to check based on direction
+	let start, end, step;
+	if (direction === FORWARD) {
+		start = node_index + 1;
+		end = container.length;
+		step = 1;
+	} else {
+		start = node_index - 1;
+		end = -1;
+		step = -1;
+	}
+
+	// Collect siblings
+	for (let i = start; i !== end; i += step) {
+		const sibling = container[i];
+		
+		if (sibling.type === 'Element' || sibling.type === 'Component') {
+			siblings.set(sibling, true);
+			if (adjacent_only) break; // Only immediate sibling for '+' combinator
+		}
+		// Stop at non-whitespace text nodes for adjacent selectors
+		else if (adjacent_only && sibling.type === 'Text' && sibling.value?.trim()) {
+			break;
+		}
+	}
+
+	return siblings;
+}
+
+function apply_combinator(relative_selector, rest_selectors, rule, node, direction) {
+	const combinator =
+		direction == FORWARD ? rest_selectors[0]?.combinator : relative_selector.combinator;
+	if (!combinator) return true;
+
+	switch (combinator.name) {
+		case ' ':
+		case '>': {
+			const is_adjacent = combinator.name === '>';
+			const parents =
+				direction === FORWARD
+					? get_descendant_elements(node, is_adjacent)
+					: get_ancestor_elements(node, is_adjacent);
+			let parent_matched = false;
+
+			for (const parent of parents) {
+				if (apply_selector(rest_selectors, rule, parent, direction)) {
+					parent_matched = true;
 				}
 			}
 
-			return parent_matched || parent_selectors.every((selector) => is_global(selector, rule));
+			return (
+				parent_matched ||
+				(direction === BACKWARD &&
+					(!is_adjacent || parents.length === 0) &&
+					rest_selectors.every((selector) => is_global(selector, rule)))
+			);
 		}
 
 		case '+':
 		case '~': {
-			const siblings = get_possible_element_siblings(node, name === '+');
+			const siblings = get_possible_element_siblings(node, direction, combinator.name === '+');
 
 			let sibling_matched = false;
 
 			for (const possible_sibling of siblings.keys()) {
-				if (possible_sibling.type === 'RenderTag' || possible_sibling.type === 'SlotElement') {
-					// `{@render foo()}<p>foo</p>` with `:global(.x) + p` is a match
-					if (parent_selectors.length === 1 && parent_selectors[0].metadata.is_global) {
+				if (possible_sibling.type === 'Component') {
+					if (rest_selectors.length === 1 && rest_selectors[0].metadata.is_global) {
 						sibling_matched = true;
 					}
-				} else if (apply_selector(parent_selectors, rule, possible_sibling)) {
+				} else if (apply_selector(rest_selectors, rule, possible_sibling, direction)) {
 					sibling_matched = true;
 				}
 			}
 
 			return (
 				sibling_matched ||
-				(get_element_parent(node) === null &&
-					parent_selectors.every((selector) => is_global(selector, rule)))
+				(direction === BACKWARD &&
+					get_element_parent(node) === null &&
+					rest_selectors.every((selector) => is_global(selector, rule)))
 			);
 		}
 
@@ -141,13 +284,18 @@ function apply_combinator(relative_selector, parent_selectors, rule, node) {
 }
 
 function get_element_parent(node) {
+	// Check if metadata and path exist
+	if (!node.metadata || !node.metadata.path) {
+		return null;
+	}
+
 	let path = node.metadata.path;
 	let i = path.length;
 
 	while (i--) {
 		const parent = path[i];
 
-		if (parent.type === 'RegularElement' || parent.type === 'SvelteElement') {
+		if (parent.type === 'Element') {
 			return parent;
 		}
 	}
@@ -252,7 +400,7 @@ function is_outer_global(relative_selector) {
 	);
 }
 
-function relative_selector_might_apply_to_node(relative_selector, rule, element) {
+function relative_selector_might_apply_to_node(relative_selector, rule, element, direction) {
 	// Sort :has(...) selectors in one bucket and everything else into another
 	const has_selectors = [];
 	const other_selectors = [];
@@ -268,13 +416,6 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element)
 	// If we're called recursively from a :has(...) selector, we're on the way of checking if the other selectors match.
 	// In that case ignore this check (because we just came from this) to avoid an infinite loop.
 	if (has_selectors.length > 0) {
-		/** @type {Array<Compiler.AST.RegularElement | Compiler.AST.SvelteElement>} */
-		const child_elements = [];
-		/** @type {Array<Compiler.AST.RegularElement | Compiler.AST.SvelteElement>} */
-		const descendant_elements = [];
-		/** @type {Array<Compiler.AST.RegularElement | Compiler.AST.SvelteElement>} */
-		let sibling_elements; // do them lazy because it's rarely used and expensive to calculate
-
 		// If this is a :has inside a global selector, we gotta include the element itself, too,
 		// because the global selector might be for an element that's outside the component,
 		// e.g. :root:has(.scoped), :global(.foo):has(.scoped), or :root { &:has(.scoped) {} }
@@ -290,37 +431,6 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element)
 					)
 				)
 			);
-		if (include_self) {
-			child_elements.push(element);
-			descendant_elements.push(element);
-		}
-
-		/**
-		 * @param {Compiler.AST.SvelteNode} node
-		 * @param {{ is_child: boolean }} state
-		 */
-		function walk_children(node, state) {
-			walk(node, state, {
-				_(node, context) {
-					if (node.type === 'Element') {
-						descendant_elements.push(node);
-
-						if (context.state.is_child) {
-							child_elements.push(node);
-							context.state.is_child = false;
-							context.next();
-							context.state.is_child = true;
-						} else {
-							context.next();
-						}
-					} else {
-						context.next();
-					}
-				}
-			});
-		}
-
-		walk_children(element.fragment, { is_child: true });
 
 		// :has(...) is special in that it means "look downwards in the CSS tree". Since our matching algorithm goes
 		// upwards and back-to-front, we need to first check the selectors inside :has(...), then check the rest of the
@@ -331,37 +441,34 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element)
 			let matched = false;
 
 			for (const complex_selector of complex_selectors) {
-				const selectors = truncate(complex_selector);
-				const left_most_combinator = selectors[0]?.combinator ?? descendant_combinator;
-				// In .x:has(> y), we want to search for y, ignoring the left-most combinator
-				// (else it would try to walk further up and fail because there are no selectors left)
-				if (selectors.length > 0) {
-					selectors[0] = {
-						...selectors[0],
-						combinator: null
-					};
+				const [first, ...rest] = truncate(complex_selector);
+				// if it was just a :global(...)
+				if (!first) {
+					complex_selector.metadata.used = true;
+					matched = true;
+					continue;
 				}
 
-				const descendants =
-					left_most_combinator.name === '+' || left_most_combinator.name === '~'
-						? (sibling_elements ??= get_following_sibling_elements(element, include_self))
-						: left_most_combinator.name === '>'
-						? child_elements
-						: descendant_elements;
-
-				let selector_matched = false;
-
-				// Iterate over all descendant elements and check if the selector inside :has matches
-				for (const element of descendants) {
-					if (
-						selectors.length === 0 /* is :global(...) */ ||
-						(element.metadata.scoped && selector_matched) ||
-						apply_selector(selectors, rule, element)
-					) {
+				if (include_self) {
+					const selector_including_self = [
+						first.combinator ? { ...first, combinator: null } : first,
+						...rest
+					];
+					if (apply_selector(selector_including_self, rule, element, FORWARD)) {
 						complex_selector.metadata.used = true;
-						selector_matched = matched = true;
+						matched = true;
 					}
 				}
+
+				const selector_excluding_self = [
+					any_selector,
+					first.combinator ? first : { ...first, combinator: descendant_combinator },
+					...rest
+				];
+				if (apply_selector(selector_excluding_self, rule, element, FORWARD)) {
+					complex_selector.metadata.used = true;
+					matched = true;
+				}
 			}
 
 			if (!matched) {
@@ -386,7 +493,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element)
 				) {
 					const args = selector.args;
 					const complex_selector = args.children[0];
-					return apply_selector(complex_selector.children, rule, element);
+					return apply_selector(complex_selector.children, rule, element, BACKWARD);
 				}
 
 				// We came across a :global, everything beyond it is global and therefore a potential match
@@ -413,7 +520,6 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element)
 								selector.metadata.scoped = true;
 							}
 
-							/** @type {Compiler.AST.RegularElement | Compiler.AST.SvelteElement | null} */
 							let el = element;
 							while (el) {
 								el.metadata.scoped = true;
@@ -435,7 +541,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element)
 						if (is_global) {
 							complex_selector.metadata.used = true;
 							matched = true;
-						} else if (apply_selector(relative, rule, element)) {
+						} else if (apply_selector(relative, rule, element, BACKWARD)) {
 							complex_selector.metadata.used = true;
 							matched = true;
 						} else if (complex_selector.children.length > 1 && (name == 'is' || name == 'where')) {
@@ -465,7 +571,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element)
 			case 'AttributeSelector': {
 				const whitelisted = whitelist_attribute_selector.get(element.id.name.toLowerCase());
 				if (
-					!whitelisted?.includes(selector.id.name.toLowerCase()) &&
+					!whitelisted?.includes(selector.name.toLowerCase()) &&
 					!attribute_matches(
 						element,
 						selector.name,
@@ -480,12 +586,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element)
 			}
 
 			case 'ClassSelector': {
-				if (
-					!attribute_matches(element, 'class', name, '~=', false) &&
-					!element.attributes.some(
-						(attribute) => attribute.type === 'ClassDirective' && attribute.name === name
-					)
-				) {
+				if (!attribute_matches(element, 'class', name, '~=', false)) {
 					return false;
 				}
 
@@ -502,9 +603,9 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element)
 
 			case 'TypeSelector': {
 				if (
+					element.id.type === 'Identifier' &&
 					element.id.name.toLowerCase() !== name.toLowerCase() &&
-					name !== '*' &&
-					element.id.name[0].toLowerCase() === element.id.name[0]
+					name !== '*'
 				) {
 					return false;
 				}
@@ -519,7 +620,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element)
 
 				for (const complex_selector of parent.prelude.children) {
 					if (
-						apply_selector(get_relative_selectors(complex_selector), parent, element) ||
+						apply_selector(get_relative_selectors(complex_selector), parent, element, direction) ||
 						complex_selector.children.every((s) => is_global(s, parent))
 					) {
 						complex_selector.metadata.used = true;
@@ -540,6 +641,27 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element)
 	return true;
 }
 
+// Utility functions for parsing CSS values
+function unquote(str) {
+	if ((str[0] === '"' && str[str.length - 1] === '"') || 
+		(str[0] === "'" && str[str.length - 1] === "'")) {
+		return str.slice(1, -1);
+	}
+	return str;
+}
+
+function get_parent_rules(rule) {
+	const rules = [rule];
+	let current = rule;
+	
+	while (current.metadata.parent_rule) {
+		current = current.metadata.parent_rule;
+		rules.unshift(current);
+	}
+	
+	return rules;
+}
+
 export function prune_css(css, element) {
 	walk(css, null, {
 		Rule(node, context) {
@@ -558,7 +680,8 @@ export function prune_css(css, element) {
 				apply_selector(
 					selectors,
 					/** @type {Compiler.AST.CSS.Rule} */ (node.metadata.rule),
-					element
+					element,
+					BACKWARD
 				)
 			) {
 				node.metadata.used = true;

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

@@ -32,6 +32,12 @@ function visit_function(node, context) {
 	const metadata = node.metadata;
 	const state = context.state;
 
+	delete node.returnType;
+
+	for (const param of node.params) {
+		delete param.typeAnnotation;
+	}
+
 	if (metadata?.hoisted === true) {
 		const params = build_hoisted_params(node, context);
 
@@ -44,7 +50,7 @@ function visit_function(node, context) {
 
 	let body = context.visit(node.body, state);
 
-	if (metadata.tracked === true) {
+	if (metadata?.tracked === true) {
 		return /** @type {FunctionExpression} */ ({
 			...node,
 			params: node.params.map((param) => context.visit(param, state)),
@@ -66,7 +72,7 @@ function build_getter(node, context) {
 
 		// don't transform the declaration itself
 		if (node !== binding?.node && binding?.transform) {
-			return binding.transform.read(node);
+			return binding.transform.read(node, context.state?.metadata?.spread);
 		}
 	}
 
@@ -409,18 +415,12 @@ const visitors = {
 							continue;
 						}
 
-						if (name === '$ref') {
-							const id = state.flush_node();
-							const value = attr.value;
-
-							state.init.push(b.stmt(b.call('$.set_ref', id, visit(value, state))));
-							continue;
-						}
-
 						if (is_event_attribute(name)) {
-							const event_name = name.slice(2).toLowerCase();
+							let capture = name.endsWith('Capture');
+							let event_name = capture
+								? name.slice(2, -7).toLowerCase()
+								: name.slice(2).toLowerCase();
 							let handler = visit(attr.value, state);
-							let capture = false; // TODO
 
 							if (attr.metadata?.delegated) {
 								let delegated_assignment;
@@ -552,8 +552,9 @@ const visitors = {
 
 			state.template.push('<!>');
 
+			const is_spreading = node.attributes.some((attr) => attr.type === 'SpreadAttribute');
 			const tracked = [];
-			let props = [];
+			const props = [];
 			let children_prop = null;
 
 			for (const attr of node.attributes) {
@@ -577,6 +578,15 @@ const visitors = {
 					} else {
 						props.push(b.prop('init', attr.name, visit(attr.value, state)));
 					}
+				} else if (attr.type === 'SpreadAttribute') {
+					props.push(
+						b.spread(
+							b.call(
+								'$.spread_object',
+								visit(attr.argument, { ...state, metadata: { ...state.metadata, spread: true } })
+							)
+						)
+					);
 				} else {
 					throw new Error('TODO');
 				}
@@ -600,7 +610,18 @@ const visitors = {
 				}
 			}
 
-			if (tracked.length > 0) {
+			if (is_spreading) {
+				state.init.push(
+					b.stmt(
+						b.call(
+							node.id,
+							id,
+							b.call('$.tracked_spread_object', b.thunk(b.object(props))),
+							b.id('$.active_block')
+						)
+					)
+				);
+			} else if (tracked.length > 0) {
 				state.init.push(
 					b.stmt(
 						b.call(

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

@@ -20,4 +20,5 @@ export var LOGIC_BLOCK = FOR_BLOCK | IF_BLOCK | TRY_BLOCK;
 
 export var UNINITIALIZED = Symbol();
 export var TRACKED_OBJECT = Symbol();
+export var SPREAD_OBJECT = Symbol();
 export var COMPUTED_PROPERTY = Symbol();

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

@@ -7,7 +7,6 @@ export {
 	set_value,
 	set_checked,
 	set_selected,
-	set_ref
 } from './render.js';
 
 export { render, render_spread, async } from './blocks.js';
@@ -25,6 +24,7 @@ export {
 	async_computed,
 	tracked,
 	tracked_object,
+	tracked_spread_object,
 	computed_property,
 	get_property,
 	set_property,

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

@@ -157,16 +157,6 @@ export function set_selected(element, selected) {
 	}
 }
 
-export function set_ref(dom, fn) {
-	effect(() => {
-		fn(dom);
-
-		return () => {
-			fn(null);
-		};
-	});
-}
-
 export function apply_element_spread(element, fn) {
 	return () => {
 		set_attributes(element, fn());

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

@@ -18,6 +18,7 @@ import {
 	EFFECT_BLOCK,
 	PAUSED,
 	ROOT_BLOCK,
+	SPREAD_OBJECT,
 	TRACKED,
 	TRACKED_OBJECT,
 	TRY_BLOCK,
@@ -217,9 +218,9 @@ export function tracked(v, b) {
 	};
 }
 
-export function computed(fn, b) {
+export function computed(fn, block) {
 	return {
-		b,
+		b: block,
 		blocks: null,
 		c: 0,
 		d: null,
@@ -644,7 +645,7 @@ export function flush_sync(fn) {
 	var previous_queued_root_blocks = queued_root_blocks;
 
 	try {
-		const root_blocks = [];
+		var root_blocks = [];
 
 		scheduler_mode = FLUSH_SYNC;
 		queued_root_blocks = root_blocks;
@@ -667,6 +668,17 @@ export function flush_sync(fn) {
 	}
 }
 
+export function tracked_spread_object(fn) {
+	var obj = fn();
+
+	define_property(obj, SPREAD_OBJECT, {
+		value: fn,
+		enumerable: false
+	});
+
+	return obj;
+}
+
 export function tracked_object(obj, properties, block) {
 	var tracked_properties = obj[TRACKED_OBJECT];
 
@@ -719,6 +731,10 @@ export function get_property(obj, property, chain = false) {
 
 	if (tracked_property !== undefined) {
 		value = obj[property] = get(tracked_property);
+	} else if (SPREAD_OBJECT in obj) {
+		var spread_fn = obj[SPREAD_OBJECT];
+		var properties = spread_fn();
+		return get_property(properties, property, chain);
 	}
 
 	return value;
@@ -851,11 +867,11 @@ export function spread_object(obj) {
 		return { ...obj };
 	}
 	var keys = original_object_keys(obj);
-	const values = {};
+	var values = {};
 
 	for (var i = 0; i < keys.length; i++) {
 		var key = keys[i];
-		values[key] = get_property_computed(obj, key);
+		values[key] = get_property(obj, key);
 	}
 
 	return values;

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

@@ -109,13 +109,13 @@ export function capture() {
 	var previous_tracking = tracking;
 	var previous_block = active_block;
 	var previous_reaction = active_reaction;
-    var previous_component = active_component;
+	var previous_component = active_component;
 
 	return () => {
 		set_tracking(previous_tracking);
 		set_active_block(previous_block);
 		set_active_reaction(previous_reaction);
-        set_active_component(previous_component);
+		set_active_component(previous_component);
 
 		queue_microtask(exit);
 	};

package/types/index.d.ts

@@ -1,4 +1,4 @@
-export type Component<T> = (props: T) => void;
+export type Component<T = Record<string, any>> = (props: T) => void;
 
 export declare function mount(
 	component: () => void,