Improvements.
h3rald h3rald@h3rald.com
Mon, 20 Apr 2020 12:05:34 +0200
4 files changed,
38 insertions(+),
102 deletions(-)
M
docs/H3_DeveloperGuide.htm
→
docs/H3_DeveloperGuide.htm
@@ -7358,10 +7358,8 @@
<pre><code class="html"><!doctype html> <html lang="en"> <head> + <title>My H3-powered App</title> <meta charset="utf-8" /> - <title>H3</title> - <meta name="description" content="My little H3-powered app" /> - <meta name="author" content="Fabio Cevasco" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> </head> <body>@@ -7370,7 +7368,7 @@ </body>
</html> </code></pre> -<p>Note that the script must be marked as an ES6 module (<code>type=module</code>), otherwise your imports won’t work.</p> +<p>Note that the script must be marked as an ES6 module (<code>type="module"</code>), otherwise your imports won’t work.</p> <a name="Import-h3.js"></a> <h3>Import h3.js<a href="#document-top" title="Go to top"></a></h3>@@ -7482,9 +7480,9 @@
<a name="Router"></a> <h3>Router<a href="#document-top" title="Go to top"></a></h3> -<p>H3 comes with a very minimal but fully functional URL fragment router. You create your application routes when initializing your application, and you can navigate to them using ordinary HREF links or the <code>h3.navigateTo</code> method.</p> +<p>H3 comes with a very minimal but fully functional URL fragment router. You create your application routes when initializing your application, and you can navigate to them using ordinary <code>href</code> links or programmatically using the <code>h3.navigateTo</code> method.</p> -<p>The current route is accessible via the <code>h3.route</code> property.</p> +<p>The current route is always accessible via the <code>h3.route</code> property.</p> <a name="Usage"></a> <h2>Usage<a href="#document-top" title="Go to top"></a></h2>@@ -7697,7 +7695,7 @@ </code></pre>
<p>🡇</p> -<pre><code class="html"><a id="test-link" class="primary" href="#/test"> +<pre><code class="html"><a id="test-link" class="btn primary" href="#/test"> This is a <em>test</em> link. </a> </code></pre>@@ -7817,47 +7815,16 @@ <h3>h3.init(config: object))<a href="#document-top" title="Go to top"></a></h3>
<p>The initialization method of every H3 application. You <em>must</em> call this method once to initialize your application by providing a component to render or configuration object with the following properties:</p> -<table> -<thead> - <tr> - <th>Property</th> - <th>Type</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td data-label="Property">element</td> - <td data-label="Type">Element</td> - <td data-label="Description">The DOM Element to which the Application will be attached (default: document.body).</td> - </tr> - <tr> - <td data-label="Property">routes</td> - <td data-label="Type">Object</td> - <td data-label="Description">An object containing paths as key and components as values, corresponding to the routes of the application.</td> - </tr> - <tr> - <td data-label="Property">modules</td> - <td data-label="Type">Array</td> - <td data-label="Description">An array of functions used to handle the application state.</td> - </tr> - <tr> - <td data-label="Property">preStart</td> - <td data-label="Type">Function</td> - <td data-label="Description">An optional function to be executed before the application is first rendered.</td> - </tr> - <tr> - <td data-label="Property">postStart</td> - <td data-label="Type">Function</td> - <td data-label="Description">An optional function to be executed after the application is first rendered.</td> - </tr> - </tbody> -</table> +<ul> +<li><strong>element</strong> (Element) — The DOM Element to which the Application will be attached (default: <code>document.body</code>).</li> +<li><strong>modules</strong> (Array) — An array of functions used to handle the application state that will be executed once before starting the application.</li> +<li><strong>routes</strong> (Object) — An object containing routing definitions, using paths as keys and components as values. Routing paths can contain named parts like <code>:name</code> or <code>:id</code> which will populate the <code>parts</code> property of the current route (<code>h3.route</code>).</li> +<li><strong>preStart</strong> (Function) — An optional function to be executed before the application is first rendered.</li> +<li><strong>postStart</strong> (Function) — An optional function to be executed after the application is first rendered.</li> +</ul> -<p>Routing paths can contain named parts like <code>:name</code> or <code>:id</code> which will populate the <code>parts</code> property of the current route.</p> - -<p>This is an example of a possible routing configuration:</p> +<p>This is an example of a simple routing configuration:</p> <pre><code class="js">const routes = { "/posts/:id": Post,@@ -7865,6 +7832,8 @@ "/pages/:id": Page,
"/": HomePage, }; </code></pre> + +<p>For more a complete example of initialization, see <a href="https://h3.js.org/example/assets/js/app.js">this</a>.</p> <a name="h3.navigateTo(path:-string,-params:-object)"></a> <h3>h3.navigateTo(path: string, params: object)<a href="#document-top" title="Go to top"></a></h3>@@ -7902,11 +7871,11 @@
<p>An object containing the current route. A Route object has the following properties:</p> <ul> -<li><code>path</code> — The current path (fragment without #) without query string parameters, e.g. <code>/posts/134</code></li> -<li><code>def</code> — The matching route definition, e.g. <code>/posts/:id</code></li> -<li><code>query</code> — The query string, if present, e.g. <code>?comments=yes</code></li> -<li><code>parts</code> — An object containing the values of the parts defined in the route, e.g. <code>{id: "134"}</code></li> -<li><code>params</code> — An object containing the query string parameters, e.g. <code>{comments: "yet"}</code></li> +<li><strong>path</strong> — The current path (fragment without #) without query string parameters, e.g. <code>/posts/134</code></li> +<li><strong>def</strong> — The matching route definition, e.g. <code>/posts/:id</code></li> +<li><strong>query</strong> — The query string, if present, e.g. <code>?comments=yes</code></li> +<li><strong>part</strong><code>&mdash; An object containing the values of the parts defined in the route, e.g.</code>{id: “134”}`</li> +<li><strong>params</strong> — An object containing the query string parameters, e.g. <code>{comments: "yet"}</code></li> </ul>
M
docs/md/api.md
→
docs/md/api.md
@@ -22,7 +22,7 @@
🡇 ```html -<a id="test-link" class="primary" href="#/test"> +<a id="test-link" class="btn primary" href="#/test"> This is a <em>test</em> link. </a> ```@@ -138,46 +138,13 @@ ### h3.init(config: object))
The initialization method of every H3 application. You _must_ call this method once to initialize your application by providing a component to render or configuration object with the following properties: -<table> -<thead> - <tr> - <th>Property</th> - <th>Type</th> - <th>Description</th> - </tr> - </thead> - <tbody> - <tr> - <td data-label="Property">element</td> - <td data-label="Type">Element</td> - <td data-label="Description">The DOM Element to which the Application will be attached (default: document.body).</td> - </tr> - <tr> - <td data-label="Property">routes</td> - <td data-label="Type">Object</td> - <td data-label="Description">An object containing paths as key and components as values, corresponding to the routes of the application.</td> - </tr> - <tr> - <td data-label="Property">modules</td> - <td data-label="Type">Array</td> - <td data-label="Description">An array of functions used to handle the application state.</td> - </tr> - <tr> - <td data-label="Property">preStart</td> - <td data-label="Type">Function</td> - <td data-label="Description">An optional function to be executed before the application is first rendered.</td> - </tr> - <tr> - <td data-label="Property">postStart</td> - <td data-label="Type">Function</td> - <td data-label="Description">An optional function to be executed after the application is first rendered.</td> - </tr> - </tbody> -</table> +* **element** (Element) — The DOM Element to which the Application will be attached (default: `document.body`). +* **modules** (Array) — An array of functions used to handle the application state that will be executed once before starting the application. +* **routes** (Object) — An object containing routing definitions, using paths as keys and components as values. Routing paths can contain named parts like `:name` or `:id` which will populate the `parts` property of the current route (`h3.route`). +* **preStart** (Function) — An optional function to be executed before the application is first rendered. +* **postStart** (Function) — An optional function to be executed after the application is first rendered. -Routing paths can contain named parts like `:name` or `:id` which will populate the `parts` property of the current route. - -This is an example of a possible routing configuration: +This is an example of a simple routing configuration: ```js const routes = {@@ -186,6 +153,8 @@ "/pages/:id": Page,
"/": HomePage, }; ``` + +For more a complete example of initialization, see [this](https://h3.js.org/example/assets/js/app.js). ### h3.navigateTo(path: string, params: object)@@ -220,11 +189,11 @@ ### h3.route
An object containing the current route. A Route object has the following properties: -* `path` — The current path (fragment without #) without query string parameters, e.g. `/posts/134` -* `def` — The matching route definition, e.g. `/posts/:id` -* `query` — The query string, if present, e.g. `?comments=yes` -* `parts` — An object containing the values of the parts defined in the route, e.g. `{id: "134"}` -* `params` — An object containing the query string parameters, e.g. `{comments: "yet"}` +* **path** — The current path (fragment without #) without query string parameters, e.g. `/posts/134` +* **def** — The matching route definition, e.g. `/posts/:id` +* **query** — The query string, if present, e.g. `?comments=yes` +* **part**` — An object containing the values of the parts defined in the route, e.g. `{id: "134"}` +* **params** — An object containing the query string parameters, e.g. `{comments: "yet"}` ### h3.state
M
docs/md/key-concepts.md
→
docs/md/key-concepts.md
@@ -73,6 +73,6 @@ Essentially a module is just a function that typically is meant to run only once to define one or more message subscriptions. Modules are the place where you should handle state changes in your application.
### Router -H3 comes with a very minimal but fully functional URL fragment router. You create your application routes when initializing your application, and you can navigate to them using ordinary HREF links or the `h3.navigateTo` method. +H3 comes with a very minimal but fully functional URL fragment router. You create your application routes when initializing your application, and you can navigate to them using ordinary `href` links or programmatically using the `h3.navigateTo` method. -The current route is accessible via the `h3.route` property. +The current route is always accessible via the `h3.route` property.
M
docs/md/quick-start.md
→
docs/md/quick-start.md
@@ -10,10 +10,8 @@ ```html
<!doctype html> <html lang="en"> <head> + <title>My H3-powered App</title> <meta charset="utf-8" /> - <title>H3</title> - <meta name="description" content="My little H3-powered app" /> - <meta name="author" content="Fabio Cevasco" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> </head> <body>@@ -22,7 +20,7 @@ </body>
</html> ``` -Note that the script must be marked as an ES6 module (`type=module`), otherwise your imports won't work. +Note that the script must be marked as an ES6 module (`type="module"`), otherwise your imports won't work. ### Import h3.js