ripple 0.2.216 → 0.3.0

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

@@ -239,7 +239,7 @@ const visitors = {
 		if (context.path.at(-1)?.type !== 'Program') {
 			// fatal since we don't have a transformation defined for this case
 			error(
-				'`#server` block can only be declared at the module level.',
+				'`#ripple.server` block can only be declared at the module level.',
 				context.state.analysis.module.filename,
 				node,
 			);
@@ -303,6 +303,45 @@ const visitors = {
 			}
 		}
 
+		// Validate #ripple namespace usage
+		const source_name = node.metadata?.source_name;
+		if (typeof source_name === 'string' && source_name.startsWith('#ripple.')) {
+			// Cannot assign to a #ripple namespace identifier (left side)
+			if (
+				(parent?.type === 'AssignmentExpression' && parent.left === node) ||
+				parent?.type === 'UpdateExpression'
+			) {
+				error(
+					`Cannot assign to \`${source_name}\`. The \`#ripple\` namespace is read-only.`,
+					context.state.analysis.module.filename,
+					node,
+					context.state.loose ? context.state.analysis.errors : undefined,
+					context.state.analysis.comments,
+				);
+				return context.next();
+			}
+
+			// Valid: callee of a CallExpression
+			if (parent?.type === 'CallExpression' && parent.callee === node) {
+				return context.next();
+			}
+
+			// Valid: object of a MemberExpression (further validated in MemberExpression visitor)
+			if (parent?.type === 'MemberExpression' && parent.object === node) {
+				return context.next();
+			}
+
+			// Everything else is an invalid bare reference
+			error(
+				`\`${source_name}\` must be called as a function, e.g., \`${source_name}(...)\`.`,
+				context.state.analysis.module.filename,
+				node,
+				context.state.loose ? context.state.analysis.errors : undefined,
+				context.state.analysis.comments,
+			);
+			return context.next();
+		}
+
 		context.next();
 	},
 
@@ -319,13 +358,13 @@ const visitors = {
 			context.state.metadata.tracking = true;
 		}
 
-		// Track #style.className or #style['className'] references
+		// Track #ripple.style.className or #ripple.style['className'] references
 		if (node.object.type === 'StyleIdentifier') {
 			const component = is_inside_component(context, true);
 
 			if (!component) {
 				error(
-					'`#style` can only be used within a component',
+					'`#ripple.style` can only be used within a component',
 					context.state.analysis.module.filename,
 					node,
 					context.state.loose ? context.state.analysis.errors : undefined,
@@ -339,19 +378,19 @@ const visitors = {
 			let className = null;
 
 			if (!node.computed && node.property.type === 'Identifier') {
-				// #style.test
+				// #ripple.style.test
 				className = node.property.name;
 			} else if (
 				node.computed &&
 				node.property.type === 'Literal' &&
 				typeof node.property.value === 'string'
 			) {
-				// #style['test']
+				// #ripple.style['test']
 				className = node.property.value;
 			} else {
-				// #style[expression] - dynamic, not allowed
+				// #ripple.style[expression] - dynamic, not allowed
 				error(
-					'`#style` property access must use a dot property or static string for css class name, not a dynamic expression',
+					'`#ripple.style` property access must use a dot property or static string for css class name, not a dynamic expression',
 					context.state.analysis.module.filename,
 					node.property,
 					context.state.loose ? context.state.analysis.errors : undefined,
@@ -368,10 +407,75 @@ const visitors = {
 			context.state.analysis.metadata.serverIdentifierPresent = true;
 		}
 
+		// Validate #ripple namespace member access
+		if (
+			node.object.type === 'Identifier' &&
+			typeof node.object.metadata?.source_name === 'string' &&
+			node.object.metadata.source_name.startsWith('#ripple.')
+		) {
+			const ripple_source = node.object.metadata.source_name;
+			const member_parent = context.path.at(-1);
+
+			// No computed property access on #ripple namespace
+			if (node.computed) {
+				error(
+					`Computed property access is not allowed on \`${ripple_source}\`. Use dot notation instead.`,
+					context.state.analysis.module.filename,
+					node,
+					context.state.loose ? context.state.analysis.errors : undefined,
+					context.state.analysis.comments,
+				);
+				return context.next();
+			}
+
+			if (ripple_source === '#ripple.array') {
+				// Only .from, .of, and .fromAsync are allowed on #ripple.array
+				const allowed_methods = new Set(['from', 'of', 'fromAsync']);
+				const prop_name = node.property.type === 'Identifier' ? node.property.name : null;
+
+				if (prop_name === null || !allowed_methods.has(prop_name)) {
+					error(
+						`Only \`.from\`, \`.of\`, and \`.fromAsync\` are allowed on \`#ripple.array\`.${prop_name ? ` Got \`.${prop_name}\`.` : ''}`,
+						context.state.analysis.module.filename,
+						node.property,
+						context.state.loose ? context.state.analysis.errors : undefined,
+						context.state.analysis.comments,
+					);
+					return context.next();
+				}
+			} else {
+				// No member access allowed for other #ripple namespaces
+				error(
+					`Member access is not allowed on \`${ripple_source}\`. Use \`${ripple_source}(...)\` to call it directly.`,
+					context.state.analysis.module.filename,
+					node,
+					context.state.loose ? context.state.analysis.errors : undefined,
+					context.state.analysis.comments,
+				);
+				return context.next();
+			}
+
+			// All #ripple member expressions must be called as a function
+			if (!(member_parent?.type === 'CallExpression' && member_parent.callee === node)) {
+				const prop_name = node.property.type === 'Identifier' ? node.property.name : null;
+				const full_name = prop_name ? `${ripple_source}.${prop_name}` : ripple_source;
+				error(
+					`\`${full_name}\` must be called as a function, e.g., \`${full_name}(...)\`.`,
+					context.state.analysis.module.filename,
+					node,
+					context.state.loose ? context.state.analysis.errors : undefined,
+					context.state.analysis.comments,
+				);
+				return context.next();
+			}
+
+			return context.next();
+		}
+
 		if (node.object.type === 'Identifier' && !node.object.tracked) {
 			const binding = context.state.scope.get(node.object.name);
 
-			if (binding && binding.metadata?.is_tracked_object) {
+			if (binding && binding.metadata?.is_ripple_object) {
 				const internalProperties = new Set(['__v', 'a', 'b', 'c', 'f']);
 
 				let propertyName = null;
@@ -440,6 +544,38 @@ const visitors = {
 	},
 
 	NewExpression(node, context) {
+		const callee = node.callee;
+
+		// Cannot use `new` with #ripple namespace
+		if (
+			callee.type === 'Identifier' &&
+			typeof callee.metadata?.source_name === 'string' &&
+			callee.metadata.source_name.startsWith('#ripple.')
+		) {
+			error(
+				`Cannot use \`new\` with \`${callee.metadata.source_name}\`. Use \`${callee.metadata.source_name}(...)\` instead.`,
+				context.state.analysis.module.filename,
+				node,
+				context.state.loose ? context.state.analysis.errors : undefined,
+				context.state.analysis.comments,
+			);
+		}
+
+		if (
+			callee.type === 'MemberExpression' &&
+			callee.object.type === 'Identifier' &&
+			typeof callee.object.metadata?.source_name === 'string' &&
+			callee.object.metadata.source_name.startsWith('#ripple.')
+		) {
+			error(
+				`Cannot use \`new\` with the \`#ripple\` namespace.`,
+				context.state.analysis.module.filename,
+				node,
+				context.state.loose ? context.state.analysis.errors : undefined,
+				context.state.analysis.comments,
+			);
+		}
+
 		context.next();
 	},
 
@@ -470,7 +606,7 @@ const visitors = {
 							callee.property.type === 'Identifier' &&
 							(callee.property.name === 'track' || callee.property.name === 'tracked'))
 					) {
-						binding.metadata = { ...binding.metadata, is_tracked_object: true };
+						binding.metadata = { ...binding.metadata, is_ripple_object: true };
 					}
 				}
 				visit(declarator, state);
@@ -496,6 +632,38 @@ const visitors = {
 		}
 	},
 
+	StyleIdentifier(node, context) {
+		const parent = context.path.at(-1);
+
+		// #ripple.style must only be used for property access (e.g., #ripple.style.className)
+		if (!parent || parent.type !== 'MemberExpression' || parent.object !== node) {
+			error(
+				'`#ripple.style` can only be used for property access, e.g., `#ripple.style.className`.',
+				context.state.analysis.module.filename,
+				node,
+				context.state.loose ? context.state.analysis.errors : undefined,
+				context.state.analysis.comments,
+			);
+		}
+		context.next();
+	},
+
+	ServerIdentifier(node, context) {
+		const parent = context.path.at(-1);
+
+		// #ripple.server must only be used for member access (e.g., #ripple.server.functionName(...))
+		if (!parent || parent.type !== 'MemberExpression' || parent.object !== node) {
+			error(
+				'`#ripple.server` can only be used for member access, e.g., `#ripple.server.functionName(...)`.',
+				context.state.analysis.module.filename,
+				node,
+				context.state.loose ? context.state.analysis.errors : undefined,
+				context.state.analysis.comments,
+			);
+		}
+		context.next();
+	},
+
 	ArrowFunctionExpression(node, context) {
 		visit_function(node, context);
 	},
@@ -834,7 +1002,7 @@ const visitors = {
 	},
 
 	TSTypeReference(node, context) {
-		// bug in our acorn pasrer: it uses typeParameters instead of typeArguments
+		// bug in our acorn parser: it uses typeParameters instead of typeArguments
 		// @ts-expect-error
 		if (node.typeParameters) {
 			// @ts-expect-error
@@ -1235,7 +1403,7 @@ const visitors = {
 							attr.value.object.type === 'StyleIdentifier'
 						) {
 							error(
-								'`#style` cannot be used directly on DOM elements. Pass the class to a child component instead.',
+								'`#ripple.style` cannot be used directly on DOM elements. Pass the class to a child component instead.',
 								state.analysis.module.filename,
 								attr.value.object,
 								context.state.loose ? context.state.analysis.errors : undefined,
@@ -1411,8 +1579,16 @@ const visitors = {
  */
 export function analyze(ast, filename, options = {}) {
 	const scope_root = new ScopeRoot();
-
-	const { scope, scopes } = create_scopes(ast, scope_root, null);
+	const errors = options.errors ?? [];
+	const comments = options.comments ?? [];
+	const loose = options.loose ?? false;
+
+	const { scope, scopes } = create_scopes(ast, scope_root, null, {
+		loose,
+		errors,
+		filename,
+		comments,
+	});
 
 	const analysis = /** @type {AnalysisResult} */ ({
 		module: { ast, scope, scopes, filename },
@@ -1423,8 +1599,8 @@ export function analyze(ast, filename, options = {}) {
 		metadata: {
 			serverIdentifierPresent: false,
 		},
-		errors: options.errors ?? [],
-		comments: options.comments ?? [],
+		errors,
+		comments,
 	});
 
 	walk(
@@ -1437,7 +1613,7 @@ export function analyze(ast, filename, options = {}) {
 			inside_head: false,
 			ancestor_server_block: undefined,
 			to_ts: options.to_ts ?? false,
-			loose: options.loose ?? false,
+			loose,
 			metadata: {},
 			mode: options.mode,
 		},

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

@@ -1078,11 +1078,11 @@ export function prune_css(css, element, styleClasses, topScopedClasses) {
 				node.metadata.used = true;
 			}
 
-			// Populate top_scoped_classes for truly standalone class selectors (for #style support).
+			// Populate top_scoped_classes for truly standalone class selectors (for #ripple.style support).
 			// A class is standalone only when the entire effective selector chain (after resolving
 			// nesting and stripping :global) is a single RelativeSelector with a single ClassSelector.
 			// This prevents classes from compound selectors like `.wrapper .nested` or selectors
-			// inside :global() from being treated as valid #style targets.
+			// inside :global() from being treated as valid #ripple.style targets.
 			if (selectors.length === 1) {
 				const sole_selector = selectors[0];
 				if (