posthtml-component 1.0.0-beta.1

package/test/templates/components/component-locals-json-and-string.html

@@ -0,0 +1,18 @@
+<script props>
+    module.exports = {
+        title: 'Default title',
+        items: ['default first item', 'default second item'],
+        titles: {
+            title: 'This is default main title',
+            subtitle: 'This is default subtitle',
+            suptitle: 'This is default suptitle'
+        },
+        mycomputed: locals.mycomputed === true ? 'Computed is true' : 'Computed is false'
+    }
+</script>
+<div>
+<div>{{ mycomputed }}</div>
+<div><h1>{{ title }}</h1></div>
+<div><each loop="item in items"><span>{{ item }}</span></each></div>
+<div><each loop="t, i in titles"><span>{{ i }}: {{ t }}</span></each></div>
+</div>

package/test/templates/components/component-locals.html

@@ -0,0 +1,7 @@
+<script props>
+    module.exports = {
+        title: 'Default title',
+        body: 'Default body'
+    }
+</script>
+<div><h1>{{title}}</h1></div><div><slot:body>{{body}}</slot:body></div>

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

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

package/test/templates/components/component-multiple-slot.html

@@ -0,0 +1 @@
+<div><slot:title></slot:title></div><div><slot:body></slot:body></div><div><slot:title></slot:title></div>

package/test/templates/components/component.html

@@ -0,0 +1 @@
+<div><slot:title></slot:title></div><div><slot:body></slot:body></div>

package/test/templates/components/form/index.html

@@ -0,0 +1 @@
+<form>My Form</form>

package/test/templates/components/modal.html

@@ -0,0 +1 @@
+<div>Modal</div>

package/test/templates/components/module-with-extend.html

@@ -0,0 +1 @@
+<div><content></content></div>

package/test/templates/components/module.html

@@ -0,0 +1 @@
+<div><content></content></div>

package/test/templates/components/nested-one-slot.html

@@ -0,0 +1,5 @@
+<div class="nested-one">
+<div class="nested-one-before"><slot:before></slot:before></div>
+<div class="nested-one-yield"><yield></yield></div>
+<div class="nested-one-after"><slot:after></slot:after></div>
+</div>

package/test/templates/components/nested-one.html

@@ -0,0 +1 @@
+<div class="nested-one"><x-nested-two></x-nested-two></div>

package/test/templates/components/nested-three.html

@@ -0,0 +1 @@
+<div class="nested-three">Nested works!</div>

package/test/templates/components/nested-two-slot.html

@@ -0,0 +1,5 @@
+<div class="nested-two">
+<div class="nested-two-before"><slot:before2></slot:before2></div>
+<div class="nested-two-yield"><yield></yield></div>
+<div class="nested-two-after"><slot:after2></slot:after2></div>
+</div>

package/test/templates/components/nested-two.html

@@ -0,0 +1 @@
+<div class="nested-two"><x-nested-three></x-nested-three></div>

package/test/templates/components/parent.html

@@ -0,0 +1,42 @@
+<script props>
+  module.exports = {
+    aBoolean: true,
+    aString: 'My String',
+    aString2: locals.aString2 === 'yes' ? 'I am string 2' : 'I am not string 2',
+    anArray: ['one', 'two', 'three'],
+    anArray2: ['one2', 'two2', 'three2'],
+    anObject: { one: 'One', two: 'Two', three: 'Three'},
+    anObject2: { one: 'One2', two: 'Two2', three: 'Three2'}
+  };
+</script>
+PARENT:
+<div>
+  aBoolean
+  value: {{ aBoolean }}
+  type: {{ typeof aBoolean }}
+
+  aString
+  value: {{ aString }}
+  type: {{ typeof aString }}
+
+  aString2
+  value: {{ aString2 }}
+  type: {{ typeof aString2 }}
+
+  anArray
+  value: {{ anArray }}
+  type: {{ typeof anArray }}
+
+  anObject
+  value: {{ anObject }}
+  type: {{ typeof anObject }}
+
+  anArray2
+  value: {{ anArray2 }}
+  type: {{ typeof anArray2 }}
+
+  anObject2
+  value: {{ anObject2 }}
+  type: {{ typeof anObject2 }}
+</div>
+<yield></yield>

package/test/templates/components/script-locals.html

@@ -0,0 +1,9 @@
+<script props>
+  module.exports = {
+    title: 'Default title',
+    slotsAccessibleViaScript: locals.$slots
+  }
+</script>
+{{ slotsAccessibleViaScript }}
+<div>{{ $slots }}</div>
+<div><h1>{{title}}</h1></div><div><slot:filled></slot:filled><slot:notfilled></slot:notfilled></div>

package/test/templates/custom/dark/components/button.html

@@ -0,0 +1 @@
+<button class="bg-dark-custom text-light-custom"><yield></yield></button>

package/test/templates/custom/dark/components/label/index.html

@@ -0,0 +1 @@
+<label>My Label</label>

package/test/templates/dark/components/button.html

@@ -0,0 +1 @@
+<button class="bg-dark text-light"><yield></yield></button>

package/test/templates/dark/components/label/index.html

@@ -0,0 +1 @@
+<label class="bg-dark text-light">My Dark Label</label>

package/test/templates/dark/layouts/base.html

@@ -0,0 +1 @@
+<html><head><title>Base Dark Layout</title></head><body><main><slot name="content"></slot></main><footer><slot name="footer">footer content</slot></footer></body></html>

package/test/templates/layouts/base-locals.html

@@ -0,0 +1,6 @@
+<script props>
+    module.exports = {
+        title: 'Default title'
+    }
+</script>
+<html><head><title>{{ title }}</title></head><body><main><yield></yield></main><footer><slot:footer></slot:footer></footer></body></html>

package/test/templates/layouts/base-render-slots-locals.html

@@ -0,0 +1,8 @@
+<html>
+<head><title>Base Render Slots Locals Layout</title></head>
+<body>
+<header>{{{ $slots.header.source }}}</header>
+<main><yield></yield></main>
+<footer>{{{ $slots.footer.source }}}</footer>
+</body>
+</html>

package/test/templates/layouts/base.html

@@ -0,0 +1,8 @@
+<html>
+<head><title>Base Layout</title></head>
+<body>
+<header><slot:header></slot:header></header>
+<main><yield></yield></main>
+<footer><slot:footer>footer content</slot:footer></footer>
+</body>
+</html>

package/test/templates/layouts/extend-with-module.html

@@ -0,0 +1,7 @@
+<html>
+<head><title>Extend With Module Layout</title></head>
+<body>
+<main><block name="content"></block></main>
+<footer><block name="footer">footer content</block></footer>
+</body>
+</html>

package/test/templates/layouts/extend.html

@@ -0,0 +1,7 @@
+<html>
+<head><title>Extend Layout</title></head>
+<body>
+<main><block name="content"></block></main>
+<footer><block name="footer">footer content</block></footer>
+</body>
+</html>

package/test/templates/layouts/playground.html

@@ -0,0 +1 @@
+<html><head><title>Playground Layout</title></head><body><main><slot></slot></main><footer><slot name="footer">default footer content</slot></footer></body></html>

package/test/templates/layouts/slot-condition.html

@@ -0,0 +1,8 @@
+<html>
+<head><title>Slot Condition Layout</title></head>
+<body>
+<main><yield></yield></main>
+<if condition="$slots.footer?.filled"><footer><slot:footer></slot:footer></footer></if>
+<else><p>There is not footer defined.</p></else>
+</body>
+</html>

package/test/templates/light/components/button.html

@@ -0,0 +1 @@
+<button class="bg-light text-dark"><slot name="content"></slot></button>

package/test/templates/light/layouts/base.html

@@ -0,0 +1 @@
+<html><head><title>Base Light Layout</title></head><body><main><slot name="content"></slot></main><footer><slot name="footer">footer content</slot></footer></body></html>

package/test/test-errors.js

@@ -0,0 +1,39 @@
+'use strict';
+
+const test = require('ava');
+const plugin = require('../src');
+const posthtml = require('posthtml');
+const clean = html => html.replace(/(\n|\t)/g, '').trim();
+
+test('Must fail when namespace is unknown', async t => {
+  const actual = `<div><x-unknown-namespace::button>Submit</x-unknown-namespace::button></div>`;
+
+  await t.throwsAsync(async () => posthtml([plugin({root: './test/templates', strict: true})]).process(actual).then(result => clean(result.html)));
+});
+
+test('Must return node as-is when namespace is unknown with strict mode disabled', async t => {
+  const actual = `<div><x-unknown-namespace::button>Submit</x-unknown-namespace::button></div>`;
+  const expected = `<div><x-unknown-namespace::button>Submit</x-unknown-namespace::button></div>`;
+
+  const html = await posthtml([plugin({root: './test/templates', strict: false})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});
+
+test('Must return node as-is when namespace is empty with strict mode disabled', async t => {
+  const actual = `<div><x-empty-namespace::button>Submit</x-empty-namespace::button></div>`;
+  const expected = `<div><x-empty-namespace::button>Submit</x-empty-namespace::button></div>`;
+
+  const html = await posthtml([plugin({root: './test/templates', strict: false, namespaces: [{name: 'empty-namespace', root: './test/templates/empty-namespace'}]})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});
+
+test('Must return node as-is when component is not found with strict mode disabled', async t => {
+  const actual = `<div><x-button>Submit</x-button></div>`;
+  const expected = `<div><x-button>Submit</x-button></div>`;
+
+  const html = await posthtml([plugin({root: './test/templates/empty-root', strict: false})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});

package/test/test-locals.js

@@ -0,0 +1,74 @@
+'use strict';
+
+const test = require('ava');
+const plugin = require('../src');
+const posthtml = require('posthtml');
+const clean = html => html.replace(/(\n|\t)/g, '').trim();
+
+test('Must process layout with locals', async t => {
+  const actual = `<component src="layouts/base-locals.html" locals='{ "title": "My Page" }'><div>Content</div><fill:footer>Footer</fill:footer></component>`;
+  const expected = `<html><head><title>My Page</title></head><body><main><div>Content</div></main><footer>Footer</footer></body></html>`;
+
+  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});
+
+test('Must process attributes as locals', async t => {
+  const actual = `<component src="components/component-locals.html" title="My Component Title" body="Content"><fill:body prepend><span>Body</span></fill:body></component>`;
+  const expected = `<div><h1>My Component Title</h1></div><div><span>Body</span>Content</div>`;
+
+  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});
+
+test('Must process default attributes and map attributes not locals to first node', async t => {
+  const actual = `<component src="components/component-mapped-attributes.html" title="My Title" class="bg-light p-2" style="display: flex; font-size: 20px"></component>`;
+  const expected = `<div class="text-dark m-3 bg-light p-2" style="display: flex; font-size: 20px">My Title Default body</div>`;
+
+  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});
+
+test('Must process component with locals as JSON and string', async t => {
+  const actual = `<component src="components/component-locals-json-and-string.html"
+                    merge:titles='{ "suptitle": "This is custom suptitle" }'
+                    title="Custom title from JSON and String"
+                    items='["another item", "yet another"]'
+                    computed:mycomputed="true"
+                    merge:locals='{ "items": ["first item", "second item"] }'></component>`;
+  const expected = `<div><div>Computed is true</div><div><h1>Custom title from JSON and String</h1></div><div><span>another item</span><span>yet another</span><span>first item</span><span>second item</span></div><div><span>title: This is default main title</span><span>subtitle: This is default subtitle</span><span>suptitle: This is custom suptitle</span></div></div>`;
+
+  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});
+
+test('Must process parent and child locals via component', async t => {
+  const actual = `<x-parent aString="I am custom aString for PARENT via component (1)"><x-child></x-child></x-parent>`;
+  const expected = `PARENT:<div>  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</div>CHILD:<div>  aBoolean  value: true  type: boolean  aString  value: My String Child  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</div>`;
+
+  const html = await posthtml([plugin({root: './test/templates/components'})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});
+
+test('Must has access to $slots in script locals', async t => {
+  const actual = `<x-script-locals><fill:filled>filled slot content...</fill:filled></x-script-locals>`;
+  const expected = `{"filled":{"filled":true,"rendered":false,"tag":"fill:filled","attrs":{},"content":["filled slot content..."],"source":"filled slot content...","locals":{}}}<div>{"filled":{"filled":true,"rendered":false,"tag":"fill:filled","attrs":{},"content":["filled slot content..."],"source":"filled slot content...","locals":{}}}</div><div><h1>Default title</h1></div><div>filled slot content...</div>`;
+
+  const html = await posthtml([plugin({root: './test/templates/components'})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});
+
+// test('Must pass locals from parent to child via aware', async t => {
+//   const actual = `<x-parent aware:aString="I am custom aString for PARENT via component (1)"><x-child></x-child></x-parent>`;
+//   const expected = `PARENT:<div>  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</div>  CHILD:<div>  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</div>`;
+//
+//   const html = await posthtml([plugin({root: './test/templates/components'})]).process(actual).then(result => clean(result.html));
+//
+//   t.is(html, expected);
+// });

package/test/test-nested.js

@@ -0,0 +1,24 @@
+'use strict';
+
+const test = require('ava');
+const plugin = require('../src');
+const posthtml = require('posthtml');
+const clean = html => html.replace(/(\n|\t)/g, '').trim();
+
+test('Must process all nested component to html', async t => {
+  const actual = `<div><x-nested-one></x-nested-one></div>`;
+  const expected = `<div><div class="nested-one"><div class="nested-two"><div class="nested-three">Nested works!</div></div></div></div>`;
+
+  const html = await posthtml([plugin({root: './test/templates/components'})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});
+
+test('Must process all nested component with slots to html', async t => {
+  const actual = `<x-nested-one-slot><x-nested-two-slot>yield content<fill:before2>nested-two before</fill:before2><fill:after2>nested-two after</fill:after2></x-nested-two-slot><fill:before>nested-one before</fill:before><fill:after>nested-one after</fill:after></x-nested-one-slot>`;
+  const expected = `<div class="nested-one"><div class="nested-one-before">nested-one before</div><div class="nested-one-yield"><div class="nested-two"><div class="nested-two-before">nested-two before</div><div class="nested-two-yield">yield content</div><div class="nested-two-after">nested-two after</div></div></div><div class="nested-one-after">nested-one after</div></div>`;
+
+  const html = await posthtml([plugin({root: './test/templates/components'})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});

package/test/test-plugins.js

@@ -0,0 +1,33 @@
+'use strict';
+
+// const test = require('ava');
+// const plugin = require('../src');
+// const posthtml = require('posthtml');
+// const clean = html => html.replace(/(\n|\t)/g, '').trim();
+
+// test('Must work with posthtml-extend syntax', async t => {
+//   const actual = `<extends src="layouts/extend.html"><block name="content">My Content</block></extends>`;
+//   const expected = `<html><head><title>Extend Layout</title></head><body><main>My Content</main><footer>footer content</footer></body></html>`;
+//
+//   const html = await posthtml([plugin({root: './test/templates', tagName: 'extends', attribute: 'src', slotTagName: 'block', fillTagName: 'block'})]).process(actual).then(result => clean(result.html));
+//
+//   t.is(html, expected);
+// });
+//
+// test('Must work with posthtml-modules syntax', async t => {
+//   const actual = `<module href="components/module.html">My Module Content</module>`;
+//   const expected = `<div>My Module Content</div>`;
+//
+//   const html = await posthtml([plugin({root: './test/templates', tagName: 'module', attribute: 'href', slotTagName: 'content'})]).process(actual).then(result => clean(result.html));
+//
+//   t.is(html, expected);
+// });
+//
+// test('Must work with posthtml-extend and posthtml-modules syntax together', async t => {
+//   const actual = `<extends src="layouts/extend-with-module.html"><block name="content"><module href="components/module-with-extend.html">My Module Content</module></block></extends>`;
+//   const expected = `<html><head><title>Extend With Module Layout</title></head><body><main><div>My Module Content</div></main><footer>footer content</footer></body></html>`;
+//
+//   const html = await posthtml([plugin({root: './test/templates', tagNames: ['extends', 'module'], attributes: ['src', 'href'], slotTagName: 'block', fillTagName: 'block', fallbackSlotTagName: true})]).process(actual).then(result => clean(result.html));
+//
+//   t.is(html, expected);
+// });

package/test/test-slots.js

@@ -0,0 +1,76 @@
+'use strict';
+
+const test = require('ava');
+const plugin = require('../src');
+const posthtml = require('posthtml');
+const clean = html => html.replace(/(\n|\t)/g, '').trim();
+
+test('Must process with slots', async t => {
+  const actual = `<component src="layouts/base.html"><div>Main content</div><fill:header><h1>My header</h1></fill:header><fill:footer>My footer</fill:footer></component>`;
+  const expected = `<html><head><title>Base Layout</title></head><body><header><h1>My header</h1></header><main><div>Main content</div></main><footer>My footer</footer></body></html>`;
+
+  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});
+
+test('Must process the same component multiple times', async t => {
+  const actual = `<component src="components/component.html"><fill:title>Title</fill:title><fill:body>Body</fill:body></component><component src="components/component.html"><fill:title>Title 2</fill:title><fill:body>Body 2</fill:body></component>`;
+  const expected = `<div>Title</div><div>Body</div><div>Title 2</div><div>Body 2</div>`;
+
+  const html = await posthtml([plugin({root: './test/templates/', tag: 'component'})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});
+
+test('Must process multiple time a slot with aware attribute', async t => {
+  // With aware
+  let actual = `<component src="components/component-multiple-slot.html"><fill:title aware>Title</fill:title><fill:body>Body</fill:body></component>`;
+  let expected = `<div>Title</div><div>Body</div><div>Title</div>`;
+
+  let html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+
+  // Without aware
+  actual = `<component src="components/component-multiple-slot.html"><fill:title>Title</fill:title><fill:body>Body</fill:body></component>`;
+  expected = `<div>Title</div><div>Body</div><div></div>`;
+
+  html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});
+
+test('Must process append and prepend content to slot', async t => {
+  const actual = `<component src="components/component-append-prepend.html"><fill:title append><span>Append</span></fill:title><fill:body prepend><span>Prepend</span></fill:body></component>`;
+  const expected = `<div>Title<span>Append</span></div><div><span>Prepend</span>Body</div>`;
+
+  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});
+
+test('Must process slots conditional rendering by using slot name', async t => {
+  let actual = `<component src="layouts/slot-condition.html"><h1>Content</h1></component>`;
+  let expected = `<html><head><title>Slot Condition Layout</title></head><body><main><h1>Content</h1></main><p>There is not footer defined.</p></body></html>`;
+
+  let html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+
+  actual = `<component src="layouts/slot-condition.html"><h1>Content</h1><fill:footer>There is now footer defined</fill:footer></component>`;
+  expected = `<html><head><title>Slot Condition Layout</title></head><body><main><h1>Content</h1></main><footer>There is now footer defined</footer></body></html>`;
+
+  html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});
+
+test('Must render slots using $slots locals', async t => {
+  const actual = `<component src="layouts/base-render-slots-locals.html"><div>Main content</div><fill:header><h1>My header</h1></fill:header><fill:footer>My footer</fill:footer></component>`;
+  const expected = `<html><head><title>Base Render Slots Locals Layout</title></head><body><header><h1>My header</h1></header><main><div>Main content</div></main><footer>My footer</footer></body></html>`;
+
+  const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});

package/test/test-x-tag.js

@@ -0,0 +1,69 @@
+'use strict';
+
+const test = require('ava');
+const plugin = require('../src');
+const posthtml = require('posthtml');
+const clean = html => html.replace(/(\n|\t)/g, '').trim();
+
+test('Must process component with x-tag', async t => {
+  const actual = `<x-modal></x-modal>`;
+  const expected = `<div>Modal</div>`;
+
+  const html = await posthtml([plugin({root: './test/templates/components'})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});
+
+test('Must process component with namespace', async t => {
+  const actual = `<x-dark::button>My button</x-dark::button>`;
+  const expected = `<button class="bg-dark text-light">My button</button>`;
+
+  const html = await posthtml([plugin({root: './test/templates', namespaces: [{name: 'dark', root: './test/templates/dark/components'}]})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});
+
+test('Must process component with namespace using index file', async t => {
+  const actual = `<x-dark::label></x-dark::label>`;
+  const expected = `<label class="bg-dark text-light">My Dark Label</label>`;
+
+  const html = await posthtml([plugin({root: './test/templates', namespaces: [{name: 'dark', root: './test/templates/dark/components'}]})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});
+
+test(`Must process component with namespace's fallback path`, async t => {
+  const actual = `<x-dark::modal></x-dark::modal>`;
+  const expected = `<div>Modal</div>`;
+
+  const html = await posthtml([plugin({root: './test/templates', namespaces: [{name: 'dark', root: './test/templates/dark/components', fallback: './test/templates/components'}]})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});
+
+test(`Must process component with namespace's fallback path using index file`, async t => {
+  const actual = `<x-dark::form></x-dark::form>`;
+  const expected = `<form>My Form</form>`;
+
+  const html = await posthtml([plugin({root: './test/templates', namespaces: [{name: 'dark', root: './test/templates/dark/components', fallback: './test/templates/components'}]})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});
+
+test(`Must process component with namespace's custom path`, async t => {
+  const actual = `<x-dark::button>My button</x-dark::button>`;
+  const expected = `<button class="bg-dark-custom text-light-custom">My button</button>`;
+
+  const html = await posthtml([plugin({root: './test/templates', namespaces: [{name: 'dark', root: './test/templates/dark/components', custom: './test/templates/custom/dark/components'}]})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});
+
+test(`Must process component with namespace's custom path using index file`, async t => {
+  const actual = `<x-dark::label></x-dark::label>`;
+  const expected = `<label>My Label</label>`;
+
+  const html = await posthtml([plugin({root: './test/templates', namespaces: [{name: 'dark', root: './test/templates/dark/components', custom: './test/templates/custom/dark/components'}]})]).process(actual).then(result => clean(result.html));
+
+  t.is(html, expected);
+});

package/xo.config.js

@@ -0,0 +1,15 @@
+module.exports = {
+  space: true,
+  rules: {
+    'max-params': 0,
+    'ava/no-skip-test': 0,
+    'prefer-object-spread': 0,
+    'capitalized-comments': 0,
+    'unicorn/string-content': 0,
+    'promise/prefer-await-to-then': 0,
+    'unicorn/no-array-reduce': 0,
+    'import/extensions': 0,
+    'prefer-regex-literals': 0,
+    quotes: ['error', 'single', {allowTemplateLiterals: true}]
+  }
+};