Nested component tested

package.json

@@ -21,7 +21,7 @@
   ],
   "dependencies": {
     "deepmerge": "^4.2.2",
-    "posthtml": "^0.16.5",
+    "posthtml-attrs-parser": "^0.1.1",
     "posthtml-expressions": "^1.9.0",
     "posthtml-parser": "^0.11.0"
   },

src/find-path.js

@@ -117,8 +117,6 @@ function findPathByNamespace(tag, [namespace, fileNameFromTag], options) {
 function findPathByRoot(tag, fileNameFromTag, options) {
   let root = options.roots.find(root => fs.existsSync(path.join(options.root, root, fileNameFromTag)));
 
-  options.roots.find(root => console.warn(path.join(options.root, root, fileNameFromTag)));
-
   if (!root) {
     // Check if module exist in folder `tag-name/index.html`
     fileNameFromTag = fileNameFromTag

src/index.js

@@ -3,7 +3,9 @@
 const fs = require('fs');
 const path = require('path');
 const expressions = require('posthtml-expressions');
+const scriptDataLocals = require('posthtml-expressions/lib/locals');
 const {parser: parseToPostHtml} = require('posthtml-parser');
+const parseAttrs = require('posthtml-attrs-parser')
 const {match} = require('posthtml/lib/api');
 const merge = require('deepmerge');
 const findPathFromTagName = require('./find-path');
@@ -32,12 +34,24 @@ function processNodes(tree, options, messages) {
 
     delete attributes.locals;
 
-    options.expressions.locals = merge(options.expressions.locals, attributes);
-    const plugins = [...options.plugins, expressions(options.expressions)];
+    attributes = merge(options.expressions.locals, attributes);
 
     const layoutPath = path.resolve(options.root, node.attrs.src);
     const layoutHtml = fs.readFileSync(layoutPath, options.encoding);
-    const layoutTree = processNodes(applyPluginsToTree(parseToPostHtml(layoutHtml), plugins), options, messages);
+    const parsedHtml = parseToPostHtml(layoutHtml);
+
+    // Retrieve default locals from <script defaultLocals> and merge with attributes
+    const {locals: defaultLocals} = scriptDataLocals(parsedHtml, {localsAttr: options.scriptLocalAttribute, removeScriptLocals: true, locals: attributes});
+    if (defaultLocals) {
+      attributes = merge(defaultLocals, attributes);
+    }
+
+    console.log(`defaultLocals %s`, defaultLocals);
+
+    options.expressions.locals = attributes;
+    const plugins = [...options.plugins, expressions(options.expressions)];
+
+    const layoutTree = processNodes(applyPluginsToTree(parsedHtml, plugins), options, messages);
 
     node.tag = false;
     node.content = mergeSlots(layoutTree, node, options.strict, options.slotTagName);
@@ -162,7 +176,8 @@ module.exports = (options = {}) => {
       expressions: {},
       plugins: [],
       encoding: 'utf8',
-      strict: false
+      strict: false,
+      scriptLocalAttribute: 'defaultLocals'
     },
     ...options
   };

test/templates/components/component-mapped-attributes.html

@@ -0,0 +1,7 @@
+<script defaultLocals>
+    module.exports = {
+        title: 'Default title',
+        body: 'Default body'
+    }
+</script>
+<div class="text-dark m-3" $attributes>{{ title }} {{ body }}</div>

test/test-core.js

@@ -67,3 +67,12 @@ test('Must output html of component with custom tag', async t => {
 
   t.is(html, expected);
 });
+
+test('Must output html of component with mapped attributes', async t => {
+  const actual = `<component src="components/component-mapped-attributes.html" class="bg-light p-2" title="My Title"></component>`;
+  const expected = `<div class="text-dark m-3" $attributes="">My Title Default body</div>`;
+
+  const html = await posthtml([plugin({root: './test/templates/', roots: 'components/'})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});