Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nativew/nativeweb
🤳 Tiny library for simple web components. [1kB]
https://github.com/nativew/nativeweb
components framework javascript js native-web web-components
Last synced: 3 months ago
JSON representation
🤳 Tiny library for simple web components. [1kB]
- Host: GitHub
- URL: https://github.com/nativew/nativeweb
- Owner: nativew
- License: isc
- Created: 2019-12-27T17:02:20.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-06-05T02:20:00.000Z (over 3 years ago)
- Last Synced: 2024-05-17T22:45:35.846Z (6 months ago)
- Topics: components, framework, javascript, js, native-web, web-components
- Language: JavaScript
- Homepage:
- Size: 147 KB
- Stars: 96
- Watchers: 10
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
Tiny library for simple web components.
1kB
```js
import { component, property, Element } from 'nativeweb';
@component('hey-internet')
class Component extends Element {
@property() emoji;
render() {
return `
Hey Internet ${this.emoji}
`;
}
}
```
```html
```
### Native web components
### Encapsulated styles and scripts
### Simplified with decorators
### Tiny footprint
### One command to [start](https://github.com/nativew/start)
```zsh
npm init nativeweb
```
### Or add to your existing project
```zsh
npm install nativeweb
```
### Decorators
[`@component`](#component)
[`@property`](#property)
[`@event`](#event)
[`@customEvent`](#customevent)
[`@query`](#query)
[`@queryAll`](#queryall)
### `@component`
Define a custom element and add styles. From an external file or the same file. `styles` can be an `array` of styles.
```js
import { component, Element } from 'nativeweb';
import styles from './hey-styles.css.js';
@component('some-styles', styles)
class Component extends Element {
render() {
return `
Some Styles
`;
}
}
```
```js
import { css } from 'nativeweb';
export default css`
h1 {
color: orange;
}
`;
```
```html
```
### `@property`
Get an attribute converted to the specified type or define a property with an optional default value.
`String`, `Boolean`, `Number`, `Array` or `Object`.
```js
import { component, property, Element } from 'nativeweb';
@component('cool-property')
class Component extends Element {
@property() cool = 'Cool Prop';
@property(String) title = 'Default Title';
@property(Number) multiplier;
render() {
return `
${this.title}
${this.cool} ➡️ ${2 * this.multiplier}
`;
}
}
```
```html
```
### `@event`
Add an event listener to a component, a child element named `@name` or an external component event.
```js
import { component, event, Element } from 'nativeweb';
@component('easy-event')
class Component extends Element {
@event() mouseenter = this.onHover();
@event() click = {
'@title': this.onClick(),
'@button': this.onClick()
};
@event() ready = {
'other-component': this.onReady()
};
onHover() {
console.log('Hover Component');
}
onClick(e) {
console.log(e.currentTarget);
}
onReady({ detail }) {
console.log(detail);
}
render() {
return `
Easy Event
Click Me
`;
}
}
```
```html
```
### `@customEvent`
Create a custom global event, namespaced with the component name. Ready to be dispatched. The listener is in the [component above](#event).
```js
import { component, customEvent, Element } from 'nativeweb';
@component('other-component')
class Component extends Element {
@customEvent() ready = 'Ready 🚀';
connected() {
dispatchEvent(this.ready);
}
render() {
return `
Other Component
`;
}
}
```
```html
```
### `@query`
Query selector an `@name` child element.
```js
import { component, query, Element } from 'nativeweb';
@component('simple-query')
class Component extends Element {
@query() title;
connected() {
this.title.innerText = 'Better Title 💯';
}
render() {
return `
Good Title
`;
}
}
```
```html
```
### `@queryAll`
Query selector all `@name` child elements.
```js
import { component, queryAll, Element } from 'nativeweb';
@component('all-query')
class Component extends Element {
@queryAll() title;
connected() {
this.title.forEach(el => (el.style.color = 'lightgreen'));
}
render() {
return `
One Title
Other Title
`;
}
}
```
```html
```
### Lifecycle
`render()` → Renders the component.
`connected()` → Called when the component is inserted in the DOM.
`disconnected()` → Called when the component is removed from the DOM.
`adopted()` → Called when the component is moved to a new document.
`attributeChanged()` → Called when an observed attribute changes.
### Methods
`this.update()` → Rerenders the component.
### Properties
`this.properties` → Get all attributes.
### Tips
[Shared style](#shared-style)
[Composition](#composition)
[Conditional](#conditional)
[Loop](#loop)
[Variable element](#variable-element)
### Shared style
Include global styles in a component.
```js
import { css } from 'nativeweb';
import global from '../global-style.css.js';
export default [
global,
css`
h1 {
color: orange;
}
`
];
```
### Composition
Component composition with default slot and named slot.
```js
import { component, Element } from 'nativeweb';
@component('slot-example')
class Component extends Element {
render() {
return `
`;
}
}
```
```html
Named slot
Default slot
```
### Conditional
Conditional rendering in vanilla JS.
```js
import { component, property, Element } from 'nativeweb';
@component('condition-example')
class Component extends Element {
@property() isGood = false;
render() {
return `
${this.isGood ? `
Good
` : ``}
`;
}
}
```
### Loop
Render loop in vanilla JS.
```js
import { component, property, Element } from 'nativeweb';
@component('loop-example')
class Component extends Element {
@property() emojis = ['🤳', '🧨', '🧱'];
render() {
return `
${this.emojis.map(item => `${item}`).join('')}
`;
}
}
```
### Variable element
Render an element from a property.
```js
import { component, property, Element } from 'nativeweb';
@component('element-example')
class Component extends Element {
@property() as = 'p';
render() {
return `
<${this.as}>Heading 1${this.as}>
`;
}
}
```
```html
```
