Atomico a micro-library for creating webcomponents using only functions, hooks and virtual-dom.
MIT License
Bot releases are visible (Hide)
Published by UpperCod over 3 years ago
This Release is part of the integration and boot test of Atomico in the Github Actions environment
Published by UpperCod almost 4 years ago
This change replaces the updated method with clearEffects, hoping with this change to give a better hook test experience, since it introduces a cleaning in stages, this cleaning in stages is designed to support the useLayoutEffect hook.
import { useLayoutEffect, useEffect } from "atomico";
import { createHooks } from "atomico/test-hooks";
const hooks = createHooks();
hooks.load(() => {
useLayoutEffect(() => {
console.log("first!");
});
useLayoutEffect(() => {
console.log("last!");
});
});
// run all useLayoutEffect
const clearLastEffect = hooks.clearEffects();
// run all useEffect
clearLastEffect();
Improves the experience of associating DOM effects dependent on an asynchronous execution, this hook is ideal for computing styles to be processed later by useEffect
This new module adds support to the use of CSSStyleSheet safely and without the need for polyfill, its use is optional, but it guarantees that the CSSStyleSheet instance can be exported and shared between multiple components,
Published by UpperCod about 4 years ago
This new version stabilizes the api by introducing various changes and tests to guarantee the future stability of Atomico.
custom Element
is replaced by the c
function.the c
function is only limited just create the Element to be registered by customElements.define
, example:
import { h, c } from "atomico";
const MyComponent = () => <host />;
const HTMLMyComponent = c(MyComponent);
customElements.define("my-component", HTMLMyComponent);
This function also allows modifying the class to be used as the basis for the Atomico component, example:
const HTMLMyComponent = c(MyComponent, HTMLAnchorElement);
Using the host
tag you can define methods that work with the scope of the web component, example:
const MyComponent = () => {
const myMethod = () => console.log("hi!");
return <host myMethod={myMethod}>...</host>;
};
// After registration
let myComponent = document.querySelector("my-component");
await myComponent.updated;
myComponent.myMethod();
customElements.define
, example:Published by UpperCod over 4 years ago
The definition of props generates a blocking error to capture by a Promise
or tryCatch
, this capture gives more information about the error, be it target
that emits the error, schema
as the structure given for the property, eg:
try {
targetComponent.myNumber = {};
} catch (e) {
console.log(e.target);
}
This with the intention of improving the focus towards the component that emits the error
This, like other supported types, has a behavior only as a property, so it does not support properties such as reflect
, eg:
MyComponent.props = {
myFunction: Function
};
document.querySelector("my-component").myFunction = () => "...hi!";
by declaring the prop as an object, you could define the options
property to limit the valid options, eg:
MyComponent.props = {
myString: {
type: String,
options: ["success", "error"]
}
};
This interface improves component definition, allowing to extend the definition of props and error with autocomplete, eg:
import { h, useState, Component } from "atomico";
const MyComponent: Component = () => <host />;
MyComponent.props = {
myString: {
type: String,
options: ["success", "error"]
}
};
It can be improved through the PropSchema
interface, allowing to extend the type of declaration as a rule for the construction of the property, eg:
import { PropSchema } from "atomico";
export const CustomProp: PropSchema<number> = {
type: Number,
options: [1, 2, 3, 4],
value: 1
};
All hooks of the model atomico
, atomico/use-lazy
and atomico/hml
now have type definition, eg:
let [count, setCount] = useState(0);
type number will be a rule for count and setCount, the type can be forced using useState<CustomType>()
** More type declaration in index.d.ts**
Published by UpperCod almost 5 years ago
Atomic allows the propagation of events in 2 ways:
When configuring your property you can define the event
property, this activates the propagation before each change associated with the property, eg :
function CustomElement(){
let [checked,setChecked] = useProp("checked");
return <host onchecked={()=>{
}}>
<button onclick={()=>setChecked(!checked)}>toggle<button>
</host>
}
CustomElement.props = {
checked : {
type : Boolean,
event : true
}
};
CustomElement.props = {
checked: {
type: Boolean,
event: {
type: true,
bubbles: true
}
}
};
Create a callback to dispatch an event from within the component.
function CustomElement() {
let dispatchEvent = useEvent("custom-change", {
bubbles: true
});
return (
<host>
<input onchange={dispatchEvent} />
</host>
);
}
The objective is to facilitate the use of api customEvent
In order to improve the event propagation experience, the behavior of the propagation core is improved with the objective of allowing to dispatch synchronization events at the time of recycling or composing outside Atomico.
Published by UpperCod over 5 years ago
the static property observables
is now called props
, in addition to this change, support for shemas eg is added:
function WebComponent() {}
WebComponent.props = {
fieldOne: Number, // simple form
fieldTwo: {
type: Number,
reflect: true, // it is reflected as an attribute
value: 0 // initial value
}
};
These hooks were created in order to improve the use of web-components.
useProps, allows access to a property declared as props
, this hooks allows to manipulate the property from inside the function or custom hooks.
let [fieldOne, setFieldOne] = useProp("fieldOne");
useEvent, allows to create a configurable custom-event.
let dispatchEvent = useEvent("my-custom-event", { bubbles: true });
useProvider and useConsumer, creates a state that synchronizes parent and children, regardless of the format of the DOM.
Published by UpperCod over 5 years ago
Atomico, is simplified in search of a better maintenance and simplicity of package, for it I have applied important changes:
@atomico/core
, @atomico/element
, @atomico/router
and @atomico/lazy
, join in the atomico
package, this is to share the testing environment (Now Karma) and avoid updating the dependency chained between packages.
@atomico/core
and @atomico/element
is now atomico
.@atomico/router
is now atomico/router
.@atomico/lazy
is now atomico/lazy
.Now you only need one type of project format to manage individual applications, design systems or web-components.
npm init @atomico
Welcome to Atomico, let's create your project
√ name? ... project-name
√ description? ... project-description
Ready!, check the folder ./project-name and ./project-name/README.md
Next step, commands!
cd project-name
yarn | npm i
to achieve this the following plugins have been created
@atomico/rollup-plugin-import-css, allows you to import the css, from an external file, you can customize your css using postcss plugins.
@atomico/rollup-plugin-workbox, allows the generation of a service worker configured for the development of PWA, once the bundle is finished.
@atomico/rollup-plugin-input-html, it allows the import of html input using rollup, similar to the parceljs approach, but designed to create applications and distributable design systems such as MJS modules.
** input bundle**
/src
/web-components
ui-header
ui-button
ui-footer
ui-header.html #script[type=module][src=./src/web-components/ui-header]
ui-button.html #script[type=module][src=./src/web-components/ui-button]
ui-footer.html #script[type=module][src=./src/web-components/ui-footer]
** putput bundle**
/dist
ui-header.html
ui-header.js
ui-button.html
ui-button.js
ui-footer.html
ui-footer.js
readme output, This facilitates the consumption of web-components or applications.