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>
This commit is contained in:
parent
a5f35158c0
commit
593d330158
1 changed files with 55 additions and 0 deletions
55
docs/blog/introducing-lion-ui.md
Normal file
55
docs/blog/introducing-lion-ui.md
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
---
|
||||||
|
title: Introducing Lion UI
|
||||||
|
published: false
|
||||||
|
description: Lion introduces the new package @lion/ui which is a collection of all lion UI components.
|
||||||
|
date: 2023-03-20
|
||||||
|
tags: [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:
|
||||||
|
|
||||||
|
```diff
|
||||||
|
- import { LionAccordion } from '@lion/accordion';
|
||||||
|
+ import { LionAccordion } from '@lion/ui/accordion.js';
|
||||||
|
```
|
||||||
|
|
||||||
|
Element registrations have changed as well. For example:
|
||||||
|
|
||||||
|
```diff
|
||||||
|
- 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]( https://github.com/ing-bank/lion/blob/master/packages/ui/CHANGELOG.md) in `/packages/ui` for the whole package. The older individual changelogs can be
|
||||||
|
found in the `/packages/ui/_legacy-changelogs` folder.
|
||||||
Loading…
Reference in a new issue