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); +});