ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
lion/docs/blog/introducing-lion-ui.md
Danny Moerkerke 593d330158
chore: wrote a blogpost on @lion/ui (#1946) 
* chore: wrote a blogpost on @lion/ui

* Update docs/blog/introducing-lion-ui.md

Co-authored-by: Thijs Louisse <thijs.louisse@ing.com>

* Update docs/blog/introducing-lion-ui.md

Co-authored-by: gerjanvangeest <gerjanvangeest@users.noreply.github.com>

* Update introducing-lion-ui.md

Removed placeholder cover image

---------

Co-authored-by: Thijs Louisse <thijs.louisse@ing.com>
Co-authored-by: gerjanvangeest <gerjanvangeest@users.noreply.github.com>
2023-04-05 09:39:46 +02:00

2.2 KiB
Raw Blame History

title published description date tags
Introducing Lion UI false Lion introduces the new package @lion/ui which is a collection of all lion UI components. 2023-03-20
javascript

A new package

Lion introduces a new package @lion/ui which is a collection of UI components that can be used in your application. It contains all the components/systems that used to be distributed via separate @lion/* packages. This brings back around 40 packages to just 1.

Better dependency management

Since @lion/ui is now a single package, the dependencies of the individual components are now managed in a single package.json file. This results in a single folder of dependencies for all components instead of a folder for each component separately.

This means you will now have less dependencies that are easier to manage.

New entrypoints

All components are now imported from @lion/ui instead of @lion/* packages and therefore this is a breaking change. Where before you would import from @lion/<package>, you will now import from @lion/ui/<package>.js.

For example:

- import { LionAccordion } from '@lion/accordion';
+ import { LionAccordion } from '@lion/ui/accordion.js';

Element registrations have changed as well. For example:

- import '@lion/accordion/define';
+ import '@lion/ui/define/lion-accordion.js';

All available entrypoints for the packages in Lion can now easily be found in the /packages/ui/exports folder which makes the public API much more clear. This is now possible because Node.js supports the exports field in package.json where these entrypoints are defined.

For example, @lion/ui/accordion.js maps to /packages/exports/accordion.js and @lion/ui/define/lion-accordion.js maps to /packages/exports/define/lion-accordion.js.

Support for this exports field was added to TypeScript 4.7 so for that reason, @lion/ui only supports TypeScript 4.7+ with "moduleResolution": "Node16" or "moduleResolution": "NodeNext".

A new changelog

@lion/ui has a new single CHANGELOG.md in /packages/ui for the whole package. The older individual changelogs can be found in the /packages/ui/_legacy-changelogs folder.