综合技术

Create components like React, using only functions and hooks but in only 2.7kB

微信扫一扫,分享到朋友圈

Create components like React, using only functions and hooks but in only 2.7kB
0

Atomico/core

Atomico is a library for the creation of interfaces based on functional components all thanks to a small implementation of the virtual-dom light (2.7kB) and efficient.

Index

Objectives

  1. Small like other bookstores Atomico seeks to be extremely small.
  2. Moderno Atomico seeks to implement current technologies within the generation of components, for example the use of shadowDom allowing Atomico to fit extremely well to the web-components
  3. Simple since its components will only be functions.

Components

The components within Atomico are functions that can optionally possess one or more states and life cycle.

import { h, render } from "@atomico/core";

function App() {
    return <h1>I'm Atomico!</h1>;
}

render(<App />, document.getElementById("app"));

Note that Atomico imports of 2 variables h which is the assignment of pragma to transpile the code JSX to JS and render that allows to print the content associated with the component.

Use of events

Events within Atomico are defined not by prefix but by type, these events only apply if the node is an HTMLElement or SVGElement.

function handler(event) {
    /**...*/
}
<button click={handler} />;

Using the shadowDom

You can enable the shadowDom to be used within a node, by defining the shadowDom property

<div shadowDom>
    <style>{`
		:host{width:100px;height:100px}
	`}</style>
    <h1>inside the shadowDom!</h1>
</div>;

This allows you to isolate the node from the rest of the document.

Use of contexts

Contexts within Atomico are simple to manipulate, by defining the context property

function ChildComponent(props, context) {
    return <h1>{context.message}</h1>;
}
<ParentComponent context={{ message: "I'm context" }}>
    <ChildComponent />
</ParentComponent>;

You can also retrieve namespace contexts using, this is ideal to use within custom hooks.

Use of lists with key

the use of the key property on a tree of nodes allows to keep manipulating the order of the nodes without regenerating the list

<ul>
    <li key="1">one</li>
    <li key="2">two</li>
    <li key="3">tree</li>
</ul>;

This brings as benefit:

  1. Reduce DOM mutations associated with ordering lists of nodes without recreating the element
  2. Reduce DOM mutations associated with the elimination of nodes
  3. Reduce DOM mutations associated with the insertion of new nodes.

Hooks

Loshooks fueron introducidos por React, estos tiene la gran ventaja de controlar el componente sin conocer el contexto de invocación, ud lograra un código mas reutilizable que una clase.

The hooks were introduced by React , these have the great advantage of controlling the component without knowing the invocation context(this), you will achieve a more reusable code than a class.

The hooks reach Atomico to enhance the creation of functional components.

import { h, useState } from "@atomico/core";

export function Counter() {
    let [count, setCount] = useState(0);
    return (
        <div>
            {count}
            <button click={() => setCount(count + 1)}>icrement</button>
        </div>
    );
}

useState

The api is based on the useState of React , it allows to link a state to the functional component, you can create as many as you need.

import { h, useState } from "@atomico/core";

export function Counter() {
    let [count1, setCount1] = useState(0);
    // You can use a function to create the initial state
    let [count2, setCount2] = useState(() => 0);
    return (
        <div>
            {count1}
            {count2}
            <button click={() => setCount1(count + 1)}>icrement count 1</button>
            <button
                click={() => {
                    // You can use a callback to retrieve the status and return a new one
                    setCount2(state => state + 1);
                }}
            >
                icrement count 2
            </button>
        </div>
    );
}

useEffect

The api is based on the useEffect of React , it allows adding a callback of the component’s life cycle, this has the advantage that it can clean the effects either after each rendering or removal of the element.

import { h, useState, useEffect } from "@atomico/core";

export function AutoCounter() {
    let [count, setCount] = useState(0);
    useEffect(() => {
        setTimeout(() => {
            setCount(count + 1);
        }, 1000);
    });
    return <div>{count}</div>;
}

The previous example is not beneficial since it does not control the elimination of setTimeout

The life cycle you access uses Effects Created , Updated and Remove , the latter is only heard by the return of the first callback.

import { h, useState, useEffect } from "@atomico/core";

export function AutoCounter() {
    let [count, setCount] = useState(0);
    useEffect(() => {
        let timeout = setTimeout(() => {
            setCount(count + 1);
        }, 1000);
        return () => clearTimeout(timeout);
    });
    return <div>{count}</div>;
}
this example allows you to clean the previously created effects within the same callback.

useEffectsupports a second argument layers to control the execution of the callback based on an array, example if no property has changed between render the callback associated with useEffect will not change.

import { h, useState, useEffect } from "@atomico/core";

export function AutoCounter(props) {
    let [count, setCount] = useState(0);
    useEffect(() => {
        let interval = setInterval(() => {
            setCount(++count);
        }, props.ms);
        return () => clearInterval(interval);
    }, [props.ms]);
    return <div>{count}</div>;
}

useMemo

the api is based on useMemo de React , this allows you to remember the return of a callback limiting its execution to the comparison of the second argument between renders. The second argument must be an arrangement

import { h, useMemo } from "@atomico/core";

function Component(){
    let list = useMemo(() => {
        let list = [];
        for (let key = 0; key < props.length; key++) list.push({ key });
        return list;
    }, [props.length]);
}

useRef

the api is based on useRef from React , this creates an object to work as a reference, the initial instance of this object is not lost between renders

import { h, useRef } from "@atomico/core";

function Component(){
    let ref = useRef();
    return <button ref={ref}>...</button>;
}

Utilities

Atomico + web-components

Atomico in its first versions was based on classes, similar to how it operates today LitElement, but this did not bring me benefit, instead I preferred to separate its process from virtual-dom and externally handle the fusion with web-components, registering a component with Atomico is use JSX, vie more

import { h, useEffect } from "@atomico/core";
import { register } from "@atomico/web-component";

function App(props) {
    useEffect(()=>{
        console.log("Component mounted")
        ()=>console.log("Component dismount")
    })
    return (
        <host>
            {props.title}
            <slot/>
        </host>
    );
}

register(
    <my-app title>
        {App}
    </my-app>
);

note the use of host to manipulate the same web-component.

vie more

Examples

Description link
useState codesanbox
useEffect codesanbox
web-component codesanbox
Performance example codesanbox

Help

I have rewritten the Atomico code in just 2 days and it requires tests, currently it uses Jest, but it is better to migrate to Karma to better verify the handling of code lists and the mutations associated with the DOM, without the use of JSDOM

阅读原文...


微信扫一扫,分享到朋友圈

Create components like React, using only functions and hooks but in only 2.7kB
0

Github

'Friending' Your Employees is Actually Good for Business

上一篇

Scale Image with Pinch Gesture iOS Tutorial

下一篇

评论已经被关闭。

插入图片

热门分类

往期推荐

Create components like React, using only functions and hooks but in only 2.7kB

长按储存图像,分享给朋友