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 removed 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 removed 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 82 changed 11 lines
Zusätzlich muss in der TS-Config angegeben werden, dass es sich um Extended Javascript handelt:
{{{
{
"compilerOptions": {
"jsx": "react-jsx"
}
}
}}}
!!!Typescript nur Typen generieren
!!TS-Config
At line 137 removed 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>;
}
}}}