all repos — h3 @ 01bb9d49f60f1bb2eb2b40b3a0c8565e72424e60

A tiny, extremely minimalist JavaScript microframework.

Added script to manage version name and label in a single place.
h3rald h3rald@h3rald.com
Tue, 21 Apr 2020 20:59:13 +0200
commit

01bb9d49f60f1bb2eb2b40b3a0c8565e72424e60

parent

b33df69d345009fb4315f74766f026ae8f820ddc

M README.mdREADME.md

@@ -1,1 +1,43 @@

-docs/md/overview.md+<a href="https://www.npmjs.com/package/@h3rald/h3" target="_blank" class="badge"><img src="https://img.shields.io/npm/v/@h3rald/h3"></a> +<a href="https://github.com/h3rald/h3/blob/master/LICENSE" target="_blank" class="badge"><img src="https://img.shields.io/github/license/h3rald/h3"></a> +<a href="https://travis-ci.org/github/h3rald/h3" target="_blank" class="badge"><img src="https://img.shields.io/travis/h3rald/h3"></a> +<a href="https://coveralls.io/github/h3rald/h3?branch=master" target="_blank" class="badge"><img src="https://img.shields.io/coveralls/github/h3rald/h3"></a> + +*** + +## Overview + +**H3** is a microframework to build client-side single-page applications (SPAs) in modern JavaScript. + +H3 is also: + +- **tiny**, under [700 sloc](https://github.com/h3rald/h3/blob/master/h3.js). +- **modern**, in the sense that it runs only in modern browsers (latest versions of Chrome, Firefox, Edge & similar). +- **easy** to learn, its API is comprised of only seven methods and two properties. + +### I'm sold! Where can I get it? + +Here, look, it's just one file: + +<a href="https://raw.githubusercontent.com/h3rald/h3/v0.1.0/h3.js" target="_blank" class="button primary">Download v0.1.0 (Audacious Andorian)</a> + +Yes there is also a [NPM package](https://www.npmjs.com/package/@h3rald/h3) if you want to use it with WebPack and similar, but let me repeat: _it's just one file_. + +### Hello, World? + +Here's an example of an extremely minimal SPA created with H3: + +```js +import h3 from "./h3.js"; +h3.init(() => h3("h1", "Hello, World!")); +``` + +This will render a `h1` tag within the document body, containing the text `"Hello, World!"`. + +### Something more complex? + +Have a look at the code of a [simple todo list](https://github.com/h3rald/h3/tree/master/docs/example) ([demo](https://h3.js.org/example/index.html)) with several components, a store and some routing. + +### Can I use it then, no strings attached? + +Yes. It's [MIT-licensed](https://github.com/h3rald/h3/blob/master/LICENSE).
A VERSION

@@ -0,0 +1,1 @@

+0.1.0:Audacious Andorian
M docs/H3_DeveloperGuide.htmdocs/H3_DeveloperGuide.htm

@@ -7331,7 +7331,7 @@ <h3>I&rsquo;m sold! Where can I get it?<a href="#document-top" title="Go to top"></a></h3>

<p>Here, look, it&rsquo;s just one file:</p> -<p><a href="https://raw.githubusercontent.com/h3rald/h3/v0.1.0/h3.js" target="_blank" class="button primary">Download v0.1.0</a></p> +<p><a href="https://raw.githubusercontent.com/h3rald/h3/v0.1.0/h3.js" target="_blank" class="button primary">Download v0.1.0 (Audacious Andorian)</a></p> <p>Yes there is also a <a href="https://www.npmjs.com/package/@h3rald/h3">NPM package</a> if you want to use it with WebPack and similar, but let me repeat: <em>it&rsquo;s just one file</em>.</p>

@@ -7593,7 +7593,7 @@ import marked from "./vendor/marked.js";

import Prism from "./vendor/prism.js"; </code></pre> -<p>Easy enough. Then we want to store the mapping between the different page fragments and their titles, as well as some cool project badges:</p> +<p>Easy enough. Then we want to store the mapping between the different page fragments and their titles:</p> <pre><code class="js">const labels = { overview: "Overview",

@@ -7602,16 +7602,6 @@ "key-concepts": "Key Concepts",

tutorial: "Tutorial", api: "API", about: "About", -}; - -const badges = { - "https://img.shields.io/npm/v/@h3rald/h3": "https://www.npmjs.com/package/@h3rald/h3", - "https://img.shields.io/github/license/h3rald/h3": - "https://github.com/h3rald/h3/blob/master/LICENSE", - "https://img.shields.io/travis/h3rald/h3": - "https://travis-ci.org/github/h3rald/h3", - "https://img.shields.io/coveralls/github/h3rald/h3": - "https://coveralls.io/github/h3rald/h3?branch=master", }; </code></pre>

@@ -7659,7 +7649,7 @@ </code></pre>

<p>The main responsibility of this component is to fetch the Markdown content and render the whole page, but note how the rendering different portions of the page are delegated to different components: <code>Header</code>, <code>Navigation</code>, <code>Content</code>, and <code>Footer</code>.</p> -<p>The <code>Header</code> component is very simple: its only job is to render static content:</p> +<p>The <code>Header</code> and <code>Footer</code> components are very simple: their only job is to render static content:</p> <pre><code class="js">const Header = () =&gt; { return h3("header.row.sticky", [

@@ -7673,14 +7663,8 @@ ]),

h3("label.drawer-toggle.button.col-sm-last", { for: "drawer-control" }), ]); }; -</code></pre> -<p>The <code>Footer</code> component is slightly more complex, as it also renders the project badges via a <code>map</code> function:</p> - -<pre><code class="js">const Footer = () =&gt; { - const images = Object.keys(badges).map((img) =&gt; - h3("a.badge", { href: badges[img], target: "_blank" }, h3("img", { src: img })) - ); +const Footer = () =&gt; { return h3("footer", [ h3("div", [ "© 2020 Fabio Cevasco · ",

@@ -7693,7 +7677,6 @@ },

"Download the Guide" ), ]), - h3("div", images), ]); }; </code></pre>
M docs/js/app.jsdocs/js/app.js

@@ -11,16 +11,6 @@ api: "API",

about: "About", }; -const badges = { - "https://img.shields.io/npm/v/@h3rald/h3": "https://www.npmjs.com/package/@h3rald/h3", - "https://img.shields.io/github/license/h3rald/h3": - "https://github.com/h3rald/h3/blob/master/LICENSE", - "https://img.shields.io/travis/h3rald/h3": - "https://travis-ci.org/github/h3rald/h3", - "https://img.shields.io/coveralls/github/h3rald/h3": - "https://coveralls.io/github/h3rald/h3?branch=master", -}; - const pages = {}; const fetchPage = async (pages, id, md) => {

@@ -62,9 +52,6 @@ ]);

}; const Footer = () => { - const images = Object.keys(badges).map((img) => - h3("a.badge", { href: badges[img], target: "_blank" }, h3("img", { src: img })) - ); return h3("footer", [ h3("div", [ "© 2020 Fabio Cevasco · ",

@@ -77,7 +64,6 @@ },

"Download the Guide" ), ]), - h3("div", images), ]); };
M docs/md/overview.mddocs/md/overview.md

@@ -4,15 +4,15 @@ **H3** is a microframework to build client-side single-page applications (SPAs) in modern JavaScript.

H3 is also: -* **tiny**, under [700 sloc](https://github.com/h3rald/h3/blob/master/h3.js). -* **modern**, in the sense that it runs only in modern browsers (latest versions of Chrome, Firefox, Edge & similar). -* **easy** to learn, its API is comprised of only seven methods and two properties. +- **tiny**, under [700 sloc](https://github.com/h3rald/h3/blob/master/h3.js). +- **modern**, in the sense that it runs only in modern browsers (latest versions of Chrome, Firefox, Edge & similar). +- **easy** to learn, its API is comprised of only seven methods and two properties. ### I'm sold! Where can I get it? Here, look, it's just one file: -<a href="https://raw.githubusercontent.com/h3rald/h3/v0.1.0/h3.js" target="_blank" class="button primary">Download v0.1.0</a> +<a href="https://raw.githubusercontent.com/h3rald/h3/v0.1.0/h3.js" target="_blank" class="button primary">Download v0.1.0 (Audacious Andorian)</a> Yes there is also a [NPM package](https://www.npmjs.com/package/@h3rald/h3) if you want to use it with WebPack and similar, but let me repeat: _it's just one file_.

@@ -33,4 +33,4 @@ Have a look at the code of a [simple todo list](https://github.com/h3rald/h3/tree/master/docs/example) ([demo](https://h3.js.org/example/index.html)) with several components, a store and some routing.

### Can I use it then, no strings attached? -Yes. It's [MIT-licensed](https://github.com/h3rald/h3/blob/master/LICENSE).+Yes. It's [MIT-licensed](https://github.com/h3rald/h3/blob/master/LICENSE).
M docs/md/tutorial.mddocs/md/tutorial.md

@@ -52,7 +52,7 @@ import marked from "./vendor/marked.js";

import Prism from "./vendor/prism.js"; ``` -Easy enough. Then we want to store the mapping between the different page fragments and their titles, as well as some cool project badges: +Easy enough. Then we want to store the mapping between the different page fragments and their titles: ```js const labels = {

@@ -63,16 +63,6 @@ tutorial: "Tutorial",

api: "API", about: "About", }; - -const badges = { - "https://img.shields.io/npm/v/@h3rald/h3": "https://www.npmjs.com/package/@h3rald/h3", - "https://img.shields.io/github/license/h3rald/h3": - "https://github.com/h3rald/h3/blob/master/LICENSE", - "https://img.shields.io/travis/h3rald/h3": - "https://travis-ci.org/github/h3rald/h3", - "https://img.shields.io/coveralls/github/h3rald/h3": - "https://coveralls.io/github/h3rald/h3?branch=master", -}; ``` We are going to store the HTML contents of each page in an Object, and we're going to need a simple function to [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) the Markdown file and render it as HTML:

@@ -119,7 +109,7 @@ ```

The main responsibility of this component is to fetch the Markdown content and render the whole page, but note how the rendering different portions of the page are delegated to different components: `Header`, `Navigation`, `Content`, and `Footer`. -The `Header` component is very simple: its only job is to render static content: +The `Header` and `Footer` components are very simple: their only job is to render static content: ```js const Header = () => {

@@ -134,15 +124,8 @@ ]),

h3("label.drawer-toggle.button.col-sm-last", { for: "drawer-control" }), ]); }; -``` - -The `Footer` component is slightly more complex, as it also renders the project badges via a `map` function: -```js const Footer = () => { - const images = Object.keys(badges).map((img) => - h3("a.badge", { href: badges[img], target: "_blank" }, h3("img", { src: img })) - ); return h3("footer", [ h3("div", [ "© 2020 Fabio Cevasco · ",

@@ -155,7 +138,6 @@ },

"Download the Guide" ), ]), - h3("div", images), ]); }; ```
M package.jsonpackage.json

@@ -7,7 +7,9 @@ "scripts": {

"test": "jest", "coverage": "jest --coverage && cat ./coverage/lcov.info | coveralls", "copy": "cp h3.js docs/js/h3.js && cp h3.js docs/example/assets/js/h3.js", - "guide": "hastyscribe docs/H3_DeveloperGuide.md" + "release": "node scripts/release.js", + "guide": "hastyscribe docs/H3_DeveloperGuide.md", + "update": "npm run release && npm run copy && npm run guide" }, "repository": { "type": "git",

@@ -36,4 +38,4 @@ "@babel/preset-env": "^7.9.5",

"coveralls": "^3.0.11", "jest": "^25.3.0" } -} +}
A scripts/release.js

@@ -0,0 +1,38 @@

+const fs = require("fs"); +const path = require("path"); + +const [vNumber, vLabel] = fs.readFileSync("VERSION", "utf8").trim().split(":"); + +const readme = "./README.md"; +const overview = "./docs/md/overview.md"; +const app = "./docs/js/app.js"; +const tutorial = "./docs/md/tutorial.md"; +const package = "./package.json"; + +// Update README.md +let readmeData = fs.readFileSync(readme, "utf8"); +readmeData = readmeData.replace(/v\d+\.\d+\.\d+/, `v${vNumber}`); +readmeData = readmeData.replace( + /Download v\d+\.\d+\.\d+ \([^)]+\)/, + `Download v${vNumber} (${vLabel})` +); +fs.writeFileSync(readme, readmeData); + +// Remove badges and copy to overview.md +const overviewData = readmeData.replace(/[^\*]+\*\*\*\s+/m, ""); +fs.writeFileSync(overview, overviewData); + +// Update app.js and tutorial.md +const updateCode = (file) => { + let data = fs.readFileSync(file, "utf8"); + data = data.replace(/v\d+\.\d+\.\d+/, `v${vNumber}`); + data = data.replace(/“.+“/, `“${vLabel}“`); + fs.writeFileSync(file, data); +}; +updateCode(app); +updateCode(tutorial); + +// Update package.json +const packageData = JSON.parse(fs.readFileSync(package, "utf8")); +packageData.version = vNumber; +fs.writeFileSync(package, JSON.stringify(packageData, null, 2));