diff --git a/src/index.js b/src/index.js
index 98d29af..a137865 100644
--- a/src/index.js
+++ b/src/index.js
@@ -53,7 +53,7 @@ function processNodes(tree, options, messages) {
const html = parseToPostHtml(fs.readFileSync(filePath, options.encoding));
- options.expressions.locals = {...options.locals};
+ options.expressions.locals = {...options.locals, ...options.aware};
const slotsLocals = parseSlotsLocals(options.slotTagName, html, node.content);
const {attributes, locals} = parseLocals(options, slotsLocals, node, html);
@@ -121,6 +121,7 @@ function parseLocals(options, slotsLocals, {attrs}, html) {
// only for Array or Objects
const mergeAttributeWithDefault = [];
const computedAttributes = [];
+ const awareAttributes = [];
Object.keys(attributes).forEach(attribute => {
if (attribute.startsWith('merge:')) {
const newAttributeName = attribute.replace('merge:', '');
@@ -132,6 +133,11 @@ function parseLocals(options, slotsLocals, {attrs}, html) {
attributes[newAttributeName] = attributes[attribute];
delete attributes[attribute];
computedAttributes.push(newAttributeName);
+ } else if (attribute.startsWith('aware:')) {
+ const newAttributeName = attribute.replace('aware:', '');
+ attributes[newAttributeName] = attributes[attribute];
+ delete attributes[attribute];
+ awareAttributes.push(newAttributeName);
}
});
@@ -168,12 +174,7 @@ function parseLocals(options, slotsLocals, {attrs}, html) {
const attributesToBeMerged = Object.fromEntries(Object.entries(attributes).filter(([attribute]) => mergeAttributeWithDefault.includes(attribute)));
const localsToBeMerged = Object.fromEntries(Object.entries(locals).filter(([local]) => mergeAttributeWithDefault.includes(local)));
if (Object.keys(localsToBeMerged).length > 0) {
- console.log({localsToBeMerged, attributesToBeMerged});
- console.log(attributes);
mergeAttributeWithDefault.forEach(attribute => {
- console.log(attribute);
- console.log(typeof localsToBeMerged[attribute]);
- console.log(typeof attributesToBeMerged[attribute]);
attributes[attribute] = merge(localsToBeMerged[attribute], attributesToBeMerged[attribute]);
});
}
@@ -186,6 +187,10 @@ function parseLocals(options, slotsLocals, {attrs}, html) {
});
}
+ if (awareAttributes.length > 0) {
+ options.aware = Object.fromEntries(Object.entries(attributes).filter(([attribute]) => awareAttributes.includes(attribute)));
+ }
+
return {attributes, locals};
}
@@ -479,6 +484,7 @@ module.exports = (options = {}) => {
}
options.locals = {...options.expressions.locals};
+ options.aware = {};
return function (tree) {
tree = processNodes(tree, options, tree.messages);
diff --git a/test/templates/components/child.html b/test/templates/components/child.html
index 3294d15..80bdff1 100644
--- a/test/templates/components/child.html
+++ b/test/templates/components/child.html
@@ -9,6 +9,7 @@
anObject2: { one: 'One2', two: 'Two2', three: 'Three2'}
};
+CHILD:
aBoolean
value: {{ aBoolean }}
diff --git a/test/test-locals.js b/test/test-locals.js
index 2ad23de..b08176d 100644
--- a/test/test-locals.js
+++ b/test/test-locals.js
@@ -50,7 +50,7 @@ test('Must process component with locals as JSON and string', async t => {
test('Must process parent and child locals via component', async t => {
const actual = `
`;
- const expected = `PARENT:
aBoolean value: true type: boolean aString value: I am custom aString for PARENT via component (1) type: string aString2 value: I am not string 2 type: string anArray value: ["one","two","three"] type: object anObject value: {"one":"One","two":"Two","three":"Three"} type: object anArray2 value: ["one2","two2","three2"] type: object anObject2 value: {"one":"One2","two":"Two2","three":"Three2"} type: object
aBoolean value: true type: boolean aString value: My String type: string aString2 value: I am not string 2 type: string anArray value: ["one","two","three"] type: object anObject value: {"one":"One","two":"Two","three":"Three"} type: object anArray2 value: ["one2","two2","three2"] type: object anObject2 value: {"one":"One2","two":"Two2","three":"Three2"} type: object
`;
+ const expected = `PARENT:
aBoolean value: true type: boolean aString value: I am custom aString for PARENT via component (1) type: string aString2 value: I am not string 2 type: string anArray value: ["one","two","three"] type: object anObject value: {"one":"One","two":"Two","three":"Three"} type: object anArray2 value: ["one2","two2","three2"] type: object anObject2 value: {"one":"One2","two":"Two2","three":"Three2"} type: object
CHILD:
aBoolean value: true type: boolean aString value: My String type: string aString2 value: I am not string 2 type: string anArray value: ["one","two","three"] type: object anObject value: {"one":"One","two":"Two","three":"Three"} type: object anArray2 value: ["one2","two2","three2"] type: object anObject2 value: {"one":"One2","two":"Two2","three":"Three2"} type: object
`;
const html = await posthtml([plugin({root: './test/templates/components'})]).process(actual).then(result => clean(result.html));
@@ -59,7 +59,7 @@ test('Must process parent and child locals via component', async t => {
test('Must process parent and child locals via slots', async t => {
const actual = `
`;
- const expected = `PARENT:
aBoolean value: true type: boolean aString value: I am custom aString for PARENT via component (1) type: string aString2 value: I am not string 2 type: string anArray value: ["one","two","three"] type: object anObject value: {"one":"One","two":"Two","three":"Three"} type: object anArray2 value: ["one2","two2","three2"] type: object anObject2 value: {"one":"One2","two":"Two2","three":"Three2"} type: object
aBoolean value: true type: boolean aString value: I am custom aString for PARENT via component (1) type: string aString2 value: I am not string 2 type: string anArray value: ["one","two","three"] type: object anObject value: {"one":"One","two":"Two","three":"Three"} type: object anArray2 value: ["one2","two2","three2"] type: object anObject2 value: {"one":"One2","two":"Two2","three":"Three2"} type: object
`;
+ const expected = `PARENT:
aBoolean value: true type: boolean aString value: I am custom aString for PARENT via component (1) type: string aString2 value: I am not string 2 type: string anArray value: ["one","two","three"] type: object anObject value: {"one":"One","two":"Two","three":"Three"} type: object anArray2 value: ["one2","two2","three2"] type: object anObject2 value: {"one":"One2","two":"Two2","three":"Three2"} type: object
CHILD:
aBoolean value: true type: boolean aString value: I am custom aString for PARENT via component (1) type: string aString2 value: I am not string 2 type: string anArray value: ["one","two","three"] type: object anObject value: {"one":"One","two":"Two","three":"Three"} type: object anArray2 value: ["one2","two2","three2"] type: object anObject2 value: {"one":"One2","two":"Two2","three":"Three2"} type: object
`;
const html = await posthtml([plugin({root: './test/templates/components'})]).process(actual).then(result => clean(result.html));
@@ -74,3 +74,12 @@ test('Must has access to $slots in script locals', async t => {
t.is(html, expected);
});
+
+test('Must pass locals from parent to child via aware', async t => {
+ const actual = `
`;
+ const expected = `PARENT:
aBoolean value: true type: boolean aString value: I am custom aString for PARENT via component (1) type: string aString2 value: I am not string 2 type: string anArray value: ["one","two","three"] type: object anObject value: {"one":"One","two":"Two","three":"Three"} type: object anArray2 value: ["one2","two2","three2"] type: object anObject2 value: {"one":"One2","two":"Two2","three":"Three2"} type: object
CHILD:
aBoolean value: true type: boolean aString value: I am custom aString for PARENT via component (1) type: string aString2 value: I am not string 2 type: string anArray value: ["one","two","three"] type: object anObject value: {"one":"One","two":"Two","three":"Three"} type: object anArray2 value: ["one2","two2","three2"] type: object anObject2 value: {"one":"One2","two":"Two2","three":"Three2"} type: object
`;
+
+ const html = await posthtml([plugin({root: './test/templates/components'})]).process(actual).then(result => clean(result.html));
+
+ t.is(html, expected);
+});