This page (revision-9) was last changed on 27-Nov-2023 15:18 by Dieter Käppel

This page was created on 18-Oct-2023 06:42 by Dieter Käppel

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note
9 27-Nov-2023 15:18 5 KB Dieter Käppel to previous
8 23-Nov-2023 13:03 4 KB Dieter Käppel to previous | to last
7 14-Nov-2023 09:00 4 KB Dieter Käppel to previous | to last
6 14-Nov-2023 08:24 4 KB Dieter Käppel to previous | to last
5 14-Nov-2023 08:23 4 KB Dieter Käppel to previous | to last
4 18-Oct-2023 08:15 3 KB Dieter Käppel to previous | to last
3 18-Oct-2023 06:45 2 KB Dieter Käppel to previous | to last
2 18-Oct-2023 06:43 1 KB Dieter Käppel to previous | to last
1 18-Oct-2023 06:42 1014 bytes Dieter Käppel to last

Page References

Incoming links Outgoing links

Version management

Difference between version and

At line 169 changed one line
"moduleResolution": "Bundler"
"moduleResolution": "node"
At line 175 added 53 lines
!!!LitJS Adapter
Folgender Adapter vereinfacht das Einbinden von LitJS-Komponenten:
{{{
import {createComponent} from "@lit/react";
import React from "react";
export function lit(tag) {
return createComponent({
tagName: customElements.getName(tag),
elementClass: tag,
react: React
});
}
export default function Lit({tag, children, ...props}) {
const Element = lit(tag);
return <Element {...props}>{children}</Element>;
}
}}}
Oder in Typescript:
{{{
import {ReactWebComponent, createComponent} from "@lit/react";
import React from "react";
declare var customElements: any;
type Constructor<T> = {
new (): T;
};
type LitProps<I> = {
tag: Constructor<I>,
children: React.ReactNode,
rest: any[]
};
type AnyComponent = (props: any) => React.ReactElement;
export function lit<I extends HTMLElement>(tag: Constructor<I>): ReactWebComponent<I> {
return createComponent({
tagName: customElements.getName(tag),
elementClass: tag,
react: React
});
}
export default function Lit<I extends HTMLElement>({tag, children, ...rest}: LitProps<I>): React.ReactElement {
const Element: AnyComponent = lit(tag) as AnyComponent;
return <Element {...rest}>{children}</Element>;
}
}}}