README
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.
and rest files ./public
./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