How to upgrade from lit-element to lit

In version 2.5.0 we replaced the use of lit-element and lit-html with lit.

When upgrading your Design Systems to version 2.5.0, you must ensure that any custom components you have built using lit-element or lit-html are upgraded to use lit.

If you do not do this, you might find that your content has become graphically misaligned.

Here is an example of how you can accomplish this when using lit-element:

Download the Design System
Unzip the file and install npm modules
Open the ./src/components/slide folder
Do a replace action (for each component inside the current folder) of this line:
CODE
```
import { html, css, unsafeCSS } from 'lit-element';
```
With the following line:
CODE
```
import { html, css, unsafeCSS } from 'lit';
```

Remember to build (npm) your Design System before replacing it.

We have prepared a script to assist in this task, which will also do lit-html replacements as described in https://lit.dev/docs/v2/releases/upgrade.

update-lit-imports

In version 2.5.1 we’ve added a script to assist with the update of Lit imports in custom components.

After upgrading to 2.5.1, do step 1 and 2 above (download Design System and run npm install) and then run:

npm run update:lit:imports

You should see similar output to:

CODE

> basic-shared-resource@2.5.1 update:lit:imports
> node lib/update-lit-imports.mjs


Updating Lit imports in: [
  '/Users/sli/dev/anthill/fusion/shared/src/components/slide/product-logo/index.js',
  '/Users/sli/dev/anthill/fusion/shared/src/components/slide/document-footer/index.js'
]

=== DONE ===

NOTE: Decorators, if used, need to be manually updated. See https://lit.dev/docs/v2/releases/upgrade/#update-decorator-imports

Build your Design System and upload to Activator.