From 7b1682927a4dc570edff274d1c1667cba7b15465 Mon Sep 17 00:00:00 2001
From: Damir <laraloop.com@gmail.com>
Date: Fri, 28 Oct 2022 03:35:10 +0200
Subject: [PATCH] Remove computed: and merge: and using always script props for
 locals

---
 docs/demo.html                                |   6 +-
 docs/docs.html                                | 170 +++---------------
 docs/index.html                               |   6 +-
 docs/test.html                                |  64 ++-----
 examples/dist/demo.html                       |   6 +-
 examples/dist/docs.html                       | 170 +++---------------
 examples/dist/index.html                      |   6 +-
 examples/dist/test.html                       |  64 ++-----
 examples/src/components/modal/index.html      |   8 +-
 examples/src/layouts/page.html                |  10 +-
 examples/src/md/introduction.md               | 136 ++++----------
 readme.md                                     | 118 ++++--------
 src/locals.js                                 |  34 +---
 test/templates/components/child.html          |  12 +-
 .../component-locals-json-and-string.html     |  18 +-
 .../components/component-locals-type.html     |  12 +-
 .../components/component-locals.html          |   4 +-
 .../component-mapped-attributes.html          |   4 +-
 .../component-mapped-attributes2.html         |   4 +-
 .../component-mapped-attributes3.html         |   4 +-
 test/templates/components/parent.html         |  12 +-
 test/templates/components/script-locals.html  |   2 +-
 test/templates/layouts/base-locals.html       |   2 +-
 test/test-locals.js                           |  12 +-
 24 files changed, 215 insertions(+), 669 deletions(-)

diff --git a/docs/demo.html b/docs/demo.html
index 43ab5ba..d68d387 100644
--- a/docs/demo.html
+++ b/docs/demo.html
@@ -68,9 +68,9 @@ <h1 class="display-1 fw-bold mb-4">Demo</h1>
         </div>
       </div>
     </footer>
-    <div class="modal fade" id="modalWithComponents" data-bs-backdrop="true" data-bs-keyboard="true" aria-labelledby="modalWithComponents" tabindex="-1" aria-hidden="true" aria-modal="true" role="dialog">
-      <div class="modal-dialog modal-lg modal-fullscreen-lg-down modal-dialog-centered modal-dialog-custom">
-        <div class="modal-content modal-content-custom">
+    <div class="modal fade" id="modalWithComponents" data-bs-backdrop="true" data-bs-keyboard="true" aria-labelledby="modalWithComponents" tabindex="-1" aria-hidden="true" aria-modal="true" role="dialog" dialogclass="modal-dialog-custom" contentclass="modal-content-custom">
+      <div class="modal-dialog modal-lg modal-fullscreen-lg-down modal-dialog-centered">
+        <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
diff --git a/docs/docs.html b/docs/docs.html
index 1af5b27..5de3cd1 100644
--- a/docs/docs.html
+++ b/docs/docs.html
@@ -181,23 +181,6 @@
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="#migration">Migration</a>
-                  <ul class="nav flex-column">
-                    <li class="nav-item">
-                      <a class="nav-link" href="#posthtml-include">PostHTML Include</a>
-                    </li>
-                    <li class="nav-item">
-                      <a class="nav-link" href="#posthtml-modules">PostHTML Modules</a>
-                    </li>
-                    <li class="nav-item">
-                      <a class="nav-link" href="#posthtml-extends">PostHTML Extends</a>
-                    </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>
@@ -562,11 +545,11 @@ <h2 id="options" tabindex="-1">
                   <td style="text-align:left">
                     Function callback passed to lodash
                     <code>mergeWith</code>
-                    for attribute
+                    for merge
+                    <code>options.expressions.locals</code>
+                    and locals passed via attribute
                     <code>locals</code>
-                    and
-                    <code>merge:attribute</code>
-                    . By default it's used to concat array.
+                    .
                   </td>
                 </tr>
               </tbody>
@@ -1006,18 +989,16 @@ <h3 id="props" tabindex="-1">
               <a href="https://github.com/posthtml/posthtml-expressions">posthtml-expressions</a>
               plugin, with feature to pass
               <code>props</code>
-              (locals) via attributes, define default via
-              <code>&lt;script props&gt;</code>
-              , merge with default and use
+              (locals) via attributes and manipulate them via
               <code>&lt;script props&gt;</code>
-              as computed.
+              .
             </p>
             <p>Let's see how it works with a few examples starting with a basic one.</p>
             <p>Create the component:</p>
             <pre><code class="language-html">&lt;!-- src/my-component.html --&gt;
 &lt;script props&gt;
   module.exports = {
-    prop: 'Default prop value'
+    prop: locals.prop || 'Default prop value'
   }
 &lt;/script&gt;
 &lt;div&gt;
@@ -1051,24 +1032,19 @@ <h3 id="props" tabindex="-1">
 More details on this in the next section.
             </p>
             <p>
-              So by default
+              So in the
               <code>&lt;script props&gt;</code>
-              act as default value, like the
-              <code>@props</code>
-              you define with Laravel Blade.
-You can change this behaviour by prepending
-              <code>computed</code>
-              or
-              <code>merge</code>
-              to the attribute name like shown below.
+              you have access to passed props via object
+              <code>locals</code>
+              , and you can add any logic you need inside of it.
             </p>
             <p>Create the component:</p>
             <pre><code class="language-html">&lt;!-- src/modal.html --&gt;
 &lt;script props&gt;
   module.exports = {
-    title: 'Default title', // This will be the default value
-    size: locals.size ? `modal-${locals.size}` : '', // This will be a computed value, so it's always used
-    items: ['first', 'second'] // This will be merged
+    title: locals.title || 'Default title', 
+    size: locals.size ? `modal-${locals.size}` : '', 
+    items: Array.isArray(locals.items) ? locals.items.concat(['first', 'second']) : ['first', 'second']
   }
 &lt;/script&gt;
 &lt;div class=&quot;modal {{ size }}&quot;&gt;
@@ -1080,7 +1056,7 @@ <h3 id="props" tabindex="-1">
   &lt;/div&gt;
 &lt;/div&gt;</code></pre>
             <p>Use:</p>
-            <pre><code class="language-html">&lt;x-modal computed:size=&quot;xl&quot; title=&quot;My modal title&quot; merge:items='[&quot;third&quot;, &quot;fourth&quot;]' class=&quot;modal-custom&quot;&gt;&lt;/x-modal&gt;</code></pre>
+            <pre><code class="language-html">&lt;x-modal size=&quot;xl&quot; title=&quot;My modal title&quot; items='[&quot;third&quot;, &quot;fourth&quot;]' class=&quot;modal-custom&quot;&gt;&lt;/x-modal&gt;</code></pre>
             <p>The output will be:</p>
             <pre><code class="language-html">&lt;div class=&quot;modal modal-custom modal-xl&quot;&gt;
   &lt;div class=&quot;modal-header&quot;&gt;
@@ -1094,27 +1070,16 @@ <h3 id="props" tabindex="-1">
   &lt;/div&gt;
 &lt;/div&gt;</code></pre>
             <p>
-              So the prop
-              <code>size</code>
-              is not override since we prepend
-              <code>computed:</code>
-              to the attribute, while the prop
-              <code>title</code>
-              is override.
-And the prop
-              <code>items</code>
-              is merged and not override.
-You can also notice how the
+              You can also notice how the
               <code>class</code>
               attribute is merged with
               <code>class</code>
               attribute of the first node. Let's see in next section more about this.
             </p>
             <p>
-              You can change how attributes are merged by passing via options a callback function used by lodash method
+              You can change how attributes are merged with global locals defined via options by passing a callback function used by lodash method
               <a href="https://lodash.com/docs/4.17.15#mergeWith">mergeWith</a>
               .
-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.
@@ -1124,7 +1089,7 @@ <h3 id="props" tabindex="-1">
             <pre><code class="language-html">&lt;!-- src/child.html --&gt;
 &lt;script props&gt;
   module.exports = {
-    prop: 'Default prop value'
+    prop: locals.prop || 'Default prop value'
   }
 &lt;/script&gt;
 &lt;div&gt;
@@ -1134,7 +1099,7 @@ <h3 id="props" tabindex="-1">
             <pre><code class="language-html">&lt;!-- src/parent.html --&gt;
 &lt;script props&gt;
   module.exports = {
-    prop: 'Default prop value'
+    prop: locals.prop || 'Default prop value'
   }
 &lt;/script&gt;
 &lt;div&gt;
@@ -1195,7 +1160,7 @@ <h3 id="attributes" tabindex="-1">
             <pre><code class="language-html">&lt;!-- src/button.html --&gt;
 &lt;script props&gt;
   module.exports = {
-    label: 'A button'
+    label: locals.label || 'A button'
   }
 &lt;/script&gt;
 &lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;
@@ -1437,97 +1402,10 @@ <h2 id="migration" tabindex="-1">
               <code>posthtml-extend</code>
               and/or
               <code>posthtml-modules</code>
-              then you can continue to keep them until you migrate all of your components.
-For continue to use current code with this plugin without changing it, see below examples. Any more updates on this will be added in this issue:
+              please to follow updates here:
               <a href="https://github.com/thewebartisan7/posthtml-components/issues/16">posthtml-components/issues/16</a>
               .
             </p>
-            <h3 id="posthtml-include" tabindex="-1">
-              <a class="header-anchor" href="#posthtml-include">#</a>
-              PostHTML Include
-            </h3>
-            <p>
-              PostHTML Include plugin can work when passed via
-              <code>options.plugins</code>
-              like below example:
-            </p>
-            <pre><code class="language-js">require(&quot;posthtml-component&quot;)({
-  root: &quot;./src&quot;,
-  folders: [&quot;components&quot;, &quot;layouts&quot;],
-  plugins: [
-    require(&quot;posthtml-include&quot;)({
-      encoding: &quot;utf8&quot;,
-      root: &quot;./src&quot;
-    }),
-  ]
-})</code></pre>
-            <h3 id="posthtml-modules" tabindex="-1">
-              <a class="header-anchor" href="#posthtml-modules">#</a>
-              PostHTML Modules
-            </h3>
-            <p>
-              At the moment doesn't work when nested inside PostHTML Components plugin since it use
-              <code>tree.match</code>
-              and even trying with something like PostHTML Include is doing here https://github.com/posthtml/posthtml-include/blob/master/lib/index.js#L16 doesn't work. But a workaround is to use PostHTML Components custom tag and attributes like below:
-            </p>
-            <pre><code class="language-js">require(&quot;posthtml-component&quot;)({
-  root: &quot;./src&quot;,
-  folders: [&quot;components&quot;, &quot;layouts&quot;],
-  tag: 'module',
-  attribute: 'href',
-  yield: 'content',
-  plugins: [
-    require(&quot;posthtml-include&quot;)({
-      encoding: &quot;utf8&quot;,
-      root: &quot;./src/www/posthtml-templates/&quot;
-    }),
-  ]
-})</code></pre>
-            <p>
-              NOTE: If you change
-              <code>&lt;yield&gt;</code>
-              tag to
-              <code>&lt;content&gt;</code>
-              to support your existing code, then you need to use it always. Maybe you can just replace all
-              <code>&lt;content&gt;</code>
-              with
-              <code>&lt;yield&gt;</code>
-              and it should works fine.
-            </p>
-            <h3 id="posthtml-extends" tabindex="-1">
-              <a class="header-anchor" href="#posthtml-extends">#</a>
-              PostHTML Extends
-            </h3>
-            <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>
@@ -1549,9 +1427,9 @@ <h2 id="credits" tabindex="-1">
         </div>
       </div>
     </footer>
-    <div class="modal fade" id="modalWithComponents" data-bs-backdrop="true" data-bs-keyboard="true" aria-labelledby="modalWithComponents" tabindex="-1" aria-hidden="true" aria-modal="true" role="dialog">
-      <div class="modal-dialog modal-lg modal-fullscreen-lg-down modal-dialog-centered modal-dialog-custom">
-        <div class="modal-content modal-content-custom">
+    <div class="modal fade" id="modalWithComponents" data-bs-backdrop="true" data-bs-keyboard="true" aria-labelledby="modalWithComponents" tabindex="-1" aria-hidden="true" aria-modal="true" role="dialog" dialogclass="modal-dialog-custom" contentclass="modal-content-custom">
+      <div class="modal-dialog modal-lg modal-fullscreen-lg-down modal-dialog-centered">
+        <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
diff --git a/docs/index.html b/docs/index.html
index b52fdbd..19c8fc1 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -84,9 +84,9 @@ <h1 class="display-1 fw-bold mb-4">Build the web with PostHTML</h1>
         </div>
       </div>
     </footer>
-    <div class="modal fade" id="modalWithComponents" data-bs-backdrop="true" data-bs-keyboard="true" aria-labelledby="modalWithComponents" tabindex="-1" aria-hidden="true" aria-modal="true" role="dialog">
-      <div class="modal-dialog modal-lg modal-fullscreen-lg-down modal-dialog-centered modal-dialog-custom">
-        <div class="modal-content modal-content-custom">
+    <div class="modal fade" id="modalWithComponents" data-bs-backdrop="true" data-bs-keyboard="true" aria-labelledby="modalWithComponents" tabindex="-1" aria-hidden="true" aria-modal="true" role="dialog" dialogclass="modal-dialog-custom" contentclass="modal-content-custom">
+      <div class="modal-dialog modal-lg modal-fullscreen-lg-down modal-dialog-centered">
+        <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
diff --git a/docs/test.html b/docs/test.html
index 0ce5cc7..a857943 100644
--- a/docs/test.html
+++ b/docs/test.html
@@ -48,7 +48,7 @@
           <div class="col-lg-8">
             <h1 class="display-1 fw-bold mb-4">Playground</h1>
             <div class="wrapper">
-              <div class="demo my-demo" something="alocal">
+              <div class="demo my-demo" computed:acomputed="" something="alocal">
                 <h1>anObjectDefault</h1>
                 <p>
                   <strong>first</strong>
@@ -60,12 +60,12 @@ <h1>anObjectDefault</h1>
                 </p>
                 <h1>anObjectOverride</h1>
                 <p>
-                  <strong>third</strong>
-                  : Third override item
+                  <strong>first</strong>
+                  : First overriden item
                 </p>
                 <p>
-                  <strong>fourth</strong>
-                  : Fourth override item
+                  <strong>second</strong>
+                  : Second overriden item
                 </p>
                 <h1>anObjectMerged</h1>
                 <p>
@@ -78,23 +78,15 @@ <h1>anObjectMerged</h1>
                 </p>
                 <p>
                   <strong>anObjectMerged1</strong>
-                  : {"first":"First1 merged item","second":"Second1 merged item","anObjectMerged2":{"first":"First2 merged item","second":"Second2 merged item"},"third":"Third merged item (UPDATED?)","fourth1":"Fourth merged item"}
-                </p>
-                <p>
-                  <strong>third</strong>
-                  : Third merged item
-                </p>
-                <p>
-                  <strong>fourth</strong>
-                  : Fourth merged item
+                  : {"first":"First1 merged item","second":"Second1 merged item","anObjectMerged2":{"first":"First2 merged item","second":"Second2 merged item"}}
                 </p>
                 <h1>aStringDefault</h1>
                 <p>My default string</p>
                 <h1>aStringOverride</h1>
-                <p>My override string changed</p>
+                <p>My default override string</p>
                 <hr>
                 <h1>post</h1>
-                My post title My post body
+                Default post title Default post body
                 <p>
                   <strong>1</strong>
                   : My comment 1
@@ -103,14 +95,6 @@ <h1>post</h1>
                   <strong>2</strong>
                   : My comment 2
                 </p>
-                <p>
-                  <strong>1</strong>
-                  : My comment 1 new
-                </p>
-                <p>
-                  <strong>3</strong>
-                  : My comment 3
-                </p>
                 <h1>anArrayOfObjects</h1>
                 <p>
                   <strong>0</strong>
@@ -120,14 +104,6 @@ <h1>anArrayOfObjects</h1>
                   <strong>1</strong>
                   : {"id":2,"title":"My default title 2"}
                 </p>
-                <p>
-                  <strong>2</strong>
-                  : {"id":1,"title":"My new title 1"}
-                </p>
-                <p>
-                  <strong>3</strong>
-                  : {"id":2,"title":"My new title 2","somethingnew":"New"}
-                </p>
                 <h1>anArray</h1>
                 <p>
                   <strong>0</strong>
@@ -137,25 +113,9 @@ <h1>anArray</h1>
                   <strong>1</strong>
                   : second
                 </p>
-                <p>
-                  <strong>2</strong>
-                  : first
-                </p>
-                <p>
-                  <strong>3</strong>
-                  : third
-                </p>
-                <p>
-                  <strong>4</strong>
-                  : fourth
-                </p>
-                <p>
-                  <strong>5</strong>
-                  : ten
-                </p>
                 <hr>
                 <h1>aComputed</h1>
-                <p>Yes</p>
+                <p>No</p>
                 My filled slot
       Hello
               </div>
@@ -238,9 +198,9 @@ <h1>Child yield</h1>
         </div>
       </div>
     </footer>
-    <div class="modal fade" id="modalWithComponents" data-bs-backdrop="true" data-bs-keyboard="true" aria-labelledby="modalWithComponents" tabindex="-1" aria-hidden="true" aria-modal="true" role="dialog">
-      <div class="modal-dialog modal-lg modal-fullscreen-lg-down modal-dialog-centered modal-dialog-custom">
-        <div class="modal-content modal-content-custom">
+    <div class="modal fade" id="modalWithComponents" data-bs-backdrop="true" data-bs-keyboard="true" aria-labelledby="modalWithComponents" tabindex="-1" aria-hidden="true" aria-modal="true" role="dialog" dialogclass="modal-dialog-custom" contentclass="modal-content-custom">
+      <div class="modal-dialog modal-lg modal-fullscreen-lg-down modal-dialog-centered">
+        <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
diff --git a/examples/dist/demo.html b/examples/dist/demo.html
index 43ab5ba..d68d387 100644
--- a/examples/dist/demo.html
+++ b/examples/dist/demo.html
@@ -68,9 +68,9 @@ <h1 class="display-1 fw-bold mb-4">Demo</h1>
         </div>
       </div>
     </footer>
-    <div class="modal fade" id="modalWithComponents" data-bs-backdrop="true" data-bs-keyboard="true" aria-labelledby="modalWithComponents" tabindex="-1" aria-hidden="true" aria-modal="true" role="dialog">
-      <div class="modal-dialog modal-lg modal-fullscreen-lg-down modal-dialog-centered modal-dialog-custom">
-        <div class="modal-content modal-content-custom">
+    <div class="modal fade" id="modalWithComponents" data-bs-backdrop="true" data-bs-keyboard="true" aria-labelledby="modalWithComponents" tabindex="-1" aria-hidden="true" aria-modal="true" role="dialog" dialogclass="modal-dialog-custom" contentclass="modal-content-custom">
+      <div class="modal-dialog modal-lg modal-fullscreen-lg-down modal-dialog-centered">
+        <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
diff --git a/examples/dist/docs.html b/examples/dist/docs.html
index 1af5b27..5de3cd1 100644
--- a/examples/dist/docs.html
+++ b/examples/dist/docs.html
@@ -181,23 +181,6 @@
                 </li>
                 <li class="nav-item">
                   <a class="nav-link" href="#migration">Migration</a>
-                  <ul class="nav flex-column">
-                    <li class="nav-item">
-                      <a class="nav-link" href="#posthtml-include">PostHTML Include</a>
-                    </li>
-                    <li class="nav-item">
-                      <a class="nav-link" href="#posthtml-modules">PostHTML Modules</a>
-                    </li>
-                    <li class="nav-item">
-                      <a class="nav-link" href="#posthtml-extends">PostHTML Extends</a>
-                    </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>
@@ -562,11 +545,11 @@ <h2 id="options" tabindex="-1">
                   <td style="text-align:left">
                     Function callback passed to lodash
                     <code>mergeWith</code>
-                    for attribute
+                    for merge
+                    <code>options.expressions.locals</code>
+                    and locals passed via attribute
                     <code>locals</code>
-                    and
-                    <code>merge:attribute</code>
-                    . By default it's used to concat array.
+                    .
                   </td>
                 </tr>
               </tbody>
@@ -1006,18 +989,16 @@ <h3 id="props" tabindex="-1">
               <a href="https://github.com/posthtml/posthtml-expressions">posthtml-expressions</a>
               plugin, with feature to pass
               <code>props</code>
-              (locals) via attributes, define default via
-              <code>&lt;script props&gt;</code>
-              , merge with default and use
+              (locals) via attributes and manipulate them via
               <code>&lt;script props&gt;</code>
-              as computed.
+              .
             </p>
             <p>Let's see how it works with a few examples starting with a basic one.</p>
             <p>Create the component:</p>
             <pre><code class="language-html">&lt;!-- src/my-component.html --&gt;
 &lt;script props&gt;
   module.exports = {
-    prop: 'Default prop value'
+    prop: locals.prop || 'Default prop value'
   }
 &lt;/script&gt;
 &lt;div&gt;
@@ -1051,24 +1032,19 @@ <h3 id="props" tabindex="-1">
 More details on this in the next section.
             </p>
             <p>
-              So by default
+              So in the
               <code>&lt;script props&gt;</code>
-              act as default value, like the
-              <code>@props</code>
-              you define with Laravel Blade.
-You can change this behaviour by prepending
-              <code>computed</code>
-              or
-              <code>merge</code>
-              to the attribute name like shown below.
+              you have access to passed props via object
+              <code>locals</code>
+              , and you can add any logic you need inside of it.
             </p>
             <p>Create the component:</p>
             <pre><code class="language-html">&lt;!-- src/modal.html --&gt;
 &lt;script props&gt;
   module.exports = {
-    title: 'Default title', // This will be the default value
-    size: locals.size ? `modal-${locals.size}` : '', // This will be a computed value, so it's always used
-    items: ['first', 'second'] // This will be merged
+    title: locals.title || 'Default title', 
+    size: locals.size ? `modal-${locals.size}` : '', 
+    items: Array.isArray(locals.items) ? locals.items.concat(['first', 'second']) : ['first', 'second']
   }
 &lt;/script&gt;
 &lt;div class=&quot;modal {{ size }}&quot;&gt;
@@ -1080,7 +1056,7 @@ <h3 id="props" tabindex="-1">
   &lt;/div&gt;
 &lt;/div&gt;</code></pre>
             <p>Use:</p>
-            <pre><code class="language-html">&lt;x-modal computed:size=&quot;xl&quot; title=&quot;My modal title&quot; merge:items='[&quot;third&quot;, &quot;fourth&quot;]' class=&quot;modal-custom&quot;&gt;&lt;/x-modal&gt;</code></pre>
+            <pre><code class="language-html">&lt;x-modal size=&quot;xl&quot; title=&quot;My modal title&quot; items='[&quot;third&quot;, &quot;fourth&quot;]' class=&quot;modal-custom&quot;&gt;&lt;/x-modal&gt;</code></pre>
             <p>The output will be:</p>
             <pre><code class="language-html">&lt;div class=&quot;modal modal-custom modal-xl&quot;&gt;
   &lt;div class=&quot;modal-header&quot;&gt;
@@ -1094,27 +1070,16 @@ <h3 id="props" tabindex="-1">
   &lt;/div&gt;
 &lt;/div&gt;</code></pre>
             <p>
-              So the prop
-              <code>size</code>
-              is not override since we prepend
-              <code>computed:</code>
-              to the attribute, while the prop
-              <code>title</code>
-              is override.
-And the prop
-              <code>items</code>
-              is merged and not override.
-You can also notice how the
+              You can also notice how the
               <code>class</code>
               attribute is merged with
               <code>class</code>
               attribute of the first node. Let's see in next section more about this.
             </p>
             <p>
-              You can change how attributes are merged by passing via options a callback function used by lodash method
+              You can change how attributes are merged with global locals defined via options by passing a callback function used by lodash method
               <a href="https://lodash.com/docs/4.17.15#mergeWith">mergeWith</a>
               .
-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.
@@ -1124,7 +1089,7 @@ <h3 id="props" tabindex="-1">
             <pre><code class="language-html">&lt;!-- src/child.html --&gt;
 &lt;script props&gt;
   module.exports = {
-    prop: 'Default prop value'
+    prop: locals.prop || 'Default prop value'
   }
 &lt;/script&gt;
 &lt;div&gt;
@@ -1134,7 +1099,7 @@ <h3 id="props" tabindex="-1">
             <pre><code class="language-html">&lt;!-- src/parent.html --&gt;
 &lt;script props&gt;
   module.exports = {
-    prop: 'Default prop value'
+    prop: locals.prop || 'Default prop value'
   }
 &lt;/script&gt;
 &lt;div&gt;
@@ -1195,7 +1160,7 @@ <h3 id="attributes" tabindex="-1">
             <pre><code class="language-html">&lt;!-- src/button.html --&gt;
 &lt;script props&gt;
   module.exports = {
-    label: 'A button'
+    label: locals.label || 'A button'
   }
 &lt;/script&gt;
 &lt;button type=&quot;button&quot; class=&quot;btn&quot;&gt;
@@ -1437,97 +1402,10 @@ <h2 id="migration" tabindex="-1">
               <code>posthtml-extend</code>
               and/or
               <code>posthtml-modules</code>
-              then you can continue to keep them until you migrate all of your components.
-For continue to use current code with this plugin without changing it, see below examples. Any more updates on this will be added in this issue:
+              please to follow updates here:
               <a href="https://github.com/thewebartisan7/posthtml-components/issues/16">posthtml-components/issues/16</a>
               .
             </p>
-            <h3 id="posthtml-include" tabindex="-1">
-              <a class="header-anchor" href="#posthtml-include">#</a>
-              PostHTML Include
-            </h3>
-            <p>
-              PostHTML Include plugin can work when passed via
-              <code>options.plugins</code>
-              like below example:
-            </p>
-            <pre><code class="language-js">require(&quot;posthtml-component&quot;)({
-  root: &quot;./src&quot;,
-  folders: [&quot;components&quot;, &quot;layouts&quot;],
-  plugins: [
-    require(&quot;posthtml-include&quot;)({
-      encoding: &quot;utf8&quot;,
-      root: &quot;./src&quot;
-    }),
-  ]
-})</code></pre>
-            <h3 id="posthtml-modules" tabindex="-1">
-              <a class="header-anchor" href="#posthtml-modules">#</a>
-              PostHTML Modules
-            </h3>
-            <p>
-              At the moment doesn't work when nested inside PostHTML Components plugin since it use
-              <code>tree.match</code>
-              and even trying with something like PostHTML Include is doing here https://github.com/posthtml/posthtml-include/blob/master/lib/index.js#L16 doesn't work. But a workaround is to use PostHTML Components custom tag and attributes like below:
-            </p>
-            <pre><code class="language-js">require(&quot;posthtml-component&quot;)({
-  root: &quot;./src&quot;,
-  folders: [&quot;components&quot;, &quot;layouts&quot;],
-  tag: 'module',
-  attribute: 'href',
-  yield: 'content',
-  plugins: [
-    require(&quot;posthtml-include&quot;)({
-      encoding: &quot;utf8&quot;,
-      root: &quot;./src/www/posthtml-templates/&quot;
-    }),
-  ]
-})</code></pre>
-            <p>
-              NOTE: If you change
-              <code>&lt;yield&gt;</code>
-              tag to
-              <code>&lt;content&gt;</code>
-              to support your existing code, then you need to use it always. Maybe you can just replace all
-              <code>&lt;content&gt;</code>
-              with
-              <code>&lt;yield&gt;</code>
-              and it should works fine.
-            </p>
-            <h3 id="posthtml-extends" tabindex="-1">
-              <a class="header-anchor" href="#posthtml-extends">#</a>
-              PostHTML Extends
-            </h3>
-            <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>
@@ -1549,9 +1427,9 @@ <h2 id="credits" tabindex="-1">
         </div>
       </div>
     </footer>
-    <div class="modal fade" id="modalWithComponents" data-bs-backdrop="true" data-bs-keyboard="true" aria-labelledby="modalWithComponents" tabindex="-1" aria-hidden="true" aria-modal="true" role="dialog">
-      <div class="modal-dialog modal-lg modal-fullscreen-lg-down modal-dialog-centered modal-dialog-custom">
-        <div class="modal-content modal-content-custom">
+    <div class="modal fade" id="modalWithComponents" data-bs-backdrop="true" data-bs-keyboard="true" aria-labelledby="modalWithComponents" tabindex="-1" aria-hidden="true" aria-modal="true" role="dialog" dialogclass="modal-dialog-custom" contentclass="modal-content-custom">
+      <div class="modal-dialog modal-lg modal-fullscreen-lg-down modal-dialog-centered">
+        <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
diff --git a/examples/dist/index.html b/examples/dist/index.html
index b52fdbd..19c8fc1 100644
--- a/examples/dist/index.html
+++ b/examples/dist/index.html
@@ -84,9 +84,9 @@ <h1 class="display-1 fw-bold mb-4">Build the web with PostHTML</h1>
         </div>
       </div>
     </footer>
-    <div class="modal fade" id="modalWithComponents" data-bs-backdrop="true" data-bs-keyboard="true" aria-labelledby="modalWithComponents" tabindex="-1" aria-hidden="true" aria-modal="true" role="dialog">
-      <div class="modal-dialog modal-lg modal-fullscreen-lg-down modal-dialog-centered modal-dialog-custom">
-        <div class="modal-content modal-content-custom">
+    <div class="modal fade" id="modalWithComponents" data-bs-backdrop="true" data-bs-keyboard="true" aria-labelledby="modalWithComponents" tabindex="-1" aria-hidden="true" aria-modal="true" role="dialog" dialogclass="modal-dialog-custom" contentclass="modal-content-custom">
+      <div class="modal-dialog modal-lg modal-fullscreen-lg-down modal-dialog-centered">
+        <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
diff --git a/examples/dist/test.html b/examples/dist/test.html
index 0ce5cc7..a857943 100644
--- a/examples/dist/test.html
+++ b/examples/dist/test.html
@@ -48,7 +48,7 @@
           <div class="col-lg-8">
             <h1 class="display-1 fw-bold mb-4">Playground</h1>
             <div class="wrapper">
-              <div class="demo my-demo" something="alocal">
+              <div class="demo my-demo" computed:acomputed="" something="alocal">
                 <h1>anObjectDefault</h1>
                 <p>
                   <strong>first</strong>
@@ -60,12 +60,12 @@ <h1>anObjectDefault</h1>
                 </p>
                 <h1>anObjectOverride</h1>
                 <p>
-                  <strong>third</strong>
-                  : Third override item
+                  <strong>first</strong>
+                  : First overriden item
                 </p>
                 <p>
-                  <strong>fourth</strong>
-                  : Fourth override item
+                  <strong>second</strong>
+                  : Second overriden item
                 </p>
                 <h1>anObjectMerged</h1>
                 <p>
@@ -78,23 +78,15 @@ <h1>anObjectMerged</h1>
                 </p>
                 <p>
                   <strong>anObjectMerged1</strong>
-                  : {"first":"First1 merged item","second":"Second1 merged item","anObjectMerged2":{"first":"First2 merged item","second":"Second2 merged item"},"third":"Third merged item (UPDATED?)","fourth1":"Fourth merged item"}
-                </p>
-                <p>
-                  <strong>third</strong>
-                  : Third merged item
-                </p>
-                <p>
-                  <strong>fourth</strong>
-                  : Fourth merged item
+                  : {"first":"First1 merged item","second":"Second1 merged item","anObjectMerged2":{"first":"First2 merged item","second":"Second2 merged item"}}
                 </p>
                 <h1>aStringDefault</h1>
                 <p>My default string</p>
                 <h1>aStringOverride</h1>
-                <p>My override string changed</p>
+                <p>My default override string</p>
                 <hr>
                 <h1>post</h1>
-                My post title My post body
+                Default post title Default post body
                 <p>
                   <strong>1</strong>
                   : My comment 1
@@ -103,14 +95,6 @@ <h1>post</h1>
                   <strong>2</strong>
                   : My comment 2
                 </p>
-                <p>
-                  <strong>1</strong>
-                  : My comment 1 new
-                </p>
-                <p>
-                  <strong>3</strong>
-                  : My comment 3
-                </p>
                 <h1>anArrayOfObjects</h1>
                 <p>
                   <strong>0</strong>
@@ -120,14 +104,6 @@ <h1>anArrayOfObjects</h1>
                   <strong>1</strong>
                   : {"id":2,"title":"My default title 2"}
                 </p>
-                <p>
-                  <strong>2</strong>
-                  : {"id":1,"title":"My new title 1"}
-                </p>
-                <p>
-                  <strong>3</strong>
-                  : {"id":2,"title":"My new title 2","somethingnew":"New"}
-                </p>
                 <h1>anArray</h1>
                 <p>
                   <strong>0</strong>
@@ -137,25 +113,9 @@ <h1>anArray</h1>
                   <strong>1</strong>
                   : second
                 </p>
-                <p>
-                  <strong>2</strong>
-                  : first
-                </p>
-                <p>
-                  <strong>3</strong>
-                  : third
-                </p>
-                <p>
-                  <strong>4</strong>
-                  : fourth
-                </p>
-                <p>
-                  <strong>5</strong>
-                  : ten
-                </p>
                 <hr>
                 <h1>aComputed</h1>
-                <p>Yes</p>
+                <p>No</p>
                 My filled slot
       Hello
               </div>
@@ -238,9 +198,9 @@ <h1>Child yield</h1>
         </div>
       </div>
     </footer>
-    <div class="modal fade" id="modalWithComponents" data-bs-backdrop="true" data-bs-keyboard="true" aria-labelledby="modalWithComponents" tabindex="-1" aria-hidden="true" aria-modal="true" role="dialog">
-      <div class="modal-dialog modal-lg modal-fullscreen-lg-down modal-dialog-centered modal-dialog-custom">
-        <div class="modal-content modal-content-custom">
+    <div class="modal fade" id="modalWithComponents" data-bs-backdrop="true" data-bs-keyboard="true" aria-labelledby="modalWithComponents" tabindex="-1" aria-hidden="true" aria-modal="true" role="dialog" dialogclass="modal-dialog-custom" contentclass="modal-content-custom">
+      <div class="modal-dialog modal-lg modal-fullscreen-lg-down modal-dialog-centered">
+        <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title" id="modalWithComponentsLabel">Changelog</h5>
             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
diff --git a/examples/src/components/modal/index.html b/examples/src/components/modal/index.html
index b54ca0e..28732e9 100644
--- a/examples/src/components/modal/index.html
+++ b/examples/src/components/modal/index.html
@@ -15,9 +15,7 @@
    * contentClass:  any additional class for modal-content
    */
   module.exports = {
-    dialogClass: '',
-    contentClass: '',
-    backdrop: true,
+    backdrop: locals.backdrop || true,
     keyboard: locals.backdrop === "static" || locals.keyboard === true,
     scrollable: locals.scrollable === true ? 'modal-dialog-scrollable' : '',
     centered: locals.centered === true ? 'modal-dialog-centered' : '',
@@ -40,9 +38,9 @@
     role="dialog"
 >
     <div
-       class="modal-dialog {{ size }} {{ fullscreen }} {{ centered }} {{ scrollable }} {{ dialogClass }}"
+       class="modal-dialog {{ size }} {{ fullscreen }} {{ centered }} {{ scrollable }}"
     >
-        <div class="modal-content {{ contentClass }}">
+        <div class="modal-content">
             <yield></yield>
             <if condition="$slots.header?.filled">
                 <x-modal.header>
diff --git a/examples/src/layouts/page.html b/examples/src/layouts/page.html
index 5efb21c..cd394c6 100644
--- a/examples/src/layouts/page.html
+++ b/examples/src/layouts/page.html
@@ -34,11 +34,11 @@
     <x-modal
       id="modalWithComponents"
       backdrop="true"
-      computed:keyboard="true"
-      computed:scrollable="false"
-      computed:centered="true"
-      computed:size="lg"
-      computed:fullscreen="lg"
+      keyboard="true"
+      scrollable="false"
+      centered="true"
+      size="lg"
+      fullscreen="lg"
       aware:close="true"
       dialogClass="modal-dialog-custom"
       contentClass="modal-content-custom"
diff --git a/examples/src/md/introduction.md b/examples/src/md/introduction.md
index 9200f6f..00842cb 100644
--- a/examples/src/md/introduction.md
+++ b/examples/src/md/introduction.md
@@ -88,29 +88,29 @@ See also the `examples` folder. You can run `npm run build-examples` to compile
 
 ## Options
 
-|         Option         |           Default            | Description                                                                                                                        |
-|:----------------------:|:----------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------|
-|        **root**        |            `'./'`            | String value as root path for components lookup.                                                                                   |
-|      **folders**       |            `['']`            | Array of additional multi folders path from `options.root` or any defined namespaces root, fallback or custom.                     |
-|     **tagPrefix**      |             `x-`             | String for tag prefix. The plugin will use RegExp with this string.                                                                |
-|        **tag**         |           `false`            | String or boolean value for component tag. Use this with `options.attribute`. Boolean only false.                                  |
-|     **attribute**      |            `src`             | String value for component attribute for set path.                                                                                 |
-|     **namespaces**     |             `[]`             | Array of namespace's root path, fallback path and custom path for override.                                                        |
-| **namespaceSeparator** |             `::`             | String value for namespace separator to be used with tag name. Example `<x-namespace::button>`                                     |
-|   **fileExtension**    |            `html`            | String value for file extension of the components used for retrieve x-tag file.                                                    |
-|       **yield**        |           `yield`            | String value for `<yield>` tag name. Where main content of component is injected.                                                  |
-|        **slot**        |            `slot`            | String value for `<slot>` tag name. Used with RegExp by appending `:` (example `<slot:slot-name>`).                                |
-|        **fill**        |            `fill`            | String value for `<fill>` tag name. Used with RegExp by appending `:` (example `<fill:slot-name>`).                                |
-|   **slotSeparator**    |             `:`              | String value used for separate `<slot>` and `<fill>` tag from their names.                                                         |
-|        **push**        |            `push`            | String value for `<push>` tag name.                                                                                                |
-|       **stack**        |           `stack`            | String value for `<stack>` tag name.                                                                                               |
-|     **localsAttr**     |           `props`            | String value used in `<script props>` parsed by the plugin to retrieve locals in the components.                                   |
-|    **expressions**     |             `{}`             | Object to configure `posthtml-expressions`. You can pre-set locals or customize the delimiters for example.                        |
-|      **plugins**       |             `[]`             | PostHTML plugins to apply for every parsed components.                                                                             |
-|      **matcher**       | `[{tag: options.tagPrefix}]` | Array of object used to match the tags.                                                                                            |
-|  **attrsParserRules**  |             `{}`             | Additional rules for attributes parser plugin.                                                                                     |
-|       **strict**       |            `true`            | Boolean value for enable or disable throw an exception.                                                                            |
-|  **mergeCustomizer**   |          `function`          | Function callback passed to lodash `mergeWith` for attribute `locals` and `merge:attribute`. By default it's used to concat array. |
+|         Option         |           Default            | Description                                                                                                                     |
+|:----------------------:|:----------------------------:|:--------------------------------------------------------------------------------------------------------------------------------|
+|        **root**        |            `'./'`            | String value as root path for components lookup.                                                                                |
+|      **folders**       |            `['']`            | Array of additional multi folders path from `options.root` or any defined namespaces root, fallback or custom.                  |
+|     **tagPrefix**      |             `x-`             | String for tag prefix. The plugin will use RegExp with this string.                                                             |
+|        **tag**         |           `false`            | String or boolean value for component tag. Use this with `options.attribute`. Boolean only false.                               |
+|     **attribute**      |            `src`             | String value for component attribute for set path.                                                                              |
+|     **namespaces**     |             `[]`             | Array of namespace's root path, fallback path and custom path for override.                                                     |
+| **namespaceSeparator** |             `::`             | String value for namespace separator to be used with tag name. Example `<x-namespace::button>`                                  |
+|   **fileExtension**    |            `html`            | String value for file extension of the components used for retrieve x-tag file.                                                 |
+|       **yield**        |           `yield`            | String value for `<yield>` tag name. Where main content of component is injected.                                               |
+|        **slot**        |            `slot`            | String value for `<slot>` tag name. Used with RegExp by appending `:` (example `<slot:slot-name>`).                             |
+|        **fill**        |            `fill`            | String value for `<fill>` tag name. Used with RegExp by appending `:` (example `<fill:slot-name>`).                             |
+|   **slotSeparator**    |             `:`              | String value used for separate `<slot>` and `<fill>` tag from their names.                                                      |
+|        **push**        |            `push`            | String value for `<push>` tag name.                                                                                             |
+|       **stack**        |           `stack`            | String value for `<stack>` tag name.                                                                                            |
+|     **localsAttr**     |           `props`            | String value used in `<script props>` parsed by the plugin to retrieve locals in the components.                                |
+|    **expressions**     |             `{}`             | Object to configure `posthtml-expressions`. You can pre-set locals or customize the delimiters for example.                     |
+|      **plugins**       |             `[]`             | PostHTML plugins to apply for every parsed components.                                                                          |
+|      **matcher**       | `[{tag: options.tagPrefix}]` | Array of object used to match the tags.                                                                                         |
+|  **attrsParserRules**  |             `{}`             | Additional rules for attributes parser plugin.                                                                                  |
+|       **strict**       |            `true`            | Boolean value for enable or disable throw an exception.                                                                         |
+|  **mergeCustomizer**   |          `function`          | Function callback passed to lodash `mergeWith` for merge `options.expressions.locals` and locals passed via attribute `locals`. |
 
 ## Features
 
@@ -497,7 +497,7 @@ If you would like to prepend content onto the beginning of a stack, you should u
 
 ### Props
 
-Behind the `props` there is powerful [posthtml-expressions](https://github.com/posthtml/posthtml-expressions) plugin, with feature to pass `props` (locals) via attributes, define default via `<script props>`, merge with default and use `<script props>` as computed.
+Behind the `props` there is powerful [posthtml-expressions](https://github.com/posthtml/posthtml-expressions) plugin, with feature to pass `props` (locals) via attributes and manipulate them via `<script props>`.
 
 Let's see how it works with a few examples starting with a basic one.
 
@@ -507,7 +507,7 @@ Create the component:
 <!-- src/my-component.html -->
 <script props>
   module.exports = {
-    prop: 'Default prop value'
+    prop: locals.prop || 'Default prop value'
   }
 </script>
 <div>
@@ -548,8 +548,7 @@ The output will be:
 If you don't add the props in `<script props>` inside your component, all props will be added as attributes to the first node of your component or to the node with attribute `attributes`.
 More details on this in the next section.
 
-So by default `<script props>` act as default value, like the `@props` you define with Laravel Blade.
-You can change this behaviour by prepending `computed` or `merge` to the attribute name like shown below.
+So in the `<script props>` you have access to passed props via object `locals`, and you can add any logic you need inside of it.
 
 Create the component:
 
@@ -557,9 +556,9 @@ Create the component:
 <!-- src/modal.html -->
 <script props>
   module.exports = {
-    title: 'Default title', // This will be the default value
-    size: locals.size ? `modal-${locals.size}` : '', // This will be a computed value, so it's always used
-    items: ['first', 'second'] // This will be merged
+    title: locals.title || 'Default title', 
+    size: locals.size ? `modal-${locals.size}` : '', 
+    items: Array.isArray(locals.items) ? locals.items.concat(['first', 'second']) : ['first', 'second']
   }
 </script>
 <div class="modal {{ size }}">
@@ -575,7 +574,7 @@ Create the component:
 Use:
 
 ```html
-<x-modal computed:size="xl" title="My modal title" merge:items='["third", "fourth"]' class="modal-custom"></x-modal>
+<x-modal size="xl" title="My modal title" items='["third", "fourth"]' class="modal-custom"></x-modal>
 ```
 
 The output will be:
@@ -594,12 +593,9 @@ The output will be:
 </div>
 ```
 
-So the prop `size` is not override since we prepend `computed:` to the attribute, while the prop `title` is override.
-And the prop `items` is merged and not override.
 You can also notice how the `class` attribute is merged with `class` attribute of the first node. Let's see in next section more about this.
 
-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.
+You can change how attributes are merged with global locals defined via options by passing a callback function used by lodash method [mergeWith](https://lodash.com/docs/4.17.15#mergeWith).
 
 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.
@@ -610,7 +606,7 @@ Create a component:
 <!-- src/child.html -->
 <script props>
   module.exports = {
-    prop: 'Default prop value'
+    prop: locals.prop || 'Default prop value'
   }
 </script>
 <div>
@@ -625,7 +621,7 @@ Create another component that use the first one:
 <!-- src/parent.html -->
 <script props>
   module.exports = {
-    prop: 'Default prop value'
+    prop: locals.prop || 'Default prop value'
   }
 </script>
 <div>
@@ -682,7 +678,7 @@ As already seen in basic example:
 <!-- src/button.html -->
 <script props>
   module.exports = {
-    label: 'A button'
+    label: locals.label || 'A button'
   }
 </script>
 <button type="button" class="btn">
@@ -931,67 +927,5 @@ via `$slots` which has all the `props` passed via slot, and as well check if slo
 
 ## Migration
 
-If you are migrating from `posthtml-extend` and/or `posthtml-modules` then you can continue to keep them until you migrate all of your components.
-For continue to use current code with this plugin without changing it, see below examples. Any more updates on this will be added in this issue:
+If you are migrating from `posthtml-extend` and/or `posthtml-modules` please to follow updates here:
 [posthtml-components/issues/16](https://github.com/thewebartisan7/posthtml-components/issues/16).
-
-### PostHTML Include
-
-PostHTML Include plugin can work when passed via `options.plugins` like below example:
-
-```js
-require("posthtml-component")({
-  root: "./src",
-  folders: ["components", "layouts"],
-  plugins: [
-    require("posthtml-include")({
-      encoding: "utf8",
-      root: "./src"
-    }),
-  ]
-})
-```
-
-### PostHTML Modules
-
-At the moment doesn't work when nested inside PostHTML Components plugin since it use `tree.match` and even trying with something like PostHTML Include is doing here https://github.com/posthtml/posthtml-include/blob/master/lib/index.js#L16 doesn't work. But a workaround is to use PostHTML Components custom tag and attributes like below:
-
-```js
-require("posthtml-component")({
-  root: "./src",
-  folders: ["components", "layouts"],
-  tag: 'module',
-  attribute: 'href',
-  yield: 'content',
-  plugins: [
-    require("posthtml-include")({
-      encoding: "utf8",
-      root: "./src/www/posthtml-templates/"
-    }),
-  ]
-})
-```
-
-NOTE: If you change `<yield>` tag to `<content>` to support your existing code, then you need to use it always. Maybe you can just replace all `<content>` with `<yield>` and it should works fine.
-
-### PostHTML Extends
-
-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.
diff --git a/readme.md b/readme.md
index b316897..25693b4 100644
--- a/readme.md
+++ b/readme.md
@@ -96,29 +96,29 @@ See also the `examples` folder. You can run `npm run build-examples` to compile
 
 ## Options
 
-|         Option         |           Default            | Description                                                                                                                        |
-|:----------------------:|:----------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------|
-|        **root**        |            `'./'`            | String value as root path for components lookup.                                                                                   |
-|      **folders**       |            `['']`            | Array of additional multi folders path from `options.root` or any defined namespaces root, fallback or custom.                     |
-|     **tagPrefix**      |             `x-`             | String for tag prefix. The plugin will use RegExp with this string.                                                                |
-|        **tag**         |           `false`            | String or boolean value for component tag. Use this with `options.attribute`. Boolean only false.                                  |
-|     **attribute**      |            `src`             | String value for component attribute for set path.                                                                                 |
-|     **namespaces**     |             `[]`             | Array of namespace's root path, fallback path and custom path for override.                                                        |
-| **namespaceSeparator** |             `::`             | String value for namespace separator to be used with tag name. Example `<x-namespace::button>`                                     |
-|   **fileExtension**    |            `html`            | String value for file extension of the components used for retrieve x-tag file.                                                    |
-|       **yield**        |           `yield`            | String value for `<yield>` tag name. Where main content of component is injected.                                                  |
-|        **slot**        |            `slot`            | String value for `<slot>` tag name. Used with RegExp by appending `:` (example `<slot:slot-name>`).                                |
-|        **fill**        |            `fill`            | String value for `<fill>` tag name. Used with RegExp by appending `:` (example `<fill:slot-name>`).                                |
-|   **slotSeparator**    |             `:`              | String value used for separate `<slot>` and `<fill>` tag from their names.                                                         |
-|        **push**        |            `push`            | String value for `<push>` tag name.                                                                                                |
-|       **stack**        |           `stack`            | String value for `<stack>` tag name.                                                                                               |
-|     **localsAttr**     |           `props`            | String value used in `<script props>` parsed by the plugin to retrieve locals in the components.                                   |
-|    **expressions**     |             `{}`             | Object to configure `posthtml-expressions`. You can pre-set locals or customize the delimiters for example.                        |
-|      **plugins**       |             `[]`             | PostHTML plugins to apply for every parsed components.                                                                             |
-|      **matcher**       | `[{tag: options.tagPrefix}]` | Array of object used to match the tags.                                                                                            |
-|  **attrsParserRules**  |             `{}`             | Additional rules for attributes parser plugin.                                                                                     |
-|       **strict**       |            `true`            | Boolean value for enable or disable throw an exception.                                                                            |
-|  **mergeCustomizer**   |          `function`          | Function callback passed to lodash `mergeWith` for attribute `locals` and `merge:attribute`. By default it's used to concat array. |
+|         Option         |           Default            | Description                                                                                                                     |
+|:----------------------:|:----------------------------:|:--------------------------------------------------------------------------------------------------------------------------------|
+|        **root**        |            `'./'`            | String value as root path for components lookup.                                                                                |
+|      **folders**       |            `['']`            | Array of additional multi folders path from `options.root` or any defined namespaces root, fallback or custom.                  |
+|     **tagPrefix**      |             `x-`             | String for tag prefix. The plugin will use RegExp with this string.                                                             |
+|        **tag**         |           `false`            | String or boolean value for component tag. Use this with `options.attribute`. Boolean only false.                               |
+|     **attribute**      |            `src`             | String value for component attribute for set path.                                                                              |
+|     **namespaces**     |             `[]`             | Array of namespace's root path, fallback path and custom path for override.                                                     |
+| **namespaceSeparator** |             `::`             | String value for namespace separator to be used with tag name. Example `<x-namespace::button>`                                  |
+|   **fileExtension**    |            `html`            | String value for file extension of the components used for retrieve x-tag file.                                                 |
+|       **yield**        |           `yield`            | String value for `<yield>` tag name. Where main content of component is injected.                                               |
+|        **slot**        |            `slot`            | String value for `<slot>` tag name. Used with RegExp by appending `:` (example `<slot:slot-name>`).                             |
+|        **fill**        |            `fill`            | String value for `<fill>` tag name. Used with RegExp by appending `:` (example `<fill:slot-name>`).                             |
+|   **slotSeparator**    |             `:`              | String value used for separate `<slot>` and `<fill>` tag from their names.                                                      |
+|        **push**        |            `push`            | String value for `<push>` tag name.                                                                                             |
+|       **stack**        |           `stack`            | String value for `<stack>` tag name.                                                                                            |
+|     **localsAttr**     |           `props`            | String value used in `<script props>` parsed by the plugin to retrieve locals in the components.                                |
+|    **expressions**     |             `{}`             | Object to configure `posthtml-expressions`. You can pre-set locals or customize the delimiters for example.                     |
+|      **plugins**       |             `[]`             | PostHTML plugins to apply for every parsed components.                                                                          |
+|      **matcher**       | `[{tag: options.tagPrefix}]` | Array of object used to match the tags.                                                                                         |
+|  **attrsParserRules**  |             `{}`             | Additional rules for attributes parser plugin.                                                                                  |
+|       **strict**       |            `true`            | Boolean value for enable or disable throw an exception.                                                                         |
+|  **mergeCustomizer**   |          `function`          | Function callback passed to lodash `mergeWith` for merge `options.expressions.locals` and locals passed via attribute `locals`. |
 
 ## Features
 
@@ -505,7 +505,7 @@ If you would like to prepend content onto the beginning of a stack, you should u
 
 ### Props
 
-Behind the `props` there is powerful [posthtml-expressions](https://github.com/posthtml/posthtml-expressions) plugin, with feature to pass `props` (locals) via attributes, define default via `<script props>`, merge with default and use `<script props>` as computed.
+Behind the `props` there is powerful [posthtml-expressions](https://github.com/posthtml/posthtml-expressions) plugin, with feature to pass `props` (locals) via attributes and manipulate them via `<script props>`.
 
 Let's see how it works with a few examples starting with a basic one.
 
@@ -515,7 +515,7 @@ Create the component:
 <!-- src/my-component.html -->
 <script props>
   module.exports = {
-    prop: 'Default prop value'
+    prop: locals.prop || 'Default prop value'
   }
 </script>
 <div>
@@ -556,8 +556,7 @@ The output will be:
 If you don't add the props in `<script props>` inside your component, all props will be added as attributes to the first node of your component or to the node with attribute `attributes`. 
 More details on this in the next section.
 
-So by default `<script props>` act as default value, like the `@props` you define with Laravel Blade.
-You can change this behaviour by prepending `computed` or `merge` to the attribute name like shown below.
+So in the `<script props>` you have access to passed props via object `locals`, and you can add any logic you need inside of it.
 
 Create the component:
 
@@ -565,9 +564,9 @@ Create the component:
 <!-- src/modal.html -->
 <script props>
   module.exports = {
-    title: 'Default title', // This will be the default value
-    size: locals.size ? `modal-${locals.size}` : '', // This will be a computed value, so it's always used
-    items: ['first', 'second'] // This will be merged
+    title: locals.title || 'Default title', 
+    size: locals.size ? `modal-${locals.size}` : '', 
+    items: Array.isArray(locals.items) ? locals.items.concat(['first', 'second']) : ['first', 'second']
   }
 </script>
 <div class="modal {{ size }}">
@@ -583,7 +582,7 @@ Create the component:
 Use:
 
 ```html
-<x-modal computed:size="xl" title="My modal title" merge:items='["third", "fourth"]' class="modal-custom"></x-modal>
+<x-modal size="xl" title="My modal title" items='["third", "fourth"]' class="modal-custom"></x-modal>
 ```
 
 The output will be:
@@ -602,12 +601,9 @@ The output will be:
 </div>
 ```
 
-So the prop `size` is not override since we prepend `computed:` to the attribute, while the prop `title` is override.
-And the prop `items` is merged and not override. 
 You can also notice how the `class` attribute is merged with `class` attribute of the first node. Let's see in next section more about this.
 
-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.
+You can change how attributes are merged with global locals defined via options by passing a callback function used by lodash method [mergeWith](https://lodash.com/docs/4.17.15#mergeWith).
 
 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.
@@ -618,7 +614,7 @@ Create a component:
 <!-- src/child.html -->
 <script props>
   module.exports = {
-    prop: 'Default prop value'
+    prop: locals.prop || 'Default prop value'
   }
 </script>
 <div>
@@ -633,7 +629,7 @@ Create another component that use the first one:
 <!-- src/parent.html -->
 <script props>
   module.exports = {
-    prop: 'Default prop value'
+    prop: locals.prop || 'Default prop value'
   }
 </script>
 <div>
@@ -690,7 +686,7 @@ As already seen in basic example:
 <!-- src/button.html -->
 <script props>
   module.exports = {
-    label: 'A button'
+    label: locals.label || 'A button'
   }
 </script>
 <button type="button" class="btn">
@@ -939,53 +935,9 @@ via `$slots` which has all the `props` passed via slot, and as well check if slo
 
 ## Migration
 
-If you are migrating from `posthtml-extend` and/or `posthtml-modules` then you can continue to keep them until you migrate all of your components.
-For continue to use current code with this plugin without changing it, see below examples. Any more updates on this will be added in this issue:
+If you are migrating from `posthtml-extend` and/or `posthtml-modules` please to follow updates here:
 [posthtml-components/issues/16](https://github.com/thewebartisan7/posthtml-components/issues/16).
 
-### PostHTML Include
-
-PostHTML Include plugin can work when passed via `options.plugins` like below example:
-
-```js
-require("posthtml-component")({
-  root: "./src",
-  folders: ["components", "layouts"],
-  plugins: [
-    require("posthtml-include")({
-      encoding: "utf8",
-      root: "./src"
-    }),
-  ]
-})
-```
-
-### PostHTML Modules
-
-At the moment doesn't work when nested inside PostHTML Components plugin since it use `tree.match` and even trying with something like PostHTML Include is doing here https://github.com/posthtml/posthtml-include/blob/master/lib/index.js#L16 doesn't work. But a workaround is to use PostHTML Components custom tag and attributes like below:
-
-```js
-require("posthtml-component")({
-  root: "./src",
-  folders: ["components", "layouts"],
-  tag: 'module',
-  attribute: 'href',
-  yield: 'content',
-  plugins: [
-    require("posthtml-include")({
-      encoding: "utf8",
-      root: "./src/www/posthtml-templates/"
-    }),
-  ]
-})
-```
-
-NOTE: If you change `<yield>` tag to `<content>` to support your existing code, then you need to use it always. Maybe you can just replace all `<content>` with `<yield>` and it should works fine.
-
-### PostHTML Extends
-
-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).
diff --git a/src/locals.js b/src/locals.js
index 99c8486..7ec3f42 100644
--- a/src/locals.js
+++ b/src/locals.js
@@ -2,13 +2,11 @@
 
 const scriptDataLocals = require('posthtml-expressions/lib/locals');
 const pick = require('lodash/pick');
-const keys = require('lodash/keys');
-const defaults = require('lodash/defaults');
 const each = require('lodash/each');
-const extend = require('lodash/extend');
+const assign = require('lodash/assign');
 const mergeWith = require('lodash/mergeWith');
 
-const attributeTypes = ['merge', 'computed', 'aware'];
+const attributeTypes = ['aware', 'merge'];
 
 /**
  * Parse locals from attributes, globals and via script
@@ -55,7 +53,7 @@ module.exports = (currentNode, nextNode, filledSlots, options) => {
       attributesByTypeName.merge.splice(attributesByTypeName.merge.indexOf('locals'), 1);
       mergeWith(attributes, attributes.locals, options.mergeCustomizer);
     } else {
-      extend(attributes, attributes.locals);
+      assign(attributes, attributes.locals);
     }
 
     delete attributes.locals;
@@ -64,30 +62,14 @@ module.exports = (currentNode, nextNode, filledSlots, options) => {
   // Merge with global
   attributes = mergeWith({}, options.expressions.locals, attributes, options.mergeCustomizer);
 
-  // There is no way to know here what are locals
-  //  and what attributes passed to component
-
-  // Convert attribute names to camelCase
-  // each(attributes, (value, key, attrs) => {
-  //   attrs[camelCase(key)] = value;
-  // });
-
-  // Retrieve default locals from <script props> and merge with attributes
+  // Retrieve default locals from <script props> for merge with attributes
   const {locals} = scriptDataLocals(nextNode, {localsAttr: options.localsAttr, removeScriptLocals: true, locals: {...attributes, $slots: filledSlots}});
 
   if (locals) {
-    // Merge attributes
-    if (attributesByTypeName.merge.length > 0) {
-      extend(attributes, mergeWith(pick(locals, attributesByTypeName.merge), pick(attributes, attributesByTypeName.merge), options.mergeCustomizer));
-    }
-
-    // Override attributes with computed locals
-    if (attributesByTypeName.computed.length > 0) {
-      extend(attributes, pick(locals, keys(pick(attributes, attributesByTypeName.computed))));
-    }
-
-    // Set attributes not defined
-    defaults(attributes, locals);
+    assign(attributes, locals);
+    // if (attributesByTypeName.merge.length > 0) {
+    //   assign(attributes, mergeWith(pick(locals, attributesByTypeName.merge), pick(attributes, attributesByTypeName.merge), options.mergeCustomizer));
+    // }
   }
 
   // Set aware attributes
diff --git a/test/templates/components/child.html b/test/templates/components/child.html
index 6cd8147..fe67ae1 100644
--- a/test/templates/components/child.html
+++ b/test/templates/components/child.html
@@ -1,12 +1,12 @@
 <script props>
   module.exports = {
-    aBoolean: true,
-    aString: 'My String Child',
+    aBoolean: typeof locals.aBoolean !== 'undefined' ? locals.aBoolean : true,
+    aString: locals.aString || 'My String Child',
     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'}
+    anArray: locals.anArray || ['one', 'two', 'three'],
+    anArray2: locals.anArray2 || ['one2', 'two2', 'three2'],
+    anObject: locals.anObject || { one: 'One', two: 'Two', three: 'Three'},
+    anObject2: locals.anObject2 || { one: 'One2', two: 'Two2', three: 'Three2'}
   };
 </script>
 CHILD:
diff --git a/test/templates/components/component-locals-json-and-string.html b/test/templates/components/component-locals-json-and-string.html
index dcc7752..5a149d7 100644
--- a/test/templates/components/component-locals-json-and-string.html
+++ b/test/templates/components/component-locals-json-and-string.html
@@ -1,17 +1,17 @@
 <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'
+      myboolean: (locals.myboolean === true ? 'myboolean is true' : 'myboolean is false'),
+      title: locals.title || 'Default title',
+      items: locals.items || ['default first item', 'default second item'],
+      titles: Object.assign({
+        title: 'This is default main title',
+        subtitle: 'This is default subtitle',
+        suptitle: 'This is default suptitle'
+      }, locals.titles || {}),
     }
 </script>
 <div>
-<div>{{ mycomputed }}</div>
+<div>{{ myboolean }}</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>
diff --git a/test/templates/components/component-locals-type.html b/test/templates/components/component-locals-type.html
index ac04c96..027a2c7 100644
--- a/test/templates/components/component-locals-type.html
+++ b/test/templates/components/component-locals-type.html
@@ -1,19 +1,19 @@
 <script props>
   module.exports = {
-    aStringDefault: 'My default string',
-    aStringOverride: 'My default override string',
-    anObjectDefault: {
+    aStringDefault: locals.aStringDefault || 'My default string',
+    aStringOverride: locals.aStringOverride || 'My default override string',
+    anObjectDefault: locals.anObjectDefault || {
       first: 'First default item',
       second: 'Second default item'
     },
-    anObjectOverride: {
+    anObjectOverride: locals.anObjectOverride || {
       first: 'First overriden item',
       second: 'Second overriden item'
     },
-    anObjectMerged: {
+    anObjectMerged: Object.assign({
       first: 'First merged item',
       second: 'Second merged item'
-    }
+    }, locals.anObjectMerged || {})
   };
 </script>
 <div>
diff --git a/test/templates/components/component-locals.html b/test/templates/components/component-locals.html
index 85f3c96..e6299f1 100644
--- a/test/templates/components/component-locals.html
+++ b/test/templates/components/component-locals.html
@@ -1,7 +1,7 @@
 <script props>
     module.exports = {
-        title: 'Default title',
-        body: 'Default body'
+        title: locals.title || 'Default title',
+        body: locals.body || 'Default body'
     }
 </script>
 <div><h1>{{title}}</h1></div><div><slot:body>{{body}}</slot:body></div>
diff --git a/test/templates/components/component-mapped-attributes.html b/test/templates/components/component-mapped-attributes.html
index 7d6e75b..e92f8e3 100644
--- a/test/templates/components/component-mapped-attributes.html
+++ b/test/templates/components/component-mapped-attributes.html
@@ -1,7 +1,7 @@
 <script props>
     module.exports = {
-        title: 'Default title',
-        body: 'Default body'
+      title: locals.title || 'Default title',
+      body: locals.body || 'Default body'
     }
 </script>
 <div class="text-dark m-3">{{ title }} {{ body }}</div>
diff --git a/test/templates/components/component-mapped-attributes2.html b/test/templates/components/component-mapped-attributes2.html
index d9d3b54..b353353 100644
--- a/test/templates/components/component-mapped-attributes2.html
+++ b/test/templates/components/component-mapped-attributes2.html
@@ -1,7 +1,7 @@
 <script props>
   module.exports = {
-    title: 'Default title',
-    body: 'Default body'
+    title: locals.title || 'Default title',
+    body: locals.body || 'Default body'
   }
 </script>
 <div class="mapped"><div class="text-dark m-3" attributes>{{ title }} {{ body }}</div></div>
diff --git a/test/templates/components/component-mapped-attributes3.html b/test/templates/components/component-mapped-attributes3.html
index 3d8bf78..712b80f 100644
--- a/test/templates/components/component-mapped-attributes3.html
+++ b/test/templates/components/component-mapped-attributes3.html
@@ -1,7 +1,7 @@
 <script props>
   module.exports = {
-    title: 'Default title',
-    body: 'Default body'
+    title: locals.title || 'Default title',
+    body: locals.body || 'Default body'
   }
 </script>
 <div class="mapped"><div style="border: 1px solid black" attributes>{{ title }} {{ body }}</div></div>
diff --git a/test/templates/components/parent.html b/test/templates/components/parent.html
index 1b7855c..102ed47 100644
--- a/test/templates/components/parent.html
+++ b/test/templates/components/parent.html
@@ -1,12 +1,12 @@
 <script props>
   module.exports = {
-    aBoolean: true,
-    aString: 'My String',
+    aBoolean: typeof locals.aBoolean !== 'undefined' ? locals.aBoolean : true,
+    aString: locals.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'}
+    anArray: locals.anArray || ['one', 'two', 'three'],
+    anArray2: locals.anArray2 || ['one2', 'two2', 'three2'],
+    anObject: locals.anObject || { one: 'One', two: 'Two', three: 'Three'},
+    anObject2: locals.anObject2 || { one: 'One2', two: 'Two2', three: 'Three2'}
   };
 </script>
 PARENT:
diff --git a/test/templates/components/script-locals.html b/test/templates/components/script-locals.html
index aef5775..f1d1e3a 100644
--- a/test/templates/components/script-locals.html
+++ b/test/templates/components/script-locals.html
@@ -1,6 +1,6 @@
 <script props>
   module.exports = {
-    title: 'Default title',
+    title: locals.title || 'Default title',
     slotsAccessibleViaScript: locals.$slots
   }
 </script>
diff --git a/test/templates/layouts/base-locals.html b/test/templates/layouts/base-locals.html
index 9e299f8..3bd40d0 100644
--- a/test/templates/layouts/base-locals.html
+++ b/test/templates/layouts/base-locals.html
@@ -1,6 +1,6 @@
 <script props>
     module.exports = {
-        title: 'Default title'
+        title: locals.title || 'Default title'
     }
 </script>
 <html><head><title>{{ title }}</title></head><body><main><yield></yield></main><footer><slot:footer></slot:footer></footer></body></html>
diff --git a/test/test-locals.js b/test/test-locals.js
index 2fd5c91..3e11593 100644
--- a/test/test-locals.js
+++ b/test/test-locals.js
@@ -25,12 +25,12 @@ test('Must process attributes as locals', async t => {
 
 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" }'
+                    titles='{ "suptitle": "This is custom suptitle" }'
                     title="Custom title from JSON and String"
                     items='["another item", "yet another"]'
-                    computed:mycomputed="true"
+                    myboolean="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 expected = `<div><div>myboolean 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));
 
@@ -65,7 +65,11 @@ test('Must pass locals from parent to child via aware', async t => {
 });
 
 test('Must process default, merged and override props', async t => {
-  const actual = `<component src="components/component-locals-type.html" aStringOverride="My override string changed" anObjectOverride='{ "third": "Third override item", "fourth": "Fourth override item" }' merge:anObjectMerged='{ "third": "Third merged item", "fourth": "Fourth merged item" }'></component>`;
+  const actual = `<component src="components/component-locals-type.html"
+    aStringOverride="My override string changed"
+    anObjectOverride='{ "third": "Third override item", "fourth": "Fourth override item" }'
+    anObjectMerged='{ "third": "Third merged item", "fourth": "Fourth merged item" }'></component>`;
+
   const expected = `<div>  <h1>anObjectDefault</h1>      <p><strong>first</strong>: First default item</p>      <p><strong>second</strong>: Second default item</p>    <h1>anObjectOverride</h1>      <p><strong>third</strong>: Third override item</p>      <p><strong>fourth</strong>: Fourth override item</p>    <h1>anObjectMerged</h1>      <p><strong>first</strong>: First merged item</p>      <p><strong>second</strong>: Second merged item</p>      <p><strong>third</strong>: Third merged item</p>      <p><strong>fourth</strong>: Fourth merged item</p>    <h1>aStringDefault</h1>  <p>My default string</p>  <h1>aStringOverride</h1>  <p>My override string changed</p></div>`;
 
   const html = await posthtml([plugin({root: './test/templates', tag: 'component'})]).process(actual).then(result => clean(result.html));