ripple 0.2.69 → 0.2.70

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.69",
+  "version": "0.2.70",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

package/src/compiler/phases/3-transform/index.js

@@ -1593,13 +1593,10 @@ function transform_children(children, context) {
           if (expression.type === 'Literal') {
             state.template.push(escape_html(expression.value));
           } else {
-            const id = state.flush_node();
+            const id = flush_node();
             state.template.push(' ');
-            state.init.push(
-              b.stmt(
-                b.assignment('=', b.member(b.call('_$_.child', id), b.id('nodeValue')), expression),
-              ),
-            );
+            // avoid set_text overhead for single text nodes
+            state.init.push(b.stmt(b.assignment('=', b.member(id, b.id('nodeValue')), expression)));
           }
         } else {
           // Handle Text nodes in fragments

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

@@ -1,7 +1,7 @@
 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 { create_text, next_sibling } from './operations.js';
 import { active_block, set, tracked, untrack } from './runtime.js';
 import { array_from, is_array } from './utils.js';
 
@@ -40,7 +40,7 @@ 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;
   }

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)) {

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/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/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();
+	})
 });