ripple 0.2.69 → 0.2.71

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.71",
   "type": "module",
   "module": "src/runtime/index.js",
   "main": "src/runtime/index.js",

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

@@ -680,7 +680,7 @@ const visitors = {
       const update = [];
 
       if (!is_void) {
-        transform_children(node.children, {
+        transform_children(node.children, node, {
           visit,
           state: { ...state, init, update, namespace: child_namespace },
           root: false,
@@ -1454,7 +1454,7 @@ function transform_ts_child(node, context) {
   }
 }
 
-function transform_children(children, context) {
+function transform_children(children, element, context) {
   const { visit, state, root } = context;
   const normalized = [];
 
@@ -1576,6 +1576,8 @@ function transform_children(children, context) {
 
       prev = flush_node;
 
+      const is_controlled = normalized.length === 1 && element !== null;
+
       if (node.type === 'Element') {
         visit(node, { ...state, flush_node, namespace: state.namespace });
       } else if (node.type === 'Text') {
@@ -1593,13 +1595,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
@@ -1611,15 +1610,12 @@ function transform_children(children, context) {
           }
         }
       } else if (node.type === 'ForOfStatement') {
-        const is_controlled = normalized.length === 1;
         node.is_controlled = is_controlled;
         visit(node, { ...state, flush_node, namespace: state.namespace });
       } else if (node.type === 'IfStatement') {
-        const is_controlled = normalized.length === 1;
         node.is_controlled = is_controlled;
         visit(node, { ...state, flush_node, namespace: state.namespace });
       } else if (node.type === 'TryStatement') {
-        const is_controlled = normalized.length === 1;
         node.is_controlled = is_controlled;
         visit(node, { ...state, flush_node, namespace: state.namespace });
       } else {
@@ -1656,7 +1652,7 @@ function transform_body(body, { visit, state }) {
     namespace: state.namespace || 'html', // Preserve namespace context
   };
 
-  transform_children(body, { visit, state: body_state, root: true });
+  transform_children(body, null, { visit, state: body_state, root: true });
 
   if (body_state.update.length > 0) {
     body_state.init.push(b.stmt(b.call('_$_.render', b.thunk(b.block(body_state.update)))));

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