@ripple-ts/prettier-plugin 0.3.2 → 0.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ripple-ts/prettier-plugin",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "Ripple plugin for Prettier",
   "type": "module",
   "module": "src/index.js",
@@ -26,7 +26,7 @@
   "devDependencies": {
     "@types/node": "^24.3.0",
     "prettier": "^3.8.1",
-    "ripple": "0.3.2"
+    "ripple": "0.3.4"
   },
   "dependencies": {},
   "files": [

package/src/index.js

@@ -638,33 +638,6 @@ function shouldPrintComma(options, level = 'all') {
 	}
 }
 
-/**
- * Check whether a tracked array/object node used long #ripple.<kind>(...) syntax.
- * @param {AST.RippleArrayExpression | AST.RippleObjectExpression} node - The tracked node
- * @param {RippleFormatOptions} options - Prettier options
- * @param {'array' | 'object'} kind - Tracked structure kind
- * @returns {boolean}
- */
-function uses_long_tracked_syntax(node, options, kind) {
-	if (!options || typeof options.originalText !== 'string') {
-		return false;
-	}
-
-	if (
-		typeof node.start !== 'number' ||
-		typeof node.end !== 'number' ||
-		node.start < 0 ||
-		node.end <= node.start
-	) {
-		return false;
-	}
-
-	const node_text = options.originalText.slice(node.start, node.end);
-	return kind === 'array'
-		? /^#ripple\.array\s*\(/.test(node_text)
-		: /^#ripple\.object\s*\(/.test(node_text);
-}
-
 /**
  * Check if a leading comment can be attached to the previous element
  * @param {AST.Comment} comment - The comment node
@@ -953,13 +926,9 @@ function printRippleNode(node, path, options, print, args) {
 			nodeContent = printTryStatement(node, path, options, print);
 			break;
 
-		case 'ArrayExpression':
-		case 'RippleArrayExpression': {
-			const is_ripple_array = node.type === 'RippleArrayExpression';
-			const prefix = is_ripple_array ? '#ripple' : '';
-
+		case 'ArrayExpression': {
 			if (!node.elements || node.elements.length === 0) {
-				nodeContent = prefix + '[]';
+				nodeContent = '[]';
 				break;
 			}
 
@@ -1083,7 +1052,7 @@ function printRippleNode(node, path, options, print, args) {
 				const separator = [',', line];
 				const trailing = shouldUseTrailingComma ? ifBreak(',', '') : '';
 				nodeContent = group([
-					prefix + '[',
+					'[',
 					indent([softline, join(separator, elements), trailing]),
 					softline,
 					']',
@@ -1183,7 +1152,7 @@ function printRippleNode(node, path, options, print, args) {
 					const separator = [',', hardline];
 					const trailingDoc = shouldUseTrailingComma ? ',' : '';
 					nodeContent = group([
-						prefix + '[',
+						'[',
 						indent([hardline, join(separator, elements), trailingDoc]),
 						hardline,
 						']',
@@ -1243,12 +1212,7 @@ function printRippleNode(node, path, options, print, args) {
 				}
 
 				const trailingDoc = shouldUseTrailingComma ? ifBreak(',', '') : '';
-				nodeContent = group([
-					prefix + '[',
-					indent([softline, fill(fillParts), trailingDoc]),
-					softline,
-					']',
-				]);
+				nodeContent = group(['[', indent([softline, fill(fillParts), trailingDoc]), softline, ']']);
 				break;
 			}
 
@@ -1263,7 +1227,7 @@ function printRippleNode(node, path, options, print, args) {
 				}
 				const trailingDoc = shouldUseTrailingComma ? ifBreak(',', '') : '';
 				nodeContent = group([
-					prefix + '[',
+					'[',
 					indent([softline, join(separator, parts), trailingDoc]),
 					softline,
 					']',
@@ -1287,7 +1251,7 @@ function printRippleNode(node, path, options, print, args) {
 				const separator = [',', hardline];
 				const trailingDoc = shouldUseTrailingComma ? ifBreak(',', '') : '';
 				nodeContent = group([
-					prefix + '[',
+					'[',
 					indent([hardline, join(separator, inlineElements), trailingDoc]),
 					hardline,
 					']',
@@ -1362,12 +1326,11 @@ function printRippleNode(node, path, options, print, args) {
 
 			// Array with blank lines - format as multi-line
 			// Use simple group that will break to fit within printWidth
-			nodeContent = group([prefix + '[', indent([line, contentParts]), line, ']']);
+			nodeContent = group(['[', indent([line, contentParts]), line, ']']);
 			break;
 		}
 
 		case 'ObjectExpression':
-		case 'RippleObjectExpression':
 			nodeContent = printObjectExpression(node, path, options, print, args);
 			break;
 
@@ -1495,7 +1458,7 @@ function printRippleNode(node, path, options, print, args) {
 		}
 
 		case 'StyleIdentifier': {
-			nodeContent = '#ripple.style';
+			nodeContent = '#style';
 			break;
 		}
 
@@ -1512,7 +1475,7 @@ function printRippleNode(node, path, options, print, args) {
 		}
 
 		case 'ServerIdentifier': {
-			nodeContent = '#ripple.server';
+			nodeContent = '#server';
 			break;
 		}
 
@@ -1692,9 +1655,7 @@ function printRippleNode(node, path, options, print, args) {
 
 		case 'ExpressionStatement': {
 			// Object literals at statement position need parentheses to avoid ambiguity with blocks
-			const needsParens =
-				node.expression.type === 'ObjectExpression' ||
-				node.expression.type === 'RippleObjectExpression';
+			const needsParens = node.expression.type === 'ObjectExpression';
 			if (needsParens) {
 				nodeContent = ['(', path.call(print, 'expression'), ')', semi(options)];
 			} else {
@@ -1715,23 +1676,18 @@ function printRippleNode(node, path, options, print, args) {
 
 		case 'Identifier': {
 			// Simple case - just return the name directly like Prettier core
-			const source_name = node.metadata?.source_name;
-			const identifier_name =
-				typeof source_name === 'string' && source_name.startsWith('#ripple.')
-					? source_name
-					: node.name;
 			const trackedPrefix = node.tracked ? '@' : '';
 			let identifierContent;
 			if (node.typeAnnotation) {
 				const optionalMarker = node.optional ? '?' : '';
 				identifierContent = [
-					trackedPrefix + identifier_name,
+					trackedPrefix + node.name,
 					optionalMarker,
 					': ',
 					path.call(print, 'typeAnnotation'),
 				];
 			} else {
-				identifierContent = trackedPrefix + identifier_name;
+				identifierContent = trackedPrefix + node.name;
 			}
 			// Preserve parentheses for type-cast identifiers, but only if:
 			// 1. The identifier itself is marked as parenthesized
@@ -1880,7 +1836,7 @@ function printRippleNode(node, path, options, print, args) {
 
 		case 'ServerBlock': {
 			const blockContent = path.call(print, 'body');
-			nodeContent = ['#ripple.server ', blockContent];
+			nodeContent = ['#server ', blockContent];
 			break;
 		}
 
@@ -2080,11 +2036,15 @@ function printRippleNode(node, path, options, print, args) {
 			break;
 
 		case 'ObjectPattern':
-			nodeContent = printObjectPattern(node, path, options, print);
+			nodeContent = node.lazy
+				? ['&', printObjectPattern(node, path, options, print)]
+				: printObjectPattern(node, path, options, print);
 			break;
 
 		case 'ArrayPattern':
-			nodeContent = printArrayPattern(node, path, options, print);
+			nodeContent = node.lazy
+				? ['&', printArrayPattern(node, path, options, print)]
+				: printArrayPattern(node, path, options, print);
 			break;
 
 		case 'Property':
@@ -3005,10 +2965,7 @@ function printCallArguments(path, options, print) {
 	const finalArg = args[args.length - 1];
 	const couldExpandLastArg =
 		finalArg &&
-		(finalArg.type === 'ObjectExpression' ||
-			finalArg.type === 'RippleObjectExpression' ||
-			finalArg.type === 'ArrayExpression' ||
-			finalArg.type === 'RippleArrayExpression') &&
+		(finalArg.type === 'ObjectExpression' || finalArg.type === 'ArrayExpression') &&
 		!hasComment(finalArg);
 
 	/** @type {Doc[]} */
@@ -3047,10 +3004,7 @@ function printCallArguments(path, options, print) {
 	const trailingComma = shouldPrintComma(options, 'all') ? ',' : '';
 
 	// Special case: single array argument should keep opening bracket inline
-	const isSingleArrayArgument =
-		args.length === 1 &&
-		args[0] &&
-		(args[0].type === 'ArrayExpression' || args[0].type === 'RippleArrayExpression');
+	const isSingleArrayArgument = args.length === 1 && args[0] && args[0].type === 'ArrayExpression';
 
 	if (isSingleArrayArgument) {
 		// Don't use group() - just concat to allow array to control its own breaking
@@ -3105,11 +3059,7 @@ function printCallArguments(path, options, print) {
 	const previousArgsBreak =
 		lastIndex > 0 ? argumentBreakFlags.slice(0, lastIndex).some(Boolean) : false;
 	const isExpandableLastArgType =
-		lastArg &&
-		(lastArg.type === 'ObjectExpression' ||
-			lastArg.type === 'RippleObjectExpression' ||
-			lastArg.type === 'ArrayExpression' ||
-			lastArg.type === 'RippleArrayExpression');
+		lastArg && (lastArg.type === 'ObjectExpression' || lastArg.type === 'ArrayExpression');
 
 	// Check if we should expand the last argument (like Prettier's shouldExpandLastArg)
 	const shouldExpandLast =
@@ -3573,20 +3523,18 @@ function printDoWhileStatement(node, path, options, print) {
 }
 
 /**
- * Print an object expression (or RippleObjectExpression)
- * @param {AST.ObjectExpression | AST.RippleObjectExpression} node - The object expression node
- * @param {AstPath<AST.ObjectExpression | AST.RippleObjectExpression>} path - The AST path
+ * Print an object expression
+ * @param {AST.ObjectExpression} node - The object expression node
+ * @param {AstPath<AST.ObjectExpression>} path - The AST path
  * @param {RippleFormatOptions} options - Prettier options
  * @param {PrintFn} print - Print callback
  * @param {PrintArgs} [args] - Additional context arguments
  * @returns {Doc}
  */
 function printObjectExpression(node, path, options, print, args) {
-	// const use_long_tracked_syntax =
-	// 	node.type === 'RippleObjectExpression' && uses_long_tracked_syntax(node, options, 'object');
-	const open_brace = node.type === 'RippleObjectExpression' ? '#ripple{' : '{';
+	const open_brace = '{';
 	const close_brace = '}';
-	const skip_offset = node.type === 'RippleObjectExpression' ? '#ripple{'.length : 1;
+	const skip_offset = 1;
 	const closing_offset = 1;
 
 	if (!node.properties || node.properties.length === 0) {
@@ -4133,15 +4081,6 @@ function printYieldExpression(node, path, options, print) {
  * @returns {Doc[]}
  */
 function printNewExpression(node, path, options, print) {
-	// #ripple.* constructors don't need 'new' - compiler handles that automatically
-	// If someone writes 'new #ripple.map()', just output '#ripple.map()'
-	if (
-		node.callee &&
-		(node.callee.type === 'RippleArrayExpression' || node.callee.type === 'RippleObjectExpression')
-	) {
-		return [path.call(print, 'callee')];
-	}
-
 	/** @type {Doc[]} */
 	const parts = [];
 	parts.push('new ');
@@ -5042,16 +4981,13 @@ function printVariableDeclarator(node, path, options, print) {
 
 		// For arrays/objects with blank lines, use conditionalGroup to try both layouts
 		// Prettier will break the declaration if keeping it inline doesn't fit
-		const isArray =
-			node.init.type === 'ArrayExpression' || node.init.type === 'RippleArrayExpression';
-		const isObject =
-			node.init.type === 'ObjectExpression' || node.init.type === 'RippleObjectExpression';
+		const isArray = node.init.type === 'ArrayExpression';
+		const isObject = node.init.type === 'ObjectExpression';
 
 		if (isArray || isObject) {
 			const items = isArray
-				? /** @type {AST.ArrayExpression | AST.RippleArrayExpression} */ (node.init).elements || []
-				: /** @type {AST.ObjectExpression | AST.RippleObjectExpression} */ (node.init).properties ||
-					[];
+				? /** @type {AST.ArrayExpression} */ (node.init).elements || []
+				: /** @type {AST.ObjectExpression} */ (node.init).properties || [];
 			let hasBlankLines = false;
 
 			if (isArray) {

package/src/index.test.js

@@ -655,7 +655,7 @@ import { Something, type Props, track } from 'ripple';`;
 		it('should handle @ prefix', async () => {
 			const input = `export default component App() {
   <div>
-    let count = #ripple.track(0);
+    let count = track(0);
     @count = 2;
     console.log(@count);
     console.log(count);
@@ -666,7 +666,7 @@ import { Something, type Props, track } from 'ripple';`;
 }`;
 			const expected = `export default component App() {
   <div>
-    let count = #ripple.track(0);
+    let count = track(0);
     @count = 2;
     console.log(@count);
     console.log(count);
@@ -708,14 +708,14 @@ import { Something, type Props, track } from 'ripple';`;
 
 		it('should preserve @ symbol in JSX attributes and shorthand syntax', async () => {
 			const input = `component App() {
-	const count = #ripple.track(0);
+	const count = track(0);
 
 	<Counter count={@count} />
 	<Counter {@count} />
 }`;
 
 			const expected = `component App() {
-  const count = #ripple.track(0);
+  const count = track(0);
 
   <Counter {@count} />
   <Counter {@count} />
@@ -935,7 +935,7 @@ export component Test({ a, b }: Props) {}`;
 
 		it('should not strip @ from dynamic @tag', async () => {
 			const expected = `export component Four() {
-  let tag = #ripple.track('div');
+  let tag = track('div');
 
   <@tag {href} {...props}>
     <@children />
@@ -973,7 +973,7 @@ export component Test({ a, b }: Props) {}`;
 		it('should keep @ on dynamic object member array expressions', async () => {
 			const expected = `component App() {
   const obj = {
-    [0]: #ripple.track(0),
+    [0]: track(0),
   };
 
   <div>{obj.@[0]}</div>
@@ -1264,8 +1264,8 @@ const [obj1, obj2] = arrayOfObjects;`;
 		});
 
 		it('should keep RippleMap short syntax intact', async () => {
-			const expected = `const map = #ripple.map([['key1', 'value1'], ['key2', 'value2']]);
-const set = #ripple.set([1, 2, 3]);`;
+			const expected = `const map = new RippleMap([['key1', 'value1'], ['key2', 'value2']]);
+const set = new RippleSet([1, 2, 3]);`;
 
 			const result = await format(expected, { singleQuote: true, printWidth: 100 });
 			expect(result).toBeWithNewline(expected);
@@ -1273,7 +1273,7 @@ const set = #ripple.set([1, 2, 3]);`;
 
 		it('should keep RippleSet parents with short syntax and no args intact', async () => {
 			const expected = `component SetTest() {
-  let items = #ripple.set();
+  let items = new RippleSet();
 
   <button onClick={() => items.add(1)}>{'add'}</button>
   <pre>{items.size}</pre>
@@ -1285,7 +1285,7 @@ const set = #ripple.set([1, 2, 3]);`;
 
 		it('should keep RippleMap parents with short syntax and no args intact', async () => {
 			const expected = `component MapTest() {
-  let items = #ripple.map();
+  let items = new RippleMap();
 
   <button onClick={() => items.set('key', 1)}>{'add'}</button>
   <pre>{items.size}</pre>
@@ -1294,47 +1294,6 @@ const set = #ripple.set([1, 2, 3]);`;
 			expect(result).toBeWithNewline(expected);
 		});
 
-		it('should preserve #ripple.array and #ripple.object long syntax if authored', async () => {
-			const input = `component App() {
-  let arr = #ripple.array(1, 2, 3);
-  let obj = #ripple.object({ a: 1 });
-
-  <div>{arr.length + obj.a}</div>
-}`;
-
-			const expected = `component App() {
-  let arr = #ripple.array(1, 2, 3);
-  let obj = #ripple.object({ a: 1 });
-
-  <div>{arr.length + obj.a}</div>
-}`;
-
-			const result = await format(input, { singleQuote: true, printWidth: 100 });
-			expect(result).toBeWithNewline(expected);
-		});
-
-		it('should preserve static member access from #ripple collection roots', async () => {
-			const input = `const from = #ripple.array.from([1, 2, 3]);
-const from_async = #ripple.array.fromAsync([1, 2, 3]);
-const of = #ripple.array
-  .of(1, 2, 3);`;
-
-			const expected = `const from = #ripple.array.from([1, 2, 3]);
-const from_async = #ripple.array.fromAsync([1, 2, 3]);
-const of = #ripple.array.of(1, 2, 3);`;
-
-			const result = await format(input, { singleQuote: true, printWidth: 100 });
-			expect(result).toBeWithNewline(expected);
-		});
-
-		it('should preserve computed member access from #ripple roots', async () => {
-			const expected = `const from = #ripple.array['from']([1, 2, 3]);
-const of = #ripple.array['of'](1, 2, 3);`;
-
-			const result = await format(expected, { singleQuote: true, printWidth: 100 });
-			expect(result).toBeWithNewline(expected);
-		});
-
 		it('should not remove blank lines between components and types if provided', async () => {
 			const expected = `export component App() {
   console.log('test');
@@ -1476,7 +1435,7 @@ function bind_element_rect(maybe_tracked, type) {
       /** @param {any} entry */ (entry) => set(tracked, entry[type]),
     );
 
-    #ripple.effect(() => unsubscribe);
+    effect(() => unsubscribe);
   };
 }`;
 
@@ -1730,8 +1689,8 @@ const program =
 		it('should keep blank lines between commented out block and markup', async () => {
 			const expected = `function CounterWrapper(props) {
   const more = {
-    double: #ripple.track(() => props.count * 2),
-    another: #ripple.track(0),
+    double: track(() => props.count * 2),
+    another: track(0),
     onemore: 100,
   };
 
@@ -1749,24 +1708,24 @@ const program =
 		});
 
 		it('should keep parens around negating key in object expression', async () => {
-			const input = `#ripple.effect(() => {
+			const input = `effect(() => {
   props.count;
   if (props.count > 1 && 'another' in more) {
-  	#ripple.untrack(() => delete more.another);
+  	untrack(() => delete more.another);
   } else if (props.count > 2 && !('another' in more)) {
-  	#ripple.untrack(() => more.another = 0);
+  	untrack(() => more.another = 0);
   }
-  #ripple.untrack(() => console.log(more));
+  untrack(() => console.log(more));
 });`;
 
-			const expected = `#ripple.effect(() => {
+			const expected = `effect(() => {
   props.count;
   if (props.count > 1 && 'another' in more) {
-    #ripple.untrack(() => delete more.another);
+    untrack(() => delete more.another);
   } else if (props.count > 2 && !('another' in more)) {
-    #ripple.untrack(() => (more.another = 0));
+    untrack(() => (more.another = 0));
   }
-  #ripple.untrack(() => console.log(more));
+  untrack(() => console.log(more));
 });`;
 
 			const result = await format(input, { singleQuote: true, printWidth: 100 });
@@ -1774,7 +1733,7 @@ const program =
 		});
 
 		it('should keep parents in math subtraction and multiplication', async () => {
-			const expected = `let offset = #ripple.track(() => (@page - 1) * @limit);`;
+			const expected = `let offset = track(() => (@page - 1) * @limit);`;
 
 			const result = await format(expected, { singleQuote: true, printWidth: 100 });
 			expect(result).toBeWithNewline(expected);
@@ -1857,7 +1816,7 @@ files = [...(files ?? []), ...dt.files];`;
   }
 
   try {
-    items = await #ripple.array.fromAsync(throwingIterable());
+    items = await RippleArray.fromAsync(throwingIterable());
     for (const item of items) {
       <li>{item}</li>
     }
@@ -2333,7 +2292,7 @@ component Child({ something }) {
 
 		it('should correctly handle call expressions', async () => {
 			const input = `export component App() {
-	const context = #ripple.track(globalContext.get().theme);
+	const context = track(globalContext.get().theme);
 	<div>
 		<TypedComponent />
 		{@context}
@@ -2341,7 +2300,7 @@ component Child({ something }) {
 }`;
 
 			const expected = `export component App() {
-  const context = #ripple.track(globalContext.get().theme);
+  const context = track(globalContext.get().theme);
   <div>
     <TypedComponent />
     {@context}
@@ -2616,20 +2575,11 @@ function test() {
 		expect(result).toBeWithNewline(expected);
 	});
 
-	it('should preserve comments in object and tracked object expressions', async () => {
+	it('should preserve comments in object expressions', async () => {
 		const expected = `const obj = {
   /* comment 1 */
   a: 1,
 
-  // comment 2
-  b: 2,
-  // comment 3
-};
-
-const obj2 = #ripple{
-  /* comment 1 */
-  a: 1,
-
   // comment 2
   b: 2,
   // comment 3
@@ -2771,46 +2721,6 @@ const obj2 = #ripple{
 		expect(result).toBeWithNewline(expected);
 	});
 
-	it('should preserve comments in arrays width printWidth 3', async () => {
-		const input = `const arr = #ripple[
-  1,
-  /* comment 1 */
-  2,
-  3,
-  // comment 2
-];`;
-
-		const expected = `const arr =
-  #ripple[
-    1,
-    /* comment 1 */
-    2,
-    3,
-    // comment 2
-  ];`;
-
-		const result = await format(input, { singleQuote: true, printWidth: 3 });
-		expect(result).toBeWithNewline(expected);
-	});
-
-	it('should preserve comments in arrays width printWidth 13', async () => {
-		const input = `const arr =
-  #ripple[
-    1 /* comment 1 */,
-    2, 3,
-    // comment 2
-  ];`;
-
-		const expected = `const arr = #ripple[
-  1 /* comment 1 */,
-  2, 3,
-  // comment 2
-];`;
-
-		const result = await format(input, { singleQuote: true, printWidth: 13 });
-		expect(result).toBeWithNewline(expected);
-	});
-
 	it('should preserve comments inside js/ts blocks inside markup', async () => {
 		const expected = `component App() {
   <button
@@ -3201,14 +3111,14 @@ const items = [] as unknown[];`;
 
 		it('should format TypeScript generics in variable declarations', async () => {
 			const input = `component GenericTest() {
-        let open: Tracked<boolean> = #ripple.track(false);
+        let open: Tracked<boolean> = track(false);
         let items: Array<string> = [];
         let map: Map<string, number> = new Map();
         <div>{"test"}</div>
       }`;
 
 			const expected = `component GenericTest() {
-  let open: Tracked<boolean> = #ripple.track(false);
+  let open: Tracked<boolean> = track(false);
   let items: Array<string> = [];
   let map: Map<string, number> = new Map();
   <div>{'test'}</div>
@@ -3649,7 +3559,7 @@ try {
 		it('properly formats components markup and new lines and leaves one new line between components and <style> if one or more exits', async () => {
 			const input = `export component App() {
   <div>
-    <RowList rows={#ripple[{id: 'a'}, {id: 'b'}, {id: 'c'}]}>
+    <RowList rows={[{id: 'a'}, {id: 'b'}, {id: 'c'}]}>
       component Row({id, index, isHighlighted = (index) => (index % 2) === 0}) {
         <div class={{highlighted: isHighlighted(index)}}>{index}{' - '}{id}</div>
 
@@ -3672,7 +3582,7 @@ component RowList({ rows, Row }) {
 
 			const expected = `export component App() {
   <div>
-    <RowList rows={#ripple[{ id: 'a' }, { id: 'b' }, { id: 'c' }]}>
+    <RowList rows={[{ id: 'a' }, { id: 'b' }, { id: 'c' }]}>
       component Row({ id, index, isHighlighted = (index) => index % 2 === 0 }) {
         <div class={{ highlighted: isHighlighted(index) }}>
           {index}
@@ -3704,88 +3614,6 @@ component RowList({ rows, Row }) {
 			expect(result).toBeWithNewline(expected);
 		});
 
-		it('leaves the shorthand reactive declaration intact and formats the same way as plain objects', async () => {
-			const input = `export component App() {
-  const obj = #ripple{ a: 1, b: 2, c: 3 };
-  let singleUser = #ripple{name:"Test Me", email: "abc@example.com"}
-}`;
-
-			const expected = `export component App() {
-  const obj = #ripple{ a: 1, b: 2, c: 3 };
-  let singleUser = #ripple{ name: 'Test Me', email: 'abc@example.com' };
-}`;
-			const result = await format(input, {
-				singleQuote: true,
-				arrowParens: 'always',
-				printWidth: 100,
-			});
-			expect(result).toBeWithNewline(expected);
-		});
-
-		it('formats single line reactive object into multiline when printWidth is exceeded', async () => {
-			const input = `export component App() {
-  const obj = #ripple{a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, g: 7, h: 8, i: 9, j: 10, k: 11, l: 12, m: 13, n: 14, o: 15};
-  let singleUser = #ripple{name:"Test Me", email: "abc@example.com"}
-}`;
-
-			const expected = `export component App() {
-  const obj = #ripple{
-    a: 1,
-    b: 2,
-    c: 3,
-    d: 4,
-    e: 5,
-    f: 6,
-    g: 7,
-    h: 8,
-    i: 9,
-    j: 10,
-    k: 11,
-    l: 12,
-    m: 13,
-    n: 14,
-    o: 15,
-  };
-  let singleUser = #ripple{ name: 'Test Me', email: 'abc@example.com' };
-}`;
-			const result = await format(input, {
-				singleQuote: true,
-				arrowParens: 'always',
-				printWidth: 100,
-			});
-			expect(result).toBeWithNewline(expected);
-		});
-
-		it('leaves the shorthand reactive array declaration intact and formats the same way as regular array', async () => {
-			const input = `export component App() {
-  const arr = #ripple[ {a: 1}, { b:2}, {c:3 }   ];
-  let multi = #ripple[{a: 1}, {b: 2}, {c: 3}, {d: 4}, {e:5}, {f:6}, {g: 7}, {h: 8}, {i:9}, {j: 10}, {k: 11}];
-}`;
-
-			const expected = `export component App() {
-  const arr = #ripple[{ a: 1 }, { b: 2 }, { c: 3 }];
-  let multi = #ripple[
-    { a: 1 },
-    { b: 2 },
-    { c: 3 },
-    { d: 4 },
-    { e: 5 },
-    { f: 6 },
-    { g: 7 },
-    { h: 8 },
-    { i: 9 },
-    { j: 10 },
-    { k: 11 },
-  ];
-}`;
-			const result = await format(input, {
-				singleQuote: true,
-				arrowParens: 'always',
-				printWidth: 100,
-			});
-			expect(result).toBeWithNewline(expected);
-		});
-
 		it('preserves typescript parameter types with a default value', async () => {
 			const expected = `function getString(e: string = 'test') {
   return e;
@@ -4513,7 +4341,7 @@ export component App() {
 			it('should keep blank line between components with a trailing comment at the end of the first', async () => {
 				const expected = `component SVG({ children }) {
   <svg width={20} height={20} fill="blue" viewBox="0 0 30 10" preserveAspectRatio="none">
-    let test = #ripple.track(8);
+    let test = track(8);
     {test}
     <polygon points="0,0 30,0 15,10" />
   </svg>
@@ -4994,7 +4822,7 @@ component Polygon() {
 
 			it('should preserve @ symbol in JSX attributes inside <tsx:react>', async () => {
 				const input = `component App() {
-	const count = #ripple.track(0);
+	const count = track(0);
 
 	<div>
 		<h1>{'Hello, from Ripple!'}</h1>
@@ -5005,7 +4833,7 @@ component Polygon() {
 }`;
 
 				const expected = `component App() {
-  const count = #ripple.track(0);
+  const count = track(0);
 
   <div>
     <h1>{'Hello, from Ripple!'}</h1>
@@ -5079,10 +4907,10 @@ component App() {
 				expect(result).toBeWithNewline(expected);
 			});
 			it('should format JSXExpressionContainer with complex expressions', async () => {
-				const input = `component App(){let count=#ripple.track(0);<tsx:react><div>{count*2+10}</div>{getMessage("test")}</tsx:react>}`;
+				const input = `component App(){let count=track(0);<tsx:react><div>{count*2+10}</div>{getMessage("test")}</tsx:react>}`;
 
 				const expected = `component App() {
-  let count = #ripple.track(0);
+  let count = track(0);
   <tsx:react>
     <div>
       {count * 2 + 10}