ripple 0.3.16 → 0.3.18

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # ripple
 
+## 0.3.18
+
+### Patch Changes
+
+- Updated dependencies []:
+  - ripple@0.3.18
+
+## 0.3.17
+
+### Patch Changes
+
+- Updated dependencies []:
+  - ripple@0.3.17
+
 ## 0.3.16
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.3.16",
+  "version": "0.3.18",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -82,10 +82,10 @@
     "typescript": "^5.9.3",
     "@volar/language-core": "~2.4.28",
     "vscode-languageserver-types": "^3.17.5",
-    "@tsrx/core": "0.0.3",
-    "@tsrx/ripple": "0.0.4"
+    "@tsrx/core": "0.0.4",
+    "@tsrx/ripple": "0.0.5"
   },
   "peerDependencies": {
-    "ripple": "0.3.16"
+    "ripple": "0.3.18"
   }
 }

package/src/runtime/element.js

@@ -1,29 +1,29 @@
-const RIPPLE_ELEMENT = Symbol.for('ripple.element');
+const TSRX_ELEMENT = Symbol.for('ripple.element');
 
 /**
  * @typedef {{
  * 	render: Function;
- * 	[RIPPLE_ELEMENT]: true;
- * }} RippleElement
+ * 	[TSRX_ELEMENT]: true;
+ * }} TSRXElement
  */
 
 /**
  * @param {Function} render
- * @returns {RippleElement}
+ * @returns {TSRXElement}
  */
-export function ripple_element(render) {
+export function tsrx_element(render) {
 	return {
 		render,
-		[RIPPLE_ELEMENT]: true,
+		[TSRX_ELEMENT]: true,
 	};
 }
 
 /**
  * @param {any} value
- * @returns {value is RippleElement}
+ * @returns {value is TSRXElement}
  */
-export function is_ripple_element(value) {
-	return value != null && value[RIPPLE_ELEMENT] === true;
+export function is_tsrx_element(value) {
+	return value != null && value[TSRX_ELEMENT] === true;
 }
 
 /**
@@ -31,9 +31,9 @@ export function is_ripple_element(value) {
  * @returns {any}
  */
 export function normalize_children(value) {
-	if (value == null || is_ripple_element(value) || typeof value !== 'function') {
+	if (value == null || is_tsrx_element(value) || typeof value !== 'function') {
 		return value;
 	}
 
-	return ripple_element(value);
+	return tsrx_element(value);
 }

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

@@ -5,7 +5,7 @@ import { COMPOSITE_BLOCK, DEFAULT_NAMESPACE, NAMESPACE_URI } from './constants.j
 import { hydrate_next, hydrating } from './hydration.js';
 import { active_block, active_namespace, get, with_ns } from './runtime.js';
 import { top_element_to_ns } from './utils.js';
-import { is_ripple_element } from '../../element.js';
+import { is_tsrx_element } from '../../element.js';
 
 /**
  * @typedef {((anchor: Node, props: Record<string, any>, block: Block | null) => void)} ComponentFunction
@@ -69,7 +69,7 @@ export function composite(get_component, node, props) {
 
 					render_spread(element, () => props || {});
 
-					if (is_ripple_element(props?.children)) {
+					if (is_tsrx_element(props?.children)) {
 						var child_anchor = document.createComment('');
 						element.appendChild(child_anchor);
 

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

@@ -6,7 +6,7 @@ import { create_text, get_next_sibling } from './operations.js';
 import { active_block } from './runtime.js';
 import { hydrating, set_hydrate_node } from './hydration.js';
 import { COMMENT_NODE, HYDRATION_END, HYDRATION_START, TEXT_NODE } from '../../../constants.js';
-import { is_ripple_element } from '../../element.js';
+import { is_tsrx_element } from '../../element.js';
 
 /**
  * Finds the nearest enclosing BRANCH_BLOCK in the block hierarchy.
@@ -36,7 +36,7 @@ export function expression(node, get_value) {
 	var end = null;
 	/** @type {Text | null} */
 	var text = null;
-	/** @type {string | import('../../element.js').RippleElement | typeof UNINITIALIZED} */
+	/** @type {string | import('../../element.js').TSRXElement | typeof UNINITIALIZED} */
 	var value = UNINITIALIZED;
 	var is_element = false;
 	var initialized = false;
@@ -47,7 +47,7 @@ export function expression(node, get_value) {
 
 	render(() => {
 		var next_value = get_value();
-		var next_is_element = is_ripple_element(next_value);
+		var next_is_element = is_tsrx_element(next_value);
 		var is_hydration_marker = hydrating && anchor.nodeType === COMMENT_NODE;
 
 		if (is_hydration_marker) {
@@ -99,7 +99,7 @@ export function expression(node, get_value) {
 
 			// Update parent branch's s.start to include content inserted before anchor.
 			// This ensures that when the parent branch is destroyed, the full DOM range
-			// (including RippleElement content) is removed.
+			// (including TSRXElement content) is removed.
 			if (
 				parent_branch !== null &&
 				parent_branch.s !== null &&
@@ -114,7 +114,7 @@ export function expression(node, get_value) {
 				// If parent's start is the anchor (or comes after child's start),
 				// update it to include the child's content
 				if (parent_start === anchor || parent_start === end) {
-					// Save original so we can restore it when switching to non-RippleElement
+					// Save original so we can restore it when switching to non-TSRXElement
 					if (modified_parent_branch === null) {
 						modified_parent_branch = parent_branch;
 						original_parent_start = parent_start;

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

@@ -127,4 +127,4 @@ export { hmr } from './hmr.js';
 
 export { pop, next } from './hydration.js';
 
-export { ripple_element, normalize_children } from '../../element.js';
+export { tsrx_element, normalize_children } from '../../element.js';

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

@@ -12,11 +12,11 @@ import {
 	set_hydrating,
 	set_hydrate_node,
 } from './hydration.js';
-import { is_ripple_element } from '../../element.js';
+import { is_tsrx_element } from '../../element.js';
 
 /**
  * @param {any} _
- * @param {{ target: Element, children: import('../../element.js').RippleElement }} props
+ * @param {{ target: Element, children: import('../../element.js').TSRXElement }} props
  * @returns {void}
  */
 export function Portal(_, props) {
@@ -27,7 +27,7 @@ export function Portal(_, props) {
 
 	/** @type {Element | symbol} */
 	let target = UNINITIALIZED;
-	/** @type {import('../../element.js').RippleElement | symbol} */
+	/** @type {import('../../element.js').TSRXElement | symbol} */
 	let children = UNINITIALIZED;
 	/** @type {Block | null} */
 	var b = null;
@@ -71,7 +71,7 @@ export function Portal(_, props) {
 			var block = /** @type {Block} */ (active_block);
 
 			b = branch(() => {
-				if (is_ripple_element(children)) {
+				if (is_tsrx_element(children)) {
 					children.render(/** @type {Text} */ (anchor), block);
 				}
 			});

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

@@ -28,7 +28,7 @@ import { is_boolean_attribute } from '../../../utils/attributes.js';
 import { clsx } from 'clsx';
 import { normalize_css_property_name } from '../../../utils/normalize_css_property_name.js';
 import { BLOCK_CLOSE, BLOCK_OPEN } from '../../../constants.js';
-import { is_ripple_element, normalize_children, ripple_element } from '../../element.js';
+import { is_tsrx_element, normalize_children, tsrx_element } from '../../element.js';
 import {
 	is_tag_valid_with_parent,
 	is_tag_valid_with_ancestor,
@@ -48,7 +48,7 @@ export { hash } from '../../../utils/hashing.js';
 export { context } from './context.js';
 export { try_block, component_block, regular_block } from './blocks.js';
 export { array_slice };
-export { ripple_element, normalize_children };
+export { tsrx_element, normalize_children };
 
 export function noop() {}
 
@@ -59,7 +59,7 @@ export function noop() {}
 export function render_expression(value) {
 	output_push(BLOCK_OPEN);
 
-	if (is_ripple_element(value)) {
+	if (is_tsrx_element(value)) {
 		value.render({});
 	} else {
 		output_push(escape(value ?? ''));
@@ -940,7 +940,7 @@ export function spread_attrs(attrs, css_hash) {
 	for (name in attrs) {
 		var value = attrs[name];
 
-		if (name === 'children' || typeof value === 'function' || is_ripple_element(value)) continue;
+		if (name === 'children' || typeof value === 'function' || is_tsrx_element(value)) continue;
 
 		if (is_ripple_object(value)) {
 			value = get(value);

package/tests/client/__snapshots__/computed-properties.test.tsrx.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.tsrx.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.tsrx.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/basic/__snapshots__/basic.attributes.test.tsrx.snap

@@ -0,0 +1,60 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`basic client > attribute rendering > handles boolean attributes with no prop value provides 1`] = `
+<div>
+  <div
+    class="container"
+  >
+    <button
+      disabled=""
+    >
+      Button
+    </button>
+    <input
+      checked=""
+      type="checkbox"
+    />
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > attribute rendering > handles boolean props correctly 1`] = `
+<div>
+  <div
+    data-disabled=""
+  />
+  <input
+    disabled=""
+  />
+  <!---->
+  
+</div>
+`;
+
+exports[`basic client > attribute rendering > render spread props without duplication 1`] = `
+<div>
+  <div>
+    <input
+      id="vehicle1"
+      name="car"
+      type="checkbox"
+      value="Bike"
+    />
+  </div>
+  
+</div>
+`;
+
+exports[`basic client > attribute rendering > render static attributes 1`] = `
+<div>
+  <div
+    class="foo"
+    id="bar"
+    style="color: red;"
+  >
+    Hello World
+  </div>
+  
+</div>
+`;