Skip to content

👋🥳🎉 Atomic now is simpler!

Compare
Choose a tag to compare
@UpperCod UpperCod released this 31 May 03:06

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.

  1. @atomico/core and @atomico/element is now atomico.
  2. @atomico/router is now atomico/router.
  3. @atomico/lazy is now atomico/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.