Start ui framework with web components

src/ExComponent.ts

@@ -0,0 +1,139 @@
+
+export abstract class ExComponent extends HTMLElement {
+    protected static html = ``
+
+    static get observedAttributes() {
+        const map: any = (this as any).exPropertyAttributeMapping
+        if ( Array.isArray(map) ) {
+            return map.map(x => x.attribute)
+        }
+
+        return []
+    }
+
+    protected readonly shadow = this.attachShadow({ mode: 'open' })
+
+    private hadFirstRender = false
+
+    private preFirstRenderDefaultAttributes: any = {}
+
+    private rendersMap: any = {}
+
+    private mountListeners: ((el: this) => unknown)[] = []
+
+    private didMount = false
+
+    constructor() {
+        super()
+        this.setPropertyAttributeMappings()
+        this.setPropertyRendersMappings()
+        this.attachTemplate()
+        this.setPropertyQueryMappings()
+    }
+
+    dispatchCustom(name: string, detail: any): boolean {
+        return this.dispatchEvent(
+            new CustomEvent(name, { detail }),
+        )
+    }
+
+    connectedCallback() {
+        this.mount()
+        this.didMount = true
+        this.mountListeners.map(x => x(this))
+        this.render()
+    }
+
+    attachTemplate() {
+        const template = document.createElement('template')
+        template.innerHTML = ((this as any).constructor as typeof ExComponent).html
+        this.shadow.appendChild(template.content.cloneNode(true))
+    }
+
+    setPropertyQueryMappings(): void {
+        const map: any = (this as any).constructor.exPropertyElementMapping
+        if ( Array.isArray(map) ) {
+            for ( const mapping of map ) {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                this[mapping.property] = this.shadow.querySelector(mapping.selector)
+            }
+        }
+    }
+
+    setPropertyRendersMappings(): void {
+        const map: any = (this as any).constructor.exPropertyRendersMapping
+        if ( Array.isArray(map) ) {
+            for ( const mapping of map ) {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                delete this[mapping.property]
+
+                Object.defineProperty(this, mapping.property, {
+                    get: () => this.rendersMap[mapping.property],
+                    set: value => {
+                        this.rendersMap[mapping.property] = value
+
+                        if ( this.hadFirstRender ) {
+                            this.render()
+                        }
+                    },
+                })
+            }
+        }
+    }
+
+    setPropertyAttributeMappings(): void {
+        const map: any = (this as any).constructor.exPropertyAttributeMapping
+        if ( Array.isArray(map) ) {
+            for ( const mapping of map ) {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                delete this[mapping.property]
+
+                Object.defineProperty(this, mapping.property, {
+                    get: () => this.getAttribute(mapping.attribute),
+                    set: value => {
+                        if ( !this.hadFirstRender ) {
+                            this.preFirstRenderDefaultAttributes[mapping.attribute] = value
+                            return
+                        }
+
+                        this.setAttribute(mapping.attribute, value)
+                    },
+                })
+            }
+        }
+    }
+
+    attributeChangedCallback(): void {
+        this.render()
+    }
+
+    onMount(callback: (el: this) => unknown) {
+        if ( this.didMount ) {
+            callback(this)
+        } else {
+            this.mountListeners.push(callback)
+        }
+    }
+
+    tap<T>(callback: (el: this) => T): T {
+        return callback(this)
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    mount(): void {}
+
+    render(): void {
+        if ( !this.hadFirstRender ) {
+            for ( const prop of ((this as any).constructor as typeof ExComponent).observedAttributes ) {
+                if ( !this.getAttribute(prop) ) {
+                    this.setAttribute(prop, this.preFirstRenderDefaultAttributes[prop])
+                }
+            }
+        }
+
+        this.hadFirstRender = true
+    }
+}

src/Test.component.ts

@@ -0,0 +1,57 @@
+import {Attribute, Component, Element} from './decorators.js'
+import {ExComponent} from './ExComponent.js'
+
+@Component('ex-button')
+export class Button extends ExComponent {
+    protected static html = `
+        <style>
+            .container {
+              padding: 8px;
+            }
+            
+            button {
+              display: block;
+              overflow: hidden;
+              position: relative;
+              padding: 0 16px;
+              font-size: 16px;
+              font-weight: bold;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              cursor: pointer;
+              outline: none;
+            
+              width: 100%;
+              height: 40px;
+            
+              box-sizing: border-box;
+              border: 1px solid #a1a1a1;
+              background: #ffffff;
+              box-shadow: 0 2px 4px 0 rgba(0,0,0, 0.05), 0 2px 8px 0 rgba(161,161,161, 0.4);
+              color: #363636;
+              cursor: pointer;
+            }
+        </style>
+        
+        <div class="container">
+            <button>Label</button>
+        </div>
+    `
+
+    @Attribute()
+    protected label = 'Label'
+
+    @Element('button')
+    protected $button!: HTMLButtonElement
+
+    mount(): void {
+        this.$button.addEventListener('click', () => {
+            this.dispatchCustom('exClick', {})
+        })
+    }
+
+    render(): void {
+        super.render()
+        this.$button.innerText = this.label
+    }
+}

src/decorators.ts

@@ -0,0 +1,55 @@
+function setPropertyElementMapping(target: any, property: string|symbol, selector: string) {
+    if ( !target.exPropertyElementMapping ) {
+        target.exPropertyElementMapping = []
+    }
+
+    target.exPropertyElementMapping.push({
+        property,
+        selector,
+    })
+}
+
+export const Element = (selector: string): PropertyDecorator => {
+    return (target, property) => {
+        setPropertyElementMapping(target.constructor, property, selector)
+    }
+}
+
+function setPropertyAttributeMapping(target: any, property: string|symbol, attribute: string) {
+    if ( !target.exPropertyAttributeMapping ) {
+        target.exPropertyAttributeMapping = []
+    }
+
+    target.exPropertyAttributeMapping.push({
+        property,
+        attribute,
+    })
+}
+
+export const Attribute = (attribute?: string): PropertyDecorator => {
+    return (target, property) => {
+        setPropertyAttributeMapping(target.constructor, property, attribute || String(property))
+    }
+}
+
+function setPropertyRendersMapping(target: any, property: string|symbol) {
+    if ( !target.exPropertyRendersMapping ) {
+        target.exPropertyRendersMapping = []
+    }
+
+    target.exPropertyRendersMapping.push({
+        property,
+    })
+}
+
+export const Renders = (): PropertyDecorator => {
+    return (target, property) => {
+        setPropertyRendersMapping(target.constructor, property)
+    }
+}
+
+export const Component = (selector: string): ClassDecorator => {
+    return (target) => {
+        window.customElements.define(selector, target as any)
+    }
+}

src/index.ts

@@ -1,3 +1,7 @@
+import 'bootstrap'
+import 'bootstrap/dist/css/bootstrap.min.css'
 
-export const HELLO_WORLD = 'Hello, World!'
-
+export * from './Test.component.js'
+export * from './layout/Page.component.js'
+export * from './layout/Section.component.js'
+export * from './nav/NavBar.component.js'

src/layout/Page.component.ts

@@ -0,0 +1,35 @@
+import {ExComponent} from '../ExComponent.js'
+import {Component} from '../decorators.js'
+
+@Component('ex-page')
+export class PageComponent extends ExComponent {
+    protected static html = `
+        <style>
+            .container {
+                display: flex;
+                justify-content: center;
+                width: 100%;
+                height: 100%;
+                text-align: left;
+            }
+
+            .inner {
+                padding: 0 20px;
+                max-width: min(70%, 1000px);
+                min-width: min(70%, 1000px);
+            }
+
+            @media(max-width: 960px) {
+                .inner {
+                    width: 100%;
+                    max-width: unset;
+                }
+            }
+        </style>
+        <div class="container">
+            <div class="inner">
+                <slot></slot>
+            </div>
+        </div>
+    `
+}

src/layout/Section.component.ts

@@ -0,0 +1,17 @@
+import {ExComponent} from '../ExComponent.js'
+import {Component} from '../decorators.js'
+
+@Component('ex-section')
+export class SectionComponent extends ExComponent {
+    protected static html = `
+        <style>
+            .container {
+                min-height: 100vh;
+            }
+        </style>
+
+        <div class="container">
+            <slot></slot>
+        </div>
+    `
+}

src/nav/NavBar.component.ts

@@ -0,0 +1,103 @@
+import {ExComponent} from '../ExComponent.js'
+import {Attribute, Component, Element, Renders} from '../decorators.js'
+
+export interface NavBarItem {
+    title: string,
+    name: string,
+    href?: string,
+    right?: boolean,
+}
+
+@Component('ex-nav')
+export class NavBarComponent extends ExComponent {
+    protected static html = `
+        <style>
+            nav {
+                display: flex;
+                flex-direction: row;
+                margin-top: 50px;
+                margin-bottom: 20px;
+            }
+
+            ul {
+                flex: 1;
+                list-style-type: none;
+                margin: 0;
+                padding: 0;
+                overflow: hidden;
+            }
+
+            li {
+                float: left;
+            }
+
+            li.right {
+                float: right;
+            }
+
+            li:hover {
+                background: #eeeeee;
+            }
+
+            li a {
+                display: block;
+                text-align: center;
+                padding: 16px 10px;
+                text-decoration: none;
+                /*color: black;*/
+            }
+
+            span.appName {
+                font-size: 1.2em;
+                font-weight: bold;
+                padding: 14px;
+                padding-right: 30px;
+                padding-left: 0;
+            }
+        </style>
+        <nav>
+            <span class="appName"></span>
+            <ul></ul>
+        </nav>
+    `
+
+    @Renders()
+    public items: NavBarItem[] = []
+
+    @Attribute()
+    public appName = ''
+
+    @Element('span.appName')
+    protected appNameEl!: HTMLSpanElement
+
+    @Element('ul')
+    protected list!: HTMLUListElement
+
+    render() {
+        super.render()
+
+        this.appNameEl.hidden = !this.appName
+        this.appNameEl.innerText = this.appName || ''
+
+        this.list.childNodes.forEach(x => x.remove())
+        for ( const item of this.items ) {
+            const li = document.createElement('li')
+            const a = document.createElement('a')
+            li.appendChild(a)
+
+            a.setAttribute('href', item.href ?? '#')
+            a.innerText = item.title
+            a.addEventListener('click', () => this.dispatchItemClick(item.name))
+
+            if ( item.right ) {
+                li.classList.add('right')
+            }
+
+            this.list.append(li)
+        }
+    }
+
+    dispatchItemClick(name: string) {
+        return this.dispatchCustom('onItemClick', { name })
+    }
+}