fusee-framework 2.7.0 → 2.7.1

package/framework/core/jsx-helpers.js

@@ -1,4 +1,4 @@
-import { hFor, hIf } from './h.js'
+import { hFor, hIf, hText } from './h.js'
 
 /**
  * Flattens JSX children into a single array of fnodes, dropping
@@ -6,7 +6,8 @@ import { hFor, hIf } from './h.js'
  * behave the way JSX authors expect. Recursively flattens nested arrays,
  * which is all Fragment needs: it returns its children as-is, and whatever
  * consumes those children (h()'s children arg, or another flattenChildren
- * call) inlines them automatically.
+ * call) inlines them automatically. Text and numbers become text nodes, and
+ * getters (dynamic `{expr}` wrapped by the Babel plugin) become reactive ones.
  */
 export function flattenChildren(children) {
     const out = []
@@ -19,6 +20,14 @@ export function flattenChildren(children) {
             stack.unshift(...child)
             continue
         }
+        if (typeof child === 'string' || typeof child === 'number' || typeof child === 'bigint') {
+            out.push(hText(String(child)))
+            continue
+        }
+        if (typeof child === 'function') {
+            out.push(hText(child))
+            continue
+        }
         out.push(child)
     }
 

package/framework/core/jsx-runtime.js

@@ -1,74 +1,74 @@
-// Point your bundler at this module and JSX compiles here with zero custom
-// parser/Babel plugin needed yet:
-//   - esbuild/Vite:  jsx: 'automatic', jsxImportSource: '<path-to-this-folder>'
-//   - tsconfig.json: "jsx": "react-jsx", "jsxImportSource": "<path-to-this-folder>"
-
-import { h, createComponent } from './h.js'
-import {
-    Fragment,
-    For,
-    Show,
-    Slot,
-    on,
-    flattenChildren,
-    normalizeEventProps,
-    normalizeComponentListenerProps,
-    splitSlotChildren
-} from './jsx-helpers.js'
-import { defineComponent as coreDefineComponent } from '../component.js' // adjust to your project layout
-
-export { Fragment, For, Show, Slot, on }
-
-/**
- * Wraps defineComponent so JSX can tell "a fusée component" apart from a
- * plain helper function (Fragment/For/Show/Slot, or your own stateless JSX
- * helpers). Import defineComponent from here instead of component.js in
- * any file that defines components with JSX.
- */
-export function defineComponent(options) {
-    const factory = coreDefineComponent(options)
-    factory._isFuseeComponent = true
-    factory._componentName = options?.name
-    return factory
-}
-
-/** Dispatches a JSX element to h() (DOM tags), createComponent() (fusée components), or a direct call (helpers). */
-function createNode(type, rawProps) {
-    const { children, ...rest } = rawProps || {}
-
-    if (type === Fragment) {
-        return Fragment({ children })
-    }
-
-    if (typeof type === 'string') {
-        return h(type, normalizeEventProps(rest), flattenChildren(children))
-    }
-
-    if (typeof type === 'function' && type._isFuseeComponent) {
-        const name = type._componentName || type.name || 'AnonymousComponent'
-        const props = normalizeComponentListenerProps(rest)
-        return createComponent(name, type, props, splitSlotChildren(children))
-    }
-
-    if (typeof type === 'function') {
-        return type({ ...rest, children })
-    }
-
-    console.warn('[fusée] Unsupported JSX element type:', type)
-    return null
-}
-
-/** Automatic JSX runtime entry point for a single (or statically known) child. */
-export function jsx(type, props, _key) {
-    return createNode(type, props)
-}
-
-/** Automatic JSX runtime entry point when children are a static array. */
-export function jsxs(type, props, _key) {
-    return createNode(type, props)
-}
-
-/** Dev-mode entry point; fusée doesn't use the extra source/self-closing args (yet). */
-export function jsxDEV(type, props, _key, _isStaticChildren, _source, _self) {
-    return createNode(type, props)
+// Point your bundler at this module and JSX compiles here with zero custom
+// parser/Babel plugin needed yet:
+//   - esbuild/Vite:  jsx: 'automatic', jsxImportSource: '<path-to-this-folder>'
+//   - tsconfig.json: "jsx": "react-jsx", "jsxImportSource": "<path-to-this-folder>"
+
+import { h, createComponent } from './h.js'
+import {
+    Fragment,
+    For,
+    Show,
+    Slot,
+    on,
+    flattenChildren,
+    normalizeEventProps,
+    normalizeComponentListenerProps,
+    splitSlotChildren
+} from './jsx-helpers.js'
+import { defineCompiledComponent as coreDefineComponent } from './component-core.js'
+
+export { Fragment, For, Show, Slot, on }
+
+/**
+ * Wraps defineComponent so JSX can tell "a fusée component" apart from a
+ * plain helper function (Fragment/For/Show/Slot, or your own stateless JSX
+ * helpers). Import defineComponent from here instead of component.js in
+ * any file that defines components with JSX.
+ */
+export function defineComponent(options) {
+    const factory = coreDefineComponent(options)
+    factory._isFuseeComponent = true
+    factory._componentName = options?.name
+    return factory
+}
+
+/** Dispatches a JSX element to h() (DOM tags), createComponent() (fusée components), or a direct call (helpers). */
+function createNode(type, rawProps) {
+    const { children, ...rest } = rawProps || {}
+
+    if (type === Fragment) {
+        return Fragment({ children })
+    }
+
+    if (typeof type === 'string') {
+        return h(type, normalizeEventProps(rest), flattenChildren(children))
+    }
+
+    if (typeof type === 'function' && type._isFuseeComponent) {
+        const name = type._componentName || type.name || 'AnonymousComponent'
+        const props = normalizeComponentListenerProps(rest)
+        return createComponent(name, type, props, splitSlotChildren(children))
+    }
+
+    if (typeof type === 'function') {
+        return type({ ...rest, children })
+    }
+
+    console.warn('[fusée] Unsupported JSX element type:', type)
+    return null
+}
+
+/** Automatic JSX runtime entry point for a single (or statically known) child. */
+export function jsx(type, props, _key) {
+    return createNode(type, props)
+}
+
+/** Automatic JSX runtime entry point when children are a static array. */
+export function jsxs(type, props, _key) {
+    return createNode(type, props)
+}
+
+/** Dev-mode entry point; fusée doesn't use the extra source/self-closing args (yet). */
+export function jsxDEV(type, props, _key, _isStaticChildren, _source, _self) {
+    return createNode(type, props)
 }