58 lines
2.3 KiB
Markdown
58 lines
2.3 KiB
Markdown
---
|
|
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]
|
|
eleventyNavigation:
|
|
key: Introducing Lion UI
|
|
title: Introducing Lion UI
|
|
---
|
|
|
|
### 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.
|