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.

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

1. Download the Design System

2. Unzip the file and install npm modules

3. Open the ./src/components/slide folder

4. Do a replace action (for each component inside the current folder) of this line:

   import { html, css, unsafeCSS } from 'lit-element';
   

   With the following line:

   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:

> 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.