how-to-use-jsx-and-tsx-with-jsxdom.md

如何使用 jsx-dom？
How to use jsx-dom?

jsx-dom 可以让你使用 JSX/TSX 语法和样式化组件来创建 DOM 元素。
The package jsx-dom is a JavaScript library that allows you to use JSX and styled components for creating DOM elements.

在本仓库中使用 jsx-dom，你需要：
To use jsx-dom in this repository, you need to run the following command:

pnpm add jsx-dom

目标 MediaWiki 的版本低于 1.38
The target MediaWiki version is lower than 1.38

按正常使用 jsx-dom 的方式使用即可。需要注意的是，每个使用 jsx-dom 的小工具都会打包若干份对应的库，可能会影响代码体积。
Just use jsx-dom in the normal way. It should be noted that each gadget using them will bundle several copies of the library, which may affect the code size.

/* style.module.css */
.red {
	color: #d33;
}

import React from 'jsx-dom';
import {red} from './style.module.css';

document.body.append(
	<div id="id" className={red}>
		Hello World!
	</div>
);

目标 MediaWiki 的版本不低于 1.38
The target MediaWiki version is at least 1.38

1. 根据实际情况修改src/React文件夹中的以下文件
   According to actual needs, modify some files in the src/React folder

   • React.ts
   • modules/global.d.ts
   • definition.json（将enable属性改为true）/ (change enable property to true)

2. 在小工具对应的definition.json中，将ext.gadget.React添加为依赖项（dependencies）
   In the corresponding definition.json of the gadget, add the ext.gadget.React as a dependency

{
	"dependencies": ["ext.gadget.React"],
	// Other properties...
}

3. 在 JSX 或 TSX 中，使用import导入ext.gadget.React
   In the place where you need to use jsx-dom, import it using import

import React from 'ext.gadget.React';

现在，你可以使用 JSX 或 TSX 语法来创建 DOM 元素，并使用样式化组件来创建组件。
Now you can use JSX or TSX syntax to create DOM elements and use styled components to create components.

import React, {styled} from 'ext.gadget.React';

const Header = styled.h2`
	font-size: 1.5em;
	font-weight: 500;
`;

document.body.append(<Header>Hello World!</Header>);