ripple 0.2.133 → 0.2.135

package/tests/client/basic/basic.components.test.ripple

@@ -3,7 +3,7 @@ import { track, flushSync } from 'ripple';
 describe('basic client > components & composition', () => {
 	it('renders with component composition and children', () => {
 		component Card(props) {
-			<div class='card'>
+			<div class="card">
 				<props.children />
 			</div>
 		}
@@ -27,16 +27,14 @@ describe('basic client > components & composition', () => {
 
 	it('renders with nested components and prop passing', () => {
 		component Button(props) {
-			<button class={props.variant} onClick={props.onClick}>
-				{props.label}
-			</button>
+			<button class={props.variant} onClick={props.onClick}>{props.label}</button>
 		}
 
 		component Card(props) {
-			<div class='card'>
+			<div class="card">
 				<h3>{props.title}</h3>
 				<p>{props.content}</p>
-				<Button variant='primary' label={props.buttonText} onClick={props.onAction} />
+				<Button variant="primary" label={props.buttonText} onClick={props.onAction} />
 			</div>
 		}
 
@@ -44,12 +42,12 @@ describe('basic client > components & composition', () => {
 			let clicked = track(false);
 
 			<Card
-				title='Test Card'
-				content='This is a test card'
-				buttonText='Click me'
+				title="Test Card"
+				content="This is a test card"
+				buttonText="Click me"
 				onAction={() => @clicked = true}
 			/>
-			<div class='status'>{@clicked ? 'Clicked' : 'Not clicked'}</div>
+			<div class="status">{@clicked ? 'Clicked' : 'Not clicked'}</div>
 		}
 
 		render(Basic);
@@ -74,8 +72,8 @@ describe('basic client > components & composition', () => {
 
 	it('renders with reactive component props', () => {
 		component ChildComponent(props) {
-			<div class='child-content'>{props.@text}</div>
-			<div class='child-count'>{props.@count}</div>
+			<div class="child-content">{props.@text}</div>
+			<div class="child-count">{props.@count}</div>
 		}
 
 		component Basic() {
@@ -83,10 +81,14 @@ describe('basic client > components & composition', () => {
 			let number = track(1);
 
 			<ChildComponent text={message} count={number} />
-			<button onClick={() => {
-				@message = @message === 'Hello' ? 'Goodbye' : 'Hello';
-				@number++;
-			}}>{'Update Props'}</button>
+			<button
+				onClick={() => {
+					@message = @message === 'Hello' ? 'Goodbye' : 'Hello';
+					@number++;
+				}}
+			>
+				{'Update Props'}
+			</button>
 		}
 
 		render(Basic);
@@ -139,7 +141,9 @@ describe('basic client > components & composition', () => {
 						@hasError = true;
 					}
 				}}
-			>{'Nonexistent'}</button>
+			>
+				{'Nonexistent'}
+			</button>
 			<button
 				onClick={() => {
 					@hasError = false;
@@ -149,7 +153,9 @@ describe('basic client > components & composition', () => {
 						@hasError = true;
 					}
 				}}
-			>{'Nonexistent chaining'}</button>
+			>
+				{'Nonexistent chaining'}
+			</button>
 			<button
 				onClick={() => {
 					@hasError = false;
@@ -159,7 +165,9 @@ describe('basic client > components & composition', () => {
 						@hasError = true;
 					}
 				}}
-			>{'Object null'}</button>
+			>
+				{'Object null'}
+			</button>
 			<button
 				onClick={() => {
 					@hasError = false;
@@ -169,7 +177,9 @@ describe('basic client > components & composition', () => {
 						@hasError = true;
 					}
 				}}
-			>{'Object null chained'}</button>
+			>
+				{'Object null chained'}
+			</button>
 			<button onClick={() => obj.arr[obj.arr.length - 1]()}>{'BinaryExpression prop'}</button>
 
 			<span>{obj.@count}</span>

package/tests/client/compiler/compiler.basic.test.ripple

@@ -36,19 +36,19 @@ describe('compiler > basics', () => {
 		expect(ast.body[0].declaration.css.source).toEqual(style3);
 	});
 
-  it('renders without crashing', () => {
+	it('renders without crashing', () => {
 		component App() {
 			let foo;
 			let bar;
 			let baz;
 
 			foo = {};
-			foo = {'test': 0};
+			foo = { test: 0 };
 			foo['abc'] = 123;
 
-			bar = { 'def': 456 };
+			bar = { def: 456 };
 
-			baz = { 'ghi': 789 };
+			baz = { ghi: 789 };
 			baz['jkl'] = 987;
 		}
 
@@ -56,18 +56,18 @@ describe('compiler > basics', () => {
 	});
 
 	it('renders without crashing using < character', () => {
-	component App() {
-		function bar() {
-			for (let i = 0; i < 10; i++) {
-				// do nothing
+		component App() {
+			function bar() {
+				for (let i = 0; i < 10; i++) {
+					// do nothing
+				}
+				const x = 1 < 1;
 			}
-			const x = 1 < 1;
-		}
 
-		let x = 5 < 10
+			let x = 5 < 10;
 
-		<div>{x}</div>
-	}
+			<div>{x}</div>
+		}
 
 		render(App);
 	});
@@ -97,28 +97,28 @@ describe('compiler > basics', () => {
 	it('renders without crashing using mapped types', () => {
 		component App() {
 			type RecordKey = 'test';
-			type RecordValue = { a: string, b: number };
+			type RecordValue = { a: string; b: number };
 
 			const config: Record<RecordKey, RecordValue> = {
 				test: {
 					a: 'test',
-					b: 1
+					b: 1,
 				},
 			};
 
 			const config2: { [key in RecordKey]: RecordValue } = {
 				test: {
 					a: 'test2',
-					b: 2
-				}
-			}
+					b: 2,
+				},
+			};
 
 			const config3: { [key: RecordKey]: RecordValue } = {
 				test: {
 					a: 'test3',
-					b: 3
-				}
-			}
+					b: 3,
+				},
+			};
 		}
 
 		render(App);
@@ -130,11 +130,14 @@ describe('compiler > basics', () => {
 			const { a, b, ...rest } = obj;
 
 			<div>
-				{'a '}{a} {'b '} {b} {'rest '} {JSON.stringify(rest)}
-
-				<div>
-
-				</div>
+				{'a '}
+				{a}
+				{'b '}
+				{b}
+				{'rest '}
+				{JSON.stringify(rest)}
+
+				<div />
 			</div>
 		}
 
@@ -146,11 +149,14 @@ describe('compiler > basics', () => {
 			const obj = { a: 1, b: 2, c: 3 };
 			const { a, b, ...rest } = obj;
 
-			{'a '}{a} {'b '} {b} {'rest '} {JSON.stringify(rest)}
+			{'a '}
+			{a}
+			{'b '}
+			{b}
+			{'rest '}
+			{JSON.stringify(rest)}
 
-			<div>
-
-			</div>
+			<div />
 		}
 
 		render(App);
@@ -163,10 +169,10 @@ describe('compiler > basics', () => {
 
 		function Wrapper() {
 			return {
-				unwrap: function<T>() {
+				unwrap: function() {
 					return null as unknown as T;
-				}
-			}
+				},
+			};
 		}
 
 		component App() {
@@ -180,11 +186,11 @@ describe('compiler > basics', () => {
 				value: T;
 			}
 
-			class Box<T> {
+			class Box {
 				value: T;
 
-				method<T>(): T {
-				return this.value;
+				method(): T {
+					return this.value;
 				}
 			}
 
@@ -213,7 +219,7 @@ describe('compiler > basics', () => {
 		const result = compile(source, 'test.ripple', { mode: 'client' });
 	});
 
-	it("doesn't add duplicate imports when encountering shorthand syntax", () => {
+	it('doesn\'t add duplicate imports when encountering shorthand syntax', () => {
 		const source = `
 import {
 	TrackedArray,
@@ -234,14 +240,14 @@ component App() {
 `;
 		const result = compile_to_volar_mappings(source, 'test.ripple').code;
 
-		expect(count_occurrences(result, "TrackedArray")).toBe(2);
-		expect(count_occurrences(result, "TrackedObject")).toBe(2);
-		expect(count_occurrences(result, "TrackedSet")).toBe(2);
-		expect(count_occurrences(result, "TrackedMap")).toBe(2);
-		expect(count_occurrences(result, "createRefKey")).toBe(2);
+		expect(count_occurrences(result, 'TrackedArray')).toBe(2);
+		expect(count_occurrences(result, 'TrackedObject')).toBe(2);
+		expect(count_occurrences(result, 'TrackedSet')).toBe(2);
+		expect(count_occurrences(result, 'TrackedMap')).toBe(2);
+		expect(count_occurrences(result, 'createRefKey')).toBe(2);
 	});
 
-	it("doesn't add duplicate imports for renamed imports when encountering shorthand syntax", () => {
+	it('doesn\'t add duplicate imports for renamed imports when encountering shorthand syntax', () => {
 		const source = `
 import {
 	TrackedArray as TA,
@@ -262,16 +268,16 @@ component App() {
 `;
 		const result = compile_to_volar_mappings(source, 'test.ripple').code;
 
-		expect(count_occurrences(result, "TrackedArray")).toBe(1);
-		expect(count_occurrences(result, "TA")).toBe(2);
-		expect(count_occurrences(result, "TrackedObject")).toBe(1);
-		expect(count_occurrences(result, "TO")).toBe(2);
-		expect(count_occurrences(result, "TrackedSet")).toBe(1);
-		expect(count_occurrences(result, "TS")).toBe(2);
-		expect(count_occurrences(result, "TrackedMap")).toBe(1);
-		expect(count_occurrences(result, "TM")).toBe(2);
-		expect(count_occurrences(result, "createRefKey")).toBe(1);
-		expect(count_occurrences(result, "crk")).toBe(2);
+		expect(count_occurrences(result, 'TrackedArray')).toBe(1);
+		expect(count_occurrences(result, 'TA')).toBe(2);
+		expect(count_occurrences(result, 'TrackedObject')).toBe(1);
+		expect(count_occurrences(result, 'TO')).toBe(2);
+		expect(count_occurrences(result, 'TrackedSet')).toBe(1);
+		expect(count_occurrences(result, 'TS')).toBe(2);
+		expect(count_occurrences(result, 'TrackedMap')).toBe(1);
+		expect(count_occurrences(result, 'TM')).toBe(2);
+		expect(count_occurrences(result, 'createRefKey')).toBe(1);
+		expect(count_occurrences(result, 'crk')).toBe(2);
 	});
 
 	it('adds missing imports for shorthand syntax', () => {
@@ -287,11 +293,11 @@ component App() {
 `;
 		const result = compile_to_volar_mappings(source, 'test.ripple').code;
 
-		expect(count_occurrences(result, "TrackedArray")).toBe(2);
-		expect(count_occurrences(result, "TrackedObject")).toBe(2);
-		expect(count_occurrences(result, "TrackedSet")).toBe(2);
-		expect(count_occurrences(result, "TrackedMap")).toBe(2);
-		expect(count_occurrences(result, "createRefKey")).toBe(2);
+		expect(count_occurrences(result, 'TrackedArray')).toBe(2);
+		expect(count_occurrences(result, 'TrackedObject')).toBe(2);
+		expect(count_occurrences(result, 'TrackedSet')).toBe(2);
+		expect(count_occurrences(result, 'TrackedMap')).toBe(2);
+		expect(count_occurrences(result, 'createRefKey')).toBe(2);
 	});
 
 	it('only adds missing imports for shorthand syntax, reusing existing ones', () => {
@@ -309,11 +315,34 @@ component App() {
 `;
 		const result = compile_to_volar_mappings(source, 'test.ripple').code;
 
-		expect(count_occurrences(result, "TrackedArray")).toBe(2);
-		expect(count_occurrences(result, "TrackedObject")).toBe(2);
-		expect(count_occurrences(result, "TrackedSet")).toBe(2);
-		expect(count_occurrences(result, "TrackedMap")).toBe(2);
-		expect(count_occurrences(result, "createRefKey")).toBe(1);
-		expect(count_occurrences(result, "crk")).toBe(2);
+		expect(count_occurrences(result, 'TrackedArray')).toBe(2);
+		expect(count_occurrences(result, 'TrackedObject')).toBe(2);
+		expect(count_occurrences(result, 'TrackedSet')).toBe(2);
+		expect(count_occurrences(result, 'TrackedMap')).toBe(2);
+		expect(count_occurrences(result, 'createRefKey')).toBe(1);
+		expect(count_occurrences(result, 'crk')).toBe(2);
+	});
+
+	it('should not error on having js below markup in the same scope', () => {
+		const code = `
+component Card(props) {
+	<div class="card">
+		<props.children />
+	</div>
+}
+
+export component App() {
+	<Card>
+		component children() {
+			<p>{'Card content here'}</p>
+		}
+	</Card>
+
+	const test = 5;
+
+	<div>{test}</div>
+}
+`;
+		expect(() => compile(code, 'test.ripple')).not.toThrow();
 	});
 });

package/tests/client/compiler/compiler.tracked-access.test.ripple

@@ -0,0 +1,108 @@
+import { compile } from 'ripple/compiler';
+import { track } from 'ripple';
+
+describe('Compiler: Tracked Object Direct Access Checks', () => {
+
+    it('should error on direct access to __v of a tracked object', () => {
+        const code = `
+            export default component App() {
+                let count = track(0);
+                console.log(count.__v);
+            }
+        `;
+        expect(() => compile(code, 'test.ripple')).toThrow(/Directly accessing internal property "__v" of a tracked object is not allowed/);
+    });
+
+    it('should error on direct access to "a" (get/set config) of a tracked object', () => {
+        const code = `
+            export default component App() {
+                let myTracked = track(0);
+                console.log(myTracked.a);
+            }
+        `;
+        expect(() => compile(code, 'test.ripple')).toThrow(/Directly accessing internal property "a" of a tracked object is not allowed/);
+    });
+
+    it('should error on direct access to "b" (block) of a tracked object', () => {
+        const code = `
+            export default component App() {
+                let myTracked = track(0);
+                console.log(myTracked.b);
+            }
+        `;
+        expect(() => compile(code, 'test.ripple')).toThrow(/Directly accessing internal property "b" of a tracked object is not allowed/);
+    });
+
+    it('should error on direct access to "c" (clock) of a tracked object', () => {
+        const code = `
+            export default component App() {
+                let myTracked = track(0);
+                console.log(myTracked.c);
+            }
+        `;
+        expect(() => compile(code, 'test.ripple')).toThrow(/Directly accessing internal property "c" of a tracked object is not allowed/);
+    });
+
+    it('should error on direct access to "f" (flags) of a tracked object', () => {
+        const code = `
+            export default component App() {
+                let myTracked = track(0);
+                console.log(myTracked.f);
+            }
+        `;
+        expect(() => compile(code, 'test.ripple')).toThrow(/Directly accessing internal property "f" of a tracked object is not allowed/);
+    });
+
+    it('should compile successfully with correct @ syntax access', () => {
+        const code = `
+            export default component App() {
+                let count = track(0);
+                console.log(@count);
+            }
+        `;
+        expect(() => compile(code, 'test.ripple')).not.toThrow();
+    });
+
+    it('should compile successfully with correct get() function access', () => {
+        const code = `
+            import { get, track } from 'ripple';
+            export default component App() {
+                let count = track(0);
+                console.log(get(count));
+            }
+        `;
+        expect(() => compile(code, 'test.ripple')).not.toThrow();
+    });
+
+    it('should not error on accessing __v of a non-tracked object', () => {
+        const code = `
+            export default component App() {
+                let obj = { __v: 123 };
+                console.log(obj.__v);
+            }
+        `;
+        expect(() => compile(code, 'test.ripple')).not.toThrow();
+    });
+
+    it('should not error on accessing __v of a non-tracked object (member expression)', () => {
+        const code = `
+            export default component App() {
+                let data = { value: { __v: 456 } };
+                console.log(data.value.__v);
+            }
+        `;
+        expect(() => compile(code, 'test.ripple')).not.toThrow();
+    });
+
+    it('should not error on accessing a property named like an internal one on a non-tracked object', () => {
+        const code = `
+            export default component App() {
+                let config = { a: 'some_value', b: 'another_value' };
+                console.log(config.a);
+                console.log(config.b);
+            }
+        `;
+        expect(() => compile(code, 'test.ripple')).not.toThrow();
+    });
+
+});

package/tests/client/dynamic-elements.test.ripple

@@ -398,4 +398,123 @@ describe('dynamic DOM elements', () => {
 		expect(stillHasScopedClass).toBe(true);
 		expect(newClasses.includes('even')).toBe(true);
 	});
-});
+
+	it('adds scoping class to dynamic elements', () => {
+		component App() {
+			let tag = track('div');
+
+			<@tag class="scoped"><p>{'Scoped dynamic element'}</p></@tag>
+
+			<style>
+				.scoped {
+					color: blue;
+				}
+			</style>
+		}
+		render(App);
+
+		const div = container.querySelector('div');
+		const p = div.querySelector('p');
+
+		expect(Array.from(div.classList).some(c => c.startsWith('ripple-'))).toBe(true);
+		expect(Array.from(p.classList).some(c => c.startsWith('ripple-'))).toBe(true);
+	});
+
+	it('adds scoping class to dynamic elements when selector targets by tag name', () => {
+		component App() {
+			let tag = track('div');
+
+			<@tag class="scoped"><p>{'Scoped dynamic element'}</p></@tag>
+
+			<style>
+				div {
+					color: blue;
+				}
+			</style>
+		}
+		render(App);
+
+		const div = container.querySelector('div');
+		const p = div.querySelector('p');
+
+		expect(Array.from(div.classList).some(c => c.startsWith('ripple-'))).toBe(true);
+		expect(Array.from(p.classList).some(c => c.startsWith('ripple-'))).toBe(true);
+	});
+
+	it("doesn't add scoping class to components inside dynamic element", () => {
+		component Child() {
+			<div class="child"><p>{"I am a child component"}</p></div>
+
+			<style>
+				.child {
+					color: blue;
+				}
+			</style>
+		}
+
+		component App() {
+			let tag = track('div');
+
+			<@tag class="scoped">
+				<p>{'Scoped dynamic element'}</p>
+				<Child />
+			</@tag>
+
+			<style>
+				div {
+					color: blue;
+				}
+			</style>
+		}
+		render(App);
+
+		const outerDiv = container.querySelector('.scoped');
+		const innerDiv = outerDiv.querySelector('.child');
+		const innerP = innerDiv.querySelector('p');
+
+		const outerScope = Array.from(outerDiv.classList).find(c => c.startsWith('ripple-'));
+		const innerScopes = Array.from(innerDiv.classList).filter(c => c.startsWith('ripple-'));
+		const innerInnerScopes = Array.from(innerP.classList).filter(c => c.startsWith('ripple-'));
+
+		expect(outerScope).toBeTruthy();
+
+		expect(innerScopes).toHaveLength(1);
+		expect(innerScopes[0]).not.toBe(outerScope);
+
+		expect(innerInnerScopes).toHaveLength(0);
+	});
+
+	it("doesn't add scoping class to dynamically rendered component", () => {
+		component Child() {
+			<div class="child"><p>{"I am a child component"}</p></div>
+
+			<style>
+				.child {
+					color: green;
+				}
+			</style>
+		}
+
+		component App() {
+			let tag = track(() => Child);
+
+			<@tag />
+
+			<style>
+				.child {
+					color: red;
+				}
+			</style>
+		}
+		render(App);
+
+		const div = container.querySelector('.child');
+		const p = div.querySelector('p');
+
+		const outerScopes = Array.from(div.classList).filter(c => c.startsWith('ripple-'));
+		const innerScopes = Array.from(p.classList).filter(c => c.startsWith('ripple-'));
+
+		expect(outerScopes).toHaveLength(1);
+		expect(innerScopes).toHaveLength(0);
+	});
+});