Skip to content

Commit 0fcf0d3

Browse files
authored
Merge pull request #6 from lume/update-lowclass-and-lume-element
Update `lowclass` and `@lume/element` versions.
2 parents 281af58 + b5eaf1f commit 0fcf0d3

12 files changed

+16
-97
lines changed

README.md

Lines changed: 0 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -355,87 +355,6 @@ createEffect(() => {
355355
})
356356
```
357357

358-
## `DefaultBehaviors` (in LUME)
359-
360-
[LUME](https://lume.io) (a 3D HTML toolkit) uses Element Behaviors, and provides an
361-
additional
362-
[`DefaultBehaviors`](https://github.com/lume/lume/blob/v0.3.0-alpha.14/src/behaviors/DefaultBehaviors.ts)
363-
mixin class that gives Custom Element classes the ability to define which
364-
behaviors they ship with by
365-
default, which is super handy!
366-
367-
> **Note** Thinking to move DefaultBehaviors to here instead of `lume`.
368-
369-
To use it first install `lume`:
370-
371-
```sh
372-
npm install lume
373-
```
374-
375-
To define a Custom Element with default behaviors, it is done similarly to with `observedAttributes`:
376-
377-
```js
378-
import {DefaultBehaviors} from 'lume/dist/behaviors/DefaultBehaviors.js'
379-
380-
class SomeElement extends DefaultBehaviors(HTMLElement) {
381-
// Define observed attributes
382-
static get observedAttributes() {
383-
return ['some-attribute', 'other-attribute']
384-
}
385-
386-
// Define default behaviors that the element will have
387-
static get defaultBehaviors() {
388-
return ['some-behavior', 'click-logger']
389-
}
390-
}
391-
```
392-
393-
Additionally, the `static defaultBehaviors` property can return an object whose
394-
key names are behavior names, and whose values are functions that return `true` or
395-
`false` to determine if a default behavior should be initially added to an
396-
element or not. The function will receive the element, as well as intial
397-
behaviors that the element already has defined by the `has=""` attribute when
398-
the element is created.
399-
400-
For example, suppose we have the following HTML:
401-
402-
<!-- prettier-ignore -->
403-
```html
404-
<my-el has="another-behavior"></my-el>
405-
<my-el has="some-behavior"></my-el>
406-
```
407-
408-
We define a Custom Element like:
409-
410-
```js
411-
class MyEl extends DefaultBehaviors(HTMLElement) {
412-
static get defaultBehaviors() {
413-
return {
414-
'click-logger': (element, initialBehaviors) => {
415-
// For sake of example, suppose that if the element has
416-
// `another-behavior`, then we do not want it to have the `click-logger`
417-
// behavior:
418-
if (initialBehaviors.includes('another-behavior')) {
419-
return false
420-
}
421-
return true
422-
},
423-
}
424-
}
425-
}
426-
427-
customElements.define('my-el', MyEl)
428-
```
429-
430-
When the `my-el` elements are created, only the one without the `another-behavior` will have
431-
`click-logger` added to it, so the resulting DOM will be as follows:
432-
433-
<!-- prettier-ignore -->
434-
```html
435-
<my-el has="another-behavior"></my-el>
436-
<my-el has="some-behavior click-logger"></my-el>
437-
```
438-
439358
# Contributing
440359

441360
First install dependencies:

dist/BehaviorMap.d.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ export declare class BehaviorMap extends Map<string, PossibleBehaviorInstance> {
1212
delete(key: string): boolean;
1313
clear(): void;
1414
has(key: string): boolean;
15-
entries(): IterableIterator<[string, PossibleBehaviorInstance]>;
16-
[Symbol.iterator](): IterableIterator<[string, PossibleBehaviorInstance]>;
15+
entries(): MapIterator<[string, PossibleBehaviorInstance]>;
16+
[Symbol.iterator](): MapIterator<[string, PossibleBehaviorInstance]>;
1717
forEach(callbackfn: (value: PossibleBehaviorInstance, key: string, map: Map<string, PossibleBehaviorInstance>) => void, thisArg?: any): void;
18-
keys(): IterableIterator<string>;
18+
keys(): MapIterator<string>;
1919
get size(): number;
2020
set size(n: number);
2121
}

dist/BehaviorMap.d.ts.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/BehaviorMap.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/BehaviorRegistry.d.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { Constructor } from 'lowclass';
1+
import type { Constructor } from 'lowclass/dist/Constructor.js';
22
import type { BehaviorMap } from './BehaviorMap.js';
33
/** A registry of behaviors. Similar to CustomElementRegistry. */
44
export declare class BehaviorRegistry {

dist/BehaviorRegistry.d.ts.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/BehaviorRegistry.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/CancelablePromise.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)