Refactor slot with underscore

Author: thewebartisan7

examples/dist/demo.html

@@ -48,8 +48,8 @@
         <div class="row">
           <div class="col-lg-8">
             <h1 class="display-1 fw-bold mb-4">Demo</h1>
-            <div class="wrapper">
-              <div class="demo my-demo" something="alocal">
+            <div class="wrapper my-demo" something="alocal">
+              <div class="demo">
                 <h1>anObjectDefault</h1>
                 <p>
                   <strong>first</strong>
@@ -157,6 +157,8 @@ <h1>anArray</h1>
                 <hr>
                 <h1>aComputed</h1>
                 <p>Yes</p>
+                My filled slot
+      Hello
               </div>
             </div>
           </div>

examples/src/components/demo.html

@@ -47,11 +47,11 @@
       }
     ],
     anArray: ['first', 'second'],
-    aComputed: locals.aComputed === true ? 'Yes' : 'No',
+    aComputed: locals.aComputed === true ? 'Yes' : 'No'
   };
 </script>
 <div class="wrapper">
-  <div class="demo" attributes>
+  <div class="demo">
     <h1>anObjectDefault</h1>
     <each loop="o,i in anObjectDefault">
       <p><strong>{{ i }}</strong>: {{ o }}</p>
@@ -95,5 +95,9 @@ <h1>anArray</h1>
 
     <h1>aComputed</h1>
     <p>{{ aComputed }}</p>
+
+    <slot:name>
+      {{ $slots.name.locals.aslotlocal }}
+    </slot:name>
   </div>
 </div>

examples/src/pages/demo.html

@@ -19,7 +19,9 @@ <h1 class="display-1 fw-bold mb-4">Demo</h1>
         merge:locals='{ "something": "alocal", "anArray": [ "ten" ] }'
 
         class="my-demo"
-      ></x-demo>
+      >
+        <fill:name aslotlocal="Hello" prepend>My filled slot</fill:name>
+      </x-demo>
     </div>
   </div>
 </x-page>

src/slots.js

@@ -2,6 +2,9 @@
 
 const {match} = require('posthtml/lib/api');
 const {render} = require('posthtml-render');
+const {each, omit} = require('underscore');
+
+const separator = ':';
 
 /**
  * Set filled slots
@@ -17,15 +20,14 @@ function setFilledSlots(currentNode, filledSlots, {fill}) {
       fillNode.attrs = {};
     }
 
-    const name = fillNode.tag.split(':')[1];
+    const name = fillNode.tag.split(separator)[1];
 
-    /** @var {Object} locals - NOT YET TESTED */
-    const locals = Object.fromEntries(Object.entries(fillNode.attrs).filter(([attributeName]) => ![name, 'type'].includes(attributeName)));
+    const locals = omit(fillNode.attrs, [name, 'type', 'append', 'prepend', 'aware']);
 
     if (locals) {
-      Object.keys(locals).forEach(local => {
+      each(locals, (value, key, attrs) => {
         try {
-          locals[local] = JSON.parse(locals[local]);
+          attrs[key] = JSON.parse(value);
         } catch {}
       });
     }
@@ -54,7 +56,7 @@ function setFilledSlots(currentNode, filledSlots, {fill}) {
  */
 function processFillContent(tree, filledSlots, {fill}) {
   match.call(tree, {tag: fill}, fillNode => {
-    const name = fillNode.tag.split(':')[1];
+    const name = fillNode.tag.split(separator)[1];
 
     if (!filledSlots[name]) {
       filledSlots[name] = {};
@@ -83,7 +85,7 @@ function processFillContent(tree, filledSlots, {fill}) {
  */
 function processSlotContent(tree, filledSlots, {slot}) {
   match.call(tree, {tag: slot}, slotNode => {
-    const name = slotNode.tag.split(':')[1];
+    const name = slotNode.tag.split(separator)[1];
 
     slotNode.tag = false;