{"_id":"@alice-lib/babel-plugin-attribute-wrapper","_rev":"2-f7d874e2da4d5258a73b2bd438814f06","name":"@alice-lib/babel-plugin-attribute-wrapper","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@alice-lib/babel-plugin-attribute-wrapper","version":"1.0.0","author":{"name":"senjyouhara"},"_id":"@alice-lib/babel-plugin-attribute-wrapper@1.0.0","maintainers":[{"name":"senjyouhara","email":"lzj724@qq.com"}],"dist":{"shasum":"2befe1d5a6605f476b0416baab3fbd14c4b4274e","tarball":"https://registry.npmjs.org/@alice-lib/babel-plugin-attribute-wrapper/-/babel-plugin-attribute-wrapper-1.0.0.tgz","fileCount":3,"integrity":"sha512-t9V8fYvsYIObP/wAPRn8qoaMLmRXD5K499GxcYilyIqhD+ra5YNcbyzHEem5H/uwjwuqqxvcDaxlXNRmL3ixVg==","signatures":[{"sig":"MEYCIQC26to0XAg5vI/2DrbG6Gr2vTl79XdUC2sC6NXU9ODmzAIhAIShlAoiZql2KatR3NKk3cn+XItFk6n1+gzflVAiTkd0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12564},"main":"lib/index.js","types":"./index.d.ts","module":"lib/index.js","exports":{".":{"import":"./lib/index.js","default":"./lib/index.js","require":"./lib/index.js"}},"gitHead":"131c08139cf61fa287ad9a391f01b224809c1537","scripts":{"build":"rimraf lib && father build","start":"dumi dev","prepublishOnly":"npm run build"},"_npmUser":{"name":"senjyouhara","email":"lzj724@qq.com"},"_npmVersion":"10.7.0","description":"通过babel为jsx添加一些实用性功能","directories":{},"_nodeVersion":"20.15.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/babel-plugin-attribute-wrapper_1.0.0_1732155307330_0.6097902090986951","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@alice-lib/babel-plugin-attribute-wrapper","version":"1.0.1","author":{"name":"senjyouhara"},"_id":"@alice-lib/babel-plugin-attribute-wrapper@1.0.1","maintainers":[{"name":"senjyouhara","email":"lzj724@qq.com"}],"dist":{"shasum":"caace566b125fc8b3fc1df818a2150358ee8b25f","tarball":"https://registry.npmjs.org/@alice-lib/babel-plugin-attribute-wrapper/-/babel-plugin-attribute-wrapper-1.0.1.tgz","fileCount":4,"integrity":"sha512-C0o4fHBuBbqZ966vdenbnj4zCXpwDnTeDa0ynuDYfH06+x7hrdPJfFgBycLy9hAIf0LBDF6Z9ga9xB/FkGxm6Q==","signatures":[{"sig":"MEUCIQCUyQAAS0XkRBtwxDO8vHSQgkTZGAIfhU2GaArcf1/O1wIgVgZKnS92lUrbANQIVDvnjNrZrFMfRqdXB2/hrn2huB0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12915},"main":"lib/index.js","types":"./index.d.ts","module":"lib/index.js","exports":{".":{"import":"./lib/index.js","default":"./lib/index.js","require":"./lib/index.js"}},"gitHead":"131c08139cf61fa287ad9a391f01b224809c1537","scripts":{"build":"rimraf lib && father build","start":"dumi dev","prepublishOnly":"npm run build"},"_npmUser":{"name":"senjyouhara","email":"lzj724@qq.com"},"_npmVersion":"10.7.0","description":"通过babel为jsx添加一些实用性功能","directories":{},"_nodeVersion":"20.15.0","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/babel-plugin-attribute-wrapper_1.0.1_1732155573828_0.8233420765602926","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@alice-lib/babel-plugin-attribute-wrapper","author":{"name":"senjyouhara"},"version":"1.0.2","description":"通过babel为jsx添加一些实用性功能","main":"lib/index.js","types":"./index.d.ts","module":"lib/index.js","exports":{".":{"import":"./lib/index.js","require":"./lib/index.js","default":"./lib/index.js"}},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"devDependencies":{},"scripts":{"start":"dumi dev","build":"rimraf lib && father build"},"_id":"@alice-lib/babel-plugin-attribute-wrapper@1.0.2","_integrity":"sha512-942oIt7plhAKazR8k895F6bu8GgSNVuoWbnCZil7atDhHeXvg14x517LdgOGFxqq8lz8B5DaftbiG8EREcZl6g==","_resolved":"C:\\Users\\ADMINI~1\\AppData\\Local\\Temp\\d87664c59f913f0c64dab13a684c90c7\\alice-lib-babel-plugin-attribute-wrapper-1.0.2.tgz","_from":"file:alice-lib-babel-plugin-attribute-wrapper-1.0.2.tgz","_nodeVersion":"20.15.0","_npmVersion":"10.7.0","dist":{"integrity":"sha512-942oIt7plhAKazR8k895F6bu8GgSNVuoWbnCZil7atDhHeXvg14x517LdgOGFxqq8lz8B5DaftbiG8EREcZl6g==","shasum":"3f3be14d02d039c74817c2d910231febbe71d677","tarball":"https://registry.npmjs.org/@alice-lib/babel-plugin-attribute-wrapper/-/babel-plugin-attribute-wrapper-1.0.2.tgz","fileCount":4,"unpackedSize":12838,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAq7Es2P3jhGVaXiiVsX1+9bW2OTpGIOwZl9xPYz3mbIAiEAh7GEYGboO+5i9Wm39f9aIRMIEJxmkebL+k7y6zpKTzs="}]},"_npmUser":{"name":"senjyouhara","email":"lzj724@qq.com"},"directories":{},"maintainers":[{"name":"senjyouhara","email":"lzj724@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/babel-plugin-attribute-wrapper_1.0.2_1732159494987_0.5677067507716562"},"_hasShrinkwrap":false}},"time":{"created":"2024-11-21T02:15:07.210Z","modified":"2024-11-21T03:24:55.344Z","1.0.0":"2024-11-21T02:15:07.497Z","1.0.1":"2024-11-21T02:19:33.993Z","1.0.2":"2024-11-21T03:24:55.157Z"},"author":{"name":"senjyouhara"},"description":"通过babel为jsx添加一些实用性功能","maintainers":[{"name":"senjyouhara","email":"lzj724@qq.com"}],"readme":"# babel-plugin-attribute-wrapper\r\n\r\njsx 属性包装babel插件 \r\n\r\n## API\r\n\r\n| 属性 | 说明 | 类型 | 默认值 |\r\n| --- | --- | --- | --- |\r\n| importName | 非必须，引入名称，importName存在 import { [importName] as method} from packageName; 不存在：import method from packageName | `string` | `-` |\r\n| importName | 必须，引入的报名 | `string` | `-` |\r\n| attributeName | 必须，要处理的属性名称，比如 r-code、className等 | `string` | `-` |\r\n| methodName | 非必须，处理函数名称 | `string` | `method` |\r\n| conditional | 非必须，是否使用三元操作 | `boolean` | `false` |\r\n| replaceAttributeName | 非必须，需要替换的属性名称 | `string` | `conditional===true` ? `null` : `wrapperAttributedName 丨丨 attributeName`; |\r\n| wrapperAttributedName | 非必须，值需要包裹的属性名称，[attributeName]={xxx} onClick={handleClick} => onClick={method(xxx, handleClick)} | `string` | `-` |\r\n| negation | 非必须，取反 disabled={!_method(xxx)} | `boolean` | `false` |\r\n\r\n## 示例\r\n\r\n### className={xxx} 转 className={_method(xxx)}\r\n\r\nbabel配置：\r\n\r\n```js | pure\r\n{\r\n    plugins: [\r\n        [\r\n            'babel-plugin-attribute-wrapper',\r\n            {\r\n                packageName: 'classnames',\r\n                attributeName: 'classNames',\r\n            },\r\n            'className',\r\n        ]\r\n    ]\r\n}\r\n```\r\n\r\njsx源码：\r\n\r\n```jsx | pure\r\n<div>\r\n    <div>包裹classnames</div>\r\n    <div classNames={[styles.title, {[styles.disabled]: disabled}]}/>\r\n    <div classNames=\"title\"/>\r\n</div>\r\n```\r\n\r\n转换为：\r\n\r\n```jsx | pure\r\nimport _method from \"classnames\";\r\n\r\n<div>\r\n    <div>包裹classnames</div>\r\n    <div className={_method([styles.title, {[styles.disabled]: disabled}])}/>\r\n    <div className={_method(\"title\")}/>\r\n</div>\r\n```\r\n\r\n### 三元运算_method(xxx) ? <div> : null\r\n\r\nbabel配置：\r\n\r\n```js | pure\r\n{\r\n    plugins: [\r\n        [\r\n            'babel-plugin-attribute-wrapper',\r\n            {\r\n                importName: 'hasPermission',\r\n                packageName: 'src/commons',\r\n                attributeName: 'r-code',\r\n                conditional: true,\r\n            },\r\n            'permission-remove',\r\n        ]\r\n    ]\r\n}\r\n```\r\n\r\njsx源码：\r\n\r\n```jsx | pure\r\n<div>\r\n    <div>三元操作</div>\r\n    <div r-code/>\r\n    <div r-code=\"ADD_USER\"/>\r\n    <div r-code={a.code}/>\r\n</div>\r\n```\r\n\r\n转换为：\r\n\r\n```jsx | pure\r\nimport {hasPermission as _method} from \"src/commons\";\r\n\r\n<div>\r\n    <div>三元操作</div>\r\n    {_method(true) ? <div/> : null}\r\n    {_method(\"ADD_USER\") ? <div/> : null}\r\n    {_method(a.code) ? <div/> : null}\r\n</div>\r\n```\r\n\r\n### 添加disabled={!_method(xxx)}属性\r\n\r\nbabel配置：\r\n\r\n```js | pure\r\n{\r\n    plugins: [\r\n        [\r\n            'babel-plugin-attribute-wrapper',\r\n            {\r\n                importName: 'hasPermission',\r\n                packageName: 'src/commons',\r\n                attributeName: 'd-code',\r\n                replaceAttributeName: 'disabled',\r\n                negation: true,\r\n            },\r\n            'permission-disabled',\r\n        ]\r\n    ]\r\n}\r\n```\r\n\r\njsx源码：\r\n\r\n```jsx | pure\r\n<div>\r\n    <div>替换为disabled属性</div>\r\n    <div d-code=\"ADD\"/>\r\n    <div d-code>只写r-code属性，缺省值，默认true</div>\r\n</div>\r\n```\r\n\r\n转换为：\r\n\r\n```jsx | pure\r\nimport {hasPermission as _method} from \"src/commons\";\r\n\r\n<div>\r\n    <div>替换为disabled属性</div>\r\n    <div disabled={!_method(\"ADD\")}/>\r\n    <div disabled={!_method(true)}>只写r-code属性，缺省值，默认true</div>\r\n</div>\r\n```\r\n\r\n### r-report=\"用户保存\" onClick={this.handleClick} => onClick={_method(\"用户保存\", this.handleClick)}\r\n\r\nbabel配置：\r\n\r\n```js | pure\r\n{\r\n    plugins: [\r\n        [\r\n            'babel-plugin-attribute-wrapper',\r\n            {\r\n                importName: 'report',\r\n                packageName: 'src/commons',\r\n                attributeName: 'r-report',\r\n                wrapperAttributedName: 'onClick',\r\n            },\r\n            'wrapper',\r\n        ]\r\n    ]\r\n}\r\n```\r\n\r\njsx源码：\r\n\r\n```jsx | pure\r\n<div>\r\n    <div>劫持onClick</div>\r\n    <div r-report={reportToServer}></div>\r\n    <div r-report=\"用户保存\" onClick={this.handleClick}></div>\r\n    <div r-report={a && b} onClick={handleClick}></div>\r\n    <div r-report={true} onClick={(e) => handleCLick(e, 12)}></div>\r\n</div>\r\n```\r\n\r\n转换为：\r\n\r\n```jsx | pure\r\nimport {report as _method} from \"src/commons\";\r\n\r\n<div>劫持onClick</div>\r\n<div onClick={_method(reportToServer)}></div>\r\n<div onClick={_method(\"用户保存\", this.handleClick)}></div>\r\n<div onClick={_method(a && b, handleClick)}></div>\r\n<div onClick={_method(true, e => handleCLick(e, 12))}></div>\r\n```\r\n","readmeFilename":"README.md"}