Demo
-
-
+
+
anObjectDefault
first
@@ -157,6 +157,8 @@
anArray
aComputed
Yes
+ My filled slot
+ Hello
diff --git a/examples/src/components/demo.html b/examples/src/components/demo.html
index c3aa722..d41f8ef 100644
--- a/examples/src/components/demo.html
+++ b/examples/src/components/demo.html
@@ -47,11 +47,11 @@
}
],
anArray: ['first', 'second'],
- aComputed: locals.aComputed === true ? 'Yes' : 'No',
+ aComputed: locals.aComputed === true ? 'Yes' : 'No'
};
-
+
anObjectDefault
{{ i }}: {{ o }}
@@ -95,5 +95,9 @@ anArray
aComputed
{{ aComputed }}
+
+
+ {{ $slots.name.locals.aslotlocal }}
+
diff --git a/examples/src/pages/demo.html b/examples/src/pages/demo.html
index 5144820..27d1bed 100644
--- a/examples/src/pages/demo.html
+++ b/examples/src/pages/demo.html
@@ -19,7 +19,9 @@
Demo
merge:locals='{ "something": "alocal", "anArray": [ "ten" ] }'
class="my-demo"
- >
+ >
+
My filled slot
+
diff --git a/src/slots.js b/src/slots.js
index 5f537f5..9ae60a0 100644
--- a/src/slots.js
+++ b/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;