all repos — h3 @ f3ba6baf8f2dfc90fd36ae45be6a6547aed90048

A tiny, extremely minimalist JavaScript microframework.

Updated docs.
h3rald h3rald@h3rald.com
Sat, 31 Oct 2020 18:56:58 +0100
commit

f3ba6baf8f2dfc90fd36ae45be6a6547aed90048

parent

a09f0cb51b048f059087b9dd64aa586a0eca9db7

3 files changed, 14 insertions(+), 14 deletions(-)

jump to
M docs/H3_DeveloperGuide.htmdocs/H3_DeveloperGuide.htm

@@ -7252,7 +7252,7 @@ </li>

<li><a href="#Quick-Start">Quick Start</a> <ul> <li><a href="#Create-a-basic-HTML-file">Create a basic HTML file</a></li> - <li><a href="#Import-h3.js">Import h3.js</a></li> + <li><a href="#Import-h3-and-h-from-h3.js">Import h3 and h from h3.js</a></li> <li><a href="#Create-your-SPA">Create your SPA</a></li> </ul> </li>

@@ -7402,22 +7402,22 @@ </code></pre>

<p>Note that the script must be marked as an ES6 module (<code>type="module"</code>), otherwise your imports won&rsquo;t work.</p> -<a name="Import-h3.js"></a> -<h3>Import h3.js<a href="#document-top" title="Go to top"></a></h3> +<a name="Import-h3-and-h-from-h3.js"></a> +<h3>Import h3 and h from h3.js<a href="#document-top" title="Go to top"></a></h3> -<p>Then, inside your <code>app.js</code> file, import <code>h3.js</code>, which should be accessible somewhere in your app:</p> +<p>Then, inside your <code>app.js</code> file, import <code>h</code> and <code>h3</code> from <code>h3.js</code>, which should be accessible somewhere in your app:</p> -<pre><code class="js">import h3 from "./h3.js"; +<pre><code class="js">import { h3, h } from "./h3.js"; </code></pre> -<p>This will work in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules">every modern browser except Internet Explorer</a>. You don&rsquo;t need a transpiler, you don&rsquo;t need something to convert your beautiful ES6 code back to cluncky ES5.</p> +<p>This will work in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules">every modern browser except Internet Explorer</a>. You don&rsquo;t need a transpiler, you don&rsquo;t need something to convert your beautiful ES6 code back to clunky ES5.</p> <p>Unless your company tells you to, do yourself a favor and don&rsquo;t support IE. It&rsquo;s 2020, even <a href="https://www.theverge.com/2020/1/15/21066767/microsoft-edge-chromium-new-browser-windows-mac-download-os">Microsoft moved on</a>, and now ES6 modules work in all major browsers.</p> <a name="Create-your-SPA"></a> <h3>Create your SPA<a href="#document-top" title="Go to top"></a></h3> -<p>After importing the <code>h3</code> object, you can start developing your SPA. A bare minimum SPA is comprised by a single component passed to the <code>h3.init()</code> method:</p> +<p>After importing the <code>h3</code> object and the <code>h</code> function, you can start developing your SPA. A bare minimum SPA is comprised by a single component passed to the <code>h3.init()</code> method:</p> <pre><code class="js">// A simple component printing the current date and time // Pressig the Refresh button causes the application to redraw

@@ -8128,7 +8128,7 @@ </ul>

</div> <div id="footer"> - <p><span class="copy"></span> Fabio Cevasco &ndash; October 25, 2020</p> + <p><span class="copy"></span> Fabio Cevasco &ndash; October 31, 2020</p> <p><span>Powered by</span> <a href="https://h3rald.com/hastyscribe"><span class="hastyscribe"></span></a></p> </div> </div>
M docs/md/best-practices.mddocs/md/best-practices.md

@@ -8,7 +8,7 @@ No, that's not a mistake. Although you should understand [why immutability is important](https://stackoverflow.com/questions/34385243/why-is-immutability-so-important-or-needed-in-javascript), you shouldn't force yourself to use it in all situations. Instead, you should go through [this article](https://desalasworks.com/article/immutability-in-javascript-a-contrarian-view/) and try to understand also a contrarian view of immutability.

In H3, changes only occur when needed. Most notably, when re-rendering the Virtual DOM tree of the application will be *mutated in place*, but only where necessary. Functions as well are considered equal if their source code (i.e. string representation) is equal. While this can cause problems in some situations if you are not aware of it, it can be beneficial and actually simplify things most of the time. -When managing state, if something is different you should typically _just change it_, unless it's shared across the whole application through the Store, in which case (but only in that case) you should try to manage change without side effects and following basic immutability rules. As a rule of thumb, Modules should manage shared application state in an immutable way. +When managing state, if something is different you should typically *just change it*, unless it's shared across the whole application through the Store, in which case (but only in that case) you should try to manage change without side effects and following basic immutability rules. As a rule of thumb, Modules should manage shared application state in an immutable way. ### Components
M docs/md/quick-start.mddocs/md/quick-start.md

@@ -22,21 +22,21 @@ ```

Note that the script must be marked as an ES6 module (`type="module"`), otherwise your imports won't work. -### Import h3.js +### Import h3 and h from h3.js -Then, inside your `app.js` file, import `h3.js`, which should be accessible somewhere in your app: +Then, inside your `app.js` file, import `h` and `h3` from `h3.js`, which should be accessible somewhere in your app: ```js -import h3 from "./h3.js"; +import { h3, h } from "./h3.js"; ``` -This will work in [every modern browser except Internet Explorer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). You don't need a transpiler, you don't need something to convert your beautiful ES6 code back to cluncky ES5. +This will work in [every modern browser except Internet Explorer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). You don't need a transpiler, you don't need something to convert your beautiful ES6 code back to clunky ES5. Unless your company tells you to, do yourself a favor and don't support IE. It's 2020, even [Microsoft moved on](https://www.theverge.com/2020/1/15/21066767/microsoft-edge-chromium-new-browser-windows-mac-download-os), and now ES6 modules work in all major browsers. ### Create your SPA -After importing the `h3` object, you can start developing your SPA. A bare minimum SPA is comprised by a single component passed to the `h3.init()` method: +After importing the `h3` object and the `h` function, you can start developing your SPA. A bare minimum SPA is comprised by a single component passed to the `h3.init()` method: ```js // A simple component printing the current date and time