Extollo/ui
2
0
Fork 0
generated from garrettmills/template-npm-typescript
Code Issues Pull Requests Projects Releases Wiki Activity

Start ui framework with web components

Browse Source
This commit is contained in:
Garrett Mills 2021-11-26 20:45:45 -06:00
parent 9c6a3e87bc
commit cf1f436b3c
12 changed files with 1902 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
index.html Normal file
View File

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

21
package.json
View File

@ -1,18 +1,20 @@
{ {
"name": "template-npm-typescript", "name": "@extollo/ui",
"version": "0.1.0", "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", "main": "lib/index.js",
"types": "lib/index.d.ts", "types": "lib/index.d.ts",
"directories": { "directories": {
"lib": "lib" "lib": "lib"
}, },
"scripts": { "scripts": {
"build": "pnpm run lint && rimraf lib && tsc", "build": "pnpm run lint && rimraf lib && tsc && webpack",
"app": "pnpm run build && node lib/index.js", "app": "pnpm run build && node lib/index.js",
"prepare": "pnpm run build", "prepare": "pnpm run build",
"lint": "eslint . --ext .ts", "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": [ "files": [
"lib/**/*" "lib/**/*"
@ -21,18 +23,25 @@
"postversion": "git push && git push --tags", "postversion": "git push && git push --tags",
"repository": { "repository": {
"type": "git", "type": "git",
"url": "https://code.garrettmills.dev/garrettmills/template-npm-typescript" "url": "https://code.garrettmills.dev/extollo/ui"
}, },
"author": "Garrett Mills <shout@garrettmills.dev>", "author": "Garrett Mills <shout@garrettmills.dev>",
"license": "MIT", "license": "MIT",
"devDependencies": { "devDependencies": {
"@typescript-eslint/eslint-plugin": "^5.4.0", "@typescript-eslint/eslint-plugin": "^5.4.0",
"@typescript-eslint/parser": "^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": { "dependencies": {
"@popperjs/core": "^2.10.2",
"@types/rimraf": "^3.0.2", "@types/rimraf": "^3.0.2",
"@types/uuid": "^8.3.3", "@types/uuid": "^8.3.3",
"bootstrap": "^5.1.3",
"dotenv": "^10.0.0", "dotenv": "^10.0.0",
"mkdirp": "^1.0.4", "mkdirp": "^1.0.4",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",

1419
pnpm-lock.yaml
View File

File diff suppressed because it is too large Load Diff

139
src/ExComponent.ts Normal file
View File

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

57
src/Test.component.ts Normal file
View File

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

55
src/decorators.ts Normal file
View File

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

8
src/index.ts
View File

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

35
src/layout/Page.component.ts Normal file
View File

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

17
src/layout/Section.component.ts Normal file
View File

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

103
src/nav/NavBar.component.ts Normal file
View File

@ -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
tsconfig.json
View File

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

18
webpack.config.js Normal file
View File

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