ripple 0.3.1 → 0.3.3

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # ripple
 
+## 0.3.3
+
+### Patch Changes
+
+- [#804](https://github.com/Ripple-TS/ripple/pull/804)
+  [`cd1073f`](https://github.com/Ripple-TS/ripple/commit/cd1073f7cc8085c8b200ada4faf77b2c35b10c6c)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Editor support for
+  #ripple.server
+
+- Updated dependencies
+  [[`cd1073f`](https://github.com/Ripple-TS/ripple/commit/cd1073f7cc8085c8b200ada4faf77b2c35b10c6c)]:
+  - ripple@0.3.3
+
+## 0.3.2
+
+### Patch Changes
+
+- [#802](https://github.com/Ripple-TS/ripple/pull/802)
+  [`42524c9`](https://github.com/Ripple-TS/ripple/commit/42524c9551b1950d7f7a0336ce396fc312b6fe51)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Editor support for
+  #ripple.style
+
+- Updated dependencies
+  [[`42524c9`](https://github.com/Ripple-TS/ripple/commit/42524c9551b1950d7f7a0336ce396fc312b6fe51)]:
+  - ripple@0.3.2
+
 ## 0.3.1
 
 ### 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.1",
+  "version": "0.3.3",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -105,6 +105,6 @@
     "vscode-languageserver-types": "^3.17.5"
   },
   "peerDependencies": {
-    "ripple": "0.3.1"
+    "ripple": "0.3.3"
   }
 }

package/src/compiler/identifier-utils.js

@@ -2,7 +2,12 @@ export const IDENTIFIER_OBFUSCATION_PREFIX = '_$_';
 export const RIPPLE_NAMESPACE_IDENTIFIER =
 	IDENTIFIER_OBFUSCATION_PREFIX + encode_utf16_char('#') + 'ripple';
 export const STYLE_IDENTIFIER = IDENTIFIER_OBFUSCATION_PREFIX + encode_utf16_char('#') + 'style';
-export const SERVER_IDENTIFIER = IDENTIFIER_OBFUSCATION_PREFIX + encode_utf16_char('#') + 'server';
+export const SERVER_IDENTIFIER =
+	IDENTIFIER_OBFUSCATION_PREFIX +
+	encode_utf16_char('#') +
+	'ripple' +
+	encode_utf16_char('.') +
+	'server';
 export const CSS_HASH_IDENTIFIER = IDENTIFIER_OBFUSCATION_PREFIX + 'hash';
 
 const DECODE_UTF16_REGEX = /_u([0-9a-fA-F]{4})_/g;

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

@@ -633,8 +633,13 @@ const visitors = {
 	},
 
 	StyleIdentifier(node, context) {
+		const component = is_inside_component(context, true);
 		const parent = context.path.at(-1);
 
+		if (component) {
+			component.metadata.styleIdentifierPresent = true;
+		}
+
 		// #ripple.style must only be used for property access (e.g., #ripple.style.className)
 		if (!parent || parent.type !== 'MemberExpression' || parent.object !== node) {
 			error(
@@ -748,20 +753,20 @@ const visitors = {
 			if (topScopedClasses.size > 0) {
 				node.metadata.topScopedClasses = topScopedClasses;
 			}
+		}
 
-			if (metadata.styleClasses.size > 0) {
-				node.metadata.styleClasses = metadata.styleClasses;
+		if (metadata.styleClasses.size > 0) {
+			node.metadata.styleClasses = metadata.styleClasses;
 
-				for (const [className, property] of metadata.styleClasses) {
-					if (!topScopedClasses?.has(className)) {
-						error(
-							`CSS class ".${className}" does not exist as a stand-alone class in ${node.id?.name ? node.id.name : "this component's"} <style> block`,
-							context.state.analysis.module.filename,
-							property,
-							context.state.loose ? context.state.analysis.errors : undefined,
-							context.state.analysis.comments,
-						);
-					}
+			for (const [className, property] of metadata.styleClasses) {
+				if (!topScopedClasses?.has(className)) {
+					error(
+						`CSS class ".${className}" does not exist as a stand-alone class in ${node.id?.name ? node.id.name : "this component's"} <style> block`,
+						context.state.analysis.module.filename,
+						property,
+						context.state.loose ? context.state.analysis.errors : undefined,
+						context.state.analysis.comments,
+					);
 				}
 			}
 		}

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

@@ -541,15 +541,44 @@ const visitors = {
 	},
 
 	ServerIdentifier(node, context) {
-		const id = b.id(SERVER_IDENTIFIER);
+		const id = b.id(SERVER_IDENTIFIER, /** @type {AST.NodeWithLocation} */ (node));
 		id.metadata.source_name = '#ripple.server';
-		return { ...node, ...id };
+		return id;
 	},
 
 	StyleIdentifier(node, context) {
-		const id = b.id(STYLE_IDENTIFIER);
-		id.metadata.source_name = '#ripple.style';
-		return { ...node, ...id };
+		if (context.state.to_ts) {
+			const namespace_alias = set_hidden_import_from_ripple(
+				RIPPLE_NAMESPACE_IDENTIFIER,
+				context,
+				true,
+			);
+
+			// IMPORTANT! only add location to the ParenthesizedExpression
+			// otherwise it will cause partial #ripple mapping
+			const namespace_parens = b.parenthesized(
+				b.ts_as(b.id(namespace_alias), b.ts_type_reference(b.id('RippleNamespaceWithStyle'))),
+				slice_loc_info(/** @type {AST.NodeWithLocation} */ (node), 0, '#ripple'.length),
+			);
+			namespace_parens.metadata = {
+				...namespace_parens.metadata,
+				forceMapping: true,
+				skipParenthesisMapping: true,
+			};
+
+			return b.member(
+				namespace_parens,
+				b.id(
+					'style',
+					slice_loc_info(/** @type {AST.NodeWithLocation} */ (node), '#ripple.'.length),
+				),
+				false,
+				false,
+				/** @type {AST.NodeWithLocation} */ (node),
+			);
+		}
+
+		return { ...node, ...b.id(STYLE_IDENTIFIER) };
 	},
 
 	ImportDeclaration(node, context) {
@@ -1928,10 +1957,14 @@ const visitors = {
 			var_method_type = 'const';
 		}
 
-		if (node.css !== null && node.metadata.styleIdentifierPresent) {
+		if (node.metadata.styleIdentifierPresent) {
 			/** @type {AST.Property[]} */
 			const properties = [];
-			if (node.metadata.topScopedClasses && node.metadata.topScopedClasses.size > 0) {
+			if (
+				node.css !== null &&
+				node.metadata.topScopedClasses &&
+				node.metadata.topScopedClasses.size > 0
+			) {
 				const hash = b[var_method_type](b.id(CSS_HASH_IDENTIFIER), b.literal(node.css.hash));
 				style_statements.push(hash);
 				for (const [className] of node.metadata.topScopedClasses) {
@@ -1947,6 +1980,37 @@ const visitors = {
 					);
 				}
 			}
+			if (context.state.to_ts) {
+				const namespace_alias = set_hidden_import_from_ripple(
+					RIPPLE_NAMESPACE_IDENTIFIER,
+					context,
+					true,
+				);
+
+				// This will create a type that we'll use for type casting #ripple.style access, e.g.
+				// type RippleNamespaceWithStyle = Omit<typeof _$__u0023_ripple, 'style'> &	{ style: typeof _$__u0023_style };
+				const ripple_type_alias = b.ts_type_alias(
+					b.id('RippleNamespaceWithStyle'),
+					b.ts_intersection_type([
+						b.ts_type_reference(
+							b.id('Omit'),
+							b.ts_type_parameter_instantiation([
+								b.ts_type_query(b.id(namespace_alias)),
+								b.ts_literal_type(b.literal('style')),
+							]),
+						),
+						b.ts_type_literal([
+							b.ts_property_signature(
+								b.id('style'),
+								b.ts_type_annotation(b.ts_type_query(b.id(STYLE_IDENTIFIER))),
+							),
+						]),
+					]),
+				);
+				style_statements.push(
+					/** @type {AST.Statement} */ (/** @type {unknown} */ (ripple_type_alias)),
+				);
+			}
 			style_statements.push(b[var_method_type](b.id(STYLE_IDENTIFIER), b.object(properties)));
 		}
 
@@ -2652,8 +2716,10 @@ const visitors = {
 			);
 			value.loc = node.loc;
 
-			const server_identifier = b.id(SERVER_IDENTIFIER);
-			server_identifier.loc = node.loc;
+			const server_identifier = b.id(
+				SERVER_IDENTIFIER,
+				slice_loc_info(/** @type {AST.NodeWithLocation} */ (node), 0, '#ripple.server'.length),
+			);
 			// Add source_name to properly map longer generated back to '#ripple.server'
 			server_identifier.metadata.source_name = '#ripple.server';
 
@@ -4591,6 +4657,16 @@ function create_tsx_with_typescript_support(comments) {
 				context.visit(node.value.body);
 			}
 		},
+		ParenthesizedExpression(node, context) {
+			if (!node.loc) {
+				base_tsx.ParenthesizedExpression?.(node, context);
+				return;
+			}
+			const loc = /** @type {AST.SourceLocation} */ (node.loc);
+			context.location(loc.start.line, loc.start.column);
+			base_tsx.ParenthesizedExpression?.(node, context);
+			context.location(loc.end.line, loc.end.column);
+		},
 		TSAsExpression(node, context) {
 			if (!node.loc) {
 				base_tsx.TSAsExpression?.(node, context);

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

@@ -422,22 +422,6 @@ export function convert_source_map_to_mappings(
 							loc: node.loc,
 							metadata: {},
 						};
-
-						if (node.metadata.source_name === '#ripple') {
-							// Suppress the private-identifier parse diagnostic while the user is
-							// still typing a namespace access like `#ripple.` for completions.
-							token.metadata.suppressedDiagnostics = [18016];
-						}
-
-						if (
-							node.metadata.source_name === '#ripple.server' ||
-							node.metadata.source_name === '#ripple.style'
-						) {
-							// Let TextMate own the coloring for these namespace forms.
-							// Their dedicated AST nodes otherwise cause semantic tokens to repaint
-							// the full '#ripple.server' / '#ripple.style' span after TS attaches.
-							token.mappingData = { ...mapping_data, semantic: false };
-						}
 					} else {
 						token = {
 							source: node.name,
@@ -445,12 +429,6 @@ export function convert_source_map_to_mappings(
 							loc: node.loc,
 							metadata: {},
 						};
-						if (node.name === '#ripple') {
-							// Suppress the private-identifier parse diagnostic while the user is
-							// still typing a namespace access like `#ripple.` for completions.
-							token.metadata.suppressedDiagnostics = [18016];
-						}
-						// No transformation - source and generated names are the same
 					}
 
 					if (node.metadata?.is_component) {
@@ -1557,6 +1535,14 @@ export function convert_source_map_to_mappings(
 				}
 				return;
 			} else if (node.type === 'ParenthesizedExpression') {
+				if (node.metadata.forceMapping && node.loc) {
+					const mapping = get_mapping_from_node(node, src_to_gen_map, gen_line_offsets);
+					if (node.metadata.skipParenthesisMapping) {
+						mapping.generatedOffsets[0] = mapping.generatedOffsets[0] + 1; // Skip the opening parenthesis
+						mapping.generatedLengths[0] = mapping.generatedLengths[0] - 2; // Skip both parentheses
+					}
+					mappings.push(mapping);
+				}
 				// Visit the wrapped expression
 				if (node.expression) {
 					visit(node.expression);

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

@@ -42,6 +42,7 @@ interface BaseNodeMetaData {
 	has_return?: boolean;
 	is_reactive?: boolean;
 	lone_return?: boolean;
+	forceMapping?: boolean;
 }
 
 interface FunctionMetaData extends BaseNodeMetaData {
@@ -54,8 +55,8 @@ interface FunctionMetaData extends BaseNodeMetaData {
 // Strip parent, loc, and range from TSESTree nodes to match @sveltejs/acorn-typescript output
 // acorn-typescript uses start/end instead of range, and loc is optional
 type AcornTSNode<T> = Omit<T, 'parent' | 'loc' | 'range' | 'expression'> & {
-	start: number;
-	end: number;
+	start?: number;
+	end?: number;
 	loc?: AST.SourceLocation;
 	range?: AST.BaseNode['range'];
 	metadata: BaseNodeMetaData;
@@ -168,12 +169,16 @@ declare module 'estree' {
 		Text: TextNode;
 		JSXEmptyExpression: ESTreeJSX.JSXEmptyExpression;
 		ParenthesizedExpression: ParenthesizedExpression;
+		TSAsExpression: TSAsExpression;
 	}
 
 	// Missing estree type
 	interface ParenthesizedExpression extends AST.BaseNode {
 		type: 'ParenthesizedExpression';
 		expression: AST.Expression;
+		metadata: BaseNodeMetaData & {
+			skipParenthesisMapping?: boolean;
+		};
 	}
 
 	interface Comment {
@@ -425,6 +430,8 @@ declare module 'estree' {
 
 	export type RippleAttribute = AST.Attribute | AST.SpreadAttribute | AST.RefAttribute;
 
+	export type RippleStatement = AST.Statement | TSESTree.Statement;
+
 	export type NodeWithChildren = AST.Element | AST.TsxCompat;
 
 	export namespace CSS {

package/src/compiler/utils.js

@@ -938,28 +938,3 @@ export function flatten_switch_consequent(consequent) {
 export function get_ripple_namespace_call_name(name) {
 	return name == null ? null : (RIPPLE_NAMESPACE_CALL_NAME[name] ?? null);
 }
-
-/**
- * @param {AST.MemberExpression} member
- * @returns {boolean}
- */
-export function is_property_part_of_ripple_namespace(member) {
-	/** @type {AST.MemberExpression | null} */
-	let current = member;
-
-	while (current !== null) {
-		const source_name = current.object.metadata?.source_name;
-		if (get_ripple_namespace_call_name(source_name) !== null) {
-			return true;
-		}
-
-		const parent = current.metadata?.path?.at(-1);
-		if (parent?.type !== 'MemberExpression' || parent.object !== current) {
-			break;
-		}
-
-		current = parent;
-	}
-
-	return false;
-}

package/src/utils/builders.js

@@ -402,6 +402,189 @@ export function member(object, property, computed = false, optional = false, loc
 	return set_location(node, loc_info);
 }
 
+/**
+ * @param {AST.Expression} expression
+ * @param {AST.Node} type_annotation
+ * @param {AST.NodeWithLocation} [loc_info]
+ * @returns {AST.TSAsExpression}
+ */
+export function ts_as(expression, type_annotation, loc_info) {
+	const node = /** @type {AST.TSAsExpression} */ ({
+		type: 'TSAsExpression',
+		expression,
+		typeAnnotation: type_annotation,
+		metadata: { path: [] },
+	});
+
+	return set_location(node, loc_info);
+}
+
+/**
+ * @param {AST.Expression} expression
+ * @param {AST.NodeWithLocation} [loc_info]
+ * @returns {AST.ParenthesizedExpression}
+ */
+export function parenthesized(expression, loc_info) {
+	const node = /** @type {AST.ParenthesizedExpression} */ ({
+		type: 'ParenthesizedExpression',
+		expression,
+		metadata: { path: [] },
+	});
+
+	return set_location(node, loc_info);
+}
+
+/**
+ * @param {AST.Identifier | AST.MemberExpression} expr_name
+ * @param {AST.Node | null} [type_arguments]
+ * @param {AST.NodeWithLocation} [loc_info]
+ * @returns {AST.TSTypeQuery}
+ */
+export function ts_type_query(expr_name, type_arguments = null, loc_info) {
+	const node = /** @type {AST.TSTypeQuery} */ ({
+		type: 'TSTypeQuery',
+		exprName: expr_name,
+		typeArguments: type_arguments,
+		metadata: { path: [] },
+	});
+
+	return set_location(node, loc_info);
+}
+
+/**
+ * @param {AST.Node[]} params
+ * @param {AST.NodeWithLocation} [loc_info]
+ * @returns {AST.TSTypeParameterInstantiation}
+ */
+export function ts_type_parameter_instantiation(params, loc_info) {
+	const node = /** @type {AST.TSTypeParameterInstantiation} */ ({
+		type: 'TSTypeParameterInstantiation',
+		params,
+		metadata: { path: [] },
+	});
+
+	return set_location(node, loc_info);
+}
+
+/**
+ * @param {AST.Identifier | AST.Node} type_name
+ * @param {AST.Node | null} [type_arguments]
+ * @param {AST.NodeWithLocation} [loc_info]
+ * @returns {AST.TSTypeReference}
+ */
+export function ts_type_reference(type_name, type_arguments = null, loc_info) {
+	const node = /** @type {AST.TSTypeReference} */ ({
+		type: 'TSTypeReference',
+		typeName: type_name,
+		typeArguments: type_arguments,
+		metadata: { path: [] },
+	});
+
+	return set_location(node, loc_info);
+}
+
+/**
+ * @param {AST.Literal} literal_node
+ * @param {AST.NodeWithLocation} [loc_info]
+ * @returns {AST.TSLiteralType}
+ */
+export function ts_literal_type(literal_node, loc_info) {
+	const node = /** @type {AST.TSLiteralType} */ ({
+		type: 'TSLiteralType',
+		literal: literal_node,
+		metadata: { path: [] },
+	});
+
+	return set_location(node, loc_info);
+}
+
+/**
+ * @param {AST.Node[]} types
+ * @param {AST.NodeWithLocation} [loc_info]
+ * @returns {AST.TSIntersectionType}
+ */
+export function ts_intersection_type(types, loc_info) {
+	const node = /** @type {AST.TSIntersectionType} */ ({
+		type: 'TSIntersectionType',
+		types,
+		metadata: { path: [] },
+	});
+
+	return set_location(node, loc_info);
+}
+
+/**
+ * @param {AST.Node} type_annotation
+ * @param {AST.NodeWithLocation} [loc_info]
+ * @returns {AST.TSTypeAnnotation}
+ */
+export function ts_type_annotation(type_annotation, loc_info) {
+	const node = /** @type {AST.TSTypeAnnotation} */ ({
+		type: 'TSTypeAnnotation',
+		typeAnnotation: type_annotation,
+		metadata: { path: [] },
+	});
+
+	return set_location(node, loc_info);
+}
+
+/**
+ * @param {AST.Expression} key
+ * @param {AST.Node | null} type_annotation
+ * @param {AST.NodeWithLocation} [loc_info]
+ * @returns {AST.TSPropertySignature}
+ */
+export function ts_property_signature(key, type_annotation = null, loc_info) {
+	const node = /** @type {AST.TSPropertySignature} */ ({
+		type: 'TSPropertySignature',
+		key,
+		accessibility: undefined,
+		computed: false,
+		optional: false,
+		readonly: false,
+		static: false,
+		kind: 'init',
+		typeAnnotation: type_annotation,
+		metadata: { path: [] },
+	});
+
+	return set_location(node, loc_info);
+}
+
+/**
+ * @param {AST.Node[]} members
+ * @param {AST.NodeWithLocation} [loc_info]
+ * @returns {AST.TSTypeLiteral}
+ */
+export function ts_type_literal(members, loc_info) {
+	const node = /** @type {AST.TSTypeLiteral} */ ({
+		type: 'TSTypeLiteral',
+		members,
+		metadata: { path: [] },
+	});
+
+	return set_location(node, loc_info);
+}
+
+/**
+ * @param {AST.Identifier} id
+ * @param {AST.Node} type_annotation
+ * @param {AST.NodeWithLocation} [loc_info]
+ * @returns {AST.TSTypeAliasDeclaration}
+ */
+export function ts_type_alias(id, type_annotation, loc_info) {
+	const node = /** @type {AST.TSTypeAliasDeclaration} */ ({
+		type: 'TSTypeAliasDeclaration',
+		id,
+		typeParameters: undefined,
+		typeAnnotation: type_annotation,
+		declare: false,
+		metadata: { path: [] },
+	});
+
+	return set_location(node, loc_info);
+}
+
 /**
  * @param {string} path
  * @returns {AST.Identifier | AST.MemberExpression}

package/tests/client/compiler/compiler.basic.test.ripple

@@ -519,8 +519,7 @@ export component App() {
 	});
 
 	it('parses bare #ripple in loose mode for autocomplete recovery', () => {
-		const source = `
-export component App() {
+		const source = `export component App() {
 	#ripple
 }
 `;
@@ -536,6 +535,6 @@ export component App() {
 				mapping.lengths[0] === '#ripple'.length,
 		);
 
-		expect(mapping?.data.customData.suppressedDiagnostics).toContain(18016);
+		expect(mapping).toBeDefined();
 	});
 });

package/types/index.d.ts

@@ -545,6 +545,8 @@ export function bindFiles<V extends FileList>(
 	setter?: SetFunction<V>,
 ): (node: HTMLInputElement) => void;
 
+type ServerBlock = {};
+
 export interface RippleNamespace {
 	array: RippleArrayCallable;
 	object: RippleObjectCallable;
@@ -559,7 +561,8 @@ export interface RippleNamespace {
 	untrack: typeof untrack;
 	track: typeof track;
 	trackSplit: typeof trackSplit;
-	style: Record<string, string>; // Placeholder for style-related runtime class names (e.g., #ripple.style.someClass)
+	style: Record<string, string>;
+	server: ServerBlock;
 }
 
 export declare const ripple_namespace: RippleNamespace;