👋🥳🎉 Atomic now is simpler!
Atomico, is simplified in search of a better maintenance and simplicity of package, for it I have applied important changes:
Simpler package
@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 nowatomico
.@atomico/router
is nowatomico/router
.@atomico/lazy
is nowatomico/lazy
.
Simpler installation
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.