Fix override style and class

posthtml · Oct 26, 2022 · 81ee560 · 81ee560
1 parent c683cea
commit 81ee560
Show file tree

Hide file tree

Showing 13 changed files with 352 additions and 15 deletions.
diff --git a/docs/demo.html b/docs/demo.html
@@ -73,7 +73,7 @@ <h1 class="display-1 fw-bold mb-4">Demo</h1>
         <div class="modal-content modal-content-custom">
           <div class="modal-header">
             <h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
-            <button type="button" class="btn" override:class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
           </div>
           <!-- /.modal-header -->
           <div class="modal-body">

diff --git a/docs/docs.html b/docs/docs.html
@@ -193,6 +193,12 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="#contributing">Contributing</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="#credits">Credits</a>
+                </li>
               </ul>
             </nav>
             <h2 id="installation" tabindex="-1">
@@ -1110,6 +1116,59 @@ <h3 id="props" tabindex="-1">
               .
 By default, it's used to concat array.
             </p>
+            <p>
+              By default, all props are scoped to the component, and are not available to nested components. You can however change this accordingly to your need.
+Let's see below example.
+            </p>
+            <p>Create a component:</p>
+            <pre><code class="language-html">&lt;!-- src/child.html --&gt;
+&lt;script props&gt;
+  module.exports = {
+    prop: 'Default prop value'
+  }
+&lt;/script&gt;
+&lt;div&gt;
+  Prop in child: {{ prop }}
+&lt;/div&gt;</code></pre>
+            <p>Create another component that use the first one:</p>
+            <pre><code class="language-html">&lt;!-- src/parent.html --&gt;
+&lt;script props&gt;
+  module.exports = {
+    prop: 'Default prop value'
+  }
+&lt;/script&gt;
+&lt;div&gt;
+  Prop in parent: {{ prop }}
+  &lt;x-child&gt;&lt;/x-child&gt;
+&lt;/div&gt;</code></pre>
+            <p>Use:</p>
+            <pre><code class="language-html">&lt;x-parent prop=&quot;My prop&quot;&gt;&lt;/x-parent&gt;</code></pre>
+            <p>The output will be:</p>
+            <pre><code class="language-html">&lt;div&gt;
+  Prop in parent: My prop
+  &lt;div&gt;
+    Prop in child: Default prop value
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+            <p>
+              As you can see
+              <code>prop</code>
+              in
+              <code>x-child</code>
+              component are default value and not the one set via
+              <code>x-parent</code>
+              . Prepend
+              <code>aware:</code>
+              to the attribute name to pass the props to nested components.
+            </p>
+            <pre><code class="language-html">&lt;x-parent aware:prop=&quot;My prop&quot;&gt;&lt;/x-parent&gt;</code></pre>
+            <p>The output now will be:</p>
+            <pre><code class="language-html">&lt;div&gt;
+  Prop in parent: My prop
+  &lt;div&gt;
+    Prop in child: My prop
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
             <h3 id="attributes" tabindex="-1">
               <a class="header-anchor" href="#attributes">#</a>
               Attributes
@@ -1439,7 +1498,36 @@ <h3 id="posthtml-extends" tabindex="-1">
               <a class="header-anchor" href="#posthtml-extends">#</a>
               PostHTML Extends
             </h3>
-            <p>Not yet tested.</p>
+            <p>
+              So far it works fine together with
+              <code>posthtml-components</code>
+              plugin.
+            </p>
+            <h2 id="contributing" tabindex="-1">
+              <a class="header-anchor" href="#contributing">#</a>
+              Contributing
+            </h2>
+            <p>
+              See
+              <a href="https://github.com/posthtml/posthtml/tree/master/docs">PostHTML Guidelines</a>
+              and
+              <a href="CONTRIBUTING.md">contribution guide</a>
+              .
+            </p>
+            <h2 id="credits" tabindex="-1">
+              <a class="header-anchor" href="#credits">#</a>
+              Credits
+            </h2>
+            <p>
+              Thanks to all PostHTML contributors and especially to
+              <code>posthtml-extend</code>
+              and
+              <code>posthtml-modules</code>
+              contributors, as part of code are
+              <s>stolen</s>
+              inspired from these plugins.
+Huge thanks also to Laravel Blade template engine.
+            </p>
           </div>
         </div>
       </div>
@@ -1466,7 +1554,7 @@ <h3 id="posthtml-extends" tabindex="-1">
         <div class="modal-content modal-content-custom">
           <div class="modal-header">
             <h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
-            <button type="button" class="btn" override:class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
           </div>
           <!-- /.modal-header -->
           <div class="modal-body">

diff --git a/docs/index.html b/docs/index.html
@@ -89,7 +89,7 @@ <h1 class="display-1 fw-bold mb-4">Build the web with PostHTML</h1>
         <div class="modal-content modal-content-custom">
           <div class="modal-header">
             <h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
-            <button type="button" class="btn" override:class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
           </div>
           <!-- /.modal-header -->
           <div class="modal-body">

diff --git a/docs/test.html b/docs/test.html
@@ -243,7 +243,7 @@ <h1>Child yield</h1>
         <div class="modal-content modal-content-custom">
           <div class="modal-header">
             <h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
-            <button type="button" class="btn" override:class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
           </div>
           <!-- /.modal-header -->
           <div class="modal-body">

diff --git a/examples/dist/demo.html b/examples/dist/demo.html
@@ -73,7 +73,7 @@ <h1 class="display-1 fw-bold mb-4">Demo</h1>
         <div class="modal-content modal-content-custom">
           <div class="modal-header">
             <h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
-            <button type="button" class="btn" override:class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
           </div>
           <!-- /.modal-header -->
           <div class="modal-body">

diff --git a/examples/dist/docs.html b/examples/dist/docs.html
@@ -193,6 +193,12 @@
                     </li>
                   </ul>
                 </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="#contributing">Contributing</a>
+                </li>
+                <li class="nav-item">
+                  <a class="nav-link" href="#credits">Credits</a>
+                </li>
               </ul>
             </nav>
             <h2 id="installation" tabindex="-1">
@@ -1110,6 +1116,59 @@ <h3 id="props" tabindex="-1">
               .
 By default, it's used to concat array.
             </p>
+            <p>
+              By default, all props are scoped to the component, and are not available to nested components. You can however change this accordingly to your need.
+Let's see below example.
+            </p>
+            <p>Create a component:</p>
+            <pre><code class="language-html">&lt;!-- src/child.html --&gt;
+&lt;script props&gt;
+  module.exports = {
+    prop: 'Default prop value'
+  }
+&lt;/script&gt;
+&lt;div&gt;
+  Prop in child: {{ prop }}
+&lt;/div&gt;</code></pre>
+            <p>Create another component that use the first one:</p>
+            <pre><code class="language-html">&lt;!-- src/parent.html --&gt;
+&lt;script props&gt;
+  module.exports = {
+    prop: 'Default prop value'
+  }
+&lt;/script&gt;
+&lt;div&gt;
+  Prop in parent: {{ prop }}
+  &lt;x-child&gt;&lt;/x-child&gt;
+&lt;/div&gt;</code></pre>
+            <p>Use:</p>
+            <pre><code class="language-html">&lt;x-parent prop=&quot;My prop&quot;&gt;&lt;/x-parent&gt;</code></pre>
+            <p>The output will be:</p>
+            <pre><code class="language-html">&lt;div&gt;
+  Prop in parent: My prop
+  &lt;div&gt;
+    Prop in child: Default prop value
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
+            <p>
+              As you can see
+              <code>prop</code>
+              in
+              <code>x-child</code>
+              component are default value and not the one set via
+              <code>x-parent</code>
+              . Prepend
+              <code>aware:</code>
+              to the attribute name to pass the props to nested components.
+            </p>
+            <pre><code class="language-html">&lt;x-parent aware:prop=&quot;My prop&quot;&gt;&lt;/x-parent&gt;</code></pre>
+            <p>The output now will be:</p>
+            <pre><code class="language-html">&lt;div&gt;
+  Prop in parent: My prop
+  &lt;div&gt;
+    Prop in child: My prop
+  &lt;/div&gt;
+&lt;/div&gt;</code></pre>
             <h3 id="attributes" tabindex="-1">
               <a class="header-anchor" href="#attributes">#</a>
               Attributes
@@ -1439,7 +1498,36 @@ <h3 id="posthtml-extends" tabindex="-1">
               <a class="header-anchor" href="#posthtml-extends">#</a>
               PostHTML Extends
             </h3>
-            <p>Not yet tested.</p>
+            <p>
+              So far it works fine together with
+              <code>posthtml-components</code>
+              plugin.
+            </p>
+            <h2 id="contributing" tabindex="-1">
+              <a class="header-anchor" href="#contributing">#</a>
+              Contributing
+            </h2>
+            <p>
+              See
+              <a href="https://github.com/posthtml/posthtml/tree/master/docs">PostHTML Guidelines</a>
+              and
+              <a href="CONTRIBUTING.md">contribution guide</a>
+              .
+            </p>
+            <h2 id="credits" tabindex="-1">
+              <a class="header-anchor" href="#credits">#</a>
+              Credits
+            </h2>
+            <p>
+              Thanks to all PostHTML contributors and especially to
+              <code>posthtml-extend</code>
+              and
+              <code>posthtml-modules</code>
+              contributors, as part of code are
+              <s>stolen</s>
+              inspired from these plugins.
+Huge thanks also to Laravel Blade template engine.
+            </p>
           </div>
         </div>
       </div>
@@ -1466,7 +1554,7 @@ <h3 id="posthtml-extends" tabindex="-1">
         <div class="modal-content modal-content-custom">
           <div class="modal-header">
             <h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
-            <button type="button" class="btn" override:class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
           </div>
           <!-- /.modal-header -->
           <div class="modal-body">

diff --git a/examples/dist/index.html b/examples/dist/index.html
@@ -89,7 +89,7 @@ <h1 class="display-1 fw-bold mb-4">Build the web with PostHTML</h1>
         <div class="modal-content modal-content-custom">
           <div class="modal-header">
             <h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
-            <button type="button" class="btn" override:class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
           </div>
           <!-- /.modal-header -->
           <div class="modal-body">

diff --git a/examples/dist/test.html b/examples/dist/test.html
@@ -243,7 +243,7 @@ <h1>Child yield</h1>
         <div class="modal-content modal-content-custom">
           <div class="modal-header">
             <h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
-            <button type="button" class="btn" override:class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
           </div>
           <!-- /.modal-header -->
           <div class="modal-body">

diff --git a/examples/src/md/introduction.md b/examples/src/md/introduction.md
@@ -601,6 +601,74 @@ You can also notice how the `class` attribute is merged with `class` attribute o
 You can change how attributes are merged by passing via options a callback function used by lodash method [mergeWith](https://lodash.com/docs/4.17.15#mergeWith).
 By default, it's used to concat array.
 
+By default, all props are scoped to the component, and are not available to nested components. You can however change this accordingly to your need.
+Let's see below example.
+
+Create a component:
+
+```html
+<!-- src/child.html -->
+<script props>
+  module.exports = {
+    prop: 'Default prop value'
+  }
+</script>
+<div>
+  Prop in child: {{ prop }}
+</div>
+```
+
+Create another component that use the first one:
+
+
+```html
+<!-- src/parent.html -->
+<script props>
+  module.exports = {
+    prop: 'Default prop value'
+  }
+</script>
+<div>
+  Prop in parent: {{ prop }}
+  <x-child></x-child>
+</div>
+```
+
+Use:
+
+```html
+<x-parent prop="My prop"></x-parent>
+```
+
+The output will be:
+
+```html
+<div>
+  Prop in parent: My prop
+  <div>
+    Prop in child: Default prop value
+  </div>
+</div>
+```
+
+As you can see `prop` in `x-child` component are default value and not the one set via `x-parent`. Prepend `aware:` to the attribute name to pass the props to nested components.
+
+
+```html
+<x-parent aware:prop="My prop"></x-parent>
+```
+
+The output now will be:
+
+```html
+<div>
+  Prop in parent: My prop
+  <div>
+    Prop in child: My prop
+  </div>
+</div>
+```
+
 ### Attributes
 
 Your can pass any attributes to your components and this will be added to the first node of your component, or to the node with an attribute named `attributes`.
@@ -908,4 +976,22 @@ NOTE: If you change `<yield>` tag to `<content>` to support your existing code,
 
 ### PostHTML Extends
 
-Not yet tested.
+So far it works fine together with `posthtml-components` plugin.
+
+## Contributing
+
+See [PostHTML Guidelines](https://github.com/posthtml/posthtml/tree/master/docs) and [contribution guide](CONTRIBUTING.md).
+
+[npm]: https://img.shields.io/npm/v/posthtml-component.svg
+[npm-url]: https://www.npmjs.com/package/posthtml-component
+
+[style]: https://img.shields.io/badge/code_style-XO-5ed9c7.svg
+[style-url]: https://github.com/sindresorhus/xo
+
+[cover]: https://coveralls.io/repos/thewebartisan7/posthtml-components/badge.svg?branch=main
+[cover-badge]: https://coveralls.io/r/thewebartisan7/posthtml-components?branch=main
+
+## Credits
+
+Thanks to all PostHTML contributors and especially to `posthtml-extend` and `posthtml-modules` contributors, as part of code are ~~stolen~~ inspired from these plugins.
+Huge thanks also to Laravel Blade template engine.