JSPM – atomico@0.7.2

Package Exports

atomico

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (atomico) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

A small library of 1.6kB to create web-components based on VIRTUAL-DOM, JSX and WEB-COMPONENTS, with a minimum size.

import { h, Element } from "atomico";

customElements.define(
    "my-button",
    class Tag extends Element {
        render() {
            return <button>my-button</button>;
        }
    }
);

Reactive properties

The reactivity in Atomico, depends on the method static get props, it must return an array or an object of reactive properties, these will be defined as properties of the component.

Example array

The array allows you to observe but not manipulate these properties.

static get props(){
    return ["my-property"]
}

Example object

By using the object you can manipulate the definition of properties.

static get properties(){
    return {
        myProperty(next,prev){
            return next;
        }
    }
}

These properties are associated with the element, so you can manipulate the element externally, as taught in the following example:

// example 1
document.querySelector("my-tag").myProperty = true;
// example 2
document.querySelector("my-tag").setProperty("my-property",true);

The new status of the property must be different from the previous one, to dispatch the update.

Properties as an event

The definition of the event does not depend on a prefix, but rather on the type, you can define a property of the tag as an event by defining it as a function.

<button
    click={() => {
        this.myProperty = true;
    }}
>
    ...
</button>;

Lifecycle

Method	Execution	Observation
`constructor`	--	Useful for defining an initial state
`onMounted`	after the first render	Useful for the realization of asynchronous calls or subscription of events
`onUpdated`	After the render execution	It is recommended to analyze the state of the dom, after each update
`onUnmounted`	After the component has been removed from the document	Useful for the elimination of global events

Shado dom

The use of shadow dom, allows the use of <slot> to enable shadow DOM, just enable it in the constructor, as the following example shows.

constructor(){
    this.attachShadow({mode:"open"});
}

Another benefit of shadow-dom is the independence of style, you can use this benefit as the following example shows:

render(){
    return <host>
        <style>{style}</style>	
        <slot/>
    </host>
}

Note the use of <host />, this is a virtual tag that points directly to the web-component as a tag.

Tag host

This tag allows you to manipulate the state of the component, whether to add events, modify properties or others.

render() {
    return (
        <host
            style={{ color: this.color }}
            click={() => this.color = "orange"}>
                <slot />
        </host>
    );
}

Installation

Instalacion de bone-cli

Initialize a structure to start with Atomic

npm install -g cli-bone

Create component

Download from github, the skeleton to start with Atomico

bone atomicojs/template

yarn or npm install

The previous command will generate a folder, enter it and install the dependencies.

script

It allows the generation of the bundle that groups the component, to visualize the component just open ìndex.html in the component directory.

# watch
npm run watch
# build
npm run build
# publish
npm publish

The component generated with uppercod/atomico.template, has the configuration to be shared in npm or github, remember to review package.json before publishing.