ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: wrote a blogpost on @lion/ui (#1946)

Browse source 
* 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:
Danny Moerkerke 2023-04-05 09:39:46 +02:00 committed by GitHub
parent a5f35158c0
commit 593d330158
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 55 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
docs/blog/introducing-lion-ui.md Normal file
View 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.