Skip to content

Commit

Permalink
Merge pull request #6 from lume/update-lowclass-and-lume-element
Browse files Browse the repository at this point in the history
Update `lowclass` and `@lume/element` versions.
  • Loading branch information
trusktr authored Sep 29, 2024
2 parents 281af58 + b5eaf1f commit 0fcf0d3
Show file tree
Hide file tree
Showing 12 changed files with 16 additions and 97 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
6 changes: 3 additions & 3 deletions dist/BehaviorMap.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@ export declare class BehaviorMap extends Map<string, PossibleBehaviorInstance> {
delete(key: string): boolean;
clear(): void;
has(key: string): boolean;
entries(): IterableIterator<[string, PossibleBehaviorInstance]>;
[Symbol.iterator](): IterableIterator<[string, PossibleBehaviorInstance]>;
entries(): MapIterator<[string, PossibleBehaviorInstance]>;
[Symbol.iterator](): MapIterator<[string, PossibleBehaviorInstance]>;
forEach(callbackfn: (value: PossibleBehaviorInstance, key: string, map: Map<string, PossibleBehaviorInstance>) => void, thisArg?: any): void;
keys(): IterableIterator<string>;
keys(): MapIterator<string>;
get size(): number;
set size(n: number);
}
Expand Down
2 changes: 1 addition & 1 deletion dist/BehaviorMap.d.ts.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/BehaviorMap.js.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/BehaviorRegistry.d.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { Constructor } from 'lowclass';
import type { Constructor } from 'lowclass/dist/Constructor.js';
import type { BehaviorMap } from './BehaviorMap.js';
/** A registry of behaviors. Similar to CustomElementRegistry. */
export declare class BehaviorRegistry {
Expand Down
2 changes: 1 addition & 1 deletion dist/BehaviorRegistry.d.ts.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/BehaviorRegistry.js.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion dist/CancelablePromise.js.map

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading

0 comments on commit 0fcf0d3

Please sign in to comment.