snippet-spa v0.0.3

snippet-spa

Copy paste is future.

snippet-spa is collection of methods that helps creating lean API single-page application. With HTMLElement creator method and History API based router you get basic single-page application done.

<!-- snippet-spa.js exports methods createHTMLElement and initializeRouter -->
<script src="snippet-spa.js"></script>
<!-- create div element that is used as single-page application shell -->
<div id="app"></div>
<script>
// Object Literal to contain single-page application
var App = {
    appId: 'app',
    rootId: 'routerContainerElement',
    createShell: () => {
        document.getElementById(this.appId).appendChild(snippetSpa.createHTMLElement('div', null, [
            snippetSpa.createHTMLElement('a', { 'href': '/frontpage.html' }, 'Frontpage'),
            snippetSpa.createHTMLElement('a', { 'href': '/about.html' }, 'About'),
            snippetSpa.createHTMLElement('div', { 'id': this.rootId }, null)
        ]));
    },
    renderFrontpageOnRoot: function(root){
        return function(){
            root.appendChild(snippetSpa.createHTMLElement('h1', null, 'Frontpage'));
        }
    },
    renderAboutpageOnRoot: function(root){
        return function(){
            root.appendChild(snippetSpa.createHTMLElement('h1', null, 'About'));
        }
    },
    main: function () {
        var leRoot = document.getElementById(this.rootId);
        snippetSpa.initializeRouter(leRoot, {
            "/about.html": this.renderAboutpageOnRoot(leRoot),
            "/frontpage.html": this.renderFrontpageOnRoot(leRoot)
        });
    }
};
// Run main to initializeRouter and render according to route single-page application
App.main();
</script>

Github Page: https://xdvarpunen.github.io/snippet-spa/

API

• createHTML: creates HTMLElement object.
• historyRouter: sets HTMLElement into element chosen to be container for routes according to route.

./demo

./demo -folder includes demo of snippet spa hosted in express. ./demo -folder has README.md that includes instructions to get started.

./src

./src -folder includes source code for docco generated site.

./public and rest files

./public and rest files are docco files that is used to view github page content.

Generate docco

docco snippet-spa.js
# rename docs/snippet-spa.html to docs/index.html