From 593d3301588b6b1ac9e4b58de22a4a3fc259b7c6 Mon Sep 17 00:00:00 2001 From: Danny Moerkerke Date: Wed, 5 Apr 2023 09:39:46 +0200 Subject: [PATCH] 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 * Update docs/blog/introducing-lion-ui.md Co-authored-by: gerjanvangeest * Update introducing-lion-ui.md Removed placeholder cover image --------- Co-authored-by: Thijs Louisse Co-authored-by: gerjanvangeest --- docs/blog/introducing-lion-ui.md | 55 ++++++++++++++++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 docs/blog/introducing-lion-ui.md diff --git a/docs/blog/introducing-lion-ui.md b/docs/blog/introducing-lion-ui.md new file mode 100644 index 000000000..4d5f3c2ef --- /dev/null +++ b/docs/blog/introducing-lion-ui.md @@ -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/`, you will now import from `@lion/ui/.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.