# uce-lighter
> µhtml based Custom Elements
Latest version **0.3.9** (published 2020-03-06) · ISC license · 0 weekly downloads
## Install
```sh
npm install uce-lighter
pnpm add uce-lighter
yarn add uce-lighter
bun add uce-lighter
```
## Health
**Score 20/100 (F)** — status: abandoned.
Positive: esm support; no vulnerabilities.
Warnings: low downloads; no types; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.3.9 |
| Published | 2020-03-06 |
| First published | 2020-03-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 92.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 207 |
| Author | Andrea Giammarchi |
| Maintainers | webreflection |
| Keywords | uhtml, Custom, Element, Elements |
## Links
- npm: https://www.npmjs.com/package/uce-lighter
- Repository: https://github.com/WebReflection/uce
- Homepage: https://github.com/WebReflection/uce#readme
- Issues: https://github.com/WebReflection/uce/issues
- npm.io page: https://npm.io/package/uce-lighter
## Dependencies (1)
- [lighterhtml](https://npm.io/package/lighterhtml.md) ^2.1.0
## Alternatives
- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads
## Recent versions
- 0.3.9 (latest) — 2020-03-06
## README
# µce
[](https://travis-ci.com/WebReflection/uce) [](https://coveralls.io/github/WebReflection/uce?branch=master)
**Social Media Photo by [Dawid Zawiła](https://unsplash.com/@davealmine) on [Unsplash](https://unsplash.com/)**
**[µhtml](https://github.com/WebReflection/uhtml#readme)** based Custom Elements.
## API In A Nutshell
Check out the [test page](https://webreflection.github.io/uce/test/) or this [code pen playground](https://codepen.io/WebReflection/pen/MWwJpWx?editors=0010).
```js
import {define} from 'uce';
define('my-component', {
// if specified, it can extend built-ins too.
// by default it's 'element', as HTMLElement
extends: 'div',
// if specified, it's like the constructor
// it's granted to be invoked *only once* on bootstrap
// and *always* before connected/attributeChanged
init() {
// µhtml is provided automatically via this.html
// it will populate the shadow root, even if closed
// or simply the node, if no attachShadow is defined
this.html`Hello 👋 µce
`;
},
// if specified, it renders within its Shadow DOM
// compatible with both open and closed modes
attachShadow: {mode: 'closed'},
// if specified, observe the list of attributes
observedAttributes: ['test'],
// if specified, will be notified per each
// observed attribute change
attributeChanged(name, newValue, oldValue){},
// if specified, will be invoked when the node
// is either appended live, or removed
connected() {},
disconnected() {},
// events are automatically attached, as long
// as they start with the `on` prefix
// the context is *always* the component,
// you'll never need to bind a method here
onClick(event) {
console.log(this); // always the current Custom Element
},
// if specified with `on` prefix and `Options` suffix,
// allows adding the listener with a proper third argument
onClickOptions: {once: true}, // or true, or default false
// any other method, property, or getter/setter will be
// properly configured in the defined class prototype
get test() { return Math.random(); },
set test(value) { console.log(value); },
sharedData: [1, 2, 3],
method() {
return this.test;
}
});
```
### Without classes, how does one define private properties?
Private properties can be created via a _WeakMap_, which is indeed how _Babel_ transforms these anyway.
```js
const privates = new WeakMap;
define('ce-with-privates', {
init() {
// define these once
privates.set(this, {test: 1, other: '2'});
},
method() {
// and use it anywhere you need them
const {test, other} = privates.get(this);
console.log(test, other);
}
});
```
### Without classes, how does one extend other components?
Object literals have been used as mixin for a very long time, and the pattern in here would likely be very similar.
The only warning is that `Object.assign`, as well as object `{...spread}`, lose getters and setters in the process, so that if you want to extend more complex components, you should consider using [assignProperties](https://github.com/WebReflection/assign-properties#readme), or a similar helper.
```js
import $ from 'assign-properties';
const mixin = (...components) => $({}, ...components);
// a component literal definition
const NamedElement = {
get name () { return this.tagName; }
};
// a generic NamedElement mixin
const FirstComponent = mixin(NamedElement, {
method() {
console.log(this.name);
}
});
// define it via the FirstComponent mixin
define('first-component', FirstComponent);
// define it via mixin
define('first-component', mixin(FirstComponent, {
otherThing() {}
}));
```
---
_Source: https://npm.io/package/uce-lighter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._