Merge pull request #36 from atomicojs/1.0.0

1.0.0-beta

.gitignore

@@ -1,13 +1,3 @@
 node_modules
-/cjs
 /browser
-/core.*
-/html.*
-/index.*
-/lazy.*
-/router.*
-/generator.*
-/chunk
-/use-lazy.*
-/use-router.*
-/use-state-generator.*
+/coverage

.npmignore

@@ -1,4 +1,5 @@
 node_modules
 /cjs
 /docs/brand
-/browser
+/browser
+/coverage

LICENCE

@@ -0,0 +1,21 @@
+Licencia MIT
+
+Copyright (c) 2020 Matias Trujillo
+
+Por la presente se otorga permiso, sin cargo, a cualquier persona que obtenga una copia
+de este software y los archivos de documentación asociados (el "Software"), para tratar
+en el Software sin restricción, incluidos, entre otros, los derechos
+para usar, copiar, modificar, fusionar, publicar, distribuir, sublicenciar y / o vender
+copias del Software y para permitir a las personas a quienes pertenece el Software
+amueblado para hacerlo, sujeto a las siguientes condiciones:
+
+El aviso de copyright anterior y este aviso de permiso se incluirán en todos
+copias o porciones sustanciales del Software.
+
+EL SOFTWARE SE PROPORCIONA "TAL CUAL", SIN GARANTÍA DE NINGÚN TIPO, EXPRESA O
+IMPLÍCITO, INCLUYENDO PERO NO LIMITADO A LAS GARANTÍAS DE COMERCIABILIDAD,
+APTITUD PARA UN PROPÓSITO PARTICULAR Y NO INFRACCIÓN. EN NINGÚN CASO EL
+LOS AUTORES O LOS TITULARES DE LOS DERECHOS DE AUTOR SERÁN RESPONSABLES POR CUALQUIER RECLAMACIÓN, DAÑO U OTRO
+RESPONSABILIDAD, EN CASO DE ACCIÓN DE CONTRATO, TORTURA O DE OTRA MANERA, DERIVADA DE,
+FUERA DE O EN CONEXIÓN CON EL SOFTWARE O EL USO U OTRAS OFERTAS EN EL
+SOFTWARE.

README.md

@@ -4,35 +4,60 @@
 [![npm](https://badgen.net/npm/v/atomico)](http://npmjs.com/atomico)
 [![gzip](https://badgen.net/bundlephobia/minzip/atomico)](https://bundlephobia.com/result?p=atomico)
 
-[Español](./docs/README-es.md) [English](./README.md)
+[Español](./docs/es/README.md) - **English**
 
-### A microlibrary inspired by React Hooks, designed and optimized for the creation of webcomponents
+Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.
 
-![hello](https://res.cloudinary.com/dz0i8dmpt/image/upload/v1580099299/github/atomico/hello.png)
+```jsx
+import { h, c } from "atomico";
 
-### Documentation
+const MyComponent = () => <host>mi primer webcomponent con atomico</host>;
 
-Atomico documentation is available on gitbook in the following URL **[atomico.gitbook.io/doc](https://atomico.gitbook.io/doc)**, **you can request direct support via twitter to [@ Uppercod](https://twitter.com/uppercod) or [@Atomicojs](https://twitter.com/atomicojs), don't hesitate to ask, I'll be happy to help you!**
+const HTMLMyComponent = c(MyComponent);
 
-[![my first webcomponent with Atomico](https://res.cloudinary.com/dz0i8dmpt/image/upload/v1580061091/github/atomico/1.png)](https://atomico.gitbook.io/doc/get-started/quick-start)
+customElements.define("my-web-component", HTMLMyComponent);
+```
 
-[![api documentation virtual-dom](https://res.cloudinary.com/dz0i8dmpt/image/upload/v1580061091/github/atomico/2.png)](https://atomico.gitbook.io/doc/guides/virtual-dom)
+**Links:**
 
-[![api documentation hooks](https://res.cloudinary.com/dz0i8dmpt/image/upload/v1580061091/github/atomico/3.png)](https://atomico.gitbook.io/doc/guides/hooks)
+1. [What is Atomico?](#what-is-atomico?)
+2. Api
+    1. [Props](./docs/en/props.md)
+    2. [Hooks](./docs/en/hooks.md)
+    3. [Virtual-dom](./docs/en/hooks.md)
+    4. [Typescript](./docs/en/typescript.md)
+3. Guides
+    1. [Project generator](./docs/en/scaffolding.md)
+4. Resources
+    1. [Brand](./docs/brand/README.md)
 
-[![api documentation props](https://res.cloudinary.com/dz0i8dmpt/image/upload/v1580061091/github/atomico/4.png)](https://atomico.gitbook.io/doc/guides/props)
+## What is Atomico?
 
-### Why Atomico?
+Atómico is a modern syntax micro-library created by Matias Trujillo alias @UpperCod, which simplifies the creation of webcomponents by replacing the need to use classes and contexts by functions and scope to support logic, attributes, properties, methods and events, example:
 
-#### With only 3kb you can start with:
+```jsx
+const MyComponent = () => {
+    const [count, setCount] = useProp("count");
+    const increment = () => setCount(count + 1);
+    return <host increment={increment}>count: {count}</host>;
+};
 
-**Virtual-dom** designed to facilitate the definition of the DOM state of the webcomponent, eg:
+MyComponent.props = {
+    count: { type: Number, value: 0 },
+};
+```
 
-![Atomico diff](https://res.cloudinary.com/dz0i8dmpt/image/upload/v1580060796/github/atomico/diff-code.png)
+Where:
 
-**9 different types hooks** to create highly reusable logic, useProp, useState, useReducer, useEffect, useRef, useHost, useMemo, useCallback,
-useEvent and usePublic.
+1. `MyWebComponent`: Function that represents the webcomponent.
 
-![Atomico hooks](https://res.cloudinary.com/dz0i8dmpt/image/upload/v1580099064/github/atomico/hook-use-state.png)
+2. `const [count, setCount] = useProp("count")`: Hook function similar to useState, but with the difference that useProp reflects the property status of the component.
 
-**Declaration of types as objects**, supporting type validation, reflection of properties as attribute, default values, value options, automatic emission of events when the property changes and more.
+3. `const increment = () => setCount(count + 1);`: Function that increases the state.
+
+4. `<host increment={increment}>`: Virtual-dom represented the incremental method.
+
+5. `MyComponent.props.count` : Object, defines the behavior of the `count` property.
+
+    1. `type: Number` : Declare count as type `number`.
+    2. `value: 0`: Declares that the initial state of `count` is`0`.

core.js

@@ -0,0 +1,4 @@
+export * from "./src/element/custom-element.js";
+export * from "./src/hooks/hooks.js";
+export { useHost } from "./src/hooks/create-hooks.js";
+export * from "./src/render.js";

docs/en/hooks.md

@@ -0,0 +1,170 @@
+[home](../../README.md)/en/**hooks**
+
+# Hooks
+
+Just like interface components allow UI reuse, hooks allow to reuse logical processes, for example, execute asynchronous updates, communicate effects and control states only using functions.
+
+**Links:**
+
+1. [Exclusive hooks for webcomponents](#exclusive-hooks-for-webcomponents).
+    1. [useProp](#useprop)
+    2. [useEvent](#useevent)
+    3. [useHost](#useHost)
+2. [Hooks copied from React](#hooks-copied-from-React).
+    1. [useState](#usestate)
+    2. [useEffect](#useeffect)
+    3. [useMemo](#usememo)
+    4. [useCallback](#usecallback)
+    5. [useRef](#useref)
+
+## Exclusive hooks for webcomponents
+
+### useProp
+
+Hook that allows to reflect the changes of state on a property from inside the webcomponent.
+
+```
+const [value, setValue] = useProp(propName);
+```
+
+Where:
+
+1. `const [value, setValue]`: Return of `useProp`, the arguments allow reading and updating of the state associated with the `propName` property of the webcomponent.
+2. `propName` : String defining the property to use by the `useProp` of the webcomponent.
+
+#### Example
+
+```jsx
+const MyComponent = () => {
+    const [count, setCount] = useProp("count");
+    return (
+        <host>
+            <button onclick={() => setCount(count + 1)}>+</button>
+            <span>{count}</span>
+        </host>
+    );
+};
+
+MyComponent.props = { count: { type: Number, value: 0 } };
+```
+
+### useEvent
+
+Hook that allows to emit an event from the webcomponent.
+
+```js
+const dispatchEvent = useEvent(myEvent, optionalEventInit);
+```
+
+Where:
+
+1. `dispatchEvent` : `Function` that dispatches the event defined by `myEvent`.
+2. `myEvent` : `String` defining the event to dispatch by `useEvent`
+3. `optionalEventInit` :Optional configuration of the event to dispatch, `{bubbles?: boolean, cancelable?: boolean, composed?: boolean, detail?: any}`. https://developer.mozilla.org/en-US/docs/Web/API/Event/Event
+
+### useHost
+
+Hook that creates a reference where current is the instance of the webcomponent.
+
+```js
+const refHost = useHost();
+```
+
+**This hooks is useful to add functionalities associated to the webcomponent instance**
+
+## Hooks copied from React
+
+### useState
+
+Hook that allows creating a state on the webcomponent.
+
+```js
+const [state, setState] = useState(optionalInitialState);
+```
+
+Where:
+
+1. `const [state,setState]` : Return of `useState`, the arguments allow reading and updating of the state associated with the hook instance.
+    - `state` : Current state.
+    - `setState`: state update function.
+2. `useState( optionalInitialState )`: Hook function that associates the state with the webcomponent:
+    - `optionalInitialState`: Optional parameter that defines the start state associated with the hook instance, **If `optionalInitialState` is a function it will be executed to obtain the initial state only at the moment of the hook instance for the first time**
+
+#### Example
+
+```jsx
+function MyComponent() {
+    const [count, setCount] = useState(0);
+    return <host onclick={() => setCount(count + 1)}> {count} </host>;
+}
+```
+
+### useEffect
+
+Hook that allows associating effects to the webcomponent.
+
+```js
+useEffect(effectCallback, optionalArgumentList);
+```
+
+Where:
+
+1. `effectCallback`: Function that executes one or more times to `effectCallback` according to the arguments of the`optionalArgumentList` Array, `effectCallback` can return a function that will be executed only if`effectCallback` is re-executed or the wecomponents are dismounted.
+2. `optionalArgumentList`: Array of arguments to watch for `useEffect`, if one of these arguments switches between renders,`effectCallback` will be executed again. If `optionalArgumentList` is defined as an empty array (`[]`), useEffect will only run`effectCallback` when creating the webcomponent.
+
+#### Example
+
+```js
+const listenerClickWindow = () => {
+    const handlerClick = () => {
+        console.log("Click window!");
+    };
+
+    window.addEventListener("click", handlerClick);
+
+    const unlistenerClickWindow = () =>
+        window.removeEventListener("click", handlerClick);
+
+    return unlistenerClickWindow;
+};
+useEffect(listenerClickWindow, []);
+```
+
+### useMemo
+
+Hook that allows memorizing the return of a callback.
+
+```js
+const memoValue = useMemo(callback, optionalArgumentList);
+```
+
+Where:
+
+1. `memoValue` : Return memorized by useMemo.
+2. `callback`: Function that runs one or more times according to `optionalArgumentList`.
+3. `optionalArgumentList`: Array of arguments to be observed by `useMemo`, if one of these arguments changes between`useMemo` renders it will execute the `callback` again, memorizing a new return.
+
+### useCallback
+
+Hook that allows memorizing a callback so that it conserves its scope.
+
+```js
+const memoCallback = useCallack(callback, optionalArgumentList);
+```
+
+Where:
+
+1. `memoCallback`: Return memorized by useCallback
+
+### useRef
+
+Hook that creates an object for reference.
+
+```js
+const ref = useRef(currentOptional);
+```
+
+Where:
+
+1. `ref` : Return object of useRef, this allows to preserve differences between render.
+2. `currentOptional`: Defines the `current` property within the`ref` object.