diff --git a/.gitignore b/.gitignore index f6777f1..0f65b7f 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,5 @@ react.html react.test.js dist/ -npm/ \ No newline at end of file +npm/ +node_modules/ \ No newline at end of file diff --git a/VERSION.md b/VERSION.md index bf45077..97dce0f 100644 --- a/VERSION.md +++ b/VERSION.md @@ -1,36 +1,54 @@ # JQuery DOM + +- Version: 1.1.6 Build 20240115 + - 优化构建脚本。 + - 加入自动移除class前后空格功能。 + - 当dom_tag为空时，为其指定默认tag。 + - 修复dom_attr参数为null或undefined时，会报错的bug。 + - 修复dom_attr参数为字符串时，无法输出html文本的bug。 + - Version: 1.1.5 Build 20240112 - 更新文档。 - 加入NPM模块打包发布脚本。 - 修复传入的对象、子项为已被React.createElement封装的对象时报错的bug。 + - Version: 1.1.4 Build 20240110 - 加入构建脚本。 - 加入ReactDOMHtml模块导出。 - 修复使用标准参数时无法输出html文本的bug。 - 修复ReactDOMHtml中class为数组时不生效的bug。 + - Version: 1.1.3 Build 20240109 - 加入ReactDOMHtml。 - 整理项目资源。 - 优化vueDOMHtml结构，拆分DOMHtml和VueDOMHtml。 + - Version: 1.1.2 Build 20240105 - 加入vueDOMHtml功能。 + - Version: 1.1.1 Build 20240104 - 修复数组形式插入DOM时无法插入的bug。 + - Version: 1.1.0 Build 20231229 - 加入attribute PascalCase→kebab-case转换。 - 优化DOM插入性能。 + - Version: 1.0.9 Build 20231228 - 将$更名为jQuery以适配更多场合。 - 加入原生getDOMHtml功能。 + - Version: 1.0.9 Build 20231227 - 将getHtml更名为getDOMHtml。 - 加入表格使用tr替代tbody功能。 - 加入dom_tag和dom_attr单层对象写法。 - 更新文档。 + - Version: 1.0.8 Build 20231222 - 加入获取生成的HTML功能。 + - Version: 1.0.7 Build 20230606 - 加入表格DOM的语法糖。 - 修复部分情况下，元素中children会出现重复内容的bug。 + - Version: 1.0.6 Build 20210514 - 修复部分情况下，appendDOM中直接传递对象时无法添加元素的bug。 \ No newline at end of file diff --git a/build.bat b/build.bat index 88d8c0e..f57fbc3 100644 --- a/build.bat +++ b/build.bat @@ -1,6 +1,3 @@ @echo off -mkdir dist -move /y *.min.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 +node build.js pause \ No newline at end of file diff --git a/build.js b/build.js new file mode 100644 index 0000000..cc34d9e --- /dev/null +++ b/build.js @@ -0,0 +1,93 @@ +const fs=require(`fs`); +const UglifyJS = require(`uglify-js`); + +String.prototype.replaceAll=function(org,tgt){ + return this.split(org).join(tgt); +} + +//创建文件夹 +try{ + fs.mkdirSync(`dist`); + fs.mkdirSync(`npm`); +}catch(e){} + +// 压缩非模块脚本 +const uglifyList=[ + `jquery.extensions.dom`, + `html.dom`, + `vue.extensions.dom`, + `react.extensions.dom`, +] +for(let s of uglifyList){ + try{ + let origin=fs.readFileSync(`${s}.js`,`utf-8`); + let target=UglifyJS.minify(origin); + if (target.error) { + console.error(`Error in minifying JS file: ${target.error}`); + } else { + fs.writeFileSync(`dist/${s}.min.js`, target.code, {encoding:`utf-8`}); + console.log(`Compression ${s} completed successfully!`); + } + }catch(e){ + console.error(`An error occurred while compressing the JS file: ${e}`); + } +} + +// 处理模块脚本 +const moduleOriginTag=`/* --- FOR MODULE --- */`; +const moduleTargetTag=`/* MODULE INSERT */`; +const moduleList=[ + {origin:`react.extensions.dom`,target:`react.extensions.dom.module`,output:`react-extensions-dom-module`}, +] +for(let m of moduleList){ + try{ + let origin=fs.readFileSync(`${m.origin}.js`,`utf-8`); + let target=fs.readFileSync(`${m.target}.m`,`utf-8`); + let originCode=origin.split(moduleOriginTag)[1]; + let targetCode=target.replaceAll(moduleTargetTag, originCode).trim(); + fs.writeFileSync(`dist/${m.output}.js`, targetCode, {encoding:`utf-8`}); + fs.writeFileSync(`npm/index.js`, targetCode, {encoding:`utf-8`}); + console.log(`Output module ${m.output} completed successfully!`); + }catch(e){ + console.error(`An error occurred while output the JS module file: ${e}`); + } +} + +// 创建NPM包 +// 读取VERSION.md获取版本号 +let versionMd=fs.readFileSync(`VERSION.md`,`utf-8`); +let versionSplit=versionMd.split(`\n`); +let version=``; +for(let v of versionSplit){ + if(v.includes(`Version: `)){ + version=v.split(` `)[2]; + break; + } +} +//创建package.json +const packageJson={ + name: `react-extensions-dom`, + version: version, + description: `A plugin for React, use object instead of JSX to manage React elements.`, + main: `index.js`, + scripts: { + test: `echo "Error: no test specified" && exit 1`, + }, + repository: { + type: `git`, + url: `git+https://github.com/road0001/JQueryDOM.git`, + }, + author: ``, + license: `MIT`, + bugs: { + url: `https://github.com/road0001/JQueryDOM/issues`, + }, + homepage: `https://github.com/road0001/JQueryDOM#readme`, +} +//写入package.json +try{ + fs.writeFileSync(`npm/package.json`, JSON.stringify(packageJson, null, `\t`), {encoding:`utf-8`}); + console.log(`Output package.json completed successfully!`); +}catch(e){ + console.error(`An error occurred while output the package.json file: ${e}`); +} \ No newline at end of file diff --git a/build.sh b/build.sh new file mode 100644 index 0000000..0841eb2 --- /dev/null +++ b/build.sh @@ -0,0 +1,2 @@ +npm install uglify-js --save-dev +node build.js \ No newline at end of file diff --git a/html.dom.js b/html.dom.js index a367196..8243c19 100644 --- a/html.dom.js +++ b/html.dom.js @@ -105,7 +105,7 @@ getDOMHtml=DOMHtml=function(dom_tag,dom_attr,dom_html,dom_fix={}){ dom_tag=dom_tag.toKebabCase(); if(typeof dom_attr==`object`){ if(typeof dom_attr.class==`object` && dom_attr.class.length){ - dom_attr.class=dom_attr.class.join(` `); + dom_attr.class=dom_attr.class.join(` `).trim(); } if(typeof dom_attr.style==`object`){ let styleList=[]; diff --git a/install.bat b/install.bat new file mode 100644 index 0000000..851c409 --- /dev/null +++ b/install.bat @@ -0,0 +1,3 @@ +@echo off +call npm install uglify-js --save-dev +pause \ No newline at end of file diff --git a/install.sh b/install.sh new file mode 100644 index 0000000..61b406b --- /dev/null +++ b/install.sh @@ -0,0 +1 @@ +npm install uglify-js --save-dev \ No newline at end of file diff --git a/jquery.extensions.dom.js b/jquery.extensions.dom.js index 04a9915..d8ac985 100644 --- a/jquery.extensions.dom.js +++ b/jquery.extensions.dom.js @@ -53,7 +53,7 @@ if(typeof jQuery===`function`){ //Class数组化处理 case `class`: if(typeof cur_dom_attr==`object`){ - cur_dom_attr=cur_dom_attr.join(` `); + cur_dom_attr=cur_dom_attr.join(` `).trim(); } break; diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..bc53008 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,24 @@ +{ + "name": "JQueryDOM", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "devDependencies": { + "uglify-js": "^3.17.4" + } + }, + "node_modules/uglify-js": { + "version": "3.17.4", + "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.17.4.tgz", + "integrity": "sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==", + "dev": true, + "bin": { + "uglifyjs": "bin/uglifyjs" + }, + "engines": { + "node": ">=0.8.0" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..e9be548 --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "devDependencies": { + "uglify-js": "^3.17.4" + } +} diff --git a/publish_npm.bat b/publish_npm.bat index 03a5be3..63f8875 100644 --- a/publish_npm.bat +++ b/publish_npm.bat @@ -1,5 +1,4 @@ @echo off -mkdir npm cd npm npm login npm publish diff --git a/publish_npm.sh b/publish_npm.sh new file mode 100644 index 0000000..5e15a95 --- /dev/null +++ b/publish_npm.sh @@ -0,0 +1,3 @@ +cd npm +npm login +npm publish \ No newline at end of file diff --git a/react.extensions.dom.js b/react.extensions.dom.js index 5e22f25..ebd2cba 100644 --- a/react.extensions.dom.js +++ b/react.extensions.dom.js @@ -7,7 +7,10 @@ function reactDOMHtml(dom_tag,dom_attr,dom_html,dom_html_after){ }else{ return null; } + /* --- FOR MODULE --- */ + /* --- MODULE BEGIN --- */ //dom_tag为数组时，批量为母元素添加元素 + const _fragment=Symbol.for('react.fragment'); if(typeof dom_tag==`object` && dom_tag.length!=undefined){ let domFullObject=[]; let default_children={ @@ -24,13 +27,21 @@ function reactDOMHtml(dom_tag,dom_attr,dom_html,dom_html_after){ domFullObject.push(reactDOMHtml(cur,undefined,undefined)); } } - return rCreateEl(Symbol.for('react.fragment'),null,domFullObject); + return rCreateEl(_fragment,null,domFullObject); //顶层元素类似<>形式 } //dom_tag为对象时，和普通情况一样 if(typeof dom_tag==`object` && dom_tag.length==undefined){ dom_attr=dom_tag.attr || dom_tag; dom_tag=dom_tag.tag; } + if(!dom_tag){ + dom_tag=_fragment; + } + if(!dom_attr){ + dom_attr={}; + }else if(typeof dom_attr==`string`){ // 例：rDOM(`div`, `This is Div`) + dom_attr={html:dom_attr}; + } if(dom_attr.$$typeof){ return dom_attr; // 已被React.createElement封装的情况下，直接返回此对象 } @@ -58,7 +69,7 @@ function reactDOMHtml(dom_tag,dom_attr,dom_html,dom_html_after){ } } if(typeof dom_attr_fix.className==`object` && dom_attr_fix.className.length){ - dom_attr_fix.className=dom_attr_fix.className.join(` `); + dom_attr_fix.className=dom_attr_fix.className.join(` `).trim(); } dom_attr=dom_attr_fix; @@ -143,4 +154,6 @@ function reactDOMHtml(dom_tag,dom_attr,dom_html,dom_html_after){ } function rDOM(dom_tag,dom_attr,dom_html,dom_html_after){ return reactDOMHtml(dom_tag,dom_attr,dom_html,dom_html_after); -} \ No newline at end of file +} +/* --- MODULE END --- */ +/* --- FOR MODULE --- */ \ No newline at end of file diff --git a/react.extensions.dom.module.js b/react.extensions.dom.module.js deleted file mode 100644 index d154abd..0000000 --- a/react.extensions.dom.module.js +++ /dev/null @@ -1,145 +0,0 @@ -import { createElement } from 'react'; - -function reactDOMHtml(dom_tag,dom_attr,dom_html,dom_html_after){ - /** For Module */ - let rCreateEl=createElement; - - //dom_tag为数组时，批量为母元素添加元素 - if(typeof dom_tag==`object` && dom_tag.length!=undefined){ - let domFullObject=[]; - let default_children={ - tag:undefined,attr:undefined,html:undefined, - }; - for(let cur of dom_tag){ - cur={ - ...default_children, - ...cur, - }; - if(cur.$$typeof){ - domFullObject.push(cur); // 已被React.createElement封装的情况下，不再重新封装 - }else{ - domFullObject.push(reactDOMHtml(cur,undefined,undefined)); - } - } - return rCreateEl(Symbol.for('react.fragment'),null,domFullObject); - } - //dom_tag为对象时，和普通情况一样 - if(typeof dom_tag==`object` && dom_tag.length==undefined){ - 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`, - ] - let dom_attr_fix_replace={ - tagName:`tag`, attrName:`attr`, class:`className`, for:`htmlFor`, - } - let dom_attr_fix={}; - for(let key in dom_attr){ - if(!dom_attr_fix_blacklist.includes(key)){ - let key_fix=key; - for(let origin in dom_attr_fix_replace){ - if(origin == key_fix){ - key_fix=key_fix.replace(origin,dom_attr_fix_replace[origin]); - } - } - dom_attr_fix[key_fix]=dom_attr[key]; - } - } - if(typeof dom_attr_fix.className==`object` && dom_attr_fix.className.length){ - dom_attr_fix.className=dom_attr_fix.className.join(` `); - } - dom_attr=dom_attr_fix; - - //dom子项处理 - let dom_children=[]; - let reactDOMChildren=[]; - if(typeof dom_attr==`object`){ - if(typeof dom_attr.children==`object`){ - let default_children={ - tag:undefined,attr:undefined,html:undefined, - }; - if(dom_attr.children.length==undefined){ //children为对象时，有且仅有一个子项 - dom_children.push({ - ...default_children, - ...dom_attr.children, - }) - }else{ // children为数组时，解构并插入到dom_children - dom_children=[ - ...dom_children, - ...dom_attr.children, - ]; - } - }else if(typeof dom_attr.children==`string`){ //children为字符串时，进行兼容 - dom_children=[dom_attr.children]; - } - delete dom_attr.children; //移除attr中的children - } - if(dom_html){ - reactDOMChildren.push(dom_html); - } - for(let children of dom_children){ - if(typeof children==`object`){ - reactDOMChildren.push(reactDOMHtml(children)); - }else if(typeof children==`string`){ - reactDOMChildren.push(children); - } - } - if(dom_html_after){ - reactDOMChildren.push(dom_html_after); - } - - //表格语法糖 - if(typeof dom_attr==`object` && (typeof dom_attr.tbody==`object` || typeof dom_attr.tr==`object`)){ - let reactDOMTbody={tag:`tbody`,children:[]}; - let default_tr={ - tag:`tr`,attr:undefined,html:undefined,children:[], - }; - let default_td={ - tag:`td`,attr:undefined,html:undefined,children:[], - } - let trList=dom_attr.tbody || dom_attr.tr; - for(let i=0; i