Start ui framework with web components

master
Garrett Mills 2 years ago
parent 9c6a3e87bc
commit cf1f436b3c

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
</style>
<script>
if ( typeof $ !== 'function' ) {
window.$ = (...args) => document.querySelector(...args)
}
</script>
<script src="dist/extollo-ui.dist.js" type="module"></script>
</head>
<body>
<ex-page>
<ex-nav appName="Extollo"></ex-nav>
<h1>Hello, World!</h1>
</ex-page>
<script>
window.addEventListener('load', () => {
$('ex-nav').tap(el => {
el.items = [{ title: 'Home', name: 'home' }]
el.addEventListener('onItemClick', ev => {
console.log('item clicked!', ev)
})
})
})
</script>
</body>
</html>

@ -1,18 +1,20 @@
{
"name": "template-npm-typescript",
"name": "@extollo/ui",
"version": "0.1.0",
"description": "A template for NPM packages built with TypeScript",
"description": "A set of front-end components for use with Extollo",
"main": "lib/index.js",
"types": "lib/index.d.ts",
"directories": {
"lib": "lib"
},
"scripts": {
"build": "pnpm run lint && rimraf lib && tsc",
"build": "pnpm run lint && rimraf lib && tsc && webpack",
"app": "pnpm run build && node lib/index.js",
"prepare": "pnpm run build",
"lint": "eslint . --ext .ts",
"lint:fix": "eslint --fix . --ext .ts"
"lint:fix": "eslint --fix . --ext .ts",
"serve": "python3 -m http.server",
"watch": "nodemon --watch src --ext ts --exec \"pnpm build && pnpm serve\""
},
"files": [
"lib/**/*"
@ -21,18 +23,25 @@
"postversion": "git push && git push --tags",
"repository": {
"type": "git",
"url": "https://code.garrettmills.dev/garrettmills/template-npm-typescript"
"url": "https://code.garrettmills.dev/extollo/ui"
},
"author": "Garrett Mills <shout@garrettmills.dev>",
"license": "MIT",
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.4.0",
"@typescript-eslint/parser": "^5.4.0",
"eslint": "^8.2.0"
"css-loader": "^6.5.1",
"eslint": "^8.2.0",
"nodemon": "^2.0.15",
"style-loader": "^3.3.1",
"webpack": "^5.64.4",
"webpack-cli": "^4.9.1"
},
"dependencies": {
"@popperjs/core": "^2.10.2",
"@types/rimraf": "^3.0.2",
"@types/uuid": "^8.3.3",
"bootstrap": "^5.1.3",
"dotenv": "^10.0.0",
"mkdirp": "^1.0.4",
"rimraf": "^3.0.2",

File diff suppressed because it is too large Load Diff

@ -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
}
}

@ -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
}
}

@ -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)
}
}

@ -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'

@ -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>
`
}

@ -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>
`
}

@ -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 })
}
}

@ -1,7 +1,6 @@
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"declaration": true,
"outDir": "./lib",
"strict": true,

@ -0,0 +1,18 @@
const path = require('path')
module.exports = {
entry: './lib/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'extollo-ui.dist.js',
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
}
Loading…
Cancel
Save