https://github.com/mikeal/gza
Functional custom HTML elements.
https://github.com/mikeal/gza
Last synced: 3 months ago
JSON representation
Functional custom HTML elements.
- Host: GitHub
- URL: https://github.com/mikeal/gza
- Owner: mikeal
- Created: 2017-10-08T03:08:38.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-04-27T00:05:02.000Z (about 7 years ago)
- Last Synced: 2024-10-18T09:13:51.444Z (8 months ago)
- Language: JavaScript
- Homepage:
- Size: 41 KB
- Stars: 88
- Watchers: 4
- Forks: 12
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# GZA
Declarative custom HTML elements
```javascript
const gza = require('gza')
gza`
${ settings => settings.test }
`
```
```html
pass
test-prop
```
See also [markdown-element](https://github.com/mikeal/markdown-element)
which is implemented with `gza`
# Features
## Initialization Functions
Any function defined before your element definition is an initialization
function. It takes a single argument, an instance of the new element.
Only after all intialization functions have finished, including async
functions, will the render function be called.
Initialization functions are only ever called once per element instance.
```javascript
gza`
${async element => {
let resp = await fetch('flowers.jpg')
let blob = await resp.blob()
element.src = URL.createObjectURL(blob)
}}
`
```
## Templatized Rendering
All content and functions defined inside your element definition are
used for templatized rendering.
The content and function results are used to display content in the
`` element.
Every time an element attribute or element property changes that was
previously defined by the defaults, the entire element template will be run
again in order to re-render.
Every time the contents of the element changes it will also call the template
functions in order to re-render.
```javascript
gza`
${settings => settings.one}
${settings => settings.two}
${settings => settings.three}
`
```
```html
1
2
3
let elem = document.querySelector('my-element')
elem.one = 'one'
elem.setAttribute('two', 'two')
elem.setAttributeNS(null, 'three', 'three')
one
two
three
```
## ShadowDOM
Any content defined **below** your element definition will be attached
to the shadowDOM. If you do not create a `slot` for `"render"` then the
rendered content will have nowhere to display.
You can also include template functions to dynamically change the shadowDOM
content and styling when properties and values change.
```javascript
const nowhitespace = str => str.replace(/ /g, '')
gza`
${(settings, innerHTML) => nowhitespace(innerHTML)}
h3 {
font-size: 200%;
}
${(settings, innerHTML) => nowhitespace(innerHTML)}
`
```
```html
This is a test.
Thisisatest.
Thisisatest.
```
## Kitchen Sink
Here's an example of every feature currently implemented.
```javascript
const gza = require('gza')
gza`
${element => { /* initialization function */
element.i += 1
}}
${async element => { /* supports async functions */
element.i += 1
}}
${settings => settings.i}
${async settings => settings.test}
${(settings, innerHTML) => innerHTML}
::slotted(render) {
font-size: ${settings => settings.size + '%'}; <!-- ShadowDOM Templating -->
}
Test
`
```
```html
TestContent
Test
2
test
TestContent
TestContent
```
# Why is it called GZA?
Cause GZA the **genius!**
