@ripple-ts/prettier-plugin 0.3.6 → 0.3.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ripple-ts/prettier-plugin",
-  "version": "0.3.6",
+  "version": "0.3.8",
   "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.6"
+    "ripple": "0.3.8"
   },
   "dependencies": {},
   "files": [

package/src/index.js

@@ -2076,6 +2076,10 @@ function printRippleNode(node, path, options, print, args) {
 			nodeContent = printTSMethodSignature(node, path, options, print);
 			break;
 
+		case 'TSCallSignatureDeclaration':
+			nodeContent = printTSCallSignatureDeclaration(node, path, options, print);
+			break;
+
 		case 'TSEnumMember':
 			nodeContent = printTSEnumMember(node, path, options, print);
 			break;
@@ -2154,6 +2158,9 @@ function printRippleNode(node, path, options, print, args) {
 		case 'TSConditionalType':
 			nodeContent = printTSConditionalType(node, path, options, print);
 			break;
+		case 'TSInferType':
+			nodeContent = ['infer ', path.call(print, 'typeParameter')];
+			break;
 
 		case 'TSMappedType':
 			nodeContent = printTSMappedType(node, path, options, print);
@@ -5179,6 +5186,46 @@ function printTSMethodSignature(node, path, options, print) {
 	return parts;
 }
 
+/**
+ * Print a TypeScript call signature in an interface
+ * @param {AST.TSCallSignatureDeclaration} node - The call signature node
+ * @param {AstPath<AST.TSCallSignatureDeclaration>} path - The AST path
+ * @param {RippleFormatOptions} options - Prettier options
+ * @param {PrintFn} print - Print callback
+ * @returns {Doc[]}
+ */
+function printTSCallSignatureDeclaration(node, path, options, print) {
+	/** @type {Doc[]} */
+	const parts = [];
+
+	// Add TypeScript generics/type parameters if present
+	if (node.typeParameters) {
+		const type_params = path.call(print, 'typeParameters');
+		if (Array.isArray(type_params)) {
+			parts.push(...type_params);
+		} else {
+			parts.push(type_params);
+		}
+	}
+
+	parts.push('(');
+	if (node.parameters && node.parameters.length > 0) {
+		const params = path.map(print, 'parameters');
+		for (let i = 0; i < params.length; i++) {
+			if (i > 0) parts.push(', ');
+			parts.push(params[i]);
+		}
+	}
+	parts.push(')');
+
+	if (node.typeAnnotation) {
+		parts.push(': ');
+		parts.push(path.call(print, 'typeAnnotation'));
+	}
+
+	return parts;
+}
+
 /**
  * Print a TypeScript type reference (e.g., Array<string>)
  * @param {AST.TSTypeReference} node - The type reference node

package/src/index.test.js

@@ -291,10 +291,10 @@ export default component App() {
 			expect(result).toBeWithNewline(expected);
 		});
 
-		it('should format a component with an object reactive property notation props.@children', async () => {
+		it('should format a component with a dynamic component using props member access', async () => {
 			const expected = `component Card(props) {
   <div class="card">
-    <props.@children />
+    <@props.children />
   </div>
 }`;
 
@@ -652,26 +652,26 @@ import { Something, type Props, track } from 'ripple';`;
 			expect(result).toBeWithNewline(expected);
 		});
 
-		it('should handle @ prefix', async () => {
+		it('should handle tracked variable with lazy destructuring', async () => {
 			const input = `export default component App() {
   <div>
-    let count = track(0);
-    @count = 2;
-    console.log(@count);
+    let &[count] = track(0);
+    count = 2;
     console.log(count);
-    if (@count > 1) {
-      <button onClick={() => @count++}>{@count}</button>
+    console.log(count);
+    if (count > 1) {
+      <button onClick={() => count++}>{count}</button>
     }
   </div>
 }`;
 			const expected = `export default component App() {
   <div>
-    let count = track(0);
-    @count = 2;
-    console.log(@count);
+    let &[count] = track(0);
+    count = 2;
+    console.log(count);
     console.log(count);
-    if (@count > 1) {
-      <button onClick={() => @count++}>{@count}</button>
+    if (count > 1) {
+      <button onClick={() => count++}>{count}</button>
     }
   </div>
 }`;
@@ -706,19 +706,19 @@ import { Something, type Props, track } from 'ripple';`;
 			expect(result).toBeWithNewline(expected);
 		});
 
-		it('should preserve @ symbol in JSX attributes and shorthand syntax', async () => {
+		it('should format JSX attributes with tracked values', async () => {
 			const input = `component App() {
-	const count = track(0);
+	const &[count] = track(0);
 
-	<Counter count={@count} />
-	<Counter {@count} />
+	<Counter count={count} />
+	<Counter {count} />
 }`;
 
 			const expected = `component App() {
-  const count = track(0);
+  const &[count] = track(0);
 
-  <Counter {@count} />
-  <Counter {@count} />
+  <Counter {count} />
+  <Counter {count} />
 }`;
 
 			const result = await format(input, { singleQuote: true });
@@ -963,7 +963,7 @@ export component Test({ a, b }: Props) {}`;
 
 		it('should not strip @ from dynamic self-closing components', async () => {
 			const expected = `component App() {
-  <@ripple_object.@tracked_basic />
+  <@ripple_object.tracked_basic />
 }`;
 
 			const result = await format(expected, { singleQuote: true, printWidth: 100 });
@@ -1733,7 +1733,7 @@ const program =
 		});
 
 		it('should keep parents in math subtraction and multiplication', async () => {
-			const expected = `let offset = 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);
@@ -2292,18 +2292,18 @@ component Child({ something }) {
 
 		it('should correctly handle call expressions', async () => {
 			const input = `export component App() {
-	const context = track(globalContext.get().theme);
+	const &[context] = track(globalContext.get().theme);
 	<div>
 		<TypedComponent />
-		{@context}
+		{context}
 	</div>
 }`;
 
 			const expected = `export component App() {
-  const context = track(globalContext.get().theme);
+  const &[context] = track(globalContext.get().theme);
   <div>
     <TypedComponent />
-    {@context}
+    {context}
   </div>
 }`;
 
@@ -2725,13 +2725,13 @@ function test() {
 		const expected = `component App() {
   <button
     onClick={() => {
-      @hasError = false;
+      hasError = false;
       try {
-        @hasError = false;
+        hasError = false;
         // @ts-ignore
         obj['nonexistent']();
       } catch {
-        // @hasError = true;
+        // hasError = true;
       }
     }}
   >
@@ -3254,6 +3254,14 @@ const items = [] as unknown[];`;
 			expect(result).toBeWithNewline(expected);
 		});
 
+		it('should preserve TSCallSignatureDeclaration with conditional types', async () => {
+			const expected = `interface TrackedCallable<V> {
+  (props: V extends Component<infer P> ? P : never): V extends Component ? void : never;
+}`;
+			const result = await format(expected, { printWidth: 100 });
+			expect(result).toBeWithNewline(expected);
+		});
+
 		it('should format TSNonNullExpression', async () => {
 			const input = `component Test(){let value:string|null=null;let length=value!.length;<div>{length}</div>}`;
 			const expected = `component Test() {
@@ -4369,7 +4377,7 @@ component Polygon() {
   // 	<div id="third-top-block">{"Top Scope - Show is true"}</div>
   // }
 
-  <button onClick={() => (@b = !@b)}>{"Toggle b"}</button>
+  <button onClick={() => (b = !b)}>{"Toggle b"}</button>
 }`;
 
 				const result = await format(expected, { printWidth: 100 });
@@ -4392,7 +4400,7 @@ component Polygon() {
   // 	<div>{"Top Scope - Show is true"}</div>
   // }
 
-  <button onClick={() => (@b = !@b)}>{"Toggle b"}</button>
+  <button onClick={() => (b = !b)}>{"Toggle b"}</button>
 }`;
 
 				const result = await format(expected, { printWidth: 100 });
@@ -4820,25 +4828,25 @@ component Polygon() {
 				expect(result).toBeWithNewline(expected);
 			});
 
-			it('should preserve @ symbol in JSX attributes inside <tsx:react>', async () => {
+			it('should format JSX attributes inside <tsx:react>', async () => {
 				const input = `component App() {
-	const count = track(0);
+	const &[count] = track(0);
 
 	<div>
 		<h1>{'Hello, from Ripple!'}</h1>
 		<tsx:react>
-			<Counter count={@count} />
+			<Counter count={count} />
 		</tsx:react>
 	</div>
 }`;
 
 				const expected = `component App() {
-  const count = track(0);
+  const &[count] = track(0);
 
   <div>
     <h1>{'Hello, from Ripple!'}</h1>
     <tsx:react>
-      <Counter count={@count} />
+      <Counter count={count} />
     </tsx:react>
   </div>
 }`;
@@ -4890,7 +4898,7 @@ component App() {
 	<tsx:react>
 		Hello world
 		<DemoContext.Provider value={"Hello from Context!"}>
-			<Child count={@count} />
+			<Child count={count} />
 		</DemoContext.Provider>
 	</tsx:react>
 }`;
@@ -4898,7 +4906,7 @@ component App() {
   <tsx:react>
     Hello world
     <DemoContext.Provider value={"Hello from Context!"}>
-      <Child count={@count} />
+      <Child count={count} />
     </DemoContext.Provider>
   </tsx:react>
 }`;
@@ -4955,7 +4963,7 @@ component App() {
 				const input = `component Test() {
   <button
     onClick={() => {
-if (@status === 'a') @status = 'b'; else if (@status === 'b') @status = 'c'; else @status =
+if (status === 'a') status = 'b'; else if (status === 'b') status = 'c'; else status =
   'a';
 }}
   >
@@ -4965,9 +4973,9 @@ if (@status === 'a') @status = 'b'; else if (@status === 'b') @status = 'c'; els
 				const expected = `component Test() {
   <button
     onClick={() => {
-      if (@status === 'a') @status = 'b';
-      else if (@status === 'b') @status = 'c';
-      else @status = 'a';
+      if (status === 'a') status = 'b';
+      else if (status === 'b') status = 'c';
+      else status = 'a';
     }}
   >
     {'Click'}