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 139 changed one line
Von Typescript sind sehr viele Varianten mit sogenannten Decorators (Annotationen etc.) im Umlauf. Folgende Konfiguration unterstützt einige davon:
Von Typescript sind sehr viele Varianten mit sogenannten Decorators (Annotationen etc.) im Umlauf. Folgende Konfiguration unterstützt einige davon.
At line 141 added one line
webpack.config.js:
At line 160 added 14 lines
tsconfig.json:
{{{
{
"compilerOptions": {
"jsx": "react-jsx",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"target": "ESNext",
"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>;
}
}}}