Closed makoven closed 2 years ago
I'm not sure what's causing JSX intrinsics checking to kick in - I thought intrinsics should only be checked if IntrinsicElements
is non-empty - but since it is, you'll need to define an interface for <t-btn>
:
interface TButton {
count: number;
}
declare global {
interface HTMLElementTagNameMap {
"t-btn": MyElement;
}
/* eslint-disable @typescript-eslint/no-namespace */
namespace JSX {
interface IntrinsicElements {
"t-btn": TButton;
}
}
}
https://codesandbox.io/s/react-typescript-forked-7lwx3?file=/src/t-btn.ts
@justinfagnani
Of course, I can manually define the desired interface. It is simply not clear why the library does not have a helper for inferring the desired interface from the lit-element component class. As a result, all the lit-element components that I tried cannot be used in the JSX frameworks
You could consider using https://github.com/lit/lit/tree/main/packages/labs/react to create a React wrapper which you can use in TSX with good typings.
Related to #2648
Closing :) webcomponent types are reflected in React props with the the react wrapper @kevinpschaaf referenced. Event handler types can be typecasted as well.
Related to #2648
Closing :) webcomponent types are reflected in React props with the the react wrapper @kevinpschaaf referenced. Event handler types can be typecasted as well.
That's not true, when you want to have a required prop, it is not reflected at all, everything is options Is there a solution for this problem, I am unable to reflect types properly...
Name should be required not optional
@RayLuxembourg for custom elements, all properties are necessarily optional, because you can always do document.createElement('my-element')
and then provide no additional property assignments.
If we have a feature request on the React wrapper for transforming some properties, we should open that on the lit/lit monorepo for the @lit-labs/react package.
Hello. Is it possible to somehow get the types for the React JSX (TSX). Every time I try to use an lit-element inside a JSX component, I get the error:
Property 't-btn' does not exist on type 'JSX.IntrinsicElements'
https://codesandbox.io/s/react-typescript-forked-uohq1?file=/src/index.tsx (example from https://github.com/Polymer/lit-element/issues/1052)