feat: support for using JSX/TSX components

under jsx-dom or React, fully compatible with jsx-dom

.eslintrc

@@ -22,6 +22,35 @@
 		{
 			"files": ["*.js"],
 			"extends": ["plugin:@typescript-eslint/disable-type-checked"]
+		},
+		{
+			"files": ["*.jsx", "*.tsx"],
+			"extends": ["plugin:react/recommended", "plugin:react/jsx-runtime"],
+			"rules": {
+				"class-methods-use-this": [
+					"error",
+					{
+						"exceptMethods": [
+							"forceUpdate",
+							"getDefaultProps",
+							"getInitialState",
+							"isMounted",
+							"render",
+							"replaceState",
+							"setState"
+						]
+					}
+				],
+				"func-style": "off",
+				"@typescript-eslint/no-unsafe-assignment": "off",
+				"@typescript-eslint/no-unsafe-member-access": "off",
+				"@typescript-eslint/no-unused-vars": [
+					"warn",
+					{
+						"varsIgnorePattern": "^_|^React$"
+					}
+				]
+			}
 		}
 	],
 	"rules": {
@@ -243,5 +272,10 @@
 				"avoidEscape": true
 			}
 		]
+	},
+	"settings": {
+		"react": {
+			"version": "detect"
+		}
 	}
 }

README.md

@@ -6,7 +6,8 @@
 Awesome Gadgets 是面向 MediaWiki 网站，用以统一存储、管理并编译全站小工具（Gadget）的工具。小工具开发者只需关心小工具本身的代码实现，无需关心其他方面。工具将自动检查语法、编译并部署到网站。<br>_Awesome Gadgets_ is a tool designed specifically for MediaWiki websites, with the goal of centralizing the storage, management, and compilation of all site-wide CSS/JavaScript and their peer pages. Developers of these gadgets can solely focus on implementing the code for their creations without the need to worry about other aspects. The tool will automatically check the syntax, compile, and deploy gadgets to the website.
 
 -   使用 esbuild 编译，通过 Babel 转译现代语法以获得良好的浏览器兼容性<br>Compile using esbuild and transpile modern syntax with Babel for good browser compatibility
--   可以编写 TypeScript 和 Less，支持 CSS/Less 模块<br>Support writing files in TypeScript and Less, support CSS/Less modules
+-   可以编写 TypeScript 和 Less，支持 CSS/Less 模块，可以使用 JSX 和 TSX 组件<br>Support writing files in TypeScript and Less, support CSS/Less modules and use JSX/TSX components
+    -   见[文档](docs/how-to-use-jsx-and-tsx-with-jsxdom-or-react.md)。<br>See [documentation](docs/how-to-use-jsx-and-tsx-with-jsxdom-or-react.md)
 -   支持引用 ResourceLoader 模块<br>Support requiring ResourceLoader built-in modules
     -   见[文档](docs/how-to-use-exports-and-require-in-mediawiki.md)。<br>See [documentation](docs/how-to-use-exports-and-require-in-mediawiki.md)
 -   自动部署<br>Automatic deployment

docs/how-to-use-jsx-and-tsx-with-jsxdom-or-react.md

@@ -0,0 +1,77 @@
+### 如何使用 jsx-dom 或 React？<br>How to use jsx-dom or React?
+
+[jsx-dom](https://www.npmjs.com/package/jsx-dom) 可以让你使用 JSX/TSX 语法和样式化组件来创建 DOM 元素。它可以被看作是 React 的替代品，比 React 更快，体积也小得非常多。<br>
+The package [jsx-dom](https://www.npmjs.com/package/jsx-dom) is a JavaScript library that allows you to use JSX and styled components for creating DOM elements, which is a faster and much smaller alternative to React.
+
+在本仓库中使用 jsx-dom 或 React，你需要：<br>To use `jsx-dom` in this repository, you need to run the following command:
+
+```bash
+pnpm add jsx-dom
+```
+
+或<br>Or
+
+```bash
+pnpm add react react-dom @types/react @types/react-dom
+```
+
+#### 目标 MediaWiki 的版本低于 1.38<br>The target MediaWiki version is lower than 1.38
+
+按正常使用 jsx-dom 或 React 的方式使用即可。需要注意的是，每个使用 jsx-dom 或 React 的小工具都会打包一份对应的库，可能会严重影响代码体积（React 真的非常大）。<br>Just use jsx-dom or React in the normal way. It should be noted that each gadget using them will bundle a corresponding library, which may significantly affect the code size (React is really very large).
+
+```css
+/* modules/style.module.css */
+.red {
+	color: #d33;
+}
+```
+
+```tsx
+import React from 'jsx-dom';
+import {red as classRed} from './modules/style.module.css';
+
+document.body.append(
+	<div id="id" className={classRed}>
+		Hello World!
+	</div>
+);
+```
+
+#### 目标 MediaWiki 的版本不低于 1.38<br>The target MediaWiki version is at least 1.38
+
+推荐使用 jsx-dom，因为可能和第三方 React 组件库存在一些兼容性问题。<br>Here recommend using `jsx-dom`, because there may be some compatibility issues with third-party React component libraries.
+
+1. 根据实际情况修改`src/React`文件夹中的以下文件<br>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`）<br>In the corresponding `definition.json` of the gadget, add the `ext.gadget.React` as a dependency
+
+```jsonc
+{
+	"dependencies": ["ext.gadget.React"]
+	// Other properties...
+}
+```
+
+3. 在 JSX 或 TSX 中，使用`import`导入`ext.gadget.React`<br>In the place where you need to use `jsx-dom`, import it using `import`
+
+```ts
+import React from 'ext.gadget.React';
+```
+
+现在，你可以使用 JSX 或 TSX 语法来创建 DOM 元素，并使用样式化组件来创建组件。<br>Now you can use JSX or TSX syntax to create DOM elements and use styled components to create components.
+
+```tsx
+import React, {styled} from 'ext.gadget.React';
+import {css} from 'ext.gadget.React';
+
+const Header = styled.h2`
+	font-size: 1.5em;
+	font-weight: 500;
+`;
+
+document.body.append(<Header>Hello World!</Header>);
+```

package.json

@@ -68,6 +68,7 @@
 		"eslint": "^8.56.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-config-wikimedia": "latest",
+		"eslint-plugin-react": "^7.33.2",
 		"eslint-plugin-unicorn": "latest",
 		"glob": "^10.3.10",
 		"happy-dom": "^12.10.3",