Merge pull request #26 from cossssmin/custom-tag

Scrum · web-flow · commit 9d414abb5914 · 2020-08-19T09:05:15.000+03:00
feat: custom extends tag
diff --git a/README.md b/README.md
@@ -92,10 +92,16 @@ The final HTML will be:
 
 ### encoding
 
-The encoding of the parent template. Default: "utf8".
+Type: `string`\
+Default: `utf8`
+
+The encoding of the parent template.
 
 ### plugins
 
+Type: `array`\
+Default: `[]`
+
 You can include [other PostHTML plugins](http://posthtml.github.io/posthtml-plugins/) in your templates.
 Here is an example of using [posthtml-expressions](https://github.com/posthtml/posthtml-expressions), which allows to use variables and conditions:
 
@@ -136,17 +142,23 @@ The final HTML will be:
 
 ### root
 
-The path to the root template directory. Default: "./".
+Type: `string`\
+Default: `./`
+
+The path to the root template directory.
 
 ### strict
 
-Whether the plugin should disallow undeclared block names. Default: true.
+Type: `boolean`\
+Default: `true`
+
+Whether the plugin should disallow undeclared block names.
 
-By default, posthtml-extend raises an exception if an undeclared block name is encountered. This can be useful for troubleshooting (i.e. detecting typos in block names), but
+By default, the plugin raises an exception if an undeclared block name is encountered. This can be useful for troubleshooting (i.e. detecting typos in block names), but
 there are cases where "forward declaring" a block name as an extension point for downstream templates is useful, so this restriction can be lifted by setting the `strict`
 option to a false value:
 
-```javascript
+```js
 const extend = require('posthtml-extend');
 
 const root = './src/html';
@@ -157,7 +169,10 @@ 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>`
+Type: `string`\
+Default: `block`
+
+Tag names used to match a content block with a block for inserting content.
 
 `base.html`
 ```xml
@@ -187,9 +202,7 @@ var html = `<extends src="base.html">
 posthtml([require('posthtml-extend')({
     slotTagName: 'slot',
     fillTagName: 'fill'
-})]).process(html).then(function (result) {
-    console.log(result.html);
-});
+})]).process(html).then(result => console.log(result.html));
 ```
 
 The final HTML will be:
@@ -206,3 +219,36 @@ The final HTML will be:
 </html>
 ```
 
+### tagName
+
+Type: `string`\
+Default: `extends`
+
+The tag name to use when extending.
+
+```js
+var posthtml = require('posthtml');
+var html = `<layout src="base.html">
+    <block name="title">Using a custom tag name</block>
+    <block name="content">Read the documentation</block>
+</layout>`;
+
+posthtml([require('posthtml-extend')({
+    tagName: 'layout',
+})]).process(html).then(result => console.log(result.html));
+```
+
+The final HTML will be:
+
+```html
+<html>
+    <head>
+        <title>Using a custom tag name</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
@@ -18,6 +18,7 @@ export default (options = {}) => {
         options.strict = Object.prototype.hasOwnProperty.call(options, 'strict') ? !!options.strict : true;
         options.slotTagName = options.slotTagName || 'block';
         options.fillTagName = options.fillTagName || 'block';
+        options.tagName = options.tagName || 'extends';
 
         tree = handleExtendsNodes(tree, options, tree.messages);
 
@@ -34,7 +35,7 @@ export default (options = {}) => {
 };
 
 function handleExtendsNodes(tree, options, messages) {
-    match.call(applyPluginsToTree(tree, options.plugins), {tag: 'extends'}, extendsNode => {
+    match.call(applyPluginsToTree(tree, options.plugins), {tag: options.tagName}, extendsNode => {
         if (! extendsNode.attrs || ! extendsNode.attrs.src) {
             throw getError(errors.EXTENDS_NO_SRC);
         }
diff --git a/test/extend.js b/test/extend.js
@@ -117,6 +117,26 @@ describe('Extend', () => {
         });
     });
 
+    it('should extend layout using a custom tag name', () => {
+        mfs.writeFileSync('./layout.html', `
+            <head><block name="head">head</block></head>
+            <body><block name="body">body</block></body>
+        `);
+
+        return init(
+            `<layout src="layout.html">
+                <block name="head"><title>hello world!</title></block>
+                <block name="body">Some body content</block>
+            </layout>`,
+            {
+                tagName: 'layout'
+            }).then(html => {
+            expect(html).toBe(cleanHtml(`
+                    <head><title>hello world!</title></head>
+                    <body>Some body content</body>
+            `));
+        });
+    });
 
     it('should extend inherited layout', () => {
         mfs.writeFileSync('./base.html', `
