lit/lit-element

Unnecessary breaking change in Lit 2 when using TypeScript

Artur- opened this issue · 8 comments

Artur- commented

Description

With LitElement 2.4 you can do

import { customElement, html, property, query } from 'lit-element';

With Lit 2, this results in an error

Module '"../node_modules/lit-element/lit-element"' has no exported member 'customElement'

Is it intentional that the decorators are not re-exported? Would ease migration if they were

bennypowers commented

The purpose of this change is so that vanilla users aren't taxed with extra decorators code in their bundles

fix:

import { html } from 'lit-element';
import { customElement, property, query } from 'lit-element/lib/decorators';
  • 👀1
Artur- commented

How does not re-exporting them make the bundle smaller?

Isn't the point also that you should import from lit instead of lit-element and lit-element is mostly around for backwards compatibility?

web-padawan commented

The default entrypoint for lit does not export decorators either so there is lit/decorators.js

Artur- commented

That is completely fine as lit is for new users. This is only a question for migration

sorvell commented

The intention is that when you import 'lit-element', it is as backwards compatible as possible. We've changed some of the imports in the lit package only.

justinfagnani commented

lit/lit#1649 fixes the problem here. We made lit-element backwards compatible with a new index.js file, but the typings still point to lit-element.js which doesn't export the decorators.

nsanzimfura-eric commented

The purpose of this change is so that vanilla users aren't taxed with extra decorators code in their bundles

fix:

import { html } from 'lit-element';
import { customElement, property, query } from 'lit-element/lib/decorators';

Actually, this is the one works for Lit V3:

import { html } from 'lit-element';
import { customElement, property, query } from 'lit-element/decorators';

Note: there is no lib folder.