ripple 0.2.185 → 0.2.187

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.185",
+  "version": "0.2.187",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -86,6 +86,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.2.185"
+    "ripple": "0.2.187"
   }
 }

package/src/compiler/index.d.ts

@@ -24,6 +24,12 @@ export interface CompileResult {
 	css: string;
 }
 
+export interface DefinitionLocation {
+	embeddedId: string; // e.g., 'style_0', 'style_1'
+	start: number; // start offset
+	end: number; // end offset
+}
+
 export interface PluginActionOverrides {
 	/** Whether to enable word document highlighting for this mapping */
 	wordHighlight?: {
@@ -40,13 +46,17 @@ export interface PluginActionOverrides {
 	/** Custom definition info for this mapping, false to disable */
 	definition?:
 		| {
-				description: string;
+				description?: string; // just for reference
+				// Generic location for embedded content (CSS, etc.)
+				location?: DefinitionLocation;
 		  }
 		| false;
 }
 
 export interface CustomMappingData extends PluginActionOverrides {
 	generatedLengths: number[];
+	embeddedId?: string; // e.g. css regions: 'style_0', 'style_1', etc.
+	content?: string; // (e.g., css code)
 }
 
 export interface MappingData extends VolarCodeInformation {
@@ -61,7 +71,6 @@ export interface VolarMappingsResult {
 	code: string;
 	mappings: CodeMapping[];
 	cssMappings: CodeMapping[];
-	cssSources: string[];
 }
 
 /**

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

@@ -1,13 +1,10 @@
-/** @import * as AST from 'estree' */
-/** @import * as ESTreeJSX from 'estree-jsx' */
-/** @import { Parse } from '#parser' */
-
 /**
- * @import {
- *   RipplePluginConfig
- * } from '#compiler' */
-
-/** @import { ParseOptions } from 'ripple/compiler' */
+@import * as AST from 'estree'
+@import * as ESTreeJSX from 'estree-jsx'
+@import { Parse } from '#parser'
+@import { RipplePluginConfig } from '#compiler';
+@import { ParseOptions } from 'ripple/compiler'
+ */
 
 import * as acorn from 'acorn';
 import { tsPlugin } from '@sveltejs/acorn-typescript';
@@ -1741,6 +1738,7 @@ function RipplePlugin(config) {
 								throw new Error('Components can only have one style tag');
 							}
 							component.css = parsed_css;
+							/** @type {AST.Element} */ (element).metadata.styleScopeHash = parsed_css.hash;
 						}
 
 						const newLines = content.match(regex_newline_characters)?.length;
@@ -2167,6 +2165,7 @@ function RipplePlugin(config) {
  * @param {string} source
  * @param {AST.CommentWithLocation[]} comments
  * @param {number} [index=0] - Starting index
+ * @returns {{onComment: Parse.Options['onComment'], add_comments: (ast: AST.Node) => void}}
  */
 function get_comment_handlers(source, comments, index = 0) {
 	/**
@@ -2230,11 +2229,7 @@ function get_comment_handlers(source, comments, index = 0) {
 					context,
 				}));
 
-			/**
-			 *  @param {AST.Node} ast
-			 */
 			walk(ast, null, {
-				/** @param {AST.Node} node */
 				_(node, { next, path }) {
 					const metadata = node?.metadata;
 

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

@@ -41,7 +41,7 @@ function is_global(relative_selector) {
 export function analyze_css(css) {
 	walk(
 		css,
-		{ rule: /** @type {AST.CSS.Rule | null} */ (null) },
+		/** @type {{ rule: AST.CSS.Rule | null }} */ ({ rule: null }),
 		{
 			Rule(node, context) {
 				node.metadata.parent_rule = context.state.rule;
@@ -90,7 +90,7 @@ export function analyze_css(css) {
 				// Set the rule metadata before analyzing children
 				node.metadata.rule = context.state.rule;
 
-				context.next(); // analyse relevant selectors first
+				context.next(); // analyze relevant selectors first
 
 				{
 					const global = node.children.find(is_global);

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

@@ -6,7 +6,6 @@
 	AnalysisContext,
 	ScopeInterface,
 	Visitors,
-	Visitor,
 } from '#compiler';
  */
 /** @import * as AST from 'estree' */
@@ -423,25 +422,11 @@ const visitors = {
 		context.visit(node.discriminant, context.state);
 
 		for (const switch_case of node.cases) {
-			// Fallthrough
+			// Skip empty cases
 			if (switch_case.consequent.length === 0) {
 				continue;
 			}
 
-			// Validate that each cases ends in a break statement, except for the last case
-			const last = switch_case.consequent?.[switch_case.consequent.length - 1];
-
-			if (
-				last.type !== 'BreakStatement' &&
-				node.cases.indexOf(switch_case) !== node.cases.length - 1
-			) {
-				error(
-					'Template switch cases must end with a break statement (with the exception of the last case).',
-					context.state.analysis.module.filename,
-					switch_case,
-				);
-			}
-
 			node.metadata = {
 				...node.metadata,
 				has_template: false,

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

@@ -5,13 +5,17 @@
 import { walk } from 'zimmerframe';
 import { is_element_dom_element } from '../../utils.js';
 
-const seen = new Set();
 const regex_backslash_and_following_character = /\\(.)/g;
 /** @type {Direction} */
 const FORWARD = 0;
 /** @type {Direction} */
 const BACKWARD = 1;
 
+// this will be set for every prune_css call
+// since the code is synchronous, this is safe
+/** @type {string} */
+let css_hash;
+
 // CSS selector constants
 /**
  * @param {number} start
@@ -196,6 +200,47 @@ function apply_selector(relative_selectors, rule, element, direction) {
 	if (matched) {
 		if (!is_outer_global(relative_selector)) {
 			relative_selector.metadata.scoped = true;
+
+			// Store scoped class information on element for language server features
+			if (!relative_selector.metadata.is_global && !relative_selector.metadata.is_global_like) {
+				// Extract class selectors from the relative selector
+				for (const selector of relative_selector.selectors) {
+					if (selector.type === 'ClassSelector') {
+						const name = selector.name.replace(regex_backslash_and_following_character, '$1');
+
+						if (!element.metadata.css) {
+							element.metadata.css = {
+								scopedClasses: new Map(),
+								topScopedClasses: new Map(),
+								hash: css_hash,
+							};
+						}
+
+						// Store class name → CSS location in scopedClasses
+						if (!element.metadata.css.scopedClasses.has(name)) {
+							element.metadata.css.scopedClasses.set(name, {
+								start: selector.start,
+								end: selector.end,
+								selector: selector,
+							});
+						}
+
+						// Also store in topScopedClasses if standalone
+						// Standalone = only this ClassSelector in the RelativeSelector, no pseudo-classes/elements
+						const isStandalone =
+							relative_selector.selectors.length === 1 &&
+							relative_selector.selectors[0] === selector;
+
+						if (isStandalone && !element.metadata.css.topScopedClasses.has(name)) {
+							element.metadata.css.topScopedClasses.set(name, {
+								start: selector.start,
+								end: selector.end,
+								selector: selector,
+							});
+						}
+					}
+				}
+			}
 		}
 
 		element.metadata.scoped = true;
@@ -1005,6 +1050,8 @@ function rule_has_animation(rule) {
  * @return {void}
  */
 export function prune_css(css, element) {
+	css_hash = css.hash;
+
 	/** @type {Visitors<AST.CSS.Node, null>} */
 	const visitors = {
 		Rule(node, context) {
@@ -1017,8 +1064,6 @@ export function prune_css(css, element) {
 		ComplexSelector(node, context) {
 			const selectors = get_relative_selectors(node);
 
-			seen.clear();
-
 			const rule = /** @type {AST.CSS.Rule} */ (node.metadata.rule);
 
 			if (apply_selector(selectors, rule, element, BACKWARD) || rule_has_animation(rule)) {

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

@@ -1,8 +1,7 @@
-/** @import * as AST from 'estree' */
-/** @import * as ESTreeJSX from 'estree-jsx' */
-/** @import { SourceMapMappings } from '@jridgewell/sourcemap-codec' */
-/** @import * as ESRap from 'esrap' */
 /**
+@import * as AST from 'estree';
+@import * as ESTreeJSX from 'estree-jsx';
+@import { SourceMapMappings } from '@jridgewell/sourcemap-codec';
 @import {
 	AnalysisResult,
 	TransformClientContext,
@@ -14,8 +13,10 @@
 }	from '#compiler';
  */
 
-/** @typedef {Map<number, {offset: number, delta: number}>} PostProcessingChanges */
-/** @typedef {number[]} LineOffsets */
+/**
+@typedef {Map<number, {offset: number, delta: number}>} PostProcessingChanges;
+@typedef {number[]} LineOffsets;
+*/
 
 import { walk } from 'zimmerframe';
 import path from 'node:path';
@@ -1829,31 +1830,41 @@ const visitors = {
 		const statements = [];
 		const cases = [];
 
-		let i = 1;
-
+		let id_gen = 0;
+		let counter = 0;
 		for (const switch_case of node.cases) {
 			const case_body = [];
+			const consequent = switch_case.consequent;
+
+			if (consequent.length !== 0) {
+				const consequent_scope = context.state.scopes.get(consequent) || context.state.scope;
 
-			if (switch_case.consequent.length !== 0) {
-				const consequent_scope =
-					context.state.scopes.get(switch_case.consequent) || context.state.scope;
+				const block = transform_body(consequent, {
+					...context,
+					state: { ...context.state, scope: consequent_scope },
+				});
+				const has_break = consequent.some((stmt) => stmt.type === 'BreakStatement');
+				const is_last = counter === node.cases.length - 1;
+				const is_default = switch_case.test == null;
 				const consequent_id = context.state.scope.generate(
-					'switch_case_' + (switch_case.test == null ? 'default' : i),
-				);
-				const consequent = b.block(
-					transform_body(switch_case.consequent, {
-						...context,
-						state: { ...context.state, scope: consequent_scope },
-					}),
+					'switch_case_' + (is_default ? 'default' : id_gen),
 				);
 
-				statements.push(b.var(b.id(consequent_id), b.arrow([b.id('__anchor')], consequent)));
-
-				case_body.push(b.return(b.id(consequent_id)));
+				statements.push(b.var(b.id(consequent_id), b.arrow([b.id('__anchor')], b.block(block))));
+				case_body.push(
+					b.stmt(b.call(b.member(b.id('result'), b.id('push'), false), b.id(consequent_id))),
+				);
 
-				i++;
+				// in js, `default:` can be in the middle without a break
+				// so we only add return for the last case or cases with a break
+				if (has_break || is_last) {
+					case_body.push(b.return(b.id('result')));
+				}
+				id_gen++;
 			}
 
+			counter++;
+
 			cases.push(
 				b.switch_case(
 					switch_case.test ? /** @type {AST.Expression} */ (context.visit(switch_case.test)) : null,
@@ -1869,6 +1880,7 @@ const visitors = {
 					id,
 					b.thunk(
 						b.block([
+							b.var(b.id('result'), b.array([])),
 							b.switch(/** @type {AST.Expression} */ (context.visit(node.discriminant)), cases),
 						]),
 					),
@@ -2996,7 +3008,7 @@ function create_tsx_with_typescript_support() {
 					context.write(node.computed ? ']: ' : ': ');
 					context.visit(node.value);
 				} else {
-					base_tsx.Property?.(node, /** @type {ESRap.} */ (context));
+					base_tsx.Property?.(node, context);
 				}
 			} else {
 				// Use default handler for non-component properties