Merge pull request #25 from posthtml/milestone-0.4.0

Scrum · web-flow · commit d10ca997d663 · 2020-08-12T11:32:03.000+03:00
Milestone 0.4.0
diff --git a/README.md b/README.md
@@ -154,3 +154,55 @@ const options = { root, strict: false };
 
 posthtml([extends(options)]).then(result => console.log(result.html));
 ```
+
+### slot/fill
+
+Tag names used to match a block with content with a block for inserting content. Default `<block>`
+
+`base.html`
+```xml
+<html>
+    <head>
+        <title><slot name="title"> — Github</slot></title>
+    </head>
+
+    <body>
+        <div class="content">
+           <slot name="content"></slot>
+        </div>
+        <footer>
+            <slot name="footer">footer content</slot>
+        </footer>
+    </body>
+</html>
+```
+
+```js
+var posthtml = require('posthtml');
+var html = `<extends src="base.html">
+      <fill name="title">How to use posthtml-extend</fill>
+      <fill name="content">Read the documentation</fill>
+  </extends>`;
+
+posthtml([require('posthtml-extend')({
+    slotTagName: 'slot',
+    fillTagName: 'fill'
+})]).process(html).then(function (result) {
+    console.log(result.html);
+});
+```
+
+The final HTML will be:
+```xml
+<html>
+    <head>
+        <title>How to use posthtml-extend</title>
+    </head>
+
+    <body>
+        <div class="content">Read the documentation</div>
+        <footer>footer content</footer>
+    </body>
+</html>
+```
+
diff --git a/lib/extend.es6 b/lib/extend.es6
@@ -16,10 +16,12 @@ export default (options = {}) => {
         options.root = options.root || './';
         options.plugins = options.plugins || [];
         options.strict = Object.prototype.hasOwnProperty.call(options, 'strict') ? !!options.strict : true;
+        options.slotTagName = options.slotTagName || 'block';
+        options.fillTagName = options.fillTagName || 'block';
 
         tree = handleExtendsNodes(tree, options, tree.messages);
 
-        const blockNodes = getBlockNodes(tree);
+        const blockNodes = getBlockNodes(tree, options.slotTagName);
         for (let blockName of Object.keys(blockNodes)) {
             let blockNode = blockNodes[blockName];
             blockNode.tag = false;
@@ -42,7 +44,7 @@ function handleExtendsNodes(tree, options, messages) {
         let layoutTree = handleExtendsNodes(applyPluginsToTree(parseToPostHtml(layoutHtml), options.plugins), options, messages);
 
         extendsNode.tag = false;
-        extendsNode.content = mergeExtendsAndLayout(layoutTree, extendsNode, options.strict);
+        extendsNode.content = mergeExtendsAndLayout(layoutTree, extendsNode, options.strict, options.slotTagName, options.fillTagName);
         messages.push({
             type: 'dependency',
             file: layoutPath,
@@ -60,13 +62,13 @@ function applyPluginsToTree(tree, plugins) {
 }
 
 
-function mergeExtendsAndLayout(layoutTree, extendsNode, strictNames) {
-    const layoutBlockNodes = getBlockNodes(layoutTree);
-    const extendsBlockNodes = getBlockNodes(extendsNode.content);
+function mergeExtendsAndLayout(layoutTree, extendsNode, strictNames, slotTagName, fillTagName) {
+    const layoutBlockNodes = getBlockNodes(layoutTree, slotTagName);
+    const extendsBlockNodes = getBlockNodes(extendsNode.content, fillTagName);
 
     for (let layoutBlockName of Object.keys(layoutBlockNodes)) {
         let extendsBlockNode = extendsBlockNodes[layoutBlockName];
-        if (! extendsBlockNode) {
+        if (!extendsBlockNode) {
             continue;
         }
 
@@ -123,10 +125,10 @@ function getBlockType(blockNode) {
 }
 
 
-function getBlockNodes(content = []) {
+function getBlockNodes(content = [], tag) {
     let blockNodes = {};
 
-    match.call(content, {tag: 'block'}, node => {
+    match.call(content, {tag}, node => {
         if (! node.attrs || ! node.attrs.name) {
             throw getError(errors.BLOCK_NO_NAME);
         }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "posthtml-extend",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Templates extending (Jade-like)",
   "main": "index.js",
   "author": "Kirill Maltsev <maltsevkirill@gmail.com>",
diff --git a/test/extend.js b/test/extend.js
@@ -60,6 +60,37 @@ describe('Extend', () => {
         });
     });
 
+    it('should extend layout, change <block> to <slot> and <fill>', () => {
+        mfs.writeFileSync('./layout.html', `
+            <head><slot name="head">head</slot></head>
+            <body><slot name="body">body</slot></body>
+            <sidebar><slot name="sidebar"></slot></sidebar>
+            <div><slot name="ad">ad</slot></div>
+            <footer><slot name="footer">footer</slot></footer>
+        `);
+
+        const options = {
+            slotTagName: 'slot',
+            fillTagName: 'fill',
+        };
+
+        return init(`
+            <extends src="layout.html">
+                <fill name="ad"></fill>
+                <fill name="head"><title>hello world!</title></fill>
+                <fill name="body">Some body content</fill>
+            </extends>
+        `, options).then(html => {
+            expect(html).toBe(cleanHtml(`
+                <head><title>hello world!</title></head>
+                <body>Some body content</body>
+                <sidebar></sidebar>
+                <div></div>
+                <footer>footer</footer>
+            `));
+        });
+    });
+
     it('should extend layout with plugin', () => {
         mfs.writeFileSync('./layout.html', `
             <block name="content"></block>

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "posthtml-extend",`
`3`		`- "version": "0.3.0",`
	`3`	`+ "version": "0.4.0",`
`4`	`4`	`"description": "Templates extending (Jade-like)",`
`5`	`5`	`"main": "index.js",`
`6`	`6`	`"author": "Kirill Maltsev <maltsevkirill@gmail.com>",`