3.0.2 • Published 3 months ago
@ideadesignmedia/swag v3.0.2
Swag
Installation
yarn add @ideadesignmedia/swag
Usage
import {State, ControlledComponent} from '@ideadesignmedia/swag'
const location = new State(window.location.pathname)
const navigate = (path) => {window.history.pushState({},"",path); location.value = window.location.pathname}
window.addEventListener('popstate',() => location.value = window.location.pathname)
class PageNotFound extends HTMLElement {
render() {
this.innerHTML = `<div class="column w100 jfs gap">
<h1>Page not found</h1>
<button>Home</button>
</div>`
this.querySelector('button').addEventListener('click', () => {
navigate('/')
})
}
connectedCallback() {
this.render()
}
}
customElements.define('page-not-found', PageNotFound)
class App extends ControlledComponent {
constructor() {
super()
this.shadow = this.attachShadow({ mode: 'open' })
this.state = new State(0, this.update)
}
render() {
this.shadow.innerHTML = `<style>
</style>
<div id="app">
<h1>Page ${this.state.value}</h1>
<div class="row gap">
<button id="more">More</button>
<button id="less">Less</button>
</div>
</div>`
this.shadow.querySelector('#more').addEventListener('click', () => {
this.state.value = this.state.value+1
})
this.shadow.querySelector('#less').addEventListener('click', () => {
this.state.value = this.state.value-1
})
}
connectedCallback() {
this.render()
}
}
document.querySelector('body').innerHTML = ''
const root = document.createElement('div')
root.id = 'root'
document.querySelector('body').appendChild(root)
const renderPage = (page) => root.innerHTML = (() => {
switch (page) {
case '/': return '<app-component></app-component>'
default: `<page-not-found></page-not-found>`
}
}
)();
renderPage(location.value)
location.on((page) => renderPage(page))
3.0.2
3 months ago
3.0.1
3 months ago
3.0.0
11 months ago
2.0.2
2 years ago
2.0.1
2 years ago
2.0.0
2 years ago
1.2.4
2 years ago
1.2.3
2 years ago
1.2.2
2 years ago
1.2.1
2 years ago
1.2.0
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago