zenra-spa v0.1.0-beta.1
Zenra SPA is...
Zenra SPA is light weight & clean & dependency injectable SPA Library
Usage
npm i zenra-spa
import createSPA, { browserHistory, domAttachment } from "zenra-spa"
const createElement = (text: string) => {
const newElm = document.createElement("div");
newElm.innerText = text;
return newElm
}
const mountPoint = document.getElementById("mount")
if (mountPoint) {
const { push } = createSPA(
{
components: [
{
path: "/",
component: {
mount() {
return {
mounted: createElement("TOP")
}
}
}
},
{
path: "/home",
component: () => ({
mount() {
return {
mounted: createElement("HOME")
}
}
})
},
{
path: "/update/:param?",
component: {
mount(params) {
const mounted = createElement("UPDATE " + (params.param || ""))
return {
mounted,
update(params) {
mounted.innerText = `UPDATE ${(params.param || "")}
Component updated without remounting.`
}
}
}
}
},
{
path: "/load",
component() {
return new Promise(res => {
setTimeout(res, 1000, {
mount() {
return {
mounted: createElement("LOADED")
}
}
})
})
}
}
],
attachment: domAttachment(mountPoint),
history: browserHistory(window)
}
)
const nav = document.getElementById("nav")
if (nav) {
["/", "/home", "/update", "/update/hoge", "/load"].forEach(e => {
const a = document.createElement("a")
a.href = e;
a.innerText = e;
a.addEventListener("click", event => {
event.preventDefault()
push(e)
})
nav.appendChild(a);
})
}
}
Config
component
components
configuration is definition about UI Components and path.
You can specify component
as 1:Component
, 2:function returning Component
or 3:function returning Promise of Component
if you specify it as '3', the function will be called at once on the first time when the component is called by router.Component
must define how to create UI element.
You implement mount
function returning ComponentInstance
on your Component
definition.ComponentInstance
is warpper instance of UI element.
attachment
attachment
configuration is definition how to attach and detach UI Component to your application when routing.
You can specify it as Attachment
.attach
function of Attachment
is called when router pick an UI component to render (as generally) by current current path statement
history
history
configuration is logic that SPA and current path statement work together.
You can specify it as History
.getPath
function of History
gets currernt path statement.push
function changes currernt path statement and push the history.watch
function sets a listenr on change of currernt path statement.