ripple 0.2.68 → 0.2.70

package/src/compiler/utils.js

@@ -378,6 +378,18 @@ export function is_component_level_function(context) {
   return true;
 }
 
+export function is_ripple_track_call(callee, context) {
+  return (
+    (callee.type === 'Identifier' && callee.name === 'track') ||
+    (callee.type === 'MemberExpression' &&
+      callee.object.type === 'Identifier' &&
+      callee.property.type === 'Identifier' &&
+      callee.property.name === 'track' &&
+      !callee.computed &&
+      is_ripple_import(callee, context))
+  );
+}
+
 export function is_inside_call_expression(context) {
   for (let i = context.path.length - 1; i >= 0; i -= 1) {
     const context_node = context.path[i];
@@ -391,6 +403,10 @@ export function is_inside_call_expression(context) {
       return false;
     }
     if (type === 'CallExpression') {
+      const callee = context_node.callee;
+      if (is_ripple_track_call(callee, context)) {
+        return false;
+      }
       return true;
     }
   }

package/src/constants.js

@@ -1,3 +1,7 @@
 export const TEMPLATE_FRAGMENT = 1;
 export const TEMPLATE_USE_IMPORT_NODE = 1 << 1;
 export const IS_CONTROLLED = 1 << 2;
+export const IS_INDEXED = 1 << 3;
+export const TEMPLATE_SVG_NAMESPACE = 1 << 3;
+export const TEMPLATE_MATHML_NAMESPACE = 1 << 4;
+

package/src/runtime/array.js

@@ -105,17 +105,24 @@ function proxy({ elements, block, from_static = false, use_array = false }) {
 
       var result = Reflect.get(target, prop, receiver);
 
-      if (typeof result === "function" && methods_returning_arrays.has(prop)) {
-        /** @type {(this: any, ...args: any[]) => any} */
-        return function (...args) {
-          var output = Reflect.apply(result, receiver, args)
-
-          if (Array.isArray(output) && output !== target) {
-            return proxy({ elements: output, block, use_array: true });
-          }
+      if (typeof result === 'function') {
+        if (methods_returning_arrays.has(prop)) {
+          /** @type {(this: any, ...args: any[]) => any} */
+          return function (...args) {
+            var output = Reflect.apply(result, receiver, args);
+
+            if (Array.isArray(output) && output !== target) {
+              return proxy({ elements: output, block, use_array: true });
+            }
+
+            return output;
+          };
+        }
 
-          return output;
-        };
+        // When generating an iterator, we need to ensure that length is tracked
+        if (prop === 'entries' || prop === 'values' || prop === 'keys') {
+          receiver.length;
+        }
       }
 
       return result;
@@ -229,14 +236,16 @@ function proxy({ elements, block, from_static = false, use_array = false }) {
         // target object — which we avoid, so that state can be forked — we will run
         // afoul of the various invariants
         // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor#invariants
-        throw new Error('Only basic property descriptors are supported with value and configurable, enumerable, and writable set to true');
+        throw new Error(
+          'Only basic property descriptors are supported with value and configurable, enumerable, and writable set to true',
+        );
       }
 
       var t = tracked_elements.get(prop);
 
       if (t === undefined) {
-          t = tracked(descriptor.value, block);
-          tracked_elements.set(prop, t);
+        t = tracked(descriptor.value, block);
+        tracked_elements.set(prop, t);
       } else {
         set(t, descriptor.value, block);
       }
@@ -266,15 +275,15 @@ function get_first_if_length(array) {
 }
 
 const methods_returning_arrays = new Set([
-  "concat",
-  "filter",
-  "flat",
-  "flatMap",
-  "map",
-  "slice",
-  "splice",
-  "toReversed",
-  "toSorted",
-  "toSpliced",
-  "with",
+  'concat',
+  'filter',
+  'flat',
+  'flatMap',
+  'map',
+  'slice',
+  'splice',
+  'toReversed',
+  'toSorted',
+  'toSpliced',
+  'with',
 ]);

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

@@ -1,13 +1,32 @@
-import { IS_CONTROLLED } from '../../../constants.js';
+import { IS_CONTROLLED, IS_INDEXED } from '../../../constants.js';
 import { branch, destroy_block, destroy_block_children, render } from './blocks.js';
 import { FOR_BLOCK, TRACKED_ARRAY } from './constants.js';
-import { create_text } from './operations.js';
-import { active_block, untrack } from './runtime.js';
+import { create_text, next_sibling } from './operations.js';
+import { active_block, set, tracked, untrack } from './runtime.js';
 import { array_from, is_array } from './utils.js';
 
-function create_item(anchor, value, render_fn) {
+function create_item(anchor, value, index, render_fn, is_indexed) {
   var b = branch(() => {
-    render_fn(anchor, value);
+    var tracked_index;
+
+    if (is_indexed) {
+      var block = /** @type {Block} */ (active_block);
+
+      if (block.s === null) {
+        tracked_index = tracked(index, block);
+
+        block.s = {
+          start: null,
+          end: null,
+          i: tracked_index,
+        };
+      } else {
+        tracked_index = block.s.i;
+      }
+      render_fn(anchor, value, tracked_index);
+    } else {
+      render_fn(anchor, value);
+    }
   });
   return b;
 }
@@ -21,14 +40,27 @@ function move(block, anchor) {
     return;
   }
   while (node !== end) {
-    var next_node = /** @type {TemplateNode} */ (get_next_sibling(node));
+    var next_node = /** @type {TemplateNode} */ (next_sibling(node));
     anchor.before(node);
     node = next_node;
   }
 }
 
+function collection_to_array(collection) {
+  var array = is_array(collection) ? collection : collection == null ? [] : array_from(collection);
+
+  // If we are working with a tracked array, then we need to get a copy of
+  // the elements, as the array itself is proxied, and not useful in diffing
+  if (TRACKED_ARRAY in array) {
+    array = array_from(array);
+  }
+
+  return array;
+}
+
 export function for_block(node, get_collection, render_fn, flags) {
   var is_controlled = (flags & IS_CONTROLLED) !== 0;
+  var is_indexed = (flags & IS_INDEXED) !== 0;
   var anchor = node;
 
   if (is_controlled) {
@@ -36,21 +68,13 @@ export function for_block(node, get_collection, render_fn, flags) {
   }
 
   render(() => {
-    var block = active_block;
+    var block = /** @type {Block} */ (active_block);
     var collection = get_collection();
-    var array = is_array(collection)
-      ? collection
-      : collection == null
-        ? []
-        : array_from(collection);
-
-    // If we are working with a tracked array, then we need to get a copy of
-	// the elements, as the array itself is proxied, and not useful in diffing
-    if (TRACKED_ARRAY in array) {
-      array = array_from(array);
-    }
+    var array = collection_to_array(collection);
 
-    untrack(() => reconcile(anchor, block, array, render_fn, is_controlled));
+    untrack(() => {
+      reconcile(anchor, block, array, render_fn, is_controlled, is_indexed);
+    });
   }, FOR_BLOCK);
 }
 
@@ -64,7 +88,11 @@ function reconcile_fast_clear(anchor, block, array) {
   state.blocks = [];
 }
 
-function reconcile(anchor, block, b, render_fn, is_controlled) {
+function update_index(block, index) {
+  set(block.s.i, index, block);
+}
+
+function reconcile(anchor, block, b, render_fn, is_controlled, is_indexed) {
   var state = block.s;
 
   if (state === null) {
@@ -91,7 +119,7 @@ function reconcile(anchor, block, b, render_fn, is_controlled) {
   // Fast-path for create
   if (a_length === 0) {
     for (; j < b_length; j++) {
-      b_blocks[j] = create_item(anchor, b[j], render_fn);
+      b_blocks[j] = create_item(anchor, b[j], j, render_fn, is_indexed);
     }
     state.array = b;
     state.blocks = b_blocks;
@@ -103,11 +131,15 @@ function reconcile(anchor, block, b, render_fn, is_controlled) {
   var b_val = b[j];
   var a_end = a_length - 1;
   var b_end = b_length - 1;
+  var b_block;
 
   outer: {
     while (a_val === b_val) {
       a[j] = b_val;
-      b_blocks[j] = a_blocks[j];
+      b_block = b_blocks[j] = a_blocks[j];
+      if (is_indexed) {
+        update_index(b_block, j);
+      }
       ++j;
       if (j > a_end || j > b_end) {
         break outer;
@@ -121,7 +153,10 @@ function reconcile(anchor, block, b, render_fn, is_controlled) {
 
     while (a_val === b_val) {
       a[a_end] = b_val;
-      b_blocks[b_end] = a_blocks[a_end];
+      b_block = b_blocks[b_end] = a_blocks[a_end];
+      if (is_indexed) {
+        update_index(b_block, b_end);
+      }
       a_end--;
       b_end--;
       if (j > a_end || j > b_end) {
@@ -137,7 +172,8 @@ function reconcile(anchor, block, b, render_fn, is_controlled) {
       while (j <= b_end) {
         b_val = b[j];
         var target = j >= a_length ? anchor : a_blocks[j].s.start;
-        b_blocks[j++] = create_item(target, b_val, render_fn);
+        b_blocks[j] = create_item(target, b_val, j, render_fn, is_indexed);
+        j++;
       }
     }
   } else if (j > b_end) {
@@ -177,7 +213,10 @@ function reconcile(anchor, block, b, render_fn, is_controlled) {
               } else {
                 pos = j;
               }
-              b_blocks[j] = a_blocks[i];
+              b_block = b_blocks[j] = a_blocks[i];
+              if (is_indexed) {
+                update_index(b_block, j);
+              }
               ++patched;
               break;
             }
@@ -216,7 +255,10 @@ function reconcile(anchor, block, b, render_fn, is_controlled) {
               pos = j;
             }
             b_val = b[j];
-            b_blocks[j] = a_blocks[i];
+            block = b_blocks[j] = a_blocks[i];
+            if (is_indexed) {
+              update_index(block, j);
+            }
             ++patched;
           } else if (!fast_path_removal) {
             destroy_block(a_blocks[i]);
@@ -244,7 +286,7 @@ function reconcile(anchor, block, b, render_fn, is_controlled) {
         next_pos = pos + 1;
 
         var target = next_pos < b_length ? b_blocks[next_pos].s.start : anchor;
-        b_blocks[pos] = create_item(target, b_val, render_fn);
+        b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed);
       } else if (j < 0 || i !== seq[j]) {
         pos = i + b_start;
         b_val = b[pos];
@@ -264,7 +306,7 @@ function reconcile(anchor, block, b, render_fn, is_controlled) {
         next_pos = pos + 1;
 
         var target = next_pos < b_length ? b_blocks[next_pos].s.start : anchor;
-        b_blocks[pos] = create_item(target, b_val, render_fn);
+        b_blocks[pos] = create_item(target, b_val, pos, render_fn, is_indexed);
       }
     }
   }
@@ -361,11 +403,7 @@ export function keyed(collection, key_fn) {
     throw new Error('Duplicate keys are not allowed');
   }
 
-  var b_array = is_array(collection)
-    ? collection
-    : collection == null
-      ? []
-      : array_from(collection);
+  var b_array = collection_to_array(collection);
   var b_keys = b_array.map(key_fn);
 
   // We only need to do this in DEV

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

@@ -15,7 +15,7 @@ import {
 import { get } from './runtime.js';
 
 export function set_text(text, value) {
-  // For objects, we apply string coercion (which might make things like $state array references in the template reactive) before diffing
+  // For objects, we apply string coercion
   var str = value == null ? '' : typeof value === 'object' ? value + '' : value;
   // @ts-expect-error
   if (str !== (text.__t ??= text.nodeValue)) {
@@ -84,7 +84,8 @@ export function set_attributes(element, attributes) {
     }
 
     if (key === 'class') {
-      set_class(element, value);
+      const is_html = element.namespaceURI === 'http://www.w3.org/1999/xhtml';
+      set_class(element, value, undefined, is_html);
     } else if (key === '#class') {
       // Special case for static class when spreading props
       element.classList.add(value);
@@ -120,9 +121,10 @@ function to_class(value, hash) {
  * @param {HTMLElement} dom
  * @param {string} value
  * @param {string} [hash]
+ * @param {boolean} [is_html]
  * @returns {void}
  */
-export function set_class(dom, value, hash) {
+export function set_class(dom, value, hash, is_html = true) {
   // @ts-expect-error need to add __className to patched prototype
   var prev_class_name = dom.__className;
   var next_class_name = to_class(value, hash);
@@ -134,7 +136,11 @@ export function set_class(dom, value, hash) {
     if (value == null && !hash) {
       dom.removeAttribute('class');
     } else {
-      dom.className = next_class_name;
+      if (is_html) {
+        dom.className = next_class_name;
+      } else {
+        dom.setAttribute('class', next_class_name);
+      }
     }
 
     // @ts-expect-error need to add __className to patched prototype

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

@@ -667,6 +667,11 @@ export function get_derived(computed) {
  * @param {Derived | Tracked} tracked
  */
 export function get(tracked) {
+  // reflect back the value if it's not boxed
+  if (!is_tracked_object(tracked)) {
+    return tracked;
+  }
+
   return (tracked.f & DERIVED) !== 0
     ? get_derived(/** @type {Derived} */ (tracked))
     : get_tracked(tracked);

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

@@ -1,4 +1,9 @@
-import { TEMPLATE_FRAGMENT, TEMPLATE_USE_IMPORT_NODE } from '../../../constants.js';
+import {
+  TEMPLATE_FRAGMENT,
+  TEMPLATE_USE_IMPORT_NODE,
+  TEMPLATE_SVG_NAMESPACE,
+  TEMPLATE_MATHML_NAMESPACE,
+} from '../../../constants.js';
 import { first_child, is_firefox } from './operations.js';
 import { active_block } from './runtime.js';
 
@@ -8,21 +13,33 @@ import { active_block } from './runtime.js';
  * @param {Node} end - The end node.
  */
 export function assign_nodes(start, end) {
-  var block = /** @type {Effect} */ (active_block);
-  if (block.s === null) {
+  var block = /** @type {Block} */ (active_block);
+  var s = block.s;
+  if (s === null) {
     block.s = {
       start,
       end,
     };
+  } else if (s.start === null) {
+    s.start = start;
+    s.end = end;
   }
 }
 
 /**
  * Creates a DocumentFragment from an HTML string.
  * @param {string} html - The HTML string.
+ * @param {boolean} use_svg_namespace - Whether to use SVG namespace.
+ * @param {boolean} use_mathml_namespace - Whether to use MathML namespace.
  * @returns {DocumentFragment}
  */
-function create_fragment_from_html(html) {
+function create_fragment_from_html(html, use_svg_namespace = false, use_mathml_namespace = false) {
+  if (use_svg_namespace) {
+    return from_namespace(html, 'svg');
+  }
+  if (use_mathml_namespace) {
+    return from_namespace(html, 'math');
+  }
   var elem = document.createElement('template');
   elem.innerHTML = html;
   return elem.content;
@@ -37,12 +54,18 @@ function create_fragment_from_html(html) {
 export function template(content, flags) {
   var is_fragment = (flags & TEMPLATE_FRAGMENT) !== 0;
   var use_import_node = (flags & TEMPLATE_USE_IMPORT_NODE) !== 0;
+  var use_svg_namespace = (flags & TEMPLATE_SVG_NAMESPACE) !== 0;
+  var use_mathml_namespace = (flags & TEMPLATE_MATHML_NAMESPACE) !== 0;
   var node;
   var has_start = !content.startsWith('<!>');
 
   return () => {
     if (node === undefined) {
-      node = create_fragment_from_html(has_start ? content : '<!>' + content);
+      node = create_fragment_from_html(
+        has_start ? content : '<!>' + content,
+        use_svg_namespace,
+        use_mathml_namespace,
+      );
       if (!is_fragment) node = first_child(node);
     }
 
@@ -70,3 +93,26 @@ export function template(content, flags) {
 export function append(anchor, dom) {
   anchor.before(/** @type {Node} */ (dom));
 }
+
+/**
+ * Create fragment with proper namespace using Svelte's wrapping approach
+ * @param {string} content
+ * @param {'svg' | 'math'} ns
+ * @returns {DocumentFragment}
+ */
+function from_namespace(content, ns = 'svg') {
+  var wrapped = `<${ns}>${content}</${ns}>`;
+
+  var elem = document.createElement('template');
+  elem.innerHTML = wrapped;
+  var fragment = elem.content;
+
+  var root = /** @type {Element} */ (first_child(fragment));
+  var result = document.createDocumentFragment();
+
+  while (first_child(root)) {
+    result.appendChild(/** @type {Node} */ (first_child(root)));
+  }
+
+  return result;
+}

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

@@ -18,6 +18,24 @@ exports[`basic > basic operations 1`] = `
 </div>
 `;
 
+exports[`basic > correctly renders adjacent text nodes 1`] = `
+<div>
+  <div>
+    11
+  </div>
+  <div>
+    11
+  </div>
+  <div>
+    truetrue
+  </div>
+  <div>
+    truetrue
+  </div>
+  
+</div>
+`;
+
 exports[`basic > handles boolean attributes with no prop value provides 1`] = `
 <div>
   <div

package/tests/__snapshots__/composite.test.ripple.snap

@@ -21,3 +21,17 @@ exports[`composite components > correct handles passing through component props
   
 </div>
 `;
+
+exports[`composite components > render simple text as children 1`] = `
+<div>
+  <!---->
+  <button
+    class="my-button"
+  >
+    Click Me
+    <!---->
+  </button>
+  <!---->
+  
+</div>
+`;

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

@@ -1,5 +1,83 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`for statements > correctly handle 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 handle 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 handle 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 > correctly handles intermediate statements in for block 1`] = `
 <div>
   <div>

package/tests/basic.test.ripple

@@ -1271,4 +1271,19 @@ describe('basic', () => {
 		render(App);
 		expect(container).toMatchSnapshot();
 	});
+
+	it('correctly renders adjacent text nodes', () => {
+		component App() {
+			let a = 1;
+			let b = 1;
+			<div>{1}{1}</div>
+			<div>{a}{b}</div>
+			<div>{true}{true}</div>
+			<div>{true}{true}</div>
+		}
+
+		render(App);
+
+		expect(container).toMatchSnapshot();
+	});
 });

package/tests/composite.test.ripple

@@ -647,4 +647,21 @@ describe('composite components', () => {
 
 		expect(container.textContent).toBe('Basic Component');
 	});
+
+	it('render simple text as children', () => {
+		component App() {
+			let name = 'Click Me';
+
+			<Child
+				class="my-button"
+			>{name}</Child>;
+		}
+
+		component Child({children, ...rest}) {
+			<button {...rest}><children /></button>
+		}
+
+		render(App);
+		expect(container).toMatchSnapshot();
+	})
 });

package/tests/for.test.ripple

@@ -1,5 +1,4 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest';
-
 import { mount, flushSync, TrackedArray } from 'ripple';
 
 describe('for statements', () => {
@@ -84,5 +83,36 @@ describe('for statements', () => {
 		flushSync();
 
 		expect(container).toMatchSnapshot();
-	})
+	});
+
+	it('correctly handle the index in a for...of loop', () => {
+		component App() {
+			const items = new TrackedArray('a', 'b', 'c');
+
+			<div>
+				for (let item of items; index i) {
+					<div>{i + ' : ' + item}</div>
+				}
+			</div>
+
+			<button onClick={() => items.push(String.fromCharCode(97 + items.length))}>{'Add Item'}</button>
+			<button onClick={() => items.reverse()}>{'Reverse'}</button>
+		}
+
+		render(App);
+
+		expect(container).toMatchSnapshot();
+
+		const [button, button2] = container.querySelectorAll('button');
+
+		button.click();
+		flushSync();
+
+		expect(container).toMatchSnapshot();
+
+		button2.click();
+		flushSync();
+
+		expect(container).toMatchSnapshot();
+	});
 });