stevegagnon / atomico Goto Github PK

Small library for the creation of interfaces based on web-components, only using functions and hooks, if you want to try Atomico and you need help tell me in Twitter Uppercod 🤓.

1. Getting started
2. Web-componts with Atomico
   1. ⚠️ Return Rule
   2. tag host
   3. Properties declaration
   4. declaración del web-component
3. Hooks
4. Submodules
   1. atomico/html
   2. atomico/lazy
   3. atomico/router
5. Examples
   1. clock
   2. calculator
   3. todo
   4. atomico/router y atomico/lazy
   5. more examples in webcomponents.dev
6. Advanced
   1. Optimization
   2. High order components
   3. template factory

npm init @atomico

Create a project ready for css import, component distribution, application development and design system creation.

npm install atomico

General installation for custom environments.

Ideal for prototyping in the browser, eg:

<script type="module">
	import { customElement } from "https://unpkg.com/atomico@latest/index.js";
	import html from "https://unpkg.com/atomico@latest/html.js";

	function WebComponent() {
		return html`
			<host>
				web-component!
			</host>
		`;
	}

	customElement("web-component", WebComponent);
</script>

This site allows a friendly development, since it allows to visualize, document and distribute our web-components, visit webcomponents.dev/demos/atomico to see some examples.

The aesthetics of web components with components is simple and minimalist, eg live

import { h, customElement } from "atomico";

function WebComponent() {
	/** hooks and composition logic */
	let [state, setState] = useState(0);
	/** state of the dom */
	return (
		<host>
			<h1>{state}</h1>
			<button onclick={() => setState(state - 1)}>decrement</button>
			<button onclick={() => setState(state + 1)}>increment</button>
		</host>
	);
}

export default customElement(WebComponent);

Atomico has a single rule when working with web-components, this should always return the host tag, since this tag represents the state of the web-components itself.

The host tag represents the same web-component, this tag takes advantage of the diff process applied by the virtual-dom, to affect the state of itself.

function WebComponent() {
	/** customElement sin shadowDom */
	return <host>...children</host>;
}

function WebComponent() {
	/** customElement con shadowDom */
	return <host shadowDom>...children</host>;
}

function WebComponent() {
	const handler = () => console.log("click!");
	return (
		<host
			shadowDom
			class="web-component"
			onclick={handler}
			style={{ color: red }}
		>
			<style>{`:host{color:crimson}`}</style>
			<h1>my title</h1>
			<button>my button</button>
		</host>
	);
}

The props(properties) are a decorated layer that improves the observedAttributes experience, by means of the props you can define properties with which the customElement can read or interact mediate the useProp hook, example of declaration.

WebComponent.props = {
	/** simple type */
	fieldString: String,
	/** schema style */
	fieldBoolean: {
		type: Boolean,
		reflect: true, // Reflects the value as an attribute
		value: true // Initialize a default value
	}
};

The validation compares the primitive type with the input value, if it comes from a string it will be forced to be the declared primitive type, eg {"name":"Atomico"} will be transformed to {name:"Atomico"}

The functional behavior is not valid for customElements.define, to achieve a successful registration you must use the customElement function.

/**
 * Allows the creation or registration of the customElement
 * @param {(string|Function)} tagName - if it is a function, an HTMLElement is returned
 * @param {Function} [component] - if defined, it returns a valid function as a JSX component
 * @return {(HTMLElement|Function)}
 */
customElement(tagName, component);

import { customElement } from "atomico";
import WebComponent from "./web-components";

/** ✔️ valid for anonymous export */
customElements.define("custom-element", customElement(WebComponent));

<custom-element />; // jsx

/** ✔️ valid for global declaration */
let CustomElement = customElement("custom-element", WebComponent);

<CustomELement />; // jsx