ripple 0.3.11 → 0.3.13

package/src/runtime/internal/server/types.d.ts

@@ -1,4 +1,6 @@
 import type { Context } from './context.js';
+import type { OutputInterface } from './index.js';
+import type { BlockFunction, CatchFunction, PendingFunction } from './blocks.js';
 
 export type Component = {
 	c: null | Map<Context<any>, any>;
@@ -13,6 +15,7 @@ export type Dependency = {
 
 export type Derived = {
 	a: { get?: Function; set?: Function };
+	b: Block;
 	c: number;
 	co: null | Component;
 	d: null | Dependency;
@@ -31,9 +34,41 @@ export type Tracked = {
 	c: number;
 	f: number;
 	v: any;
+	aa: AbortController | null;
+	ap: PromiseLike<any> | null;
 	readonly [0]: any;
 	[1]: Tracked;
 	value: any;
 	readonly length: 2;
 	[Symbol.iterator](): Iterator<any | Tracked>;
 };
+
+export type Block = {
+	co: Component | null;
+	f: number;
+	fn: BlockFunction;
+	o: OutputInterface;
+	p: Block | null;
+	s: any;
+	first: Block | null;
+	last: Block | null;
+	next: Block | null;
+	prev: Block | null;
+};
+
+export type TryBlockState = {
+	p?: PendingFunction | null;
+	c?: CatchFunction | null;
+};
+
+export type TryBlock = Block & {
+	s: TryBlockState;
+};
+
+export type TryBlockWithCatch = TryBlock & {
+	s: TryBlockState & { c: CatchFunction };
+};
+
+export type TryBlockWithPending = TryBlock & {
+	s: TryBlockState & { p: PendingFunction };
+};

package/src/server/index.js

@@ -1,5 +1,5 @@
 // SSR helpers
-export { render, renderToStream } from '../runtime/internal/server/index.js';
+export { create_ssr_stream, render } from '../runtime/internal/server/index.js';
 export { get_css_for_hashes } from '../runtime/internal/server/css-registry.js';
 export { executeServerFunction } from '../runtime/internal/server/rpc.js';
 

package/src/utils/async.js

@@ -0,0 +1,35 @@
+/**
+ * @param {any} value
+ * @returns {value is PromiseLike<any>}
+ */
+export function is_promise_like(value) {
+	return (
+		(typeof value === 'object' || typeof value === 'function') &&
+		value !== null &&
+		typeof value.then === 'function'
+	);
+}
+
+/**
+ * @param {any} value
+ * @param {'deferred'} [type]
+ * @returns {{ promise: PromiseLike<any>, abort_controller: AbortController | null, type?: 'deferred' } | null}
+ */
+export function get_async_track_result(value, type) {
+	if (is_promise_like(value)) {
+		return { promise: value, abort_controller: null, type: type };
+	}
+
+	if (typeof value === 'object' && value !== null && is_promise_like(value.promise)) {
+		return {
+			promise: value.promise,
+			abort_controller:
+				typeof value.abortController === 'object' && value.abortController !== null
+					? value.abortController
+					: null,
+			type: type,
+		};
+	}
+
+	return null;
+}

package/src/utils/builders.js

@@ -1051,15 +1051,17 @@ export function try_builder(block, handler = null, finalizer = null, pending = n
 
 /**
  * @param {AST.Pattern | null} param
+ * @param {AST.Pattern | null} reset_param
  * @param {AST.BlockStatement} body
  * @param {AST.NodeWithLocation} [loc_info]
  * @return {AST.CatchClause}
  */
-export function catch_clause_builder(param, body, loc_info) {
+export function catch_clause_builder(param, reset_param, body, loc_info) {
 	/** @type {AST.CatchClause} */
 	const node = {
 		type: 'CatchClause',
 		param,
+		resetParam: reset_param,
 		body,
 		metadata: { path: [] },
 	};

package/tests/client/__snapshots__/computed-properties.test.rsrx.snap

@@ -0,0 +1,49 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`computed tracked properties > should update a property using assignment 1`] = `
+<div>
+  <div>
+    0
+  </div>
+  <button>
+    Increment
+  </button>
+  
+</div>
+`;
+
+exports[`computed tracked properties > should update a property using assignment 2`] = `
+<div>
+  <div>
+    1
+  </div>
+  <button>
+    Increment
+  </button>
+  
+</div>
+`;
+
+exports[`computed tracked properties > should update a property using update expressions 1`] = `
+<div>
+  <div>
+    0
+  </div>
+  <button>
+    Increment
+  </button>
+  
+</div>
+`;
+
+exports[`computed tracked properties > should update a property using update expressions 2`] = `
+<div>
+  <div>
+    1
+  </div>
+  <button>
+    Increment
+  </button>
+  
+</div>
+`;

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

@@ -0,0 +1,319 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`for statements > correctly handles intermediate statements in for block 1`] = `
+<div>
+  <div>
+    <div>
+      <div>
+        1
+      </div>
+      <div>
+        1
+      </div>
+    </div>
+    <div>
+      <div>
+        2
+      </div>
+      <div>
+        2
+      </div>
+    </div>
+    <div>
+      <div>
+        3
+      </div>
+      <div>
+        3
+      </div>
+    </div>
+    
+  </div>
+  <button>
+    Add Item
+  </button>
+  
+</div>
+`;
+
+exports[`for statements > correctly handles intermediate statements in for block 2`] = `
+<div>
+  <div>
+    <div>
+      <div>
+        1
+      </div>
+      <div>
+        1
+      </div>
+    </div>
+    <div>
+      <div>
+        2
+      </div>
+      <div>
+        2
+      </div>
+    </div>
+    <div>
+      <div>
+        3
+      </div>
+      <div>
+        3
+      </div>
+    </div>
+    <div>
+      <div>
+        4
+      </div>
+      <div>
+        4
+      </div>
+    </div>
+    
+  </div>
+  <button>
+    Add Item
+  </button>
+  
+</div>
+`;
+
+exports[`for statements > correctly handles keyed for...of loops 1`] = `
+<div>
+  <!---->
+  <div>
+    0:Item 1
+  </div>
+  <div>
+    1:Item 2
+  </div>
+  <div>
+    2:Item 3
+  </div>
+  <!---->
+  <button>
+    Reverse
+  </button>
+  
+</div>
+`;
+
+exports[`for statements > correctly handles keyed for...of loops 2`] = `
+<div>
+  <!---->
+  <div>
+    0:Item 3
+  </div>
+  <div>
+    1:Item 2
+  </div>
+  <div>
+    2:Item 1
+  </div>
+  <!---->
+  <button>
+    Reverse
+  </button>
+  
+</div>
+`;
+
+exports[`for statements > correctly handles the index in a for...of loop 1`] = `
+<div>
+  <div>
+    <div>
+      0 : a
+    </div>
+    <div>
+      1 : b
+    </div>
+    <div>
+      2 : c
+    </div>
+    
+  </div>
+  <button>
+    Add Item
+  </button>
+  <button>
+    Reverse
+  </button>
+  
+</div>
+`;
+
+exports[`for statements > correctly handles the index in a for...of loop 2`] = `
+<div>
+  <div>
+    <div>
+      0 : a
+    </div>
+    <div>
+      1 : b
+    </div>
+    <div>
+      2 : c
+    </div>
+    <div>
+      3 : d
+    </div>
+    
+  </div>
+  <button>
+    Add Item
+  </button>
+  <button>
+    Reverse
+  </button>
+  
+</div>
+`;
+
+exports[`for statements > correctly handles the index in a for...of loop 3`] = `
+<div>
+  <div>
+    <div>
+      0 : d
+    </div>
+    <div>
+      1 : c
+    </div>
+    <div>
+      2 : b
+    </div>
+    <div>
+      3 : a
+    </div>
+    
+  </div>
+  <button>
+    Add Item
+  </button>
+  <button>
+    Reverse
+  </button>
+  
+</div>
+`;
+
+exports[`for statements > handles updating with new objects with same key 1`] = `
+<div>
+  <!---->
+  <div>
+    0:Item 1
+  </div>
+  <div>
+    1:Item 2
+  </div>
+  <div>
+    2:Item 3
+  </div>
+  <!---->
+  <button>
+    Reverse
+  </button>
+  
+</div>
+`;
+
+exports[`for statements > handles updating with new objects with same key 2`] = `
+<div>
+  <!---->
+  <div>
+    0:Item 1!
+  </div>
+  <div>
+    1:Item 2!
+  </div>
+  <div>
+    2:Item 3!
+  </div>
+  <!---->
+  <button>
+    Reverse
+  </button>
+  
+</div>
+`;
+
+exports[`for statements > renders 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 > renders 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 > renders 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>
+`;

package/tests/client/__snapshots__/html.test.rsrx.snap

@@ -0,0 +1,40 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`html directive > renders dynamic html 1`] = `
+<div>
+  <!---->
+  <div>
+    Test
+  </div>
+  <!---->
+  <button>
+    Update
+  </button>
+  
+</div>
+`;
+
+exports[`html directive > renders dynamic html 2`] = `
+<div>
+  <!---->
+  <div>
+    Updated
+  </div>
+  <!---->
+  <button>
+    Update
+  </button>
+  
+</div>
+`;
+
+exports[`html directive > renders static html 1`] = `
+<div>
+  <!---->
+  <div>
+    Test
+  </div>
+  <!---->
+  
+</div>
+`;

package/tests/client/_etc.test.rsrx

@@ -0,0 +1,7 @@
+// This file is for tests that don't fit anywhere else
+
+describe('etc', () => {
+	it('this is here so the empty test suite does not fail', () => {
+		expect(true).toBe(true);
+	});
+});

package/tests/client/array/{array.static.test.ripple → array.static.test.rsrx}

@@ -1,4 +1,4 @@
-import { flushSync, RippleArray } from 'ripple';
+import { flushSync, RippleArray, trackAsync } from 'ripple';
 import { MAX_ARRAY_LENGTH } from '../../../src/runtime/internal/client/constants.js';
 
 describe('RippleArray > static', () => {
@@ -46,11 +46,11 @@ describe('RippleArray > static', () => {
 			}
 
 			component ArrayTest() {
-				let items = await RippleArray.fromAsync([1, 2, 3]);
+				let &[items] = trackAsync(() => RippleArray.fromAsync([1, 2, 3]));
 
 				<button
 					onClick={() => {
-						if (items) items.push(4);
+						items.push(4);
 					}}
 				>
 					{'add item'}
@@ -85,16 +85,16 @@ describe('RippleArray > static', () => {
 			}
 
 			component ArrayTest() {
-				let items = await RippleArray.fromAsync([1, 2, 3], (x: number) => x * 2);
+				let &[items] = trackAsync(() => RippleArray.fromAsync([1, 2, 3], (x: number) => x * 2));
 
 				<button
 					onClick={() => {
-						if (items) items.push(8);
+						items.push(8);
 					}}
 				>
 					{'add item'}
 				</button>
-				<pre>{items ? JSON.stringify(items) : 'Loading...'}</pre>
+				<pre>{JSON.stringify(items)}</pre>
 			}
 
 			render(Parent);
@@ -125,26 +125,24 @@ describe('RippleArray > static', () => {
 				}
 
 				component ArrayTest() {
-					let items: RippleArray<string> | null = null;
-					let error: string | null = null;
-
 					async function* throwingIterable() {
 						throw new Error('Async error');
 					}
 
 					try {
-						items = await RippleArray.fromAsync(throwingIterable());
-						for (const item of items) {
-							<li>{item}</li>
-						}
+						let &[items] = trackAsync(() => RippleArray.fromAsync(throwingIterable()));
+
+						<ul>
+							for (const item of items) {
+								<li>{item}</li>
+							}
+						</ul>
 					} pending {
 						<div>{'Loading...'}</div>
 					} catch (e) {
-						error = (e as Error).message;
+						<pre>{'Error: ' + (e as Error).message}</pre>
+						<pre>{'No items'}</pre>
 					}
-
-					<pre>{error ? 'Error: ' + error : 'No error'}</pre>
-					<pre>{items ? JSON.stringify(items) : 'No items'}</pre>
 				}
 
 				render(Parent);
@@ -228,10 +226,10 @@ describe('RippleArray > static', () => {
 				}
 
 				component ArrayTest() {
-					const items = await RippleArray.fromAsync([6]);
+					let &[items] = trackAsync(() => RippleArray.fromAsync([6]));
 
-					<pre>{items ? JSON.stringify(items) : 'Loading...'}</pre>
-					<pre>{items ? items.length : ''}</pre>
+					<pre>{JSON.stringify(items)}</pre>
+					<pre>{items.length}</pre>
 				}
 
 				render(Parent);