ripple 0.3.81 → 0.3.82

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # ripple
 
+## 0.3.82
+
+### Patch Changes
+
+- [`67f3794`](https://github.com/Ripple-TS/ripple/commit/67f3794d2f1ffd55dd23a47327d925d9a76a4171)
+  Thanks [@leonidaz](https://github.com/leonidaz)! - Accept a component function
+  as the `children` prop in `mount()` and `hydrate()`. Compiled component call
+  sites normalize `children` via `normalize_children`, but props passed through
+  the mount options skipped that step, so a plain component function would be
+  rendered as text. The same normalization is now applied to `options.props`,
+  which lets bootstrap code hydrate a layout with its page as `children` without
+  reaching into runtime internals.
+- Updated dependencies
+  [[`b104604`](https://github.com/Ripple-TS/ripple/commit/b10460473fec0ee68b4963cbc2a3d9d5bb3bc633)]:
+  - @tsrx/core@0.1.30
+  - @tsrx/ripple@0.1.30
+
 ## 0.3.81
 
 ### 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.81",
+  "version": "0.3.82",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",
@@ -73,8 +73,8 @@
     "clsx": "^2.1.1",
     "devalue": "^5.8.1",
     "esm-env": "^1.2.2",
-    "@tsrx/core": "0.1.29",
-    "@tsrx/ripple": "0.1.29"
+    "@tsrx/core": "0.1.30",
+    "@tsrx/ripple": "0.1.30"
   },
   "devDependencies": {
     "@types/estree": "^1.0.8",

package/src/runtime/index-client.js

@@ -11,6 +11,7 @@ import { render_component } from './internal/client/component.js';
 import { create_anchor } from './internal/client/utils.js';
 import { try_block } from './internal/client/try.js';
 import { remove_ssr_css } from './internal/client/css.js';
+import { normalize_children } from './element.js';
 import {
 	clear_track_hash_reference,
 	hydrate_node,
@@ -57,6 +58,22 @@ function render_root_boundary(anchor, render_content, boundary) {
 	);
 }
 
+/**
+ * Apply the same children normalization that compiled component call sites
+ * get, so `mount`/`hydrate` accept a component function as the `children`
+ * prop.
+ *
+ * @param {Record<string, any> | undefined} props
+ * @returns {Record<string, any>}
+ */
+function normalize_props(props) {
+	if (props?.children != null) {
+		return { ...props, children: normalize_children(props.children) };
+	}
+
+	return props || {};
+}
+
 /**
  * @param {Function} component
  * @param {{ props?: Record<string, any>, target: HTMLElement, rootBoundary?: RootBoundaryOptions }} options
@@ -66,7 +83,7 @@ export function mount(component, options) {
 	init_operations();
 	remove_ssr_css();
 
-	const props = options.props || {};
+	const props = normalize_props(options.props);
 	const target = options.target;
 	const anchor = create_anchor();
 
@@ -104,7 +121,7 @@ export function hydrate(component, options) {
 	init_operations();
 	remove_ssr_css();
 
-	const props = options.props || {};
+	const props = normalize_props(options.props);
 	const target = options.target;
 	const was_hydrating = hydrating;
 	const previous_hydrate_node = hydrate_node;