Merge pull request #35 from philicevic/pass-data

Scrum · web-flow · commit fefdd4faca5d · 2020-02-27T09:16:33.000+03:00
feat: pass data to partial
diff --git a/README.md b/README.md
@@ -45,6 +45,9 @@ posthtml: (webpack) => {
 }
 ```
 
+### Component options
+__locals__: Object containing any local variables that you want to be accessible inside the include component
+
 <h2 align="center">Usage</h2>
 
 __index.html__
@@ -55,14 +58,16 @@ __index.html__
     <title>index.html</title>
 </head>
 <body>
-    <include src="components/button.html"></include>
+    <include src="components/button.html" locals='{
+        "text": "Button"
+    }'></include>
 </body>
 </html>
 ```
 
 __components/button.html__
 ```html
-<button class="button"><div class="button__text">Button</div></button>
+<button class="button"><div class="button__text">{{ text }}</div></button>
 ```
 
 ```js
@@ -85,7 +90,7 @@ posthtml([ include({ encoding: 'utf8' }) ])
 </head>
 <body>
   <button class="button">
-    <div class="button__text">Text</div>
+    <div class="button__text">Button</div>
   </button>
 </body>
 </html>
diff --git a/index.js b/index.js
@@ -2,6 +2,8 @@ var parser = require('posthtml-parser');
 var match = require('posthtml/lib/api').match;
 var fs = require('fs');
 var path = require('path');
+var posthtml = require('posthtml');
+var expressions = require('posthtml-expressions');
 
 module.exports = function(options) {
     options = options || {};
@@ -13,12 +15,20 @@ module.exports = function(options) {
         if (!tree.match) tree.match = match;
         tree.match({ tag: 'include' }, function(node) {
             var src = node.attrs.src || false;
+            var locals = node.attrs.locals || false;
             var content;
             var subtree;
             var source;
             if (src) {
                 src = path.resolve(options.root, src);
                 source = fs.readFileSync(src, options.encoding);
+                if (locals) {
+                    locals = JSON.parse(locals);
+                    var result = posthtml()
+                        .use(expressions({ locals: locals }))
+                        .process(source, { sync: true });
+                    source = result.html;
+                }
                 subtree = tree.parser(source);
                 subtree.match = tree.match;
                 subtree.parser = tree.parser;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "main": "index.js",
   "dependencies": {
     "posthtml": "^0.12.0",
+    "posthtml-expressions": "^1.1.1",
     "posthtml-parser": "^0.4.2"
   },
   "devDependencies": {
diff --git a/test/includes/3.html b/test/includes/3.html
@@ -0,0 +1 @@
+<h2>{{ text }}</h2>
diff --git a/test/test.js b/test/test.js
@@ -43,6 +43,15 @@ describe('Simple test', function() {
         );
     });
 
+    it('include with locals', function(done) {
+        test(
+            `<h1>index</h1><include src="./includes/3.html" locals='{"text": 3}'></include>`,
+            `<h1>index</h1><h2>3</h2>`,
+            { root: './test/' },
+            done
+        );
+    });
+
     it('messages dependency for addDependency', function(done) {
         var includePath = require('path').resolve('./test/blocks/button/button.html');
 
