ripple 0.2.124 → 0.2.126

package/src/runtime/internal/client/runtime.js

@@ -24,6 +24,7 @@ import {
 	TRY_BLOCK,
 	UNINITIALIZED,
 	REF_PROP,
+	TRACKED_OBJECT,
 } from './constants.js';
 import { capture, suspend } from './try.js';
 import {
@@ -412,7 +413,7 @@ function is_tracking_dirty(tracking) {
 		var tracked = tracking.t;
 
 		if ((tracked.f & DERIVED) !== 0) {
-			update_derived(/** @type {Derived} **/ (tracked));
+			update_derived(/** @type {Derived} **/(tracked));
 		}
 
 		if (tracked.c > tracking.c) {
@@ -472,7 +473,7 @@ export function async_computed(fn, block) {
 		}
 
 		promise.then((v) => {
-			if (parent && is_destroyed(/** @type {Block} */ (parent))) {
+			if (parent && is_destroyed(/** @type {Block} */(parent))) {
 				return;
 			}
 			if (promise === current && t.v !== v) {
@@ -746,7 +747,7 @@ export function get(tracked) {
 	}
 
 	return (tracked.f & DERIVED) !== 0
-		? get_derived(/** @type {Derived} */ (tracked))
+		? get_derived(/** @type {Derived} */(tracked))
 		: get_tracked(tracked);
 }
 
@@ -872,7 +873,7 @@ export function flush_sync(fn) {
  * @returns {Object}
  */
 export function spread_props(fn, block) {
-	let computed = derived(fn, block);
+	var computed = derived(fn, block);
 
 	return new Proxy(
 		{},
@@ -882,9 +883,23 @@ export function spread_props(fn, block) {
 				return obj[property];
 			},
 			has(target, property) {
+				if (property === TRACKED_OBJECT) {
+					return true;
+				}
 				const obj = get_derived(computed);
 				return property in obj;
 			},
+			getOwnPropertyDescriptor(target, key) {
+				const obj = get_derived(computed);
+
+				if (key in obj) {
+					return {
+						enumerable: true,
+						configurable: true,
+						value: obj[key],
+					};
+				}
+			},
 			ownKeys() {
 				const obj = get_derived(computed);
 				return Reflect.ownKeys(obj);
@@ -1164,7 +1179,7 @@ export async function maybe_tracked(v) {
 		} else {
 			value = await async_computed(async () => {
 				return await get_tracked(v);
-			}, /** @type {Block} */ (active_block));
+			}, /** @type {Block} */(active_block));
 		}
 	} else {
 		value = await v;

package/src/runtime/internal/server/index.js

@@ -30,6 +30,8 @@ class Output {
 	body = '';
 	/** @type {Set<string>} */
 	css = new Set();
+	/** @type {Promise<any>[]} */
+	promises = [];
 	/** @type {Output | null} */
 	#parent = null;
 
@@ -60,18 +62,27 @@ class Output {
 /** @type {render} */
 export async function render(component) {
 	const output = new Output(null);
+	let head, body, css;
 
-	if (component.async) {
-		await component(output, {});
-	} else {
-		component(output, {});
-	}
-
-	const { head, body, css } = output;
+	try {
+		if (component.async) {
+			await component(output, {});
+		} else {
+			component(output, {});
+		}
+		if (output.promises.length > 0) {
+			await Promise.all(output.promises);
+		}
 
-	return { head, body, css };
+		head = output.head
+		body = output.body
+		css = output.css
+	}
+	catch (error) {
+		console.log(error)
+	}
+	return { head, body, css }
 }
-
 /**
  * @returns {void}
  */

package/src/utils/builders.js

@@ -237,14 +237,14 @@ export function export_builder(declaration, specifiers = [], attributes = [], so
  * @param {ESTree.BlockStatement} body
  * @returns {ESTree.FunctionDeclaration}
  */
-export function function_declaration(id, params, body) {
+export function function_declaration(id, params, body, async = false) {
 	return {
 		type: 'FunctionDeclaration',
 		id,
 		params,
 		body,
 		generator: false,
-		async: false,
+		async,
 		metadata: /** @type {any} */ (null), // should not be used by codegen
 	};
 }

package/tests/client/__snapshots__/for.test.ripple.snap

@@ -238,86 +238,6 @@ exports[`for statements > handles updating with new objects with same key 2`] =
 </div>
 `;
 
-exports[`for statements > render a simple dynamic array 1`] = `
-<div>
-  <!---->
-  <div
-    class="Item 1"
-  >
-    Item 1
-  </div>
-  <div
-    class="Item 2"
-  >
-    Item 2
-  </div>
-  <div
-    class="Item 3"
-  >
-    Item 3
-  </div>
-  <!---->
-  <button>
-    Add Item
-  </button>
-  
-</div>
-`;
-
-exports[`for statements > render a simple dynamic array 2`] = `
-<div>
-  <!---->
-  <div
-    class="Item 1"
-  >
-    Item 1
-  </div>
-  <div
-    class="Item 2"
-  >
-    Item 2
-  </div>
-  <div
-    class="Item 3"
-  >
-    Item 3
-  </div>
-  <div
-    class="Item 4"
-  >
-    Item 4
-  </div>
-  <!---->
-  <button>
-    Add Item
-  </button>
-  
-</div>
-`;
-
-exports[`for statements > render a simple static array 1`] = `
-<div>
-  <!---->
-  <div
-    class="Item 1"
-  >
-    Item 1
-  </div>
-  <div
-    class="Item 2"
-  >
-    Item 2
-  </div>
-  <div
-    class="Item 3"
-  >
-    Item 3
-  </div>
-  <!---->
-  
-</div>
-`;
-
 exports[`for statements > renders a simple dynamic array 1`] = `
 <div>
   <!---->

package/tests/client/basic/__snapshots__/basic.rendering.test.ripple.snap

@@ -56,51 +56,3 @@ exports[`basic client > rendering & text > should handle lexical scopes correctl
   
 </div>
 `;
-
-exports[`basic client > text rendering > basic operations 1`] = `
-<div>
-  <div>
-    0
-  </div>
-  <div>
-    2
-  </div>
-  <div>
-    5
-  </div>
-  <div>
-    2
-  </div>
-  
-</div>
-`;
-
-exports[`basic client > text rendering > renders semi-dynamic text 1`] = `
-<div>
-  <div>
-    Hello World
-  </div>
-  
-</div>
-`;
-
-exports[`basic client > text rendering > renders simple JS expression logic correctly 1`] = `
-<div>
-  <div>
-    {"0":"Test"}
-  </div>
-  <div>
-    1
-  </div>
-  
-</div>
-`;
-
-exports[`basic client > text rendering > renders static text 1`] = `
-<div>
-  <div>
-    Hello World
-  </div>
-  
-</div>
-`;

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

@@ -123,4 +123,20 @@ describe('basic client > errors', () => {
 
 		expect(error).toBe('Assignments or updates to tracked values are not allowed during computed "track(() => ...)" evaluation');
 	});
+
+	it('should throw error for await in client-side control-flow statements', () => {
+		const code = `
+			export default component App() {
+				let data = 'initial';
+				if (true) {
+					await new Promise(r => setTimeout(r, 100));
+					data = 'loaded';
+				}
+				<div>{data}</div>
+			}
+		`;
+		expect(() => {
+			compile(code, 'test.ripple', { mode: 'client' });
+		}).toThrow('`await` is not allowed in client-side control-flow statements');
+	});
 });

package/tests/client/function-overload-import.ripple

@@ -0,0 +1,10 @@
+export function test(arg: string): string
+export function test(arg: number): string
+
+export function test(arg: string | number): string {
+  if (typeof arg === 'string') {
+    return arg;
+  }
+
+  return arg.toString();
+}

package/tests/client/function-overload.test.ripple

@@ -0,0 +1,40 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { mount, flushSync } from 'ripple';
+
+import { test } from './function-overload-import.ripple';
+
+describe('function overload import tests', () => {
+	describe('function overloads', () => {
+		it('test function with string argument returns the string', () => {
+			const result = test('hello');
+			expect(result).toBe('hello');
+			expect(typeof result).toBe('string');
+		});
+
+		it('test function with number argument returns string representation', () => {
+			const result = test(42);
+			expect(result).toBe('42');
+			expect(typeof result).toBe('string');
+		});
+
+		it('test function with zero returns "0"', () => {
+			const result = test(0);
+			expect(result).toBe('0');
+		});
+
+		it('test function with negative number returns string representation', () => {
+			const result = test(-100);
+			expect(result).toBe('-100');
+		});
+
+		it('test function with empty string returns empty string', () => {
+			const result = test('');
+			expect(result).toBe('');
+		});
+
+		it('test function with decimal number returns string representation', () => {
+			const result = test(3.14159);
+			expect(result).toBe('3.14159');
+		});
+	});
+});

package/tests/server/await.test.ripple

@@ -0,0 +1,61 @@
+import { describe, it, expect } from 'vitest';
+import { render } from 'ripple/server';
+import { track, set, get } from 'ripple';
+
+describe('await in control flow', () => {
+	it('should handle await inside if statement', async () => {
+		component App() {
+			let condition = true;
+			let data = track('loading');
+
+			if (condition) {
+				await new Promise(resolve => setTimeout(() => {
+					@data = 'loaded';
+					resolve();
+				}, 10));
+			}
+
+			<div>{@data}</div>
+		}
+
+		const { body } = await render(App);
+		expect(body).toBe('<div>loaded</div>');
+	});
+
+	it('should handle await inside for...of loop', async () => {
+		component App() {
+			const items = [1, 2, 3];
+			let result = '';
+
+			for (const item of items) {
+				await new Promise(resolve => setTimeout(resolve, 5));
+				result += item;
+			}
+
+			<div>{result}</div>
+		}
+
+		const { body } = await render(App);
+		expect(body).toBe('<div>123</div>');
+	});
+
+			it('should handle await inside switch statement', async () => {
+				component App() {
+					let value = 'b';
+	
+					switch (value) {
+						case 'a':
+							<div>{'Case A'}</div>
+							break;
+						case 'b':
+							await new Promise(resolve => setTimeout(resolve, 10));
+							<div>{'Case B'}</div>
+							break;
+						default:
+							<div>{'Default Case'}</div>
+					}
+				}
+	
+				const { body } = await render(App);
+				expect(body).toBe('<div>Case B</div>');
+			});});

package/tests/server/for.test.ripple

@@ -0,0 +1,44 @@
+import { describe, it, expect } from 'vitest';
+import { render } from 'ripple/server';
+
+describe('for statements in SSR', () => {
+	it('renders a simple static array', async () => {
+		component App() {
+			const items = ['Item 1', 'Item 2', 'Item 3'];
+
+			for (const item of items) {
+				<div class={item}>{item}</div>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toBe('<div class="Item 1">Item 1</div><div class="Item 2">Item 2</div><div class="Item 3">Item 3</div>');
+	});
+
+	it('renders nested for...of loops', async () => {
+		component App() {
+			const groups = [
+				{
+					name: 'Group 1',
+					items: ['Item 1.1', 'Item 1.2']
+				},
+				{
+					name: 'Group 2',
+					items: ['Item 2.1', 'Item 2.2']
+				}
+			];
+
+			for (const group of groups) {
+				<h1>{group.name}</h1>
+				<ul>
+					for (const item of group.items) {
+						<li>{item}</li>
+					}
+				</ul>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toBe('<h1>Group 1</h1><ul><li>Item 1.1</li><li>Item 1.2</li></ul><h1>Group 2</h1><ul><li>Item 2.1</li><li>Item 2.2</li></ul>');
+	});
+});

package/tests/server/if.test.ripple

@@ -63,4 +63,24 @@ describe('if statements in SSR', () => {
 		const { body } = await render(App);
 		expect(body).toBe('<div>Default Case</div>');
 	});
-});
+
+	it('renders nested if-else blocks correctly', async () => {
+		component App() {
+			let outer = true;
+			let inner = false;
+
+			if (outer) {
+				if (inner) {
+					<div>{'Outer true, Inner true'}</div>
+				} else {
+					<div>{'Outer true, Inner false'}</div>
+				}
+			} else {
+				<div>{'Outer false'}</div>
+			}
+		}
+
+		const { body } = await render(App);
+		expect(body).toBe('<div>Outer true, Inner false</div>');
+	});
+});

package/tests/utils/escaping.test.js

@@ -0,0 +1,102 @@
+import { describe, it, expect } from 'vitest';
+import { escape } from '../../src/utils/escaping.js';
+
+describe('escape utility', () => {
+	describe('content escaping (is_attr = false)', () => {
+		it('should escape & to &', () => {
+			expect(escape('foo & bar', false)).toBe('foo & bar');
+		});
+
+		it('should escape < to &lt;', () => {
+			expect(escape('foo < bar', false)).toBe('foo &lt; bar');
+		});
+
+		it('should escape multiple special characters', () => {
+			expect(escape('a & b < c', false)).toBe('a &amp; b &lt; c');
+		});
+
+		it('should not escape double quotes in content', () => {
+			expect(escape('foo "bar" baz', false)).toBe('foo "bar" baz');
+		});
+
+		it('should handle empty string', () => {
+			expect(escape('', false)).toBe('');
+		});
+
+		it('should handle string with no special characters', () => {
+			expect(escape('hello world', false)).toBe('hello world');
+		});
+
+		it('should handle null values', () => {
+			expect(escape(null, false)).toBe('');
+		});
+
+		it('should handle undefined values', () => {
+			expect(escape(undefined, false)).toBe('');
+		});
+
+		it('should handle numbers', () => {
+			expect(escape(123, false)).toBe('123');
+		});
+
+		it('should escape consecutive special characters', () => {
+			expect(escape('&&<<', false)).toBe('&amp;&amp;&lt;&lt;');
+		});
+
+		it('should handle special characters at start', () => {
+			expect(escape('&hello', false)).toBe('&amp;hello');
+		});
+
+		it('should handle special characters at end', () => {
+			expect(escape('hello<', false)).toBe('hello&lt;');
+		});
+	});
+
+	describe('attribute escaping (is_attr = true)', () => {
+		it('should escape & to &amp;', () => {
+			expect(escape('foo & bar', true)).toBe('foo &amp; bar');
+		});
+
+		it('should escape < to &lt;', () => {
+			expect(escape('foo < bar', true)).toBe('foo &lt; bar');
+		});
+
+		it('should escape " to &quot;', () => {
+			expect(escape('foo "bar" baz', true)).toBe('foo &quot;bar&quot; baz');
+		});
+
+		it('should escape all three special characters', () => {
+			expect(escape('a & b < c "d"', true)).toBe('a &amp; b &lt; c &quot;d&quot;');
+		});
+
+		it('should handle empty string', () => {
+			expect(escape('', true)).toBe('');
+		});
+
+		it('should handle string with no special characters', () => {
+			expect(escape('hello world', true)).toBe('hello world');
+		});
+
+		it('should handle null values', () => {
+			expect(escape(null, true)).toBe('');
+		});
+
+		it('should handle undefined values', () => {
+			expect(escape(undefined, true)).toBe('');
+		});
+
+		it('should escape consecutive quotes', () => {
+			expect(escape('"""', true)).toBe('&quot;&quot;&quot;');
+		});
+
+		it('should handle mixed escaping', () => {
+			expect(escape('<div class="foo & bar">', true)).toBe('&lt;div class=&quot;foo &amp; bar&quot;>');
+		});
+	});
+
+	describe('default parameter behavior', () => {
+		it('should default to content escaping when is_attr is undefined', () => {
+			expect(escape('foo "bar"')).toBe('foo "bar"');
+		});
+	});
+});