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 9 added 52 lines
module: {
rules: [{
test: /\.jsx$/i,
include: path.resolve(__dirname, "src"),
use: {
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env",
["@babel/preset-react", {"runtime": "automatic"}]
]
}
}
}, {
test: /\.ts$/i,
include: path.resolve(__dirname, "src"),
use: {
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env",
"@babel/typescript"
]
}
}
}, {
test: /\.js$/i,
include: path.resolve(__dirname, "src"),
use: {
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env"
]
}
}
}, {
test: /\.css$/i,
include: [
path.resolve(__dirname, "src"),
path.resolve(__dirname, "node_modules")
],
use: ["style-loader", "css-loader", "postcss-loader"]
}, {
test: /\.(png|svg|jpe?g|gif|woff2?|ttf|eot)$/,
use: "file-loader"
}]
},
resolve: {
extensions: [".js", ".jsx", ".css", ".ts"]
}
}}}
At line 62 added 18 lines
!!!Typescript Komponenten .tsx
[ReactJS] kann auch mit Typescript kombiniert werden. Dazu muss in der webpack.config.js folgende Regel für den Babel-Loader konfiguriert werden:
{{{
{
test: /\.(jsx|tsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env",
["@babel/preset-react", {"runtime": "automatic"}],
"@babel/preset-typescript"
]
}
}
}
At line 12 changed one line
!!TS-Config
Zusätzlich muss in der TS-Config angegeben werden, dass es sich um Extended Javascript handelt:
{{{
{
"compilerOptions": {
"jsx": "react-jsx"
}
}
}}}
!!!Typescript nur Typen generieren
At line 137 added 91 lines
!!!Typescript mit Decorators
Von Typescript sind sehr viele Varianten mit sogenannten Decorators (Annotationen etc.) im Umlauf. Folgende Konfiguration unterstützt einige davon.
webpack.config.js:
{{{
use: {
loader: "babel-loader",
options: {
presets: [
"@babel/preset-env",
"@babel/preset-typescript",
["@babel/preset-react", {runtime: "automatic"}]
],
plugins: [
"@babel/syntax-dynamic-import",
["@babel/plugin-proposal-decorators", {version: "2023-05", decoratorAutoAccessors: true}],
"@babel/plugin-proposal-object-rest-spread",
["@babel/plugin-transform-class-properties"]
]
}
}}}
tsconfig.json:
{{{
{
"compilerOptions": {
"jsx": "react-jsx",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"target": "ESNext",
"moduleResolution": "node"
}
}
}}}
__Hinweis:__ Viele Konfigurationen sind inkonsistent. Es ist schwierig herauszufinden, welche Kombinationen dieser Plugins mit welchen Parametern zusammen arbeiten.
!!!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>;
}
}}}