https://github.com/mikeal/shaolin
The easiest way to build Web Components.
https://github.com/mikeal/shaolin
Last synced: 2 months ago
JSON representation
The easiest way to build Web Components.
- Host: GitHub
- URL: https://github.com/mikeal/shaolin
- Owner: mikeal
- Created: 2016-10-22T22:19:55.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-07-11T22:02:23.000Z (almost 8 years ago)
- Last Synced: 2024-10-18T09:13:59.218Z (8 months ago)
- Language: JavaScript
- Size: 24.4 KB
- Stars: 87
- Watchers: 7
- Forks: 8
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Simple Functional Web Components
You can easily define new custom elements with constructors,
reactive rendering functions, and Shadow DOM.
Let's take a quick look at all the features.
```javascript
const shaolin = require('shaolin')
shaolin`
${ elem => { /* constructor */ } }
${ attrs => {
/* Function within the custom element fire whenever
the model properties change and when instantiated.
Any element properties will be used as the intitial model
attributes.
*/
return attrs.message
}}
:host {
padding: 100px;
${ elem => {
/* Functions in the Shadow DOM are also fired during construction. */
return 'margin: 10px;'
}}
}
shadow content
`
```
Now let's back up and look at a simpler example.
```javascript
const shaolin = require('shaolin')
shaolin`
${attrs => attrs.name}
${attrs => {
if (attrs.name === 'Honey') return "Don't give a what?"
}}
`
```
```html
```
Ends up creating a full DOM of.
```html
Honey
Don't give a what?
Badgey
```
You can set properties in the future and trigger a diff'd updated (like React).
```javascript
document.querySelector('badger-element').set('name', 'Not Honey')
```
Would change:
```html
Honey
Don't give a what?
```
To:
```html
Not Honey
```
Constructors are supported as well:
```javascript
// You can also add constructors
shaolin`
${ element => console.log('Called during construction.') }
${attrs => attrs.name}
`
```
Elements are also the models for their own data. Setting properties
will trigger `on` events.
```javascript
shaolin`
${ element => {
element.on('nickname', value => {
// Called only when this property is set or changed.
console.log(value)
})
} }
`
document.querySelector('badger-element').set('nickname', 'asdf')
```
Also, the return value is the constructor. So you can subclass to create new
components like so.
```javascript
const Badger = shaolin``
const MyBadger extends Badger {}
shaolin.define('my-badger', MyBadger)
```
You can also define Shadow DOM after the custom element.
## API
### element.set(key, value[, noUpdate])
Set a property on the component.
While initial values tend to be set by the element attributes it is often
necessary to set values programatically or set complex values in JavaScript.
Third optional property suppresses an update of the components contents by
calling all the dynamic functions and performing a DOM diff.
### element.get(key)
Return a model property from the component.
### element.on(key, callback)
Attach an event listener for when a model property is set or updated.
This is particular useful to use in the contructor before any model properties
are ever set.
### Special properties
#### 'connected'
Set when the component is added or removed from the DOM.
```javascript
let TestConnected = shaolin`
${ elem => elem.on('connected', () => console.log('connected')) }
`
let el = new TestConnected()
console.log('created')
document.body.appendChild(el)
// Will now print "connected"
```