ripple 0.3.1 → 0.3.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # ripple
 
+## 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.2",
   "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.2"
   }
 }

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

@@ -547,9 +547,38 @@ const visitors = {
 	},
 
 	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)));
 		}
 
@@ -4591,6 +4655,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

@@ -1557,6 +1557,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}