Skip to content

Commit

Permalink
update README
Browse files Browse the repository at this point in the history
  • Loading branch information
trusktr committed Sep 15, 2024
1 parent 1c511a1 commit f31185d
Showing 1 changed file with 0 additions and 81 deletions.
81 changes: 0 additions & 81 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -355,87 +355,6 @@ createEffect(() => {
})
```

## `DefaultBehaviors` (in LUME)

[LUME](https://lume.io) (a 3D HTML toolkit) uses Element Behaviors, and provides an
additional
[`DefaultBehaviors`](https://github.com/lume/lume/blob/v0.3.0-alpha.14/src/behaviors/DefaultBehaviors.ts)
mixin class that gives Custom Element classes the ability to define which
behaviors they ship with by
default, which is super handy!

> **Note** Thinking to move DefaultBehaviors to here instead of `lume`.

To use it first install `lume`:

```sh
npm install lume
```

To define a Custom Element with default behaviors, it is done similarly to with `observedAttributes`:

```js
import {DefaultBehaviors} from 'lume/dist/behaviors/DefaultBehaviors.js'

class SomeElement extends DefaultBehaviors(HTMLElement) {
// Define observed attributes
static get observedAttributes() {
return ['some-attribute', 'other-attribute']
}

// Define default behaviors that the element will have
static get defaultBehaviors() {
return ['some-behavior', 'click-logger']
}
}
```

Additionally, the `static defaultBehaviors` property can return an object whose
key names are behavior names, and whose values are functions that return `true` or
`false` to determine if a default behavior should be initially added to an
element or not. The function will receive the element, as well as intial
behaviors that the element already has defined by the `has=""` attribute when
the element is created.

For example, suppose we have the following HTML:

<!-- prettier-ignore -->
```html
<my-el has="another-behavior"></my-el>
<my-el has="some-behavior"></my-el>
```

We define a Custom Element like:

```js
class MyEl extends DefaultBehaviors(HTMLElement) {
static get defaultBehaviors() {
return {
'click-logger': (element, initialBehaviors) => {
// For sake of example, suppose that if the element has
// `another-behavior`, then we do not want it to have the `click-logger`
// behavior:
if (initialBehaviors.includes('another-behavior')) {
return false
}
return true
},
}
}
}
customElements.define('my-el', MyEl)
```

When the `my-el` elements are created, only the one without the `another-behavior` will have
`click-logger` added to it, so the resulting DOM will be as follows:

<!-- prettier-ignore -->
```html
<my-el has="another-behavior"></my-el>
<my-el has="some-behavior click-logger"></my-el>
```

# Contributing

First install dependencies:
Expand Down

0 comments on commit f31185d

Please sign in to comment.