@ripple-ts/prettier-plugin 0.3.7 → 0.3.8

package/package.json

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

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;
       }
     }}
   >
@@ -4377,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 });
@@ -4400,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 });
@@ -4828,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>
 }`;
@@ -4898,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>
 }`;
@@ -4906,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>
 }`;
@@ -4963,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';
 }}
   >
@@ -4973,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'}