From 728b4cf9385dcc5d2799be6986877f31ffcd0021 Mon Sep 17 00:00:00 2001
From: Travis Reeder <treeder@gmail.com>
Date: Wed, 31 Jan 2024 14:09:18 +0000
Subject: [PATCH] Add default slot

---
 README.md                         |  2 ++
 examples/bun-hono/app.js          | 18 +++++++++++++++++-
 examples/bun-hono/views/layout.js |  5 ++++-
 rend.js                           | 15 +++++++++------
 src/render.js                     |  2 +-
 src/slots.js                      |  8 ++++++--
 6 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index d81e622..7fb058b 100644
--- a/README.md
+++ b/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
 
 
diff --git a/examples/bun-hono/app.js b/examples/bun-hono/app.js
index a350cd2..ed5b00f 100644
--- a/examples/bun-hono/app.js
+++ b/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('/')
diff --git a/examples/bun-hono/views/layout.js b/examples/bun-hono/views/layout.js
index 4a8b3ff..66828f4 100644
--- a/examples/bun-hono/views/layout.js
+++ b/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>
 
diff --git a/rend.js b/rend.js
index f4c8113..ba3bd5a 100644
--- a/rend.js
+++ b/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
             }
diff --git a/src/render.js b/src/render.js
index 072c649..c49d941 100644
--- a/src/render.js
+++ 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') {
diff --git a/src/slots.js b/src/slots.js
index b7add0e..213b3ee 100644
--- a/src/slots.js
+++ b/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 ''