Add default slot

README.md

@@ -217,6 +217,8 @@ let d = {
 return rend.html(d)
 ```
 
+You can find a full example of this [here](https://github.com/treeder/rend/tree/2886f788da4a2b5ab51048b0eb51b98f0316f5d9/examples/bun-hono).
+
 ## Using with various platforms
 
 

examples/bun-hono/app.js

@@ -12,7 +12,7 @@ console.log("apiURL:", apiURL)
 
 
 let rend = new Rend({
-    header, footer, 
+    header, footer,
     data: {
         apiURL,
     }
@@ -73,6 +73,22 @@ app.get('/islands2', async (c) => {
     return rend2.html(d)
 })
 
+// implementing a layout like this: https://thingster.app/things/qsXjgXN2TD6CsL5gpmVRd
+// trying a different way, more like normal components
+app.get('/defaultSlot', async (c) => {
+    let d = {
+        name: "John Wick",
+        car: "Mustang Boss 429",
+        greeting: msg('Hello, how are you?', {
+            id: 'greeting', // This is the localization ID to lookup in the es.js file
+            locale: 'es', // Snag the user's locale from a cookie, or 'Accept-Language' or something instead of hardcoding here.
+        }),
+        // slotted content:
+        rail: await import('./views/drawer.js'),
+    }
+    return rend2.html(new HomePage(), d)
+})
+
 app.notFound(async function (c) {
     console.log("not found handler", c.req.path)
     let parts = c.req.path.split('/')

examples/bun-hono/views/layout.js

@@ -8,7 +8,10 @@ export async function layout(d) {
     <div class="container">
         <div class="flex" style="gap: 12px;">
             <div>${await slot('rail', d)}</div>
-            <div>${await slot('main', d)}</div>
+            <div>
+                ${await slot('main', d)}
+                ${await slot('', d)} <!-- default slot for unnamed content -->
+            </div>
         </div>
     </div>
 

rend.js

@@ -21,25 +21,28 @@ export class Rend {
 
         // if single param, then it's new slotted way, so just single input
         // console.log("typeof d", typeof d,d)
-        if(typeof d === 'undefined'){
-            d = bodyFunc
-        }
+        let d2 = d
 
         let o = this.options
         if (!d) d = {}
+        if (!d.__rend__) d.__rend__ = {}
         if (this.options.data) {
             d = { ...o.data, ...d }
         }
 
         if (o.layout) {
-            console.log("SLOTTED!!!")
             // new slotted style
+            d.__rend__.slotted = true
+            if (typeof d2 === 'undefined') {
+                console.log("d is undefined")
+                d = { ...d, ...bodyFunc } // the single param is the data map
+            } else {
+                d.__default__ = bodyFunc
+            }
             let b = await renderBody(o.layout, d)
             return b
         } else {
-
             let b = await renderBody(bodyFunc, d)
-
             if (d.rend?.nowrap) {
                 return b
             }

src/render.js

@@ -2,7 +2,7 @@ var templates = {}
 
 export async function renderBody(bodyFunc, d) {
     let b
-    // console.log("typeof bodyFunc", typeof bodyFunc, bodyFunc)
+    console.log("typeof bodyFunc", typeof bodyFunc, bodyFunc)
     if (!bodyFunc) {
         b = 'no render'
     } else if (typeof bodyFunc === 'function') {

src/slots.js

@@ -1,8 +1,12 @@
 import { renderBody } from './render.js'
 
 export async function slot(name, d) {
-    // console.log("slot", name, d)
-    if (d[name]) {
+    console.log("slot:", name)
+    if (!name && d.__default__) {
+        console.log("using default slot", d)
+        return await renderBody(d.__default__, d)
+    } else if (d[name]) {
+        console.log("using named slot")
         return await renderBody(d[name], d)
     }
     return ''