-
Notifications
You must be signed in to change notification settings - Fork 130
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add a element decorator to handle creating custom elements
- Loading branch information
Showing
1 changed file
with
44 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,44 @@ | ||
'use babel' | ||
|
||
import {registerOrUpdateElement} from 'atom-utils' | ||
|
||
/** | ||
* Generates a decorator function to convert a class into a custom element | ||
* through the `registerOrUpdateElement` method from `atom-utils`. | ||
* | ||
* The decorator will take care to return the generated element class so that | ||
* you can just export it directly as demonstrated below. | ||
* | ||
* As supported by the `registerOrUpdateElement` method, static member will | ||
* be available on the new class. | ||
* | ||
* **Note: As there's some limitations when modifying the prototype | ||
* of a custom element, if you need to inject element callbacks (like | ||
* `createdCallback`) through a mixin, the mixins should be included before | ||
* converting the class as a custom element. You'll be able to achieve that by | ||
* placing the `include` decorator after the `element` one as shown in the | ||
* second example.** | ||
* | ||
* @param {string} elementName the node name of the element to register | ||
* @return {Function} the element class as returned by | ||
* `document.registerElement` | ||
* @example | ||
* @element('dummy-element-name') | ||
* export default class SomeClass { | ||
* // ... | ||
* } | ||
* | ||
* @element('dummy-element-with-mixin') | ||
* @include(SomeMixin) | ||
* export default class SomeClass { | ||
* // ... | ||
* } | ||
*/ | ||
export default function element (elementName) { | ||
return function (cls) { | ||
let elementClass = registerOrUpdateElement(elementName, { | ||
class: cls | ||
}) | ||
return elementClass | ||
} | ||
} |