- Version: 1.1.5 Build 20240112

	- 更新文档。
	- 加入NPM模块打包发布脚本。
	- 修复传入的对象、子项为已被React.createElement封装的对象时报错的bug。

.gitignore

@@ -2,3 +2,4 @@
 react.html
 react.test.js
 dist/
+npm/

README.react.md

@@ -10,17 +10,29 @@
 
 - 引入ReactDOMHtml
 
-  - ```javascript
-    import { reactDOM, rDOM } from './react.extensions.dom.module';
-    ```
+  - 使用NPM安装：
 
-  - HTML开发需要引入react.extensions.dom.min.js。
+    - ```shell
+	  npm install react-extensions-dom
+	  ```
+
+	- ```javascript
+	  import { reactDOM, rDOM } from react-extensions-dom;
+	  ```
 
-  - ```html
-    <script src="react.extensions.dom.min.js"></script>
-    ```
+  - 直接引入模块：
 
+    - 将react-extensions-dom-module.js复制到您的项目目录。
 
+	- ```javascript
+	  import { reactDOM, rDOM } from './react-extensions-dom-module';
+	  ```
+
+  - 不使用模块，直接从HTML引入：
+
+	- ```html
+	  <script src="react.extensions.dom.min.js"></script>
+	  ```
 
 - reactDOMHtml(object)或rDOM(object)。参数结构和JQueryDOM一致。
 
@@ -106,4 +118,130 @@
   	{tag:Test,id:`Test123`,class:`Test123`,html:`Test 1234567890`},
   	{tag:Test2,id:`Test123`,class:`Test123`,html:`Test 789000`},
   ]}));
-  ```
+  ```
+
+#### React官方文档中井字棋游戏的转制示例：
+
+##### index.js
+
+```javascript
+import React, { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { rDOM } from 'react-extensions-dom';
+import "./styles.css";
+
+import App from "./App";
+
+const root = createRoot(document.getElementById("root"));
+root.render(rDOM(StrictMode,{children:[
+	{tag:App},
+]}));
+```
+
+
+##### App.js
+
+```javascript
+import { useState } from 'react';
+import { Component } from 'react';
+import { rDOM } from 'react-extensions-dom';
+
+function Square({value,onSquareClick}){
+	return rDOM(`button`,{class:`square`,html:value,onClick:onSquareClick});
+}
+
+export default function Game(){
+	const [history, setHistory] = useState([Array(9).fill(null)]);
+	const [currentMove, setCurrentMove] = useState(0);
+	const xIsNext = currentMove % 2 === 0;
+	const currentSquares = history[currentMove];
+
+	function handlePlay(nextSquares){
+		const nextHistory = [...history.slice(0, currentMove + 1), nextSquares];
+		setHistory(nextHistory);
+		setCurrentMove(nextHistory.length - 1);
+	}
+
+	function jumpTo(nextMove){
+		setCurrentMove(nextMove);
+	}
+
+	const moves=history.map((squares, move)=>{
+		let description;
+		if (move > 0) {
+			description = `Go to move #${move}`;
+		} else {
+			description = `Go to game start`;
+		}
+		return rDOM({tag:`li`,key:move,children:{tag:`button`,onClick:()=>jumpTo(move),html:description}});
+	});
+
+	return rDOM({tag:`div`,class:`game`,children:[
+		{tag:`div`,class:`game-board`,children:[
+			{tag:Board,xIsNext:xIsNext,squares:currentSquares,onPlay:handlePlay},
+		]},
+		{tag:`div`,class:`game-info`,children:[
+			{tag:`ol`,children:moves},
+		]},
+	]});
+}
+
+function Board({xIsNext, squares, onPlay}) {
+	function handleClick(i){
+		if(squares[i] || calculateWinner(squares)) return;
+
+		const nextSquares = squares.slice();
+		if(xIsNext){
+			nextSquares[i] = `X`;
+		}else{
+			nextSquares[i] = `O`;
+		}
+		onPlay(nextSquares);
+	}
+	const winner = calculateWinner(squares);
+	let status;
+	if (winner) {
+		status = 'Winner: ' + winner;
+	} else {
+		status = 'Next player: ' + (xIsNext ? 'X' : 'O');
+	}
+	return rDOM([
+		{tag:`div`,class:`status`,html:status},
+		{tag:`div`,class:`board-row`,children:[
+			{tag:Square,value:squares[0],onSquareClick:()=>handleClick(0)},
+			{tag:Square,value:squares[1],onSquareClick:()=>handleClick(1)},
+			{tag:Square,value:squares[2],onSquareClick:()=>handleClick(2)},
+		]},
+		{tag:`div`,class:`board-row`,children:[
+			{tag:Square,value:squares[3],onSquareClick:()=>handleClick(3)},
+			{tag:Square,value:squares[4],onSquareClick:()=>handleClick(4)},
+			{tag:Square,value:squares[5],onSquareClick:()=>handleClick(5)},
+		]},
+		{tag:`div`,class:`board-row`,children:[
+			{tag:Square,value:squares[6],onSquareClick:()=>handleClick(6)},
+			{tag:Square,value:squares[7],onSquareClick:()=>handleClick(7)},
+			{tag:Square,value:squares[8],onSquareClick:()=>handleClick(8)},
+		]},
+	]);
+}
+
+function calculateWinner(squares) {
+	const lines = [
+		[0, 1, 2],
+		[3, 4, 5],
+		[6, 7, 8],
+		[0, 3, 6],
+		[1, 4, 7],
+		[2, 5, 8],
+		[0, 4, 8],
+		[2, 4, 6]
+	];
+	for (let i = 0; i < lines.length; i++) {
+		const [a, b, c] = lines[i];
+		if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
+			return squares[a];
+		}
+	}
+	return null;
+}
+```

VERSION.md

@@ -1,4 +1,8 @@
 # JQuery DOM
+- Version: 1.1.5 Build 20240112
+	- 更新文档。
+	- 加入NPM模块打包发布脚本。
+	- 修复传入的对象、子项为已被React.createElement封装的对象时报错的bug。
 - Version: 1.1.4 Build 20240110
 	- 加入构建脚本。
 	- 加入ReactDOMHtml模块导出。

build.bat

@@ -1,5 +1,6 @@
 @echo off
 mkdir dist
 move /y *.min.js dist\
-copy /y react.extensions.dom.module.js dist\
+copy /y react.extensions.dom.module.js dist\react-extensions-dom-module.js
+copy /y react.extensions.dom.module.js npm\index.js
 pause

publish_npm.bat

@@ -0,0 +1,5 @@
+@echo off
+cd npm
+npm login
+npm publish
+pause

react.extensions.dom.js

@@ -18,7 +18,11 @@ function reactDOMHtml(dom_tag,dom_attr,dom_html,dom_html_after){
 				...default_children,
 				...cur,
 			};
-			domFullObject.push(reactDOMHtml(cur,undefined,undefined));
+			if(cur.$$typeof){
+				domFullObject.push(cur); // 已被React.createElement封装的情况下，不再重新封装
+			}else{
+				domFullObject.push(reactDOMHtml(cur,undefined,undefined));
+			}
 		}
 		return rCreateEl(Symbol.for('react.fragment'),null,domFullObject);
 	}
@@ -27,6 +31,9 @@ function reactDOMHtml(dom_tag,dom_attr,dom_html,dom_html_after){
 		dom_attr=dom_tag.attr || dom_tag;
 		dom_tag=dom_tag.tag;
 	}
+	if(dom_attr.$$typeof){
+		return dom_attr; // 已被React.createElement封装的情况下，直接返回此对象
+	}
 
 	dom_html=dom_attr.html || dom_html;
 	dom_html_after=dom_attr.htmlAfter || dom_html_after;

react.extensions.dom.module.js

@@ -15,7 +15,11 @@ function reactDOMHtml(dom_tag,dom_attr,dom_html,dom_html_after){
 				...default_children,
 				...cur,
 			};
-			domFullObject.push(reactDOMHtml(cur,undefined,undefined));
+			if(cur.$$typeof){
+				domFullObject.push(cur); // 已被React.createElement封装的情况下，不再重新封装
+			}else{
+				domFullObject.push(reactDOMHtml(cur,undefined,undefined));
+			}
 		}
 		return rCreateEl(Symbol.for('react.fragment'),null,domFullObject);
 	}
@@ -24,10 +28,13 @@ function reactDOMHtml(dom_tag,dom_attr,dom_html,dom_html_after){
 		dom_attr=dom_tag.attr || dom_tag;
 		dom_tag=dom_tag.tag;
 	}
+	if(dom_attr.$$typeof){
+		return dom_attr; // 已被React.createElement封装的情况下，直接返回此对象
+	}
 
 	dom_html=dom_attr.html || dom_html;
 	dom_html_after=dom_attr.htmlAfter || dom_html_after;
-	
+
 	//对attr进行过滤和改名
 	let dom_attr_fix_blacklist=[
 		`tag`,`html`,`htmlAfter`,