{"_id":"react-vue-like","_rev":"87-3b1c8fe4fe24cc57e1f52d3e076440a8","name":"react-vue-like","dist-tags":{"latest":"0.2.0","next":"0.2.0-alpha.2"},"versions":{"0.0.1":{"name":"react-vue-like","version":"0.0.1","description":"react-vue-like","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"src/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-dev":"cross-env NODE_ENV=development webpack --progresss  --config build/webpack-dev.config.js","build-prod":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build":"npm run build-dev && npm run build-prod"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"mobx":"^4.13.0","mobx-react":"^6.1.3","prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"3b689140dd22d5271741f6b5cd027fb7d68e4767","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.1","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"dist":{"integrity":"sha512-kxCSfHVS9c54Uwq6nbkyVKRLSU6a3otReUAzKPVUcf2TFUm/X+afFJjTRJuhcUVrvckKcXKCIlQ4TqpFRhLEHg==","shasum":"f8e478099d9e1e0b8163612a98f50f7908e9bd6f","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.1.tgz","fileCount":19,"unpackedSize":551748,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZNlvCRA9TVsSAnZWagAABkkP/1dhB8+QuULpB8PVKXqr\n/KXu5926hiNjr1DpPL3k7+2bt/c+wl0zjzCnxUaGnUOUwBGWR0zdfXASNBdW\ntljximdN143NUlME/rgxw1+uYjs45sBpd+bDn2cmSMBzKpExzOmeu/jSPHaK\ngAUSaMBeEiu/arAETHVW5AYHc8hV4+TfnnAaTkIx7lKKOU0PgQGTyMVPowCC\nKsIab8KoAD+PB+5VJ/o832Qo5ICwSUPFJrJvnXB5+CbV7PdVAQg1GcUrwBOY\nxGVVFQl5pEOf9lHJzgXfxBmtGRKK5EXJd8iZrYCN3tPtEm2/rqLcMi+PLgwL\nSAW/7rcyLc5+k4F4iA2EhIxXscNciDh5VYD3JGPpuxPqpQAbnbJC429QM516\nFcE4bq/2PK7hXaVka9yYSQLq/Ua/5o5hZfHvyGTF7Duha7lFlrY+jH2GxAAB\nGkDns732Uc6djJOFNhzveg4CIQzaTto6oeAEt+pMz0R9K4byV8uBNhHP5yng\nJERu58QlxKR6yP2nx+8rhEs2IbYXJtyzsqgErso3fD9cXcGstH+B0uSAtcqp\n2OBmXLL/FVeoGqL/G8qVy4seWZTHouOUy2AIVM/0QTOX5pnt46ebUPfkKwml\nSidplmGy2xXK7vlvb/RJdKJc2sLZlSvi1Z0qlYck13WkCcIPx8nedOjoEiqZ\nk5p7\r\n=pcHb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICFTDmLweSgP63jC49NoSDU2jPX4tPYUzVm8pZ7BK7ncAiEA3yboXiJjXz/OgHiJaTUBmGIGT/jxztzys5cdwbS05E8="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.1_1566890351155_0.9046815104998867"},"_hasShrinkwrap":false},"0.0.2":{"name":"react-vue-like","version":"0.0.2","description":"react-vue-like","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","engines":{"node":"> 6.9.1"},"scripts":{"build-dev":"cross-env NODE_ENV=development webpack --progresss  --config build/webpack-dev.config.js","build-prod":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build":"npm run build-dev && npm run build-prod"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"mobx":"^4.13.0","mobx-react":"^6.1.3","prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"3b689140dd22d5271741f6b5cd027fb7d68e4767","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.2","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"dist":{"integrity":"sha512-b7Fy3Hrn77RAwm/pZj8eCovVFh5Xoqt3T5flVmeJwMpg2YzkEhHhwjUZ6PUSUrZBRurCcuTdTO5Ngs76pFubRg==","shasum":"e93ccbb3833595ad7ea1cf9f18356a866ad95919","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.2.tgz","fileCount":19,"unpackedSize":551720,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZOfrCRA9TVsSAnZWagAAjUIP/0HkNldyzdUGI/2uCZJ5\n9HmHjf32iVk2h09U+hqjancgEUS6b5p7BPYDIOzuDmCG5orFI3Efgxor58dR\nYGxyrVU0ABnW3Xd580Q/dXVF3Nfq2yA7jt1HCea5I898pOIgY26Wy7Bb50cO\nr+li81NGKDQrU/o7VIiDLdosWAqljB88RFi9rJbfpiIsE93wf9BywYVz4wp8\n0B/FiKDB6bGXhNEorQXqz19G0FfkDoeOce1SpvOiKC96HMLOv+fGee026lL3\nValtbCGyfTASc8Re7pajKmImVUGUcakTbO/+GorS9uUH8LOElx5eqFMUGTGb\nC3TLDpu0m8fZaV3RV2lCMkQ7PwFD7vTLLMYILAoJWy2VVvEYzn+tKRDUX/fT\nCf7KicIYlXzVLZg05IGDeRg+Bmq5FRxRLsZwl9O6iOzxJRhrN20d/QpWFg5R\nvxymrlJdw5zAOR1evUcmX4jiFc++5JJ5qXNnbLdv4c0OHboOzI3D/7M2b+CZ\nHPwqgLLhGui9Eu6xjU8D/woX7nHZ7gLebYdUh0dW6tQ7lGMQXA5RnDFM6pfa\n/H1OE/qs5WApbfSFbqdE6Wh2GvXxxItrCTXySWGt/PHa6GWG8IcqKjuzdu2Q\ntISzcx9jzttC27AAyyEf5InipZr7V9IhNwW7VH3Wd6iOuXHlNm5X6FuXhnC6\nyxej\r\n=hr04\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAwrOHCKboFvBQTXV4uNOpCH8Bb90y56A5ajjw7lZZ3XAiEA+AP5gm1tInuu9RXHNrKujMawdkt0mFA9XibI3zVis+k="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.2_1566894059188_0.7164410676151209"},"_hasShrinkwrap":false},"0.0.3":{"name":"react-vue-like","version":"0.0.3","description":"react-vue-like","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-dev":"cross-env NODE_ENV=development webpack --progresss  --config build/webpack-dev.config.js","build-prod":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build":"npm run build-dev && npm run build-prod","build-esm":"babel src -d esm --source-maps"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"mobx":"^4.13.0","mobx-react":"^6.1.3","prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"4ebc3388a62d854d35dc7e4547a562bc2befeb11","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.3","_npmVersion":"6.4.1","_nodeVersion":"10.15.0","_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"dist":{"integrity":"sha512-rdlJt2+phqsMD9l6Tqzv7DwPpW5AYL+Kp8DhXlArM/dUJ4nfOU0ZL2/cKCVHgGjj/MOMAnxDUx3Teg0hMdcFlQ==","shasum":"0b5cd437e1a63d8b1832d1a67ff6e370ffd35fb6","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.3.tgz","fileCount":33,"unpackedSize":196969,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZ8NNCRA9TVsSAnZWagAA+pIP/2DtcdZE+AQehTayrMpl\nU3mqJ6lOQLKRgIGunfoYfW7CFTrIgSiWGQUOAqCLKPBcYDwVgLHz5dD4YM45\npDrjBzW5t/ccn4CKpEq/Nzs6gK5P+O9jH7vzfKBWv6CxHggvQelht/tz5COb\n0OZJDaMj13hf+hUllktZ716C1EpUkmF/FPbPtACuz9kCeNenl0bTC4zs9Wld\neSYd+hYay2nBJWCwVmfEu5OJynzoI3na57xw1i1XoUSgvvtKpY6J19b9J9lc\nTpGpVOtQADlQ02POKq9GnNmRW+YcQJ8KJuOqp+4MGZeITNnvxR5/4LSC8Z4g\nKTTP1jhNKMiRez6TH9KWsTtn12YMnY5jRJItnHheXjXUWWFX++yFzge4M7aI\nopOHxV4E95FnfMGTQUxfAlNdHe4o45KxCEcQC8aMQaGtTzBxicEPL/kXTV1K\niQOAfDIRZ7BS3fy3zUFqPO7Mg+zz7ZsBFXRxaWLWN9zZFC/L2OdH4we6FLIg\nZKkViQmCmHiFzYC76fBb+VWrjogZyf0mFxTca2UtRDtEAh1M1nUiojJXJpK7\njtoZ00YPL9fDw6f78gm+y0CvGK84qAWpaNUtK+bUPSpna15QFszzL9E3nzvx\nZ6c7xJwR/+Jy5BjkF4rZswFsHTNhYDZoEOoO8pYF9qzkpBzZmzA2oeLh0hmi\nWNhD\r\n=LN+p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2yGw8zCn0LBMZ7wf36eJlY/NUr3pwP840Of7NMFtsBAIgawEQlDNfW7MH1Bs9t9QRJ7p7LNNOy0MC1ZydWxqb6eI="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.3_1567081292333_0.6705322412939787"},"_hasShrinkwrap":false},"0.0.4":{"name":"react-vue-like","version":"0.0.4","description":"react-vue-like","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-dev":"cross-env NODE_ENV=development webpack --progresss  --config build/webpack-dev.config.js","build-prod":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build":"npm run build-dev && npm run build-prod","build-esm":"babel src -d esm --source-maps","prepublish":"npm run build-esm"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"mobx":"^4.13.0","mobx-react":"^6.1.3","prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"1087fd18bb97bf02c3caa9195aadd585cf883e48","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.4","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-Q5BLmpfKHtGAfdrEXPia5X3fP6nyU3UBfjzsx/efarLLGoDNNY8wlUp4gCRqqGxylcMUmZ7IU6Jg4kTnCWZ/0A==","shasum":"3cc43a117217613277ac11089b936b7069ecf287","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.4.tgz","fileCount":33,"unpackedSize":197302,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZ/EBCRA9TVsSAnZWagAA8f0P/290RaHkBtPILdEfNHMP\n05+JCzCPX/MnA2oPKsr6hTZ7NmOCLIba1cYYIAFpqg7UGczyVY87STVuCNyM\nbxNnA9QNDb4VwpJi9QwK7L3QG7ztCnsOVo5PGYuHyNsUAeRNh85fHfFcj5MU\nDw99OnuT7gAG14T+VAw6iVf0pbj/Xg5FsrpKWT1wDwqxY0DvCF3HLeFXbmp2\nXaY/i89hssF1bpbOF+0OkOQeMlJo8bexkxggMoiD+KJjpNKvAZeJzeiq+UZ8\nvqshhuJL8crsxVhjs4v6OTuykc/T8CzSsZ7VcJMPAVouUy5EDLTGaEbF2vuN\nz5zcpChqfUYCeHGCyF+d+d7AVzNTTypkpU2yKK8WIEirSa2P9ebYzY7PkCaA\nFq+yyEwBWOt8VECyXrOo8gI2Mw6JLXmW8cneuXdj08dYfYk/bQ9aG2yNjkYM\nnkQoKkcHbxUSmej9VE15D650SgizUoJvPPxl8ixagiLV45bY+eqDCsniMuq1\nRJ3zP0QMJKKbULmyypua8L9GOBwJMUQTunuy4j02E4mSYcPotz8KepJFuj2e\nGLDMsqhH+WCiP6oBfj8h2d/GkCMjXyUVoMnAwhisT4WlRliBNKnSa2VWwsqn\nZwl4Ow0SmIo9LrtmGy/oExMX9oPACDxJOT81wRoinXr6c6cQToOP9YH+AXwI\nDfgC\r\n=mLDl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBQ7x6MXHPWyEHjEkm1EcyJwBhFi/rapGZsJg3WmyteCAiEA2MVrw48HXssd+dIo7KzIdVTvaR2C0v/zAha5rJJdsNU="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.4_1567092992470_0.8810161894333066"},"_hasShrinkwrap":false},"0.0.5":{"name":"react-vue-like","version":"0.0.5","description":"react-vue-like","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-dev":"cross-env NODE_ENV=development webpack --progresss  --config build/webpack-dev.config.js","build-prod":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build":"npm run build-dev && npm run build-prod","build-esm":"babel src -d esm","prepublish":"npm run build-esm"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"mobx":"^4.13.0","mobx-react":"^6.1.3","prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"be6bd236c873653ea5f1e39ecf8697e2606fed36","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.5","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-9fLt3qCrSn10jdOY2HWs/9LLHSl9Fzxz6+tHX3u/wIxEHCqyZc86QIVehDDYMpdcXhrmWwiPSm3jxMCWbmFehg==","shasum":"29ca873bca4263b0888836fae62e2b148cd001fb","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.5.tgz","fileCount":35,"unpackedSize":217355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdaQRkCRA9TVsSAnZWagAAS/0P/17BzYCEi57ziE0kS7X8\nxH8W/fRBSl9nzdyT0n63Rr2fKA4twgEAsA0fo5pP9EqeHczxHfhGT2e6YoB8\nqOIoLW3SR6dAVx9d73yCaqevkp43WRSvWJvgBhTS4NKqADuIIjdiUXJfY0K2\nhA29c0oElucmIB7Zh63yGP8uUkPn5PtrkTQXZhpzMXkDlS+Q2HurTQ02FS2I\nLvTF0cpYsRtbFA/sP1QIoCt+q/qWOs7XHKewg+cbe5r52NzLDR3Kfb+Xx7KA\nYSLC4suI+HMihhdg+qOaJn/28WLXfQlhcMay9N0Lc+2IfJdKFVyLuOksOl1q\njSbe+7oVd6YM2pMz9jAd5BM332tFoNVhvGh8naHWwPsKMjDtno0fCeCixbJf\nhXdWkrROIaan4Q4T8LykIDKrA0rCjOhfiU4v8COPN/uBjZ6T6iMHxUFJPL4t\n5w8RxXj2rsssaA7AVnRTfoZaRITuxtqBONBFTLwy6S4wMHHe4JnWvd9gimji\nwecChOEIrXr8dGJcjkc055anKz2TIsQPxDOARQuyCx4/8fPT/OpCidTFJiV2\nV30LQtDkhSl5+vfF6Bof5/bf9i6yeyL7cChRoMgUNvxkmL/uK7M1TqZWsRql\ndPF5GZeNXjYKbzzc1W5FaUlACEG+qI7gGvbXLV+WVHSwpBQ9yI4HLEtXCRdZ\nkDEc\r\n=6oxS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqyiGswlACQ94KtPpi5mtJDVHCnjyGMsvd5yOqVxURzAIhAJmu08zUe2xk/EJp4YZKrzm7a6bnt1sCQO620JYE3Qia"}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.5_1567163492161_0.9316281287611949"},"_hasShrinkwrap":false},"0.0.6":{"name":"react-vue-like","version":"0.0.6","description":"react-vue-like","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-dev":"cross-env NODE_ENV=development webpack --progresss  --config build/webpack-dev.config.js","build-prod":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build":"npm run build-dev && npm run build-prod","build-esm":"babel src -d esm","prepublish":"npm run build-esm"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"mobx":"^4.13.0","mobx-react":"^6.1.3","prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"5c22d3f5cf23ac3a4368f7a195e4ba835f441789","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.6","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-Wj9G1O4G9FJb/zNGmXxzymZPdvc+uO/jQSgYeZe9G0KxkXrw++/bbvLmG+8IVQheNSBGg8kzVRBVuHibytpZxA==","shasum":"286f079c6ee0a9102405526e336241a745bd1c67","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.6.tgz","fileCount":35,"unpackedSize":225442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdaRqCCRA9TVsSAnZWagAAuS8P/im7e8bAouZeJFUVHNCr\n+giSEaq/OjvFyWHhm+8Ct+htNapTHe0dDuJa6dhDUASGIjlTaWzUxOHOj+ho\n2cFS+tvPlVnZ46QGSKd13IjcTgQ0/sK8T5agTIvcK6NLED7y0a4lkXHkC5bI\nJv+ud5FjWezNlWOjfMJyVeKq3CwvRe6vCHAWzO4BlDoUOqS2FzT9by5ER+3v\ngQJs/zp/lsjcn0J78KCaMvoqNHGbtZf7IzTr6fYJcdAwCopveb5P2AvkoJMC\n9T5QNOXzSqT33TbH7e8KMv4BuMxHC6XQaHiari+nyVszECUeSW5eTjJujgzl\nFSnImWxBaM5Yat9LABqps2YGmmEs+H9Yxy2DeJrLKEQDElz25jXwJGvsSxQQ\nIG50eaomLcUHGCwoI+X7LpEAkpe59Gf1zzK7CTN3DR3DXIJc5Ju0BRRvd0Ix\nbZxIxxIapo+WEipwum2YYFN+vLb07worvEzXZLynCx8G4xT1cqO6kuJNiSoL\n9knnXcRYR3yiUBCvVk6YH5jReT/XO8LVpt7Ai65KpSK8WYmcyE2QxOuvb/rp\nV2h+j75uti7M3VTltkzAqRmPJAKPi4ZFxyfnhEJQgk5lkE8rrTVqfTlKeL0E\n2/RZ4oQCnUaqezHs+A58lhvrIC3dELgW9hlqhnAU2fe1bOt1MrEgDOf2Sgtr\n2tmE\r\n=oij9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbIPcvBO5ysgQ1xh1+tNyI+aByFJGyQQfLqdxW5WEWiAIhAKvBUK8mRvunX24mWXCn5bpXPCVdPxslmFNCbvp0cyhK"}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.6_1567169154134_0.007993575918023632"},"_hasShrinkwrap":false},"0.0.7":{"name":"react-vue-like","version":"0.0.7","description":"react-vue-like","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo -d preset/demo-out","prepublish":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","babel-plugin-syntax-jsx":"^6.18.0","babylon":"^6.18.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","babylon":"^6.18.0","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"95f0b278458c76799803730c2a670c51e92a7e7f","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.7","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-Am8c83cmIPAXH8wQjP4YSN5bV+9FghYq1dltzNC/EEMGK42fHzOlaOUgxb3qlSddkJD9JhZaLeSSA/g+mEjGzQ==","shasum":"9b36e4ac1f8b6d43c46faea64e0eebff94006b0b","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.7.tgz","fileCount":39,"unpackedSize":250838,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJda5gGCRA9TVsSAnZWagAA8v8QAJqqgDrmNSfqFEszP2r1\nNZnZ3UHl7OxnLNPKMMSvai0VJI2hoG1YSDnshN7xi7eyyMljb3Gomr0O0HOH\nT0YHrn1FuYnWWltTXxd9J9RR8UfjDI+Wpn49b8FJzQxwOPqPH3qfkasDNibM\nvE42nfAvp3AbfysdwnLaa2Jph9/IOIs+ndSY3cTHLv+N1c68FxFHtCQjpioq\npBhqGOZ/qgNeE78DOzXWbC8MNFhY5s9Od+Bk8CheFqdfOuN4mlNdDPWQdy3v\n/7+FsVvy/6Wemp+f0pCxkKP7xM/VLA8UNHZsSmpYK7whXRIziD19Kq9Z0N9+\nE8u3uGvZcG/Ma3Grx2d+DShCv7J+u3jM5pvKKTRFbnIlUXCjvm4pLW0pwQUb\nG4uRlxTFDGqsUdZ/v3SfViQYd2bQ5VsMSEHCoeAwiXSaqrNqv0L9ckskJQTS\nTaCTIzsmJDxLJt57OSdLCNy1syyuXlISDVi1Z4IMqgsp0m+3W+aIB1uBt/EB\nlOnCAek7nNUgOgeAZPdduV3ejLxharehNw8snN6PycLbizwtJT1aJvQhtatr\nkiPPJc1Og+n770UPCtK4dqvjtCp/n3Wqsm5bK1/OTjykLWeymtL3OHEPcT4E\nqk6X7rCUVKlEw/MLczcpweI32VftVxgv6lt83nwYcwzSou/htdZfbuqbKrL1\ncXVW\r\n=vzM7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBcStaboymFs5DSosWOU4R7AuidCCcwgiNcTMzQVy8ELAiBRsFg6DiC7qzK63YNhPIdNunYirx+7NU3huPYli4+2Bg=="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.7_1567332358044_0.4402917263898303"},"_hasShrinkwrap":false},"0.0.8":{"name":"react-vue-like","version":"0.0.8","description":"write react componet like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepublish":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","babylon":"^6.18.0","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"5570be5fe90976b94d8bc15b6adb1eb91d92b9e1","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.8","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-cLcntHaYu97XmGKCRTELcbECTsW6tYGXlBzpwRq3riTV1W6Uz5lFetMhd9DaEzbLhdKIsQy1NCzHZBfupGypkg==","shasum":"43a2e8ef678147b3c25e6621e343e8088a827a6c","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.8.tgz","fileCount":42,"unpackedSize":264283,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdb2B7CRA9TVsSAnZWagAAR38P/0W6CRJiPzPrAnVLs9iA\nE83KD/2q4ur/QlK0PzP2kCJWZkljVUAZUpAWHI5KmwemhXvS384UETQlrQs+\nNRALjN1d6Rsq9Ot19FICdXmPuQ/Xpmv4IA7lm1KijaSpCT/ZZ/frW8Dslys6\nHITLY1ULU9v9WxoYJs6gRLh5uuXFpoN8AuqJ3APAWKKdJ3Mgd2IR/Hcw7f1P\nLaT5ZK8GFlLdXMnrhedRr4l6NzYpsZcE/Y6Q4keE5rWzfxIuKkjwzSwuDu/E\ncP60R7vKrK3YZzJQ7xxotywII7Crb8PWtHXVtJlFgLeK/RjAvx6s1mUxbNNg\n5lFK4oHpyLsxCgaVLrE/bt605q/BCyyCPEyiPsytkcncemJQ8ArQPW08LXL9\ngP1pQ9zHtBv9TSnrk5rKY8bf8gNoEGtLvabCQYJUj53nT8IXEN6EneDxFCcC\nkf9G0j57OLNeDFwUQpMr16dJWQ6+g/2qXyHYEZCsfQ0wiPkWxmcXI9KwX7oz\nkCLVsRPVCJ7Wukyqyddk1rNQ8EAdNtaWCTGy1V9yA5OsK6lOQ6TNut+mm1Hh\nvSSlcsMXDHwDvyJAoWKFZEaAeRtj3k+dv4BrR1QPxgxYA0PWx7dHvADtTYuL\n82BdZuhBcfWjbB4cCfISg05KpP9i1uqb7yMRtBZNDEDT9YEB4Hxaa5X9E9jT\nuisb\r\n=2Rkg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDEqhmFZybC+GPa8c21CVyuo/tztcyR4CSkWmf9KlbU9AiAQdcKCJxztzjFObtPngCEVJulhPfFlp9IvzdMXGB7rWg=="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.8_1567580282427_0.1313304093852583"},"_hasShrinkwrap":false},"0.0.9":{"name":"react-vue-like","version":"0.0.9","description":"write react componet like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepublish":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","babylon":"^6.18.0","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"3c451e9cbf286fa21996b85a14ae156e45b8c37c","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.9","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-e+tM6wAHgCehT7XsSqHD+rXPkQTZdvnBGk9pEWWnoO7dkWJX/tcbojd5pdVC6cKOmscqzIDtaxN4814iUm9DKg==","shasum":"07eff9dc4c574a222155c41e7285a0795a226a14","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.9.tgz","fileCount":43,"unpackedSize":271748,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcH9OCRA9TVsSAnZWagAAbukP/is+qErGMV/VoVPTTvtS\nABilWjzFlmNFQN2jshhNjvBWf90yye4NpO5T5q8Us7NrHASywFEr1+nTlwIh\nbmvAJuPAm6dy4RTxulZDMIFOoFOYrn31ZXEYH9zuciS95Opcgmx4rBYNzbRy\n9JnFYbEy9xfh0CmvivUVbuUuIcgDX6DgN1U0bRDcFGK4TayCG2Q7a/LbqsO0\n+DwdXCTuXihIiXsBOBIJ6660S4mRkDfUeK4PpqGb8vG9BxKUoiAn3ItMIekP\nvQQUR5XaGGyqjr4cyjjuPi5285PrWY56a4iplfQGSeeakiIKUmcXqwPJbd44\nPDjfciTAICBuWmarc5KjG0WtqjbcocpwDY9sl586oRojCguaSMjlMCNfCxm1\nroTL9KZ+TEmFYKI7T8U2ZoqYrbfFMalZWh7ISeHdDCdZs4ejzP73nhLaL8GC\nzoubIVEkSx5NhffxZEh3ImH11lNFoeqgDZLMDN6+MO6DWKGivqu7Czy1hsdX\nELXddj2NSavy73IYc1Hu/tS8PuG+BKtrLBAY1m3CDYcfXFz4XScEIrBtOfeq\nR6MVU+zRYQEd05lgINDreDIAVDWlMqbpoG0EcL10llx43ariutp6N413yFYu\nI/tlCDdhbAJb2uTccDHZwUtmCCQX6tqyFgFlPgIZB5Y7E1Hz47u4CwxulCCg\n3ze+\r\n=qqFm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDzpCISVJOcgAa8D2akfQmoUuNwucQvFgNBqCvHA1u/wgIhAJM/R3D/Gmd4SFFBqR61f9jyhbQlaSrXxxNQ81JZa8Nc"}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.9_1567653709856_0.07888706496370457"},"_hasShrinkwrap":false},"0.0.10":{"name":"react-vue-like","version":"0.0.10","description":"write react componet like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","babylon":"^6.18.0","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"b3f76c1c8d426f19216ed7f1f94969f10c65f5ff","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.10","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-phKpD3KGZXyJBhf674CuywRkh7cFH6KVb2Sq3vvN3kYJaLe/XZdpnfYlIcz8Tmvu6+Hdm0Y5emZaku85S/l2tg==","shasum":"eaaeb37b419ac0c601eadbb680486a1ec213ffed","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.10.tgz","fileCount":47,"unpackedSize":274692,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcJ+LCRA9TVsSAnZWagAARs0QAJ3+Bv6SopcwCk/s64rR\noCSUwTMZK4OO5RVgJQ4ACv8Bjc8X0q3ietW1QdSpjErUDpok+fWPV+cRpVGZ\nafw1yjmkHhHTnbVMDxTRldIwKBdVxrrmxM3M0o0RFh17hPNt94moLEnRfB1f\nM+Szib/CwFTW0q+xCDvpz8ZsiR6wLqFziO39dof4PyyyCsNqQNvl9oO/M79d\n2g/jDSRMEbm4AW50FPpBBRnOHrTKycQR/u9qyXW8kCYiGkZ+qU+SoedGhmFf\nLHmfiXud4BBmaOk382NkTtorMKfTtwY0CU8aAWdfxN85LT+aMeMDUMzTuH1K\nULAXVrJbo0xSn5suoxdfmWczKol6VgoRg+cWcLbJra9TbwKPiKUh4ov1JEZo\nKEdE+s0W5dB+wobW4Ob6ITfcT5TpXofOldAhxrYv63PF5od1TvYjMKWdFYGY\nrJ3mKg+Xq0OXvyrPWDENWknW++fVRNJSzzV1MT5QlgEE1h0iADrCQzskwa7F\nA8Edbz7k+5AsqEIF82oKZbN7wcw5SbTC2tWCx4o2w2ccVq53qT0dNYUBO0in\n1yDM3qnfgYPEEfB8KpmzVTGc8/csjeLZX1OxaAUNB+2XYx6Sh3s4URk9BNEL\nCagZSSv/lhjFK0LZZQ8MwhrCVCe2v7X0BeZRO7zwbzZeuXFbi/XxBf62L+7l\nj/R0\r\n=1OAZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAl1mGwcy+FtZH6rP0Ss8RIWImySOlRfxVBE9gwEfIDpAiEAw+Upw4wKXiXzNKGCnNijGh8ydOfrLHuHN6I/T2ymd24="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.10_1567661962809_0.14917453050050122"},"_hasShrinkwrap":false},"0.0.11":{"name":"react-vue-like","version":"0.0.11","description":"write react componet like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","qs":"^6.8.0","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","babylon":"^6.18.0","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"b3f76c1c8d426f19216ed7f1f94969f10c65f5ff","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.11","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-tuTg9XtVGmB0v4KYsBofv6hRaV1Sp3GnH8KXi1EL3qkVkZJjR4ERilcPjVAY3JTQf5xSLAb8MSAQ+oEA5MzcRg==","shasum":"4a1dacda144772abb95149e09fdc7cc55b01517d","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.11.tgz","fileCount":47,"unpackedSize":274712,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcKKzCRA9TVsSAnZWagAAVXEQAIhU5cXIiScLh09TgYoZ\nw40MLuXgWMdJwrucStYDUv/WSheliCiW1G20/CbCG/dYV+3upHOibohB9SdW\n3dTafQU6Q7WrP4vVARr0xdIyuSno67Nwn9SnLhrgRSslxSP6uOi/8j5R4rf2\nON5AMUC1E9rmkpku0auGJI4Lq7Rrx36+u1rgaBlBz+bUUsRVydB8IU0TFToc\nrjE0rZY4H5ju+2OdFDHDteTg9Yibc20RIvOq5FrkhiRs7IM8jLTWX/+8UZ+F\nJITRBdCQO3MtGj9Pnv6lsKWA4GoirCB4FE3hORxupsHLdCcrKuedozzKCCzN\nfV3blUjfSTEuG35qXk7BlAen1TOJssiWgwwo/KElbqjBZbFBQlUo+cVodz3g\ntEPwftlSuBWP7QNcadUQ01F5/TtNAxWfgcjziHhTkw4UJKLh9gnoGgLDlcWL\n/vH661vy/3et/29HIzltzwMIb87F6ylMUePLyP4g5fC9VCoMfY7zSCCmdkJs\nqkamTPUhr7uSZA2CfIB066MgInRzztctkWBpaLhL5c27CO36Rcd55XSOqlNV\n+G/Bw4T5IzOiZwOjSG8zqwZ35TJ/pxMmyfc+5J0PtEwX5c0P+NukE8fNFlsw\noqGdJXwNj6drLWmhbhmPzD2HdVpImeTxIC9kPvxSlM+5Qp6r/eTCuHQneehR\naSqf\r\n=IzjM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcOKC0gmbCrELLD97ToZXCkz0LY0p5W8DOLZIMuE8OwQIhAJkKU1loXTZzt+8MHOAk7577kH1lO50zTIgHGZQdnQtt"}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.11_1567662770560_0.7051521175124014"},"_hasShrinkwrap":false},"0.0.12":{"name":"react-vue-like","version":"0.0.12","description":"write react componet like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","qs":"^6.8.0","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","babylon":"^6.18.0","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"87d866a3c293dd73bfcb2bca171b4d422df66db6","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.12","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-tLr2c4LNU4uy2Fo6WB5g4IVPpxiLEHi4RszHWvBjLeJTnYB/e3yaXV63oGq18fIcSYzw+Kp8V15793UvplJFXg==","shasum":"cf44c0c13dac0ca2262f6e4c82fa9ee880db4651","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.12.tgz","fileCount":47,"unpackedSize":274791,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcLuoCRA9TVsSAnZWagAAg9QP/iDKE1YnY2SW90qqK5MN\nUUVJ+lDnxA/AcNIbcwL9mfP46phcAc62Y5RlxxE83CKfYtCqzCq0FTgFzTCY\nHrMQlSwYJk88OX9ShXQqF8GcTdCRHPqp5IpSa4jNaydJZVWajljMgr5zQP0Q\ni7vw3qrF44BFMlA2x51xn99Xj5V2Sz1SwafmQp4GXl50ccvRyxz0jQL44QA1\nsiRnLC4KS3bpJpzgu3Lx5uGuIJkUAmxjInK5SJa1MfBvt/DO8Ge5b/Hzbdjn\nsyzj0JMUFTYHHCMEera/mtE4rnAywhaXwA5JLliaJjo0Mn+63JBLJXFxNhqt\nVEXEQqN4w949wNlEKA4A7+12T/K5vd1nNDv2YCyhq1A45VVynAG6XeKh3xX5\nJrkxAw6jWrlczS7Oet3kCaETESLCBzWvvRJa3jRKd1RXOi1mctz9ykd876Dn\ns0FQx+cgQ1Ujdh26iLsuVf2VQdShZR8XTp68N32vQqVarBtH3cc8ay+eLlC1\nzBed/7tG2m3GyBkpxwWmvvth9+9njHHLRr661p2MZjKJRbvqD5KabcHtV7J+\nheluDgDQNGDDNhHCxzKZuXFyNh4Lw+9GGaJ2y4rIznm9iw4qoMMy5tPcXaGA\n+zWwgySOjwEpL6LDsxqIZS9bW/PF47nvCnsYSNjcWn68A6OY8jCUlCZsUAsS\nkOSd\r\n=efNK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLdndM4opky0YMqEXtn/ntaS+IoxFPv9g3KU80wpkPcAIhANwqur732HtHt7Xxw1A4zOowcqVQJntySIYw7HOVUUpD"}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.12_1567669160415_0.17501828090851368"},"_hasShrinkwrap":false},"0.0.13":{"name":"react-vue-like","version":"0.0.13","description":"write react componet like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","qs":"^6.8.0","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","babylon":"^6.18.0","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"91a40626bfc79e3a3f124557a651b6c818db7c19","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.13","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-KU6lRqgpYJdoAK7Z/SWdRR0YuNVuEOWmGGRhjVU63iphkbXmwOwB86bd0N4lAdovv4M8ueKyLWgdTZDdKufTYA==","shasum":"a7fc418812a157b581f136a510147b83186d191b","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.13.tgz","fileCount":55,"unpackedSize":295916,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddLYUCRA9TVsSAnZWagAAyqAP/j0bIDF1S8+5Q6FT2TLr\nzGM1somicYLMYHa/tdUWdMTAqUcyebP2UR5zJVTdti+SLS61a/GqnxUr4+kZ\n7TWH42anc5arrsQUSouakqHgaK7TsPOzsaALJgdi23ZrIi3+i1PKe5BC4fdh\npF0udZoKhwzWILb4yvOIgZRmiLq9yLRs/KcUwSIopK+2hPAo7vzrXSIdh4Sx\nOyIAQJIYrTYdNetPXZaC0keWzNAPB3trrnXck5ETQmTkOaumRPN0yjk2CV1/\n/lT61lrPxnYEcI8nteSO6Zdemm0XZKBcnoI4rQieMTyj1X/HiUNG2hyyGQcT\nD/KaG0xVhYUS7aE2Cp9YtzdfRUDo0eL0+o9eNAYBHC9WWsWz35HPYAnvpZsL\nXi8dWaG/OKR+IgngzqGirSEOgRE+1gqifrTy6EfzNR0QItJjMUvKWV1fuNPB\nirtzM2sBV7TWfaD3RoQd9FDIgO7WuEiWOumvBQxI4zlTDQw7TiYUe1QctZwo\nmEihDPyvEo4qV39OzOFTGfdEyY4p7qrcdRJP4gqhZpuH/tgTnFsgF1VMJSyi\nCJfB71h1HzF5743NTST5J0XeALz8XQgkblrxxkI4rM0IFO8M6FtGrpES4eS5\ngRYksZtJ2xu8XNvrL+Z5N4m64OjLWfdnpfhh3rHKluF/n9B4qyp2p21Ihmc3\nmhGt\r\n=UpbC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDO64i7rTXPbxSF5JzLoPEXJ0rymy6oYu77Cua9Rd9JUgIhAJ/t0KWH4JLSsBvZlFxsUvXF+kTsF0RznuFslxL6nCxc"}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.13_1567929875937_0.7913253700192924"},"_hasShrinkwrap":false},"0.0.14":{"name":"react-vue-like","version":"0.0.14","description":"write react componet like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","qs":"^6.8.0","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","babylon":"^6.18.0","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"2647370df5f37c44b2e439a9a4cc43de30c54469","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.14","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-ktiRX7laL7sSiOg7dzj1Ee/UQi+/+Hx3udOh1omeJSFNtaokSDN/lz1GU5asEAXJnb/ZxZZe0/vUj70dv/RzNw==","shasum":"40822ca78324215b825e00878add376fee43d429","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.14.tgz","fileCount":58,"unpackedSize":304255,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddaP7CRA9TVsSAnZWagAAfM8P/33e/1Qwc1k1ADWrivaR\n8pujjUaIZWdcFOyM+UsPVCAFQ4eYAGt38XmRycd8bhUJ9jNXbDCSPHaI6f3W\nWfUmJeRjep63VsEXPXHwuk/9/o+Ue5wCKelYKyUJksWD27BZ+RGOYIpbAPkb\ne/EgPxiNFTRBbA8+LBXUlDKveYijhLUwWVCzWXriZfBkl5hTlxJRpcO688Kd\ngGsao+gmcDcFpRgWjCRV4gq4/9MrzaxNeox8YfOQJ3BFDPiE9gMdOEf+Ftxo\n8RKkWhUQQH91Whh/lHyHg76Mlu2oJ31+gX+siezsLChKy+8kLBwaGA2/X/wv\nbYO9hjjdL4rZcbGYXrnxg5shdmrYsoyIZUhXEMtK6Y+J0xRdkGwpgVrfHA2b\nfDYJU1EfY+G67VHRrlhKjvIILIkAc6bHKoWobAMpL1jbKq5jARayz4qG0ZwG\n6WZ7ZljmfKrLFFk9S9RN1AAEUlaiAuO7IaZmiSq+1U4akGwa/OExgli5D8qc\n2Ok2FXTqCMov81dogpa7Vmnt72b39DK5NExfl+xJlRIYuJOaUQSrJtuLI46N\niy8+1tuQJG0v4SIplbGB8D+lcihRcAQN+Ci0M8ZHWWj+UapvCwvJVWI7Tcap\nfet/cnQCaT4j+Osf+rcokMv4d3XrMKZhseugmwr1w0rrP9zE1bvQ14JS9aKn\n7gnn\r\n=fIMm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFHwe0k68RqZ1O615WGp5M7lZ66+hfBIgbn3x/LdcTn2AiEA72HGS+ENqf/mRROGLzIpdDtm1WImNhnEwWAuFNiUbYw="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.14_1567990778520_0.5523255256716371"},"_hasShrinkwrap":false},"0.0.15":{"name":"react-vue-like","version":"0.0.15","description":"write react componet like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","qs":"^6.8.0","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","babylon":"^6.18.0","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"d0ac8b472b98b01eb9463df37e17d54445073984","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.15","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-iulBAcaL6+sC+9mDlnLj/QXBcW1dNTkq4ZIxg+WHDALB0AFkFqLAdOexonaqTgdeu+YzOwYGyX4hj1cjiDD4wA==","shasum":"648d228739a27c4da95d274c4f0ccde36be16708","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.15.tgz","fileCount":58,"unpackedSize":305156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddgRWCRA9TVsSAnZWagAADcUP/jtUzPthEZ0h4RCo8Drn\nOgJZLHkaMDNRiJZ4Eua+QRGpr3WSconwY8uz2rJOs/fD74EBJkTPLUCJGfkT\nTSta5gTomnf5f0a8HQ3+185NQj9/7R+siNmnA0A7wAuhd/dHNqT7bd2kbFsm\nheRbRZM9nZW6U2wTr+gABKaZ5FUB473medx1hZFP1S+xcwtqOvwsW03XZgOi\nMggTnofSj7pDguvvG9B1XN7qF9jeEYO9tHst1D+O1YO6t3sBjwkh2jROvLxj\nPb8qg6DqYjI9+PnSHD6khmFEql0GJhOK75T9bE3qdSPhjbmzcFT4XmPG1GZC\nqt6hVVi7nhdoJH27L9RSFJqrTPhEUhPQpaprKHhYTMJ2/WeTTcwrJWA2nBB5\npzekzRPgFHMyRx62qxtUcenzBLsdc9TkGJQK2FQ8kjgyZIyOCPaLiQ3PiYco\nisq0w3uh33oGQ/xVXa9ZuXCUKgOmIdbqxpt0fMi2Um2cMbVuZ4rM8cvUDeB8\n511hO/7vM9tnckdBWu8ZEtcb/eRVVUYiKsnItSx+0HK9rzUaHAvzLv4wF9dg\nBpPvQHTUBb6fCgEf31C8f5yhHVO+1PsZBrIsn3gGOZ41+gLdxueiln/5BOxa\nqEPmsKQ7Mun4R6KsMYh2iTn8NoT4cGYoSIraU0z7UOc5xA/3Zz55XBAvjQzN\nrNEd\r\n=RQDg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDG8sq+6dOM83DP7rdqxNodCtPWn/nDBQqFoxr8fnKjfAiEAhu3JAw+Ob/0tOTGrTT3JRDQxSjmGxvTxfKKbk0ANXkw="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.15_1568015445928_0.5181005715962248"},"_hasShrinkwrap":false},"0.0.16":{"name":"react-vue-like","version":"0.0.16","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","qs":"^6.8.0","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","babylon":"^6.18.0","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"5686e8cf8248e0d5ea5f78d540a0e62e09424096","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.16","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-7mjH3L3OJn065dTfYlcNRhVLa+/iaogAoZHpmWsIeRXAc2YCpe4l+pGjk+YcQPAYSx4dA+rCJQpHWQrAAy1PQg==","shasum":"b399ce95f148d613fbd7a165708263eafb145e0b","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.16.tgz","fileCount":58,"unpackedSize":306001,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdd4NoCRA9TVsSAnZWagAABcYP/iIltl7fht7q26oEx50X\naS2AR7aVXJ7Irgk6xwgfrueJ45dr2c8QFnMeAdYFs5heCKdU+oKTK3NUZ49X\n1/Y5h02VnHoQUIRWK+lt+xkIvloXgKChfGa89vdjhb4gzzsqwn5vvH7WXTqr\n+fhy+dxYwKgsp7tRw/09LQiyjgioo+GIbfHIZpSvaAS3RTjW2pYZeYK31GBU\n133XIxSj48qARqzsYwE3OHsDs+0phmBNuu115nuja9yJmUUtew1HeMOeksTo\nvM0t+783EMHmlpLYYFyPtHIlDh3VhrpSJOfgHPIdFmmeFHZul0VCd1/oXvTK\nlQa8V/BQdji+7JfnC8vXoJSCM7QGYzN20N5BsjknGgj5gZbs+cvhWJiakxcr\nuSb31lxN5o/1BvKIKa0PrJFUFvQbEQ4+MSgfmjcEh6Vzay6o17KI3AKGaznY\nB/Jt/LylpTagDjCJKDQuEp6+qkkPRSr3EB2dAd1pdxpvhsjPTY56Kg3/WunT\n5tk07x9QGS7xgyJNIMCpemdLwz4zdIVLLTQCtMMnKP+cQ7Oo8z0Bb9dfY5Mb\nAJW8auoPKNUmlA6+UR47wsUJ/6LZtA9GwX/3HZiLGrqatIbl0QtywDaeN+i1\nWGc7cogxwo8fPyMzhkudzsehc3U4BlabwVS1d/MNK8H+h/uUtw4dHiR8UMZl\nuA/u\r\n=aBoD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC41i05DdZcIT+F5P6HyjcJjI3Fs/uTBfmT3ZEZemej9gIhAKg3LmVN72AkZg2PraJd+GCFdysW2eA6BRVPIdSu1txf"}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.16_1568113511704_0.46491807153954"},"_hasShrinkwrap":false},"0.0.17":{"name":"react-vue-like","version":"0.0.17","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","qs":"^6.8.0","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","babylon":"^6.18.0","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"7615c1b08cd75580038e5b157539d98e73dbe311","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.17","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-jrNO3NscjB5XcaTGJXdxsXCbknqBN6+Udl8UUnMHdYH03sv/HxC5xk7hiR5OG4kYPZH/umcXT6Sml3k+2JIthw==","shasum":"20435b143883dcf85a21a1fd531610bcf78f5729","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.17.tgz","fileCount":58,"unpackedSize":308554,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdeOPJCRA9TVsSAnZWagAAJGwQAIdXJimMA2ajEgkLxmQ8\nJ7W0ABkUWarYwpBvMWBfapq9xyA/U0nheKH8rYvUVL1IjniRfbu1VZGzSDk2\nidq//wSo4x1CULIvL2VBi3E5kX1CBP7Xo3iRw0GdeRWvIdxhAOdnGRyL+YIi\nfrTGC/AR340NxPRAANm4bw2SxAEh5DTnfoEeBvKQ7u2boMZbhOfbvdgb/ZWT\nmKYbQLkxIDxDDMvskzLWoJMZJfQ+9RMvzJjwNYo27e4sqAn9Rci1kOUlZjEb\nYZ07hr73QtPEZu3+e5YZQf0kJmvw0zH2Z2iREO9IwmxUBqsiQ5IgK3YPT0Fh\nAocyw+2DE9Nya7FcYQkSMUVXWByq/FAM/SrPDep+TFXpalBu4L0ufP7DutMr\n37w+/giGVTJgmj58rLspUs5+wY9c6LzsrbyvqwyS35EO30xNuFVUrz4+L6SJ\nMBaHKq02AHuWKvSPAq7xgt9bFurqloSPAzGzIVz0YZkPJaR2IZoNuwuyTc0Q\nBOECpA0qiKf93f3PMQNrLFosFMM2B+ixIQIjkydPDh1G4aP51BMoxpZ0GV1w\nqbaX60jNJWFgrPqNK40QqEyl6ar0kIuTFgLt8eMoBFh0EncmSBnSkCb4BF43\ndlgXqFcNC9rHOS0xE6pK3KSdLnj1uW9FhLZyQAMSGPTFCph78FXr6am2kww4\nOgJb\r\n=Zlrr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpgWmiC24C7s8aT0OcTiZuVjV9QTjtxRxyJCdt3no+owIgZh8xPp8I76SZ/dzsjUpm2hGEo/0LJaH09TmE3Vgahfo="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.17_1568203720564_0.26786502937074474"},"_hasShrinkwrap":false},"0.0.18":{"name":"react-vue-like","version":"0.0.18","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","qs":"^6.8.0","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","babylon":"^6.18.0","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"7615c1b08cd75580038e5b157539d98e73dbe311","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.18","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-pYMG8HkyRgbSElXXkEC/o9hSXnkfbLgIBPXjPCitmkAHcxMRf7nvFsckKiZ+Cv1cVv2wl72K1AqMm2J8v5PRdw==","shasum":"f58056ad3bcb1e8922db3b26506422dfcc66c13e","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.18.tgz","fileCount":58,"unpackedSize":308556,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdehv1CRA9TVsSAnZWagAAmGYQAJdkG4V9bhjiKnQaGtAD\nn9sbAYOWfvpZDzjS2Ikm+iQhJgnv+Ap9Ad0X0l9pDXJTgXimXHYfD01p3bM8\nVl4LmUY5iYorSBk0P8CXIz/0ydfvT4duEfbgIEjsUbAkhJkzk6EbWC5pFE3E\ngcT4GguYinD/Em4bsTQE3yti1Wn5wAaJtD6z4ZbTAQR/h8eP9YQB3ySB9ogY\nl8X4k8TBHNbO7Tg05l/WE/sdnvzkUgxC9bXoHiaOJ0umZVzRsWCkFJ9Rxdya\nZmfEvAuOdiUmkQvJv270oGBYn6IXdLltoWAcr+w2H4lllC3fRIQ6aQso0Tby\ntQlRziXZXvHQGhS3FnURJzglVXkL89UZx0AMRr0+2hfYnaPHjpGitPpo+8r9\nRvbTZ5kxxxy3upriDn4es4xHWtSShBfDtf2PI9/MdwkHVRfsT+0xGPWtfHig\n7rv1FziCwiOUNPv4LJ9p+L1cDAYZ5RIB9Wzqp1w+Ah2/wJTk6N+ZlfHlJ1+t\nLmkZYtw7N0KhgzSpBIyALO0QFivWmNwFboQU+R2BSAKipLx40FEWPRl9xrL6\nTEEbdcSgtcINeRx3rH1wj1a9IfHskfKIwm2GlCDGmauvwfrkF9jOkTcyoBkh\ny/GKM/vBqORU5h6o7lQwzFiUCdJqwOTgQsGO1wNzK+ChuyF9OR3XhWqtHTic\nApvi\r\n=J9Xq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGMmu6hFbh09P1I8gLkO+RBs4yks2IusycDetknohHwvAiAtqJi2U8zrq8BlUyuKPHnuwRGDg+Zvdg+vlFjrCdJ39A=="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.18_1568283637173_0.7413377023841756"},"_hasShrinkwrap":false},"0.0.19":{"name":"react-vue-like","version":"0.0.19","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","qs":"^6.8.0","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","babylon":"^6.18.0","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"162eebcad7edd86d349f526f68424b9f088a57a4","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.19","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-Udgl8/bSu8tnMq6dlFO799yDLTo6W/pvKxmNb+0zpc7jP1quyIWgUMJmTH8HUGveqG0nEmJtUHkOLFKsXddrZA==","shasum":"9bc0144d0a6758aa8edad6ebfdf1531a76f76b0c","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.19.tgz","fileCount":72,"unpackedSize":362472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdfgKHCRA9TVsSAnZWagAAaXgP/Rs1tJ8+jo/iXQGZluc5\n9JTJIeMyNmXWbILpyzXkd4WQx4SQ+mI0yv8A7+uAJjIe7izqCymwI9o1yiVH\nt3xZHhnjNPTk0cq5cbTTmuDo8eHZ7TI0w06ZRgMnAQcWc4Bt6QPHSXyCc29x\nRTCHi9c2Y1BB0l8aW4+zOkKGCUmFwogOB6ltnvVBCmSR8gcfQL2e5aai2Emi\nVJnSh1jpjpP/DK+keL0+j2vWwCBIrp4fNySsaOrjl5IfC/8WP8CDEmLVZtGx\nQTZsgKSK0WPIEblsRBXhTUyIerT7UR2qTRSH+/ynXVPf9qew06i45fLTwDL+\nXtHQm90BURbedIhmDzEwi2NB0wJ34n3y0xW7q/5J5//nlVv0Ix8W3lnPO7/j\nGjQDX7paG3kNVRGFAmxoQmLGuCGbXBG2pdTcxGe5us9lo4IIX9M/qDSYJcnh\nGS8WN+uFcoRnfupzWhyvpSwc7cJ2sDm9q+/4yGicD4jhYs/ijmKP37h7lG5o\nRrdnIQT6nEkMIb8wEw+aUUsiZQ07RPSWc0OMAVMLbfnBi4WQN6vA8dVG5uZ1\nsszMQjjF+Vz+Km/Ux2Y7uwzFf4tZJ+5TjwU5LTG2hsVL6GmmKmcxqnuI1OZL\n8c6xBz5vhG0O/GueC/sSXlTYwCQ3oiuwsMqmE3uTJMqk9BHJB9L6AiGSo65o\nvR77\r\n=JVrl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgBEoVIH28SHqu+LzNxuf678+7dDOdrEtr+yCsEU2HyQIhANsKDAmuRPFAqFhVroqSBbz4lZwEROtvPrQH/uwWfkv6"}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.19_1568539270657_0.00042176764140666734"},"_hasShrinkwrap":false},"0.0.20":{"name":"react-vue-like","version":"0.0.20","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","qs":"^6.8.0","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","babylon":"^6.18.0","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"28ba9ab830cf60addb2cdd1e1377d346fdc7e52c","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.20","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-EtSeJk7f14V/xmdQ9xkVMmdbQS5JqAP9BdZcGrsYKlnsoUaOPi2O+9zryXd/X8vFWiRdbNqXXdmrZLvLhGwxfw==","shasum":"be0801a520f0038ba8da53f1dd8237d18b247d0b","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.20.tgz","fileCount":72,"unpackedSize":362472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdfgUzCRA9TVsSAnZWagAArhkP/3ZJ1l56eA6TPb6PTkhI\n2IqYY21oFZJ1MhAkgZjI4Ts7pVzS7KXM4gx87lNUi5x6tcQt4MLybI/bjN5d\ng964o/diCY2piLz0pJcpf1mFh9SFMhWOk8R53xO4dIB57a5vyiwlBNz7HbdI\noqa1iZAu21Mw+wmyEZ5uxzSWDS1ICYJ2EiegrzafJUGESzMv5Qrk3yaVeuCm\nZ2Hib3UJnZ4BwNQbaUKESLj3i5NbI30e6gP8aZ3UAoNmb0Hx+mWpkJWF4g9S\nJAOK0jXr1O2I9ADIwNRWzAL5EdvALgNTJD++fMtm6vZ908/4xUgpjJ57bal8\nGwA+EKGjj5WyOyb6yy4j2qTZJEYq5m+GAGzN2xrP8Smi78bjFSEnsW+lJvfk\nWHT6YTeOC1l+qCGGj+75Jo9MU9lbilRLyIEFwS1fMMDqvCv0OysHkcy94o+8\nvGPKNuWZTKPwfqV8n/yqao5EPqTxwwgvrWMJmcg0OFkhPjm5jrtI34sw8Hin\nHf7wE9GhxYP9e9KCKLGhantfnlDsD2yj+s01JtaxADgoa5czwPhta+ebu90u\ntOmfAJ9IPFa+3mrbiJaQTgAiu2B5vDYl7Wx2Nn9CdP3lYxwXuHcLzRIgYiNv\nCKJnkScodZrXyPmrlKS7VC4SYynZlHxfmUDgozaBV7DXQuNwsXmPqBoaRPli\nzByB\r\n=Rxk9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCjeNH0yJfIzVIhDlBVQiFsqdQwXpDEz7aLAPvk2Ry+wAIgUHRrgf0t2L6oTqree52+KrRn/0aPELzbP37fXA03/oQ="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.20_1568539954282_0.445512755522548"},"_hasShrinkwrap":false},"0.0.21":{"name":"react-vue-like","version":"0.0.21","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","qs":"^6.8.0","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","babylon":"^6.18.0","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"28ba9ab830cf60addb2cdd1e1377d346fdc7e52c","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.21","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-luB2c2ItejyhS6pxkXx4jXFMZV2tGcewzXRCAVdLpEjQlKAc3lAYr4uTaxS5ZQSSgeIdiLv3E0b2UMtJ5BJJow==","shasum":"e47aceb9db4e7c2f6be6094f02ed75c8c474343a","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.21.tgz","fileCount":72,"unpackedSize":362472,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdfgl8CRA9TVsSAnZWagAAr7cP/1U0lY0W1nAwHnZaXs9b\nGAr/MKONJYWUR8Apx/Cra5kmqcyFyZcE56qsbKJRyFkgWXiiTFy/qlknPQMA\nV85MGGBYZ9+Qo3w1xpM7g5R5FNvpGpDx/+7yqmMs/jrqJ6Y3iLItSVtNXwuU\nIcO6EeLxKnJOzX+DvFhyzDY8FzgBTSLCbw5aP/gVkRU6+4Hf8kNP0IIAK6Wd\nhsgKHLtPFjERkH8jNhDpFfkHW2C5I47yPR+GEPjqZb1gsx7eMXEZg67hr8mE\nkGtWuQYX29UOhnqQ8Xx2tZ0Y+YQvLsrzB85G8W8amMZPbJjiY+5kVpnzZEXe\nLeY/jpl8E0j5+Pqyy+6KzJsXSQUdmSIXUiri0jTt/cmOYOGKFpJXv2kS4Eb7\nvdgzejzVZcmdENVdQ2yY/TVVbRGFIWAA/9N4QDStYjQtP+30VLDaYExx5JFi\nQFrAq1SlcR/tBXRtd8s6WwfR1hrCOecGXEjfl56Zd5bpL02IensAKLbv04dN\ne4pZ8k44N2YhqRE+EvPGGWELa0Pz3BBp6c6LNSQwrxIna8Hn0qKMBF523C8p\nThMtb3qWSfDXIyh9wku1eGMNGCMPo6MWk9xxlmh1v0iJGhRoaL9Q+Bqqmi/8\nfuFphR/jW3/CKWcF86QEmFX7q+X0SE/xyz4iPu3KYyJmNia/EYKvt2Mv4jwF\n+97R\r\n=JnkR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqrxvIMG8utPscM3tUNslsoz6fYIFrCTSGxgj66s0Z3AIgfdZ4emgg7+VvRS78ARl0AJWVkYSJ3szkwzEkylnQE+s="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.21_1568541051359_0.4770919041394144"},"_hasShrinkwrap":false},"0.0.22":{"name":"react-vue-like","version":"0.0.22","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","qs":"^6.8.0","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","babylon":"^6.18.0","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"33448668c75e5d7e9dd6572c5ecabf82fb8423c3","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.22","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-RmDylQsWT7XDzC3S0HFvXjG0jogiQ+MdNlNPrj9KCOBgYnEXGlADS0x81eJwTHs7wXEimDEMMizm3Vn1SHY7UA==","shasum":"14dd2f93ef3b376f6221570de1c5f616bdfdf06a","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.22.tgz","fileCount":74,"unpackedSize":367438,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdf1+lCRA9TVsSAnZWagAAxeMP/A+PgvI11aCstRCmkRoY\n5rZ25aenZHBOqOd910rWoIO2A1s5Y9KYImI52s2xGkLKWaXHZG719D3qppEq\nMxZD4QMSa504TFBu4aHiU8R4l51QEJOaRbM9VO5KvUkvG12H6pLHNG+OCPu1\nN7qAZk0DpyQqqTLQdpht3cNlx6P8CaDPxe7TA+D8NLivohUPthU2ldEUPSHn\nouJxICwb14/o3RxIhyf/2sLX82WOUxB4nIKTtPvGuhyXJiojS0HBkM2us+C7\nBBm3wsFYgx1snKVTg82kXBXTbvMrAUvMJrLEvrBkcDw71FGKlgRNhuTuro/W\nGg1m2CHTesG6g1hJSqrWPo4OuS07IkqMrFoowuDcmNq63TDC4ESHTXdXxeCA\nrhF6XBjMnJr0MLTtyg0WUpdLnSFGeas+StV9/0ECJwfGoSylQtaHcNF5siLI\nDNStj5kvBRdyMUbB4jU0kCaUzjg+BSYXGpT2UmL4yrKm3hXEFTXrev2eAwYb\nE4CQ1VVjyU+qfl87QlQftvRli9pkSYDmRbcc1jIfnBrrCGNAUssUqmMi7Gxp\nYcbsDzNCmDV6cD8vZ9DeM+tZZsGOrGU7ejM8QTAR9Kpu2Kt64ecqMabuR7Gg\nvveLcDpR9I3JN04hNDguDycN7937u85VxtFYwzs0cVVpIwU7orpkYZptMaoU\nieeR\r\n=o8xB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDFTp3qoeZTkEaGposrTT/w6jOHnpK7j6b+q0Yl0AwdLQIhAJGJasUvbOzXmb097ZeZ1Dfmk71vv/mvEv3eJDzYd3Db"}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.22_1568628644768_0.9515703458736124"},"_hasShrinkwrap":false},"0.0.23":{"name":"react-vue-like","version":"0.0.23","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","qs":"^6.8.0","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","babylon":"^6.18.0","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"33448668c75e5d7e9dd6572c5ecabf82fb8423c3","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.23","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-MlyypdMeu//G036WB4jviEXf83fD3nhOWK9WuCDOkgCsuFXmv94EaPOUya9rofif+BB5nPQVuKQK9DQgqZ5RdA==","shasum":"d3084213dde929f9af6e911a6d317baa2ed8c98a","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.23.tgz","fileCount":74,"unpackedSize":367444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdf4BXCRA9TVsSAnZWagAA+HAP/3bxL+xO5aRXznYQ4HGP\nrfsRBVzEkxq2Grkdf//RdiU7igRPhWwhcYFRedBoRp9PXAGFmj42nhs7LE3E\n7RurEuK/vE4kjpvoEaYVy7pbD/yQEy34YnklrJffgjm16fdrSUFP4XgS+XyE\nvvB/ax4ikjwCxo47Dv3bR/LQ+kFyeebm8oy8buXkjDmozHEjBCYl98CkaIuG\nCnPMjNzKSYlmPl/rjJBqngOYLNTS+vSMa3DMl7bpHptcOrcae8f1JuN6tXVy\nrjkE5LZat2iFPq+vIqxXawkASLh4MPBnqnG9r9OqeQCWGpSzg2kDhtgLovKB\nirRFnndMmt/L1yh97nO1vgytF0/ohegIvSwxBNG4H4GHZMeApQP1Ke5yczR6\nSmU1m1VTLJyYMsYdSm/NfMxD0sTTyGoz0sdHicHduVeUVXyQCujWGXgr19yb\n6kNoIGV+0vw8K1lwH62qkdVTvac5JtKMLIMvl1slT0UUN8FSOEBpoBv5qZCF\nO5on+9bYNuk+oBsZsnOB5IcSGr4wQHBgn6U9xFwLsfmUmYV4a5mZK3+CHHtq\nmntAmT42P9Ik5j8wRwwm0/wn+brwxRUeXOBFASOT8U4NdCGHZCJC1mGmNoEJ\n23xv2q7gnwRLCsP+bgAxETxVHenAnQ2EjbPps0JPGfpEv9k4NC6FcpT0MhWb\n2/fU\r\n=jQS7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIECf3Z24RQy/gAwmLkKW9g/M/OtMGyU6kzBwT++UGsEoAiEAo/xKe0IUnDfOk9FrC5ybzW9TWf6yx9AO85zWMaMm2Ys="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.23_1568637015011_0.017773111454335355"},"_hasShrinkwrap":false},"0.0.24":{"name":"react-vue-like","version":"0.0.24","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","qs":"^6.8.0","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","babylon":"^6.18.0","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"33448668c75e5d7e9dd6572c5ecabf82fb8423c3","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.24","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-FzoA3uVHZVWbwKMQNGrwKCYOMqyLXui23cDAZ0IhB9oNUVVpad0T6Tn1hYCQht54xwl59yKbs9VxWqVTRc6sOA==","shasum":"5f04c89ec319fee0f56a88ef24490604f05f4e82","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.24.tgz","fileCount":74,"unpackedSize":345724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgZyrCRA9TVsSAnZWagAA2oQP+wSqjSJ0Seyus9tKyr5Y\nUY0LbiiBMRKaJ6oalEz1VkPH2jchAmaacuCWnREnO3zdmc58xX+NhpffDsTj\nJH0G87qhJC8XwZHjhGVxjlbEH/5Vox1WlIOqdG2yh2ktMp+NlV2bjKx2DBKy\nXWbG1U9zonHgUkFkDmnrL8mp4OliuwBE1EBGFjnuBq28jc5LJ2rFUFxMJocE\ntCtWV8RLFsvDdMOBKI24FKmEnr9R6zq6O5V+CHasUi/k6+KvH1x13JJ/pdhi\nJoW7Bj66V5NDo8Y0Gsn2UyDjOBKHJlZVeYserbbZO/CdvUZxVxJXlsQPUXFq\nj5WJEj5SNNa6O9TqMY8zcs54fW+9WGFa7Q0ezbeLJBWv8Z/4Lbzw67dPSKHF\nQyMF1YGSPelSeE8VywdG7wz78cc3t+Jw3IbCdeMYU/HDKUXIDBh7eWDzvSv1\nC/hwIAyVqsrRa1cI5bGo3+7BUYHKoAepAx+o9iuLe3PSNyICTD32cDopKFNV\n28hAYPhaMtlFJKfZn8D7h1kxBYwiUKIPxcj/rapRDssUWL7Ev/9EFt2bJGlI\ngb8/lp2aSfYpXMUYvQjc0lDQ7bnD77SLBu0VEUxw9/MuqnbeHeoV/isuWT8C\nN9qL+xnJmk6w1SuZoFmY3N+I6G52aYz0VeaU0eViQrRop9kaHvLgHSB3PlzE\ntTiR\r\n=dZXA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFQSRJQW4GdtVUYb/rQLTQArPBgxVCdU+nd6L8jL6WzTAiAG2fP4ajMJ0p6wiGvjeTN/z0Wpa9hVyevRn+GoWXE8+A=="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.24_1568775338833_0.2565354397894519"},"_hasShrinkwrap":false},"0.0.25":{"name":"react-vue-like","version":"0.0.25","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","qs":"^6.8.0","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","babylon":"^6.18.0","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"33448668c75e5d7e9dd6572c5ecabf82fb8423c3","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.25","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-+H1hC4GfKf2ujtJwH8EbnJb2VOjkx0pNWy2vIUxhdCmen7re/ViM70VuMwHN7Q1POHUNVeCil++XbXHxb6kNxA==","shasum":"fe45352992c8a84ace658dd043cdaaf16c1d1e6f","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.25.tgz","fileCount":74,"unpackedSize":346288,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdghCyCRA9TVsSAnZWagAAsZQP/R5j9sr+MpTldHNq7b3S\nySH8q1iDmc7R1If5XmQzDYOd7PsEQqOEobONHoxnM3YwIwgtL4MWBZJvA/f/\naZ2duZQU8XQ/V3QYkL+opBwnMcW8pCt+0SKmgDhYIfLD9gZr4i3TKEuVgOlK\n4gUlFEbQTtjEGQP8RexYU2y9zKuHfhJWzECyBVMYVdQLZEpHr6a106MCU3Bj\nLGWkC+DGBiC4O7kcO4bcU4sr5USDU3mOH5Or+OJkudgHi8oVsIBwDYIAs6rr\nT4GvOh3Fxz77DQKKS/RvLi16pFPdXbcJrkdF4jdudtFe/y8Hj99f5tepkcuY\nrbWDbz0bol7zFCc7aGKZ2dg4D21ReWee/RdjheRFAJRa38+OYBwfhqNBpcRx\ncRV92Puwsm1jtJ9rBbLhbblX8/FHk33FDmql+iHBZlimVyjiFVtT2KztsgLq\nSBgxvDjgwDb4S7H04szsqNw0XenwdWX2WnwqzssYyIIKG21JPaT65arSUQid\nysczKz4sG/rb7yzOWP5iPRMkKdd4FU+8VKsurrUYeIDOn15zGdp5TEiX88aO\nAj2HaF8cPV7XHmprsSJKYmdK5/yW4LBI0qFHyqhDIfK4Jbh8PMLALAVHGoEL\n+IyAzwDgICRrxl7+uu1R+hVfF7h0gK5ZmEcKXPcSZt0zbXAEd4KDbDdeP4oZ\nygzp\r\n=VkCE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAl2gaPaSSAdoxzPSntzeIj1WXvCM0nrEYL0qImmf7lgAiEAgpT7VNIGci6yJegmbl71Zb46sYXLJMMdfbiy8XbMZdo="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.25_1568805041817_0.49027723052048744"},"_hasShrinkwrap":false},"0.0.26":{"name":"react-vue-like","version":"0.0.26","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","qs":"^6.8.0","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","babylon":"^6.18.0","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"d0618b825d002c92fc5c946b6d74e41e2e27a77b","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.26","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-0KsJe0Obd9iZ54KXWHOMrzgPDjQBl48KSrQw+EfnRv1B9P1QjOabwFNU6mWwPUIjWeDPuNqiLikVzPaXfds9YA==","shasum":"414f20f8eda0fac0389f9e3bb183beaf2d57a4a5","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.26.tgz","fileCount":75,"unpackedSize":345697,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdg4DDCRA9TVsSAnZWagAAps0QAIasNT3HTRcVTP0TMN3U\nvxVhbUJZMLbVCQ7Nfgn+H8vGShDsgzdCbHQmadVF9zWex4dXg8KFt65gJXE2\nw8NCgjVF804VYZbcyIaeuU9W5zkL9kwdWPTlwD86ryFNyzXwTGWWDDI5haYF\n4k8cZgLVw6GxCfC2HhLwyl6ciI1XXxsJxQa8ldHqUGawymEUXmgFGX8cqnv5\n7f83XxnYwcbhdaYPF0bBni8AGxtsr2UsOuvQMEOksNhcuoW3h9psF62Yz1IK\ndaf4QmXkiGfw01oWqYQcDYtXwqJEK77YPcUfxX+0r2STz4EWxERXXLfVNLrf\nvrWEuWjMEgCZpxm1H6FmLNAtX4dipDYZN2aoYaDXPlOhbULSHHklMlaGOSbH\nAAPl9H5CQFS5myTC/Zj97pLZ2Ny0oQVcI5/FRpaQTBHUc9hV+QUJZsx9OsbI\nimqciZEYtcWuKVYutRpvhdiljJmbvm1bkGQWIf14DN12cmsGXB4VVCugkpda\nr/zBgISqk9/Ra2XxUzf9+n1yw5SI9Fkd3/Hx0oIvaUvNrKQwLTSY41assbjo\ngvvgskvnWVZZ9CXzcMkl4ubJLk0/BDNi99gNcHktEoDPYJ2pCbqyI6DDMGxs\nfUB03yWot3q9GoJg/VJp1eMi+NzzUEws3zJZv70yUCg+bYD+q7pqgX6MReDn\niot0\r\n=53OV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCfOzWSnUm2LreLwPFjYYEOfX9uI5xBCaihc42R8DBOgAIgEXbJawY3wIEJvS4PfjhKtzPFHIcEy34QY1T9RSXawno="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.26_1568899266613_0.985846186557777"},"_hasShrinkwrap":false},"0.0.27":{"name":"react-vue-like","version":"0.0.27","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","qs":"^6.8.0","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"d3c686da03c02a934051c24498eb74507c0b0d2a","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.27","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-plz4UwDGfNwJQmKsyetQ/IJiZ+S538tqzog7s5beVx/cmcV6Pv9+NbTO+28N0IdxgvAerLjTUvo/YfJG90SwMg==","shasum":"e69bcf94ef89868526bc8286e9834f250997f423","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.27.tgz","fileCount":84,"unpackedSize":385427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdh45+CRA9TVsSAnZWagAAhKcP/3KUzcevFOArhHlKGfMF\neHONMHfHQSgQfJWucphQ/cmrDucfpuUz07wRx8gDEv//0XNNB76nxdKC6pmV\nmdd/g0p4pY1hjmlHmu3FU6BKQzlnIWGUZqOzAOByMQysG7mlb3JzVdIGif80\n2hK/vlGRo32eRiwizBd8ywFigfIaU1bJf8vvT/ajd/ckUlark9od4BCJOukc\n1F/G7tZK8rxA1XqNFgRV8KZS9CgiNWgDfUBoqtCR8uKUZXI6FmgLTYsXwXZB\noETV5FhfEQz7jG+dts/RxyHl7JZ7FHB/jPPT7j5c1vKT/tqYxsZ2aR0gYwCl\nqApKTr6kRHCDqaBT8PvadBqVCjwiVmIq0hIZssFeoF8Jb7NiqDdYeZq9o0EP\n55sXzEE8hDy2GnHUPMBTDqlkMrdPb3nLEyQUw6nEjrcUHB2vG+b4DVgip8x4\n02qm7eriyeY2JekRj+QGXG3neryNJTrZcM+0R7ekturnE2G3qphvnVgGOv1w\nRr8jcORE3NIvYesKZr9lAoFSx9Pyhpg7hlm2Dh41QFWotXH4VYb00I6CEKkN\nolAYIQiEURuR2RHJzid3IJDMXAlV3ikJRnQS2RrrMdiM8yBKUuYfOn1/8U8e\nloNkcn01YPYiH/YNj7wsySUL+Czu49X4o7PdVTuxfNrbGAJgGnK3m4yiGy4S\nPvzj\r\n=ROn8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICP3gHU6qiqQL3MR2o01LleObce4tvTjb4J2gaRpsL0CAiEA3o/FzFdLhYgst0iCCjjIYLKom4vJgrn4wefE8eDCHDg="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.27_1569164925193_0.7373018441653192"},"_hasShrinkwrap":false},"0.0.28":{"name":"react-vue-like","version":"0.0.28","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","qs":"^6.8.0","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"917eb715e5b0186f4348c619b588e00406344d1c","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.28","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-0AN8T9fXyYHxlXlJ7hetXDg1DVDQNsZopDHJWNmUj8HU+/hToDVcNiHkBfv36GNwzrZtALbCZPQPBxeJyUM8/g==","shasum":"6f14335db28b4cb84fcb3c21d69199aca9a7e1cc","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.28.tgz","fileCount":84,"unpackedSize":385887,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdiDVkCRA9TVsSAnZWagAAsasP/02ejYHnq515JXNBrteg\ndEKdFvAu3ttxW6yuZDIRM/O1yTKhsjQJXa1bbWTTkBGIAPqPmu/OdeCJ79PU\nixh4HaPE8hq8sWIS0wL3nPlk9xsybDNIZJUWodhZ1luGCPgTIbdURjsHmxoY\n2K3uVW3dyG5C67JTmXRc4A+OQfZtNfHHGtwtv42cCeJFEJWddfWBsLqi2eKS\nQKC4BaGZLXjWOTYoJ5qS/Lssp7vC2u+Xp49ylgnf2GACKmcKQ6m5Yh7MX3wy\nSdJlfU4e2lgc03KG3x9rCAzcYnFOlM0d0u9eDJjqM62ryVs28TZTld8bPqK+\nALsq0JZn6Kvc7+HC3Kkx9ku0RK4Xe9dTKM7ECOHXB3OL0Y/SImT7Y/CYCTOo\nQlZT5d5JbWHuBkfT7e46tyGRnj6D3LZ6XJA4fBZJYRO3ZE5bdPdPPOrgXuAk\nXV600YmGiu63kqfsss8so1xUnY2KPRfXC/4NThgz3hJuSP59OGG0cx76b1kl\njq+6NOaUfd2iWkkqGmVIXP0f/kI/SlQmvaXrpj44y1c5OOvSnrVhMt9kWVrS\nfJM9Ja/uscQt87Obzt1CauoMhteRmrzIDYReBHS5v0qicR+RHCuulZaQXyGu\n0biTIcJgDUgFX5SoeX7hUVmuA7rBeDE8z25TkTBQFrwW9ivgaofAuShR4SyD\nUAQT\r\n=XOU0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3GYUZiuEhF1gSV1LaRRmXHcyRTKL7FoRjP9j+MXSnbAIgQjOC1EctG0ZSaBrLZcTW5LYc0aH6sF/Z50HholpkYqU="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.28_1569207651894_0.011924038175462837"},"_hasShrinkwrap":false},"0.0.29":{"name":"react-vue-like","version":"0.0.29","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","qs":"^6.8.0","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"e5ae3f441696d331b04ea918df4eca63d56747e2","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.29","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-brsUoCNsa90cv3ojRZTaxd5kthhRfoAmtfd2w3TLtSDFX5kkTJWexJj0d3s3Ql6cKv2j5U8uZONhvLM7uEuxjg==","shasum":"726b11689e58ba783fe75a8ecd91ae5e58807c14","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.29.tgz","fileCount":84,"unpackedSize":387888,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdi038CRA9TVsSAnZWagAAggcP/RTzmN/f9I7loEuK89xq\ni2R4kNGsJyoi6O5eudrVFO2+SiIooQGkDPbLWrVCHQFscKLxMDEi9xxXM3WB\nvQ87yp0AgJt4nqiB7Ip9asqz/Y9Fg9kzY9ufOWfXTTTSWLMq7l3rU1g/CeER\n215drwwvqA1vaVMvMSjkqgUzmgkFnrmSpof0sLltcZK8hDF9Sg2b2A4nbENq\nme+pwL8ahKGsVHQKaIQBUDqtKPe+aRhhZTAe0KYZKNE62Cm/IXfKHirzbtkJ\nlfTLCtZqCmJ36SGCNcbTkJoNuXLJjTHLFf+KlxNOpLUgIlUrPZfeJrsIwJ7U\nKPkOW5TnkXs/yj0gYLNrh4UnGz5DGyQYg80MXSkd7P8rXuNjJEMva80ZriDL\nxAYBTa6xl0uiBd3572q+n95IsysA5ZV9PuZVjMwYkMZxbBVd75JZUldFgUlC\nDiSpWai0w/EmIGbCvtDh/kBbpiQ0q38eUhlr9OEhq67CDrQimveqncnFS23/\n4r5sDEbtvdSgH0CooLGzawClY+YYN3RRaZxX+Scm6SfzS4J162JY4KQT4939\nQjGAIRKwaadt0x7CACABe6+n5Sl0aPJDEv8eHj8F8L/x4GrULZnNrbFumuGf\n4EodbZk13S9YP7X61UYB8duF7LhtS2kc+j6uU3nKgofVYEJJsv/spY31XGxe\nsiLy\r\n=bpld\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAHRZUVfk7KAUaT4o+ofNS5Tf2PNhpfN2cwelNUCfDoAIgK5VtpmVg5S0slX7fac85NHn8tbI8KexwwoPJq5B5G2Y="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.29_1569410555472_0.9033207707032518"},"_hasShrinkwrap":false},"0.0.30":{"name":"react-vue-like","version":"0.0.30","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","qs":"^6.8.0","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"70d4ceabd66f3d24a7dc00f8b3361ad0b2038885","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.30","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-BOyBZg7fWWEdUQk2AyEbmcCh7O3bDOMUieXguh/DWFgsB3ls/QlBTgLtL/Aijza8owh88O80VNocaheXmF94gA==","shasum":"eb65d0acd3630985ce5539243d7115d8c2138db4","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.30.tgz","fileCount":84,"unpackedSize":388089,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdi1PDCRA9TVsSAnZWagAAjNMP/jpLeAoP14P/UQrVmLbD\n9rwJTqx+dqGjPadiV7fw8p26NyutF64Awo2Z6iEIWI7sYsIX5cZGYt1kf8DS\n6UMTPAQg3JdQYDO0n4OvXV+nHFNHVYZfmZ/2QOisHLcRPthEL40MpmioOxqJ\nuETUy9urv2yFElCZWITj8bNjmE8R3NnyDrypJLDXaojlT9GaHYbKtpXMaYpK\nS4zfiyR4PFfY/vEBM2V+kEVmM/+c+XvZdeS2Mg5Za44T8mFPXf09I36oFLod\nl++G5/sqP4M+Fibzn4PwUAKnqipPpV3vuZIHi2QvJ/IUoqUeY4255JoUDhzC\nSX/LvyU59Gy2RCUw7YFwoYveXdyPR+cZT2NELx6MxzQR4zLY+mLKFY1sLFUi\nnGQbXW+2Bho9arlDyhkti0I4kJEMtog845XgrvDEuLujuVlIkHLNdbzIanBD\n0gp+uyYt/7qL/uvfVKiUxT0JL/ojGWcovzGnh0E6iKTR9TEjKwkUhb4LsRLB\nhfSDTEWGM1n1UWiNKW8ognd/xnW9pr7pdeJST8zorYwSPyJjIZ1zvc5TmSu5\nVkYp/l0fnGNiKBHHmyH9zoN3BZt0S00SncWTzMO8m+KpcF/6AOwe7+dBWwZc\nsyF97MIokEGUCs/t42vF3moh5hYC7ARze/HLz05s4e73y+SCvHww/Rjgu5pm\n3Im/\r\n=of6H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwRXkBkgrXDL2g8HfIGlhhIRzHQIMPCBHsT2I33CL8CwIgPJ2mXX8HBgd6/xTcOtS7yUbaetGupiGm/K7WZ/ZxbCE="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.30_1569412034738_0.34203006173302963"},"_hasShrinkwrap":false},"0.0.31":{"name":"react-vue-like","version":"0.0.31","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","qs":"^6.8.0","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"594ab0e3338ffa2c7a8f5db4a8dcf6a6d37850d5","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.31","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-rAj5b3JcwtheNIfBho25D4gOE9h0w2nceCSiRZci0upcc4W7RRxEv3ri7XI6z2jqHeGLBmli84IqfrmZtKgqMg==","shasum":"b3150b91813f28fb99f10c56ad5bdd41a3fa98b7","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.31.tgz","fileCount":85,"unpackedSize":400829,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkXLJCRA9TVsSAnZWagAATc8P/jUKqNHXx2FMMc1IPrCh\nI2Otd3JqITe2Tl+8JOUBwRQBI5AYurmzNytc+CyvTQQpBVzBLbBsdmAqTdCU\nzv80Mr4/qPK9ljmfLy361EpQLKf+6PeVk6wuIjamkgX+hfE6OBm0l6hbtWfJ\nYlm+5Ofxz5FNZrSPqKRGDNXG//G00gKLEOu/Hdup8Y/NqENwUEOWN/BLyQ4z\nfJZgLsdHfOofBqd9seEieKZ15DjTh0sXhiBU8awfuI+FrHUeKz+dktwILIhH\nJybXvrxX+IyLZgQRGf2RzMNJ1nZBGiJD400+kuJv04RhRSxTE3Bop6lkzFcn\nAQPZkD4xrX2dyrDNtTJkZuIVQvAUq9MUXBy9Y+cHXAN0/5/3YfJuuJK2O3Kd\nyGjM2GZE6jgzXZOU30LiJms9peQ7ZHaiCsondrIg4UsYg/PG6FFwNBGv/Ey0\nBgELX1Hs7Zi5pb4DER9BBbVaHPzlFiFPzTr207QQBR0bYfrQLu6DMwHBwJRX\nD8SCUKkTa8owRkl3IMrxrotFYgrVAotFFazlPkGpRTYW1jkXKhbLoRjsT9ft\nVh8k/7ZUdznqzM4q93Hn2W3f1PvHz/khJBE/+7hK1uXSimpzL/BapOEFlFqu\nBZiWe0qRtp6Fl/umjcu7eUvgcPi2F/9IBX9JMRPUb2ZqGpPC06J2EjWSslcT\nmqrC\r\n=Gva1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFFYXwcu7iYSDeYLaUMMTEIzRuzKuSFnE9LekDvVm1tnAiATioby28TsqXRouSN2Fb+ZcTeC5shKz+7wwwTWZlPKNg=="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.31_1569813192564_0.9463587642436848"},"_hasShrinkwrap":false},"0.0.32":{"name":"react-vue-like","version":"0.0.32","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","qs":"^6.8.0","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"683681bc21dc1b2c55138b75711d36b67caf8f2a","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.32","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-FvYZoJNi5Kg1aJ66b1vBVcBaGRqp/vhu+FLPDrvcTzMNXVvyGbcLc3QYX+JsT8aD/wzrCbvz6kgvvrFI+U/Axw==","shasum":"4b1ed2e42340e6319f344e604d9e61136d8080ae","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.32.tgz","fileCount":85,"unpackedSize":393385,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdmWoQCRA9TVsSAnZWagAAiAEP/idtTjUCVzfGDEXI1TXv\nQ0ACbozOCpl2u42ubjM+Kd8IUaS/C1nLHvEkViLM9r1mAaZSWD6OF6EsB3TI\nmHKL646kKR0Lv+/x6ojt+P/3zxHc56i8qqiwn1W0sN4TTYtJlilequorCAmo\n8AtXsbDf+JzkcDRueVegeIaSUThZGTTmKz25ApAXeIJwKoE3qgXbVvDEQRKE\nTGKMRDnj+Km2Dt2kuDorX/6621zpZzBoingX5I/91yoLohdypALuZyOODm/t\noC7ffVSoPl+Ot7cju8J3/9qZaGRyh+82zt5Ubjt/CN97JT71pboLhissC6Hi\nsyU6jSsw/Mi5neWzzajNPRVVbEp39AJ0i0yM/ZDJjNKMGuAh25SZK9jd9ybu\nWzRIiuvrGouDI5hYekrwY1ouC0SDZEQgPRqXVeMNb/oCoD9tCrUu7jArjEsW\ndLhkjbKZYDayqXebHLaxcMur0cClGkiUdYu6fblDjElNjywFwzvp0Bj6z5AC\nnu+wsMW+qJFqbK8ELC8G6lpKlDPlVBmwNMcHNGexxw100RoCmBFR7JBbpF2w\nzwWMZEOyLeoeUFliwNKRBjpdw0Q95DA0m1poVPsckTvIiy+sr99HTU16AN98\nne2ASG+avC7RJaHRIj3L3WLWAnJ6rksVy55xaAP5NIL8EVWsd++6YWdyi846\nzb+5\r\n=vG7x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCHQ1lvbDF54qulD7k9sFOMZfgn5njjlceZwSvZGuqkYQIhANztuf0s0f2EFkoeefvAHLB/3LM7IoaNlozfCr1ET5GC"}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.32_1570335247981_0.6266233622726725"},"_hasShrinkwrap":false},"0.0.33":{"name":"react-vue-like","version":"0.0.33","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","qs":"^6.8.0","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"6b13a68690d9e56b5b03067e4320241672b3ddbc","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.33","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-FXb34JXY2AqCEIAu9xl6kKRyXvGakJxWT3KHQjSDNFPqgHd7k9a2i6Cg5zCFwuVJm1nyvPmf1x7bQrihdtdOPQ==","shasum":"a6d46e0fd2d0f84f7f2c3de59abc9c027c7a2d39","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.33.tgz","fileCount":85,"unpackedSize":393540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdm/KUCRA9TVsSAnZWagAAG0YP/3aCtfJidCy4UspvIfET\nNZTlIIE+ndKQr+aCXnzYmKFxANQe1CKfiJi8HSoens0xKcb1Dd65ogJQXow5\nHrSr2vsvbdH06Q/kYRY6lKW4JYYGcjIPZuI46pPLis3rnRKMUiO3Xu00DFkd\npqTDm5jGUIX848vH0QgJQDTao/3o0LeoPNEK7Gz+vnxCifDqxeLKb8m0l+dL\nDyfrIDCyWUlrwGISrUZK8ZAAEXWe8Hdb/EP/pImzcWAnl6Biy6B+8ZzpbLNw\npRIWLq2QnbmZ0dAMkBQiH+sHbz28tlzYbpd42MMcIWJYTcOoYVxLU4AWMQCI\nAu2nmlOblBc3FmbwLqfo9EnjM4Sco1/NKvTOiEJksBxjJY2WyvdzvS/AHFQK\n3GeEeBnO3WeGHUxfMIp0PaWJb7UG/lmiGa6RboglJBKMmcFSzT5NeD8RZhN6\nI0i8YqbRJ+unLPdbCS30A11bTVoJ4lIgw0PKOifYGbxWR7Qjeiwc6A4hi/2b\nNMZgw/CARxxCV7a8EMlDXM0pgG0tbVM9bA/ZS3H6PbVeKQrIrNxKA7qliNKl\n0rCZf2vmmUn6gn0PnEaDhaQluB3TXqQhJHrywm6ILsGCm9X0Y4deTYaZu78e\nu69OfbKfwbFhh9cvwk9Ne+iR7+0zTSRfPWCfHweoa/5mDYPvyFnEH7xY5xJd\nVZmv\r\n=MFbF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGpJsMCGMy4xaP/ReLHYDm8Bi7ahzluFAQU5Wno1GntpAiEA8XYQBUFEFHhJ4TkRUdNwcmyliHNUwUpV4i2ECMt/jpQ="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.33_1570501267170_0.4805525121609173"},"_hasShrinkwrap":false},"0.0.34":{"name":"react-vue-like","version":"0.0.34","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","qs":"^6.8.0","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"3e00eddcbf1918cbd0cbbdb5f6b68c4e924a9bf8","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.34","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-aIsrOxa1R7CmyEql3bzkMKmacAM1yPqA7dfgFISPS0vF8+r50Gj4x4mDRVH0iCJ/h+k2x3yoSN5p6KrQ79XYnQ==","shasum":"1db6bbc237dd0c301a1027f5882c67ce4db3d60b","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.34.tgz","fileCount":85,"unpackedSize":395424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdrYVvCRA9TVsSAnZWagAApEYP/iZdKhJa6fA/ytNlg5Ax\n1lraOcqdHKqtFzxLlFOWp6VhDCEWJ/XCrbgyJni0o38fv9BVlbU69dCn+Jef\nlTlAZNbzeIijC66IOtcr4LDmuNTiyavYjDU+Gz7Glu0oHOPe1YoUsZrZmwrN\nVtP63cPLAxt4w1Qs9Ei0q111CwvOaVHri8J+r+/54IWAg+/OTAsm4fT22uBf\no6raJAxflqJV3LbcgAMagOvrIhH2BkPwlTt5s1Z4Q7S7KRPHUbOVl1li70Qi\nNs9EvUd7fwAClUXIPyzIUoGEKHemHldO4hWLefhPRQHpdSbH5nPkt08TUgHc\no7cmBRsvVgoPQhM1DZewZuF3Xg6lD/QkXcZ7Pn1PYuHyxhMUJql4pcC8HG1A\nwwWHpU/3lDcO0lz9YYMpVjaG0yzASHKeLmf1XI/d29cAi41eMPDdGwXxmgUm\ngYEKh8UFQUoHHfGk+hPcy4tOB/D0+PFhOCk7nhnktesIkpaPe/VypbnjzRaa\n6vvip8MJ9xuhrHAcQlyzz0bMa0hErlUoagG1XIlN/A29l2oONpSSTjuziSTV\n7s6E9homdTjY0w/l1byE0iCuueKC4nvc0N/NeLbJGGKtrMVgU7MXgcmrMwDb\nN2Hk81qISVWdtbMkOJAY30ekGIDLNi7ZW/mmB3op5hMHTRbjp9x14YTl2VV0\n61Bn\r\n=LDhn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICJWASeZYTj8eyTt9ZQfPLNvINKsNSSOBKOPJASXQFR+AiBEPnT5SYeDciUqDjftKZg2+y1kLlrUaMvp6Jr0+5l5hg=="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.34_1571652974445_0.8356775377312471"},"_hasShrinkwrap":false},"0.0.35":{"name":"react-vue-like","version":"0.0.35","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","qs":"^6.8.0","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"939278d705b93301ac6fb4850c103ec06fc1756b","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.35","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-0tMrcXf8QmwXyuZwdcsWxl32PIGw1dSs3S0LtBJiJnl1CPkTfwz+aiCI5ALLnXzXXDRmw+vvCiIGA95aTKOCbA==","shasum":"a80a1feb108767e1a138d7c480e649506b229760","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.35.tgz","fileCount":86,"unpackedSize":397131,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsEixCRA9TVsSAnZWagAA3kUP+wQrAmrxtHgzGhGrL80Q\nPVYNTzD2t4e94h077S4w6ZVLvl3UA5tea6yi766mTX2necBneTzWaLzeTqHU\n8da2NmFpuY05CEyEjoRN560tsaVM90uRReE89R+7DjwICPThn2DWkZXlGxVz\nZN8ncmGGl0YNPCnQmRcdAmV973H6QnjmPxq4WOKknwhG4B3VN7NFFFHPGD7+\nsBjmViO0Zj7+Md4sR284AzD+YH6tH5U0w+j0sFYwcQdW+T5JApM82dWvpYGj\nQ468QwJ5pnLLp+InObZxPN/Le5fV8z70aj2Bqoe8uQk/4ffMAjLTLV+DC7w0\n7cMZ/hTBjZN0HZ5ll2GJjdPQjlYoaCAYBrBXXbtJh4B025kD27rNaXpCKE2k\nkricH81po+8FQzdyLfPKwAzGpcmwkNlOwHuHH3aXWv8FbkBlZSeXl+QUKaod\niL5zmt4ixj5GsEoeXCd6VMnqkbR7xbk2YpDygFSbJE4PO9zNJHzDEe65MTJa\nmioIB7pcoEe2cN2FN8mmG9r1zZv+pd9lT5yqQf99/63HXkioD5DZU/LiNh/e\nZfvbLaogVHQwmn9lvfdxg0Ir6ChVGApr+nURkdfvSphfBaUPk3zvDgSkp4hX\nMAhIVMOPjxQwtFo/UdwMNK7roITQqX2d7GG2PdNbMbLv/Law5n1jnolFjfJY\nTlNG\r\n=BAU9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFvtw8xpzX2YG0ew0DJteli/luXVDIH1NZXvbof+d4lDAiEApeFoROdwFfDDht23oZPMohfuM+m0WkZ8Qr7ToIu9O54="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.35_1571834032496_0.571991308880591"},"_hasShrinkwrap":false},"0.0.36":{"name":"react-vue-like","version":"0.0.36","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","lodash.clonedeep":"^4.5.0","mobx":"^4.13.0","mobx-react":"^6.1.3","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","prop-types":"^15.7.2","qs":"^6.8.0","react":"^16.9.0","react-dom":"^16.9.0"},"peerDependencies":{"core-js":">=2","mobx":">=4","mobx-react":">=6","prop-types":">=15","react":">=16","react-dom":">=16"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"f871ae7be8763153dc10aa2dd56d911c6b5205d0","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.36","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-wauM21jk2hl0ozV+NXbZ6hcWXFigIGuTYua8G07QvAE2lzESqNoRLuffbmARX6PxFbeak623QciCcSBD6s4aeQ==","shasum":"098305fcf94bd160482ab4208274118c3a3307b8","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.36.tgz","fileCount":86,"unpackedSize":397351,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsE36CRA9TVsSAnZWagAAqzsP/0zlPp+tKOZH4dSuQdc2\ncnpW3aoAKvCoog+ZI05eDMmBu2zo4o/Bb2A7nKeqp2aEFzDa5n6dK+Ja1516\n6TytUCL7KEqHXYHDeZiJRT0Gv8HCznhX0+VKeVjklxsJk2PAMVqc9UyvTDBK\nX9lb9hGWhRKf+43FI1LfZTg8Cu0IBV2dNJHMHiTKiMcsQHJ7xuhajuV/UldC\nZcNY/wWILJ/7kkxChRpG6ChsnloNMu+9rQXtdAMQKctbIm2v7MKFjeEGJgCu\n7XMEES5EFaDyAmaNcoLP5345ayHgfd2r2eSUNWWZ4JzZ9ByVBAGcHKALLpAa\n8r2eCM3tAOGVOmf5MBgCtzbFB6gMY8u8DBfSzSwICmu/WZZRuacrPshnmgIj\nTGLQwFxtqMkcB5nxv7LORT8sZ1mBSm9u/mYKhacGIJyfYNCJulY1+iTyF2+M\nVW+BZgNfgveRwhii5KGarxcJ94EHObbcRi5Tt1RaIDcYuImPJM8278DeiWSi\njrWXPSYfiRj/qJeqc2G441pcptrA7K6fOJnoXIjJcRxwgnOd1HH71MiftE2X\ntuAUgovFwTfVJlAFYKlXmI9C53d97c5eyWeLqXwlz/BjdnA1gHVUnaM00thk\n2bow9lvRLL79J4eEe7/rdImAkbZCYjHYYyrOf2zJLFoF9ek9AunIHeM/l9EK\nz59Q\r\n=Nzni\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyyY0V4yPsn0klg7BCpGsRI1sZK3B3MT8QJRwABvFldgIhAOuWoIhVjl4KW6efGdF1OqazvdQCZq/EqXEE3VIeqBMG"}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.36_1571835385722_0.5001008701231755"},"_hasShrinkwrap":false},"0.0.37":{"name":"react-vue-like","version":"0.0.37","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":"^6.1.3","qs":"^6.8.0","prop-types":"^15.7.2","react":"^16.9.0","react-dom":"^16.9.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"280550c957e0603563505502573eb1fdfcb05634","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.37","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-aHU8tG9fvJqF6fl/sLUcd0o009Gb0Tv8WOOfqC9ebwfb11hnWOcujSkHhPjlJaiuBzgmEqtWdaNj+txNLBwQJQ==","shasum":"fbdf5c01fedf63a943a9f1353c662534841a1dc5","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.37.tgz","fileCount":86,"unpackedSize":399479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduGNfCRA9TVsSAnZWagAA8vMP/1wK2gXkMDjEXErV6G/3\nkilaSrbfqaXNbePh5Du4UDrdAqd3dqk914bAnIWxYGqC2yJkt5h1Z1aNV97k\nH6qGbwIuc2lqnDCTc14tFFTO+qCvdX3/X+0r4fsIZWdcAPl96hlLtHNJ50l0\n/EaCdQy22RifxtbpCszE9J+Ba7DRyoQznqV3TLN7rdnNsggA5Zu48hAwrfW/\n6kOXSSxck7M9dAvM/H9r7z5OKuLvA6bOUq+hkWnO9yQsuIh8Ur20ilQm9Z9R\n138EajdpiQKqb6bEwqhkfIYX0+i0xD+J57UatgzqhRgCriG+tdfF2Bk134T5\nqAze+fNGk5RxloPL9gdHfqkknkMMcw+r3mvbk+EFIz0UrsWo9GbXS7OM/xlv\nGy20Hso9zgb4eWdPVyAv4ggyCpJJ3F59n8sAv5KZ1O2hlkYye8N9Bu7iLNrv\n1sxaAuNLFDlUa1mbte30rVsY/NzTL1XZ7i8w9KmR9a5ikGoNeKEZE02Tl4K8\n/QEJwfnLzCEABZLmzV0AqTAu7E7z/EQ1klDxvFZD2CQkr9JoU97MNHpzz3rW\nttsIPFLl+0ZQ2Ot1Rh8YTs1oWNI/tripCwNG4Jk8gI3ZOm9bnWnh3kREazX7\n+t575UdIiiLksUTSg853+D66h2L2fciVPp+vNAKRWtl4iTOsXpeDfjb2z8jK\ncOI7\r\n=KVDs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQ06f1lhqfvztdm3giVWtkA151FyGSFhqnPtYSC3I5VQIgaHAUEaHWMzzUU4W82eZJQDvt8cmqkcMvMqfDw/2ZApo="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.37_1572365150702_0.8717601095492247"},"_hasShrinkwrap":false},"0.0.38":{"name":"react-vue-like","version":"0.0.38","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":"^6.1.3","qs":"^6.8.0","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"26b559a68e073744fa373222880c107a76c05618","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.38","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-4Goh15K/1eNgdyr4sDQPyCTvACxNUA4nND2kriPFqI3lqYVKHzMPyo7zDFqTOMOw7XP+ik4+/N8Ii2j3oX8HdA==","shasum":"a10a69c6a85a997be42013c3f4efb79c4f019a94","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.38.tgz","fileCount":86,"unpackedSize":399479,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduGaeCRA9TVsSAnZWagAArwIP/1fdi2uMjTRV4eQndOQW\nI+XfxxXzFURjlGlRNMtofrcGaAU/zfYDzOM4sm7AXCYHEScDAh3zTMheli94\nymwHz2cTLbl2kykPkxYFVchuwd4MBRfDRRol1WFDOZXTK0iyAkLJhsB1KA5z\nWDuZKguh4YJJ8rINs2N6if5WtxEa+BmxREvmTNWP+IcM5Fw9jH/csw34pqXv\n3WvjwNxTOLaDNHK5CstIne0INhdYSSPv4OFFh853GIL1oET0UxWsR8oWVkjU\ndkahTxZEP//8aXx0SgEWVQkfHBhazXQJh3xYwnZ3uq0E9p2takexYSC6GL3l\nhtxzOYhBAI+JSTIOswbgQXN+hCEKyMyiQb0rh3Ts8EgYy5Vb7NIT0Z7qvL+A\nmGMR/4ihnnNXLwUpsZ0rkrNQNn3+Auil9/kXIoTPXfulMpDDdld9znXR75ds\nweceAJbjJm/Z46kPV7VBp+wTmKcGTAimWLYSv05lNoSAOmeziM4vN3FqeL7z\n+TUEgeqIi0X/OBaGzxh/gDPDwVOONZeh4/36bfwRQnpEwmPrBz7PVsufPQMp\nuNW4nby1lf2gFC3EeBj0Ech43wFFOmUsxDzl1TO47B68oPtwQ5ViEa/FzwJF\n50kHBrjrIxcFm1HssT0+eyNVtY8sYkJHQjmo09Q7mSYrnLbS/npLXUCCRuuf\n8T7b\r\n=E+o4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWpcv8oy5txZL0A+bGIGWONnMZJ2oDeDybmHdEv0Ic+wIgLQIlZxr2DbQce8HNkAALg1Rb/zZsjJAy73os7YI/3fs="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.38_1572365982078_0.9641302480906071"},"_hasShrinkwrap":false},"0.0.39-alpha.0":{"name":"react-vue-like","version":"0.0.39-alpha.0","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":"^6.1.3","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"e8923de85fc867be80a233effdcb7441bdce4574","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.39-alpha.0","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-yprGkXcYaUAJfYPag1CWytgqAAzS6+GN9y0cwlRG3g4C604WFdA25pTPUSQeJwOPAxULDz6rKQCc00y9RuI8hw==","shasum":"496e917ec03d2401a857793ba34343d63f5b7746","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.39-alpha.0.tgz","fileCount":86,"unpackedSize":399033,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdu5CECRA9TVsSAnZWagAAqukP/i6nQEIpVsqrf4jYn4so\nToBT6oo0eG5DTSsilqtjFPrVjncM0quhN6cOzbSw5Gcu++fO6Yze45gTKHLT\nP2xfGMR4Y5tEWkjkLs/SH2BrWwBf9kI1C0O19rritOcN9uP5OC0wtasNcRp1\nCLjJV0QTCn7pU1ysQFVHFnndiLlYbzlVMj5hoRyFOJAL6ACuivPvMaB16nI4\nkVONmHRTFDRXU+f3oViHSL66r/hn43Z0yQxLbTMaDvLwoI4BQJOwbB0fcecp\nrFmpIFN1FAVeWD6nsuVzyxNJJ3zqeHKnx554fRNUutzB7cpHCVgj0wtIk427\nX2PhPunqTmDsBulDHaxXDF46A0mZatYABVYfGHoQw1flpE2M82x/BTV342TJ\n1JCxu1mGsDguUnu/C78a94TKVtf6yzXi8gj2sA1wooE10c81WT1uAsC2+uCr\nX2h6X6ryYLw38XGL73QQYC1aWRgs4RRIW1ZzTyqnHUHZtNYAqx/1O49APCGj\ns/IW9jiiXWjPEhveefaMTcV0EnNl7DUtwrTu4GtDt7C4PvdA7zCMvDBY25bD\nbrV3j/L71fr4PLCQ8GE+5S5MuwsvEVNHmEUbEdzg3qACITM8/Pd8Gt1ka+RJ\n60gaCpuiJoCEe8VCN0FFrnDqOYtl8xNFq+QbsI6kP57MI0NYUWfo38kpyMV/\nMrLt\r\n=KRj6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIExJ04CmhTfXY9zZwVDuF+3wSrF8KKwPBUq0j5hoVNLZAiEA5yy+lhnDn0s+WHEAedT00VsKUHcY4+12s7zUUXmkxTw="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.39-alpha.0_1572573315744_0.7593260456827116"},"_hasShrinkwrap":false},"0.0.39-alpha.1":{"name":"react-vue-like","version":"0.0.39-alpha.1","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":"^6.1.3","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"e8923de85fc867be80a233effdcb7441bdce4574","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.39-alpha.1","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-RpTrKa8xXjozhB6HkXqkTCKutd+8J5HA5M06UazDSsVHzcrqF8xBiEm3Fm0XQkcQ0YML3Xb7pFHRzX0xq/8dYQ==","shasum":"34e695114c577a249a43bcd835a0ca69997bf47a","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.39-alpha.1.tgz","fileCount":86,"unpackedSize":399752,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvn1yCRA9TVsSAnZWagAAMacP/iKbI3wnYmozfGOYJVVE\ndwF/X2VabvFNTQ8++vbkMn4aWzg2gmWIAqrlUlsovGkS42Kh2JNMahqYvLKg\njoBEhAPoDuuFDCysQPicER4cJOyemw/TMJB3a7s/uxZ5/ncr7tSNjWarRA22\nkt/vjBdgiirDQ1hf7j6Dy662hxLcUa9lXVLMB17RL2wBqCwrdFj8zQpgk9I0\nVoufppNNFuJSQdTVaCvO/LlTdDX9smp1+cFAOo2SQkK24fbkO8jsNetc44A1\nxT8HUDRFFc3SOoH5/4RJ04o7F7n7edh92zvNEOyYr3zpW4YCtOiaTLMtWlFL\nFPJpIVaNzjkJ/F9VwDCeFt4fMqnTsTt7Brd+UkzEKk/EhQIsrQpDG3LujvZS\n1LEdQ+JMnupHegbCs4SK4bhhSzBCJ4/rxKKXijvbtNtYQH5K3Dsg1+7HyPvM\ncdfGiXDFEVRhLIjQ31CChHQamQY7rk6BuxzUcmMJaoHldKZFYXWWtonAyN6r\nu+3gcMihHGcyU7OUH7H1zSCz0CfNGotc2rAMkRGxY6161reXpamkzyBIEio4\nj+4dLX1/gv90KnvrBBAETJgYg3zREbHsFkH7mTkdf1kEd04rxvXNkgRro4+g\nizr5oXMYBwLd1ejFDlMjgWqhQ3rz6MounjBLo4GTncV9ST6rd+ruwq2PD1pj\nS7Fp\r\n=6OEP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF9VRSh1vKdENFUDq0HUJjBznWd//Pl3bTxQj38BRY4bAiEA4L9ckMVNXGqeVgHn5j0f77gI6IatsD3Jf+pcBmo0o0Q="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.39-alpha.1_1572765042139_0.4324853997419962"},"_hasShrinkwrap":false},"0.0.39-alpha.2":{"name":"react-vue-like","version":"0.0.39-alpha.2","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":"^6.1.3","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"c4e22968ff93f69804133b3769d5778753650f0f","readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.39-alpha.2","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-NVBgsVeITTJBE4nh3RRakWfduXVhjZBuIkYC8Cnqn+22W51AO6wWATcYHpfa9BCliNfO2XmdBphwYq6OrrFFqQ==","shasum":"aed510174876b6e2e1eeddfcb54d8d116e804b54","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.39-alpha.2.tgz","fileCount":86,"unpackedSize":412575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxmzOCRA9TVsSAnZWagAAogoP/Rl2iTiY4eYdHpEceG//\nNUrMlQCDaRhXCkCfvsqbhm07ZSbyPMY+ztC4CT6XzYaNr78R9hNIgVW2CX3i\n3EldY0KgEQYfPxHz3AuB2q446FsDqQ9ikwkHUQdo67n9dAsEWirvvwzBILO8\n0+0igQWfoW18Mr99IxWMetDPX5xsr0mwcgvvUI0UdypanZ5y1WvXoe5Zelj0\ntErKBtnI4dlFlcVvjekfaSyHmuehA7J/oe8BSiqAlxRAQuhWQVB71xM+XUot\nJcaapq5nLu19DfIcpwgIpJFkHBUyXkppCgQQzxJpYRtQaWtAxLj/ZRP9EDKw\nK0iftN3YO+Lml4IOwA1HWem7i225z3wNwFUO76z03n16untltefJVLO+T+8O\nAL0e0+x9WsJS/edvZ8TNvVyNO7pvQ0ZA4NWRQuqyNp/VsQP6kDIckaWq6k/l\nfRkLeiOg3IMU732lEV1sLTTZmg0r/3JuaIgx6gHGO4H3KYiupNcVNA6G3GXO\ndsAcGz3C2e9fXzU9jAFvKkpKp+ktRHV77sjFNEW28TcDLkM6EpICzZRFmiQC\ndfgDoeoOP2NtG9F7n+ESZLApa+Ow1MCdNCAuaSzUg//rme2YERkfymG2f5F0\nCkipkOptfMP3LjTH+Ae6ivZ9oeQIdKhhJSuywyk0ev28ICwcRyD8+iwcLf7l\npH3C\r\n=0oR1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICEKyHa9UQ6UYb0vugPwlY+Tn4DijWxELgOKE9F4WswEAiAq5eM2KTGL+ZETnxiJeS8eJzM5ddts6wdTjFngSYPJjA=="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.39-alpha.2_1573285070128_0.6577807629899175"},"_hasShrinkwrap":false},"0.0.39-alpha.3":{"name":"react-vue-like","version":"0.0.39-alpha.3","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":"^6.1.3","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"e5abf0898472ef09388b60d2405b236a59268231","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.0.39-alpha.3","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-27/+geMKeen+8IfW1fjfviZz/u34EF4WglqZzysL1nLBfrlceITNr8xosli/aMutJo+wEt2nB8orKXeR35o9hg==","shasum":"cb88805e2a2a77d179529a4aa3f9cedbd183fbba","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.0.39-alpha.3.tgz","fileCount":86,"unpackedSize":412680,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxnRCCRA9TVsSAnZWagAAKtUP/2cKdyXDFn/ESQMp0W2a\n9YqXCRLcU/SdGw14id03Q/IfI777YGuHXvaP4sG9SBYvUhJSmGNwQ9U5T5rQ\n17F6Ft8C2LXJCUeEZLnC5wnoaxFTN/PV3mnOBcJIUc5C4uM+g50J98JDJRuo\nVaaRHAgDjOqezC3/kV/zkOEWC0s2Kh9/zhIy6/ZLsdr9UJYTh0APYXAOzdU0\ntuRqVDUA+NVWD9Z9w4vDBxxbqhza6pWDAHp07XrX4BApW4l/BfK3+Fp/Og0u\n0wXSbqGXOnskti8sPiTb6NmpUUPKlCzbpQI8GMkfHYVgWgoaJQRl2o+Kb0QM\nRvduasMHJ+HfTN2zfqHuIVPUNruTnOu9CAGlvS/F+YAiOe3WWPQ8ILqQIWLm\nynUV4T0BqomVkJRt2ws0DIsv7pSy4RZyrSLT2ftP3zhobfIBtbjbtAlC0ixb\n4nu06E6rcve5VjXNq+kAGMDrvb118DijX28Xtb2oU/W4JYXZmxonfUePA9jW\na3+bYbBPxMMQoc36g+1aqg7so+aohNcYM+frgeRMzxBNk9umP6oA0s5oyprb\nUTAbpXh8W947xRRDH/nEsIuAGfH7SG5s/OxgnRUFyiovsz9LX4qVPJIYRaH0\njsqj4nxGKxUXVs6UzkZ5kODuh6cObqV005PO6G/BgP9GW4EVLyu90dLP2HNE\nxxNH\r\n=Rgzn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC1rB0UVfZa1nMfjAmy9EwTduTN0bPqYveC2dTnlMOONAiBoA4Fc3XRHW/xySfVDWrSKye4VDHJhhar5cdCbIVGI4w=="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.0.39-alpha.3_1573286977636_0.639146699039286"},"_hasShrinkwrap":false},"0.1.0-alpha.0":{"name":"react-vue-like","version":"0.1.0-alpha.0","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":"^6.1.3","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"b0ef2f2f35654fcb9272e8508b7af044c592fe31","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.0-alpha.0","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-4rtFaal/7RwULfv0kRItpyEAmVqAOFZ9pUmwPVN3BaHko/oTLaMetrPMEF1dll/ol2/Mhh3nHE9cwDQMwoYfwg==","shasum":"fa33908d615d7087c50e4846a89c34d95f6c2b7d","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.0-alpha.0.tgz","fileCount":86,"unpackedSize":412737,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyMgqCRA9TVsSAnZWagAA7m4P/jXaT9PAa10WH0vBTuwh\nJ2B5Hw6MkVDCF6QoOWM5qKPsZVpOISFunwFWVBOk0GSoL3fr13mRaXJyc8qI\nrP8VCwpDVfuZdq8viLYch3JJqwhtCDGaKZGU6KA7Fp7MkTxqSygp26phBWGH\npv73nvf75oRtbN/Hc1QhLKP5kBtGX/jdgwzBzLKUDZ8QXso/bMDcecDe5hoj\n/U54Vo+vDyLQqZi+WntTY2NhJEySG6JiPqbtUZnK3vAkLb2sL7wEbpKu7K0W\nGo3zyYhUV32KH18h3n8mbeLBbfjajO5mzXs0CeDQNMPG8/NMFo8/9Zmfpw7S\n6bLqByU56Wvhl63WI6n9Td76o6F4uvXErH1pxOKr9PAvWBqNSMY6mXB4kDwb\nLCY1hFnWFK1wdY5g9xF5yIsL/8fYS9q6wJdqGi4aHTQb7U7u9YjsAQXdT0RJ\nSNxIiDumVJOUyhvrOmcu+8DdJ6EZWLbW6HtaoRkMWoC4KgGf2rn3vjObNcbq\nM3G4YYuQKARnvGg13KApy6vewgXoD9BGcahe95Nko9PCa+BBc0uoDQKlV+jf\nJuJKvJXdzegdxSMYaVQ5p7eVhTMMAWTOdZoJmdEh1SQGGviCcJud2CH5O9ik\nwTe7/ByvGMNuDFiQ9XlclnfzzrUtmOEXQWMtDibsmaRIXwMT34seaPUzRM06\n54CU\r\n=RlsO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBupHAYU8aibEmAtirOoCSpxDpsneVNM0ttscwaANPSvAiEAvO2dD9hpCRPx5Ird+WpD6Fivnnd6H0cZZD9eDTGtR6g="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.0-alpha.0_1573439529989_0.8523913768277835"},"_hasShrinkwrap":false},"0.1.0-alpha.1":{"name":"react-vue-like","version":"0.1.0-alpha.1","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"d045f64ec30e99af66082eba6b4cc84f39fe48ea","readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.0-alpha.1","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-ewG9Br75hAfkdnMO/gVGbrjlsbbuHzEoEMRASfEKOD7ukdJ6Wu3IQL3fKPdiAAXpQu0oJWqgw63NvjlN/naJLw==","shasum":"f9789b8e2afffe74f6a33cee5a8c4ce89cf11354","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.0-alpha.1.tgz","fileCount":89,"unpackedSize":419717,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0l4VCRA9TVsSAnZWagAAUl0P/iGlqUQQN8lss+r4/eYj\n413pti0uGwr24u3VFy8lf7eX7Kov7D9dXVSQjKQhjMSolEXVzn2HeBD/N05f\nJx4UngefS5zwJl3KciTPLBMhXXKK0iTFjM1s42bdiYobk4bi9h4YXoJz21XK\n3sKbSVm5fsgdiWP5ayOMd9PSsX5OJRF8pkcekSSP1REsYLAcpUyu+a2Tepig\naIrfhRKYfc81FI9nIipl27/UFzWPsoCaQUvI3ORWut+LPc/VDMWLOhqlm8Dj\namBO/3Nc3LB+hBnuudQPS+42jDfLJqcm++O5ODaWr1U338QGD5YBESnlm7Br\n6clilENuZ9xqIKJQI52/R668sFNTAwmBVMtBZeGLwywm5EsJuKX57+BbHdk9\nwQ1LzvF3jaK9H6jYWqxGWl+DKh3ry35YCCSo+XL8QneibjjmutAs6NWOyURK\nPoeGeosGNxdnTZx/GKeq96fQljcuF58JNfqSucfSg+1wwCr7w8x+WAN5y0Ac\n8j5Tn7ZbQrt233AMtRmJJVXQZauhw+dGi1CMg0nGoX0fLlN81mh2WngOq66D\nuNUCyAxoM8XM1ov00cp2HF0OG19LbNFPulKSoYProyDaEaUJtAb99Gzow/Zx\nnjk8vvOn5uX8VzB4lJAINBnCZrDjMn/A+u6exE1Jipj2eFBaAk4mkfdTb3/B\n8HWG\r\n=fcvn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID38iY/XwhVVnDdxEubVPdrQCrsuCljZJkByR4SN81ryAiEA4J9QulOK70luZ0R0uvjEkH5fPCh3pg9Ca2jRLVAL2Ac="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.0-alpha.1_1574067732687_0.13803678572631184"},"_hasShrinkwrap":false},"0.1.0-alpha.2":{"name":"react-vue-like","version":"0.1.0-alpha.2","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"b471ce6a4fab023d39796c76ee9bc0f63523d7b4","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.0-alpha.2","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-6dwPk8+cRjetVUr2sklmn4v2us4JXmchkMXxJBil2pFyzWgRCHvr9XNMlVZ8o3p67Y/YgV8Y8zStO9KkbDZ8vw==","shasum":"ebf197fc0c60ae0462d472e82300282f521cd2ef","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.0-alpha.2.tgz","fileCount":89,"unpackedSize":422205,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd024iCRA9TVsSAnZWagAA4TwP/1WpVyzsF+pV3EcIBeEl\ne0k4p0kCiKuXQnlPuRJk5NyCD77d7xN20QLQ23DApp8funoNrSQFpMpVVEhg\nGjOv/dkkajNhAkntv83N1b+o3a2S/NXgaAXGpmdyPMYOlpg9psFRry62S/v/\nICBINBJGxkWA3MOTtttMu/KP8TDhQkX6d+1MH+Gu5Px32X9iynFTfVmLCa45\nS73qJ1p8sNiEfR4Wr29fE7Gt7NVth/Dzjgx9WMSh5vCSwbjBeW8y//2KVBMF\n6MwBuv7qxc91tQsAz/ME4nsNPx1FdRIsSFoKCtHwKhyNhk5SGDiAUx5n9ljZ\nBeNb6DoEDAJ+9xzodr7qhZOq8LtTwBgkBA1pBFUyviUkZwY/wIDvveubf38R\n1c+Z+XjgrkV6dH17Friufg0qLpOkWARwADNMVNJmZ+8L2PS66n3iD2k1E3M2\nG/dByILwmtduHQZnLHMsoxWmt6tPQCFriEemwHKk9eKIx/WnNQhCokuwGKJp\nPANPwsiWjXUiDWaP5EXP2SfYCW1nQHoMO4qmv/IV4lAk5XnSYmRKtkfX6q9u\n7PkGhq0EPU63V7FMdtYEGZvK+yrys6VAq9K0RYapPTPcTDwUd+6jbP/fTFyh\nd85Y4kVePrULfoB6/V8fK16dxqL1iQFG1FU70H72+BYCmKbFPFYmdkdTvBQ3\nLgtm\r\n=9tIv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEDPPaoKQiDom2gDup/buVvTgEqCDwNeVPvWo8PkVjfaAiEAj+qWTkFjvxHUaoBsn9sUAt0v2ujCFOzPzYehKgzMG1k="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.0-alpha.2_1574137378101_0.4643664596438273"},"_hasShrinkwrap":false},"0.1.0-alpha.3":{"name":"react-vue-like","version":"0.1.0-alpha.3","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"b471ce6a4fab023d39796c76ee9bc0f63523d7b4","readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.0-alpha.3","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-/9t+Yj0kCR/3CVi/1t/x3Unk7uijXd+2aCkOxN6uCD5n4R8aOPzMixRlWiJW/O2xw07FlgO34RvVPZT+klsJtA==","shasum":"c948ffd78ec23b6098e6bcb68d4671b8cff49fc8","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.0-alpha.3.tgz","fileCount":89,"unpackedSize":422814,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd07iCCRA9TVsSAnZWagAAdZQP/A7kOyDOY8wdw+8h6Pox\n62R7Rvzq3vUjT4YJkdbuVFHE+GYsONfkQSJb6U0AQDeoT3Ale3TbIErwycBD\nDSJyAkaYtD/1wzs9meF6AIVH9jeLeH5kzpnYxbAtbOUFpHmkOgB2qD2mYJ9w\n80EBi/8Rqh08/6drAk1UHE2YilLeDJ+GT4Abdw2snv3l8KEgMmPbLg6JE3Iq\nAry6CCE5sTcIhLKo9W/yMMNxhh4ash0LhPWAQEgaIm/k/a1RlnwMHkn5TSVr\nUfB9vQP9o80a8xq9jVVayF23r9JCssGAEFl84M+4qGDE5J6RWtI3KpfZWR4y\nSYY13/gZjXwlyTewBrG+C8YRIc8/U3E5D4HjbplxSrULlamlXTS8k1bJa71e\nhLrdUl2Cf3RyUqhaPS1uz1p5nLVQ/dms9jHokjxc+gQDQYh0WFhwPKjhX/f/\npnxqnXfZ9Y0/GsGEDMX9QnwtUPgzg43DvVrjjRGjEo1aG8H+G2jU92Tiq2Be\n4KrtYFrd6wSH1Tp+0UAH7subvB8lJXJgJ4yukRilfOoj9zSIMSZ7cW7vvtJq\n5Qu8gytfadovRf9jnfPaV7dzU9GT90RzTi2hTt9+qvKQOyXtlqKfDAYK+SkC\nKVsthFBtKaEkh/htWy0zwHWOih9btRPou+ixJ6jZIp3tjJvwPJ2MKh7FWqzP\nzflz\r\n=NAqw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDOUt9Dt0ef3ulwNGuk4PyWS+W0y8EgiVq8TdcMwnZNnAiEAvCXkslHRo080RolIJ4o+/ZDL1GxDI8I59ibVpdolB14="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.0-alpha.3_1574156417416_0.2720431700837256"},"_hasShrinkwrap":false},"0.1.0-alpha.4":{"name":"react-vue-like","version":"0.1.0-alpha.4","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"f39669021d7bd4fe361c1f5fec8d3a86fe5eb649","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.0-alpha.4","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-stM9m6IUVxudRVzsldfpRK7NVp3vMbmLkjq/epqDmGDRIzLlbYQp8U/4jd2ocxUe1ExZYXiX3eztvVCUeI2RDg==","shasum":"1e947dbdc198b85f65b1f82c33da6e1156105fad","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.0-alpha.4.tgz","fileCount":89,"unpackedSize":423744,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1SHNCRA9TVsSAnZWagAASwEP/iJ/+aYMcNWoNaqEvU0R\n4tEwzDAppSDRSix1Gr54d//rUFXryEdw1CTY+6PfjRkvNN/rAVRl3QoJaqa6\nbRlQj1UaOresCkwLFeVfzc9/0TWjNmt2+mAX3cFNe33+F8qGHOfV8X/w4DsM\nSSVOJKzzy1hbNTDIPw5MqMuvGS9uRD3mvWA7vLByUnoqJut+1UoK1lWivN5M\n/tuPVb8FnuT9/ufPINC3yh/zQa4hC31sMKEG642RWdU6IzyjVIytTxg18UJR\nipzKmtn+qEXiSHKDG2urRJu3kMrt6AfSZ/Jn7eB4/IrezzAaajaKQ43Hnj5F\niwLYNYkOdlI1hI6bbeuwY2eDXNuzJiOFVYxHmAyMv4dOjGed28jbtKM7V8V5\nUhEY+Jleb3Ryn9huTIb/0jKuKQGTC48NwhQ92Gmel5+Gp6l7g9xtELbEs/J9\nZmU/mpf8o18hsS2TIUwEbgyrZSGrP/+sPuXecWKn9TVfcNKseqnXEivgy2CZ\nPRJyU+iu3nfdUBgNPSjnyjO5kAe310Pg7arXDS+bVhkIkonTlQHYUC0NXc2c\n+qZzNuctLmzg51B8uLzJQT4M9xrzDsaXX6mVnOmhiL1kIntP5b6yFpUPcEnl\ny/3luEYtlmf6Y0lnfIVPh5EjKl7Nvcz25cGnY+3Hc7stohRbjfZ16roFghrU\n+V8E\r\n=S42L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtXTi55YG4JEgsiWoE9sAQnTp+U3aTm9sFZoFqIKx9jwIhAII7DamrMWZOyQMf/Hb3b1ZlNlJtQcWyfRk9I9XNLC8M"}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.0-alpha.4_1574248909244_0.7334803741853713"},"_hasShrinkwrap":false},"0.1.0-alpha.5":{"name":"react-vue-like","version":"0.1.0-alpha.5","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"f39669021d7bd4fe361c1f5fec8d3a86fe5eb649","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.0-alpha.5","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-pIuQsqpDGTt54BEWxIkBB4cfRGKrllkeq5mD2pqKUbnfR2AAfe/ZCKKZtp67EylChMy9eKPWlXBcNtFvKq193g==","shasum":"b3eae0fc0aab923daf6f754ffba6f644b64548ec","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.0-alpha.5.tgz","fileCount":89,"unpackedSize":423965,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1jSwCRA9TVsSAnZWagAAv9AP/Rah3a3uBXiCWEutign+\nRfH5TOlgAiYn12W2ps64Oj4UUooc3mrRvVRH84yggC+hME8GCbBAIXIlF7fl\n2/jZWtBpuLwMinrA7CVxIi70F/3qAKU0tI+2RhqkbhnN2fAlJsxKTtd4SbsS\n2Q4/cq31hAUmH3HlGwZ/miMBmgUBCyzIyvYJOPyQUbKOwgn1/EX5Y4w8xFfF\n5usTZetmEdxB/mm6UDVhIvAkSJI7sM1gpbdN8RfD4op9Rl2Fb2zZy7C1wfRG\nLlj/B6aWpAJcsY35BIrEKzLJf3LgrQB1B004cMzLJiBlmc4BK5PMp4l4g3BA\nyeeVepNd1H8w4gmBVV+03nSYcjqAB5EGJCWJc1HpNHICMcHQwOxPuMrD6ead\nXhJPx/jX8LJCUaQiMICOa5495TEVovjvtq+YqvaUI/6l1l+LU2JTZEhhL9/V\nBR8rMC3sTiX2FcG74+nkJiwpbIPmyiGNk4T3okbbH5npYk/s8CU0tuG22x2P\nOnytPYZ3VcafepfNtSdg44Vwjbp1SCta/dL4gzOfOfsPMBSqQ/0KqdWl4c9K\ntotEeF1MjArXbdAuaTWpBaJhbwLG+cjNeDETXFsYx6/35Dj4kWqU+ebc0IYG\nZaFHaagyVtZJHUz365ceOor6z0DYd68QGugWxXGT0kH7GQCjB9acdi2WDcFu\njfh+\r\n=6aSF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDwiLdQB/1Ior55OezESEua6oXFJjLDVFYx8rIrhZ22NAiABJ88EyH/RX9zL3ozplNy/dpIev7MTDfGbHP6Cxwz9ZQ=="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.0-alpha.5_1574319279659_0.6717766884836556"},"_hasShrinkwrap":false},"0.1.0-alpha.6":{"name":"react-vue-like","version":"0.1.0-alpha.6","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"f39669021d7bd4fe361c1f5fec8d3a86fe5eb649","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.0-alpha.6","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-8bPAR0uXCm970AgeUUFvHSHoqLOg0ggFAXFifLBTNREiXc6V9OBI3FLqFCWDiyUtDTHoud6IyMhjfvucLBHWAQ==","shasum":"3c5017b355d2fd39da7350d63ccc64c7f3278811","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.0-alpha.6.tgz","fileCount":89,"unpackedSize":424098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1jtVCRA9TVsSAnZWagAA9HEP/Az3Ed+A4OrrrySUxjia\nDHGu2uuNuLJrZgNtyKyqqrNap6X2xI0NPYOQ/woxTa7wZa9LnMyxHQ+B0c/w\nPTr2dSXPtulMLAJmEReEI7JemnjA4b64sAdm7iVnU6dAxAEguEhfJVOv5pXf\n9p9cyhweVT21as9D7mCLC2uGo+MS2Wn0IUORcwNRvJVR1fFX1fmi/3qGByZ2\npZd1moai1OqNv3MbDSondZuowuVhBNM+i/v7o7JZihYEGgOKDFCH+TJ6I44P\nwE4JmDj4PrPYq9tf0hGaU551J6mEqmSlUjkAZxRIQ2cUnryjPWOI/5KLqOMF\npBepPDcpsgvmTsj0u6tLhNNF4oYnZDJt1TFou3UozPV4HDSF/N+ySWYFwh20\n0BoT64h8y7VS6lPbwjRb8qODTZ9BwhWf6UYhZvpC7Pnfuyj+I21u/AaFBeyN\nG7w9qzD+/hAG54drBO9ZWDH+5/zHqz8cCkdPCK54Qi07EbO60kTQOMKHCGXS\nHl1qdnftBc/h2vWH1Gqre92eLNBNOcqmWaaCgkQK9Fsee89h0QoutCA9ynvX\nWiizBDBck4mc9oDdWp51Xd0PciFQaCgGOB3srbGSXPKXo0vR+efWXkK+e4sd\nBY8n2yugd67nhFJCbVv+oqodFDq9/mz8IWZ3OQEWnYcWDQ5RJPaM3TZ1k9/9\nIObF\r\n=j//r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEFHvqu9VJ8EIBZHFAgZ6Fg4tkaC77nZfzt1aWbEw9BjAiEA12DO3tyke3rNC4bNj507OxcG055StRkGz/vkuYt6crY="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.0-alpha.6_1574320981473_0.5578761059197406"},"_hasShrinkwrap":false},"0.1.0-alpha.7":{"name":"react-vue-like","version":"0.1.0-alpha.7","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"e391c93844691ad65c33132a22cdeb2ec56b7138","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.0-alpha.7","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-OweR0mF2pbUYV/74VL3iogvlc8u9GSo1KqIEbSCHEUZHPwVa8GRhb/OJ8srTJvWlw6xhbP0Zv3Z+75q0MypHhA==","shasum":"e8a7893c4af3632bc0ec79742d449605e3029364","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.0-alpha.7.tgz","fileCount":89,"unpackedSize":424098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1j2QCRA9TVsSAnZWagAAbIMP/RQBdUjJ/FatqkF7c5X+\nhW0wIIBI/g0+70+BSsVUA+shHvxwppG7JZA6X3SPBtSsJbRhL3Z8jz0LHlsI\np8LrWrZLMt1GHRtofbWUNYZJap7kckQgWQd1MdHQu9+S9S6ZnKoKPkmnV7+4\ngaeR+ZozXTD5AT4nySdMEZU0jkWrSeSuq47jHWvc5vU+eos8fUCDjcTneIPQ\n6TB461AtKCZS08F1T3mAjaoy44/RvBFDzvMiO5KjAc7PB8nFVyHvfMCg8T4u\n5XKVBIMRhPFYDA4iVrmo2Y/+v1t1wWf7dexBO+m2sFQ0w4UPA6KaS1TPdnHJ\neHLtGLm4vL2zv05K78grE7bBU83YWW/MTB64FDvZKGkq63TC8WLCe1HmfKqw\nEzms8Z1pR3aYUxPqk2PJco8F9r8yfEh4ynmvNnOLtY2178Gm/NGff8O8dA9g\nr/7pB0dJwLVkiAzQjjDGf8nUe/aeIVUVy/8cT7rr8uv/M4ormM487NERcDPB\nQAktDaA3BDnaGjIY6wQE9Ah9xYZ8imh0NzS5DdGapW8SehB4vVKc/HSML1tW\nJB0FW1ta8xtop8i87LUY9uPk/RL2W4S341YmrZt81i0cbqIDxnPrDL3Ls6SN\n3X2UyvsbZFdb7vG5/7HPheksR/hezEZVyqWFlJ0bIwyluVQmpUC98q3ZVovd\nGkQ3\r\n=8QQ8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAnQlDx27zSCfdghuRXVpk2iJ90DXsXnrxhvoYbA9CoZAiEA5v0QOakpVftbSJqzbLzH3PTTANeq+L94ahMP5EnTz18="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.0-alpha.7_1574321552537_0.0897754268005011"},"_hasShrinkwrap":false},"0.1.0":{"name":"react-vue-like","version":"0.1.0","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"e391c93844691ad65c33132a22cdeb2ec56b7138","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.0","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-YvJWSWhbeMMeLOjS8KocAcPnZEAL/MhtZyguHihJEtWdXs9pShv9cFrZL/XRBYDYYnqfGn5/ECelAdmcaUymSg==","shasum":"de848b4813d05d71a0e9b6d52d986db6bf4d9a70","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.0.tgz","fileCount":89,"unpackedSize":424090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1j3WCRA9TVsSAnZWagAAuukP/2IEJGVUeQ66KWkYVtnI\nSrD1eIq4sa/RSEdn4EapI69BYLxJsMGamtfp3PM5qec2mctNjYUqWNm3Ijto\nlCy48+qJXfS3gciw+UFtEl3J4IKfJhDqBWpXexVE4bnRDo806/jBaITbVHxy\nLpra/BYPFzUCobITOE4oZuaVELzQyKC7kZmSft41/JADlQ7D6TlXEpMoDZEO\np3SSdmG6QTbyHbcKXsv7rKyMz3fVDS2tk2b00/jkSrLDxw1h2L8peymxWoEr\nPEwB3xrDG59h1OU573d+Gf/DpWoeCyJYseilTyXN8gN4a4cEcA9fDUEcZOQf\nOTCeLAB35p1Fg1krxbMSg9C/DCu7udnkWdzdk8PBnULCe6riIoqqsc+p4Y/d\nJmT81k/Ao1jIcC+4Ws/1392ADLpauCKsTHuds/+pUWEzXM6tyxFVyYE4f5vs\n2iPCqCNuGyHNF9T4Xeevtp0W2lKivLxTIGhnRZ5g0jrpEh56H9exe7EUp/VK\n7DfgId8S1LYJUKCBogKPHnjnZOIo2n82l3HvW5EcxCxYUmnvR6Wr+ODKpqjV\njyeX6Gz1XuC2tAney1jKiSmPg6U9eibMAjGifgH7N3FKg02Z4dgRVztyjJN8\ndVUWkDZNqWBzWkvE9yH7AJFThL6tY4TA6RM7AEHIbAnF6BJBxRljTo/COl62\nybPw\r\n=GQ0F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1BqEv+Es7bDL2DUv5Z5+mieAjS/5ClsCEw1GBiKCTMAIhALEr9oV7QJpokOOKrpKQye/0aC/Ea2OR7PO4Hf+dyaU7"}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.0_1574321621423_0.29329284579501946"},"_hasShrinkwrap":false},"0.1.1":{"name":"react-vue-like","version":"0.1.1","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"e391c93844691ad65c33132a22cdeb2ec56b7138","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.1","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-uv0S/jQOgfmQgwFmfSdmM3lj/zvBQccpDs7eSvB9+/voyT9M0YyOxrG4up7uEwhmkwVgt50qcUzBO8tNhKZC6Q==","shasum":"f6a45e67c9dbf86b230e90750b798531ace968c8","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.1.tgz","fileCount":89,"unpackedSize":424090,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1kyaCRA9TVsSAnZWagAADVoQAJAdZBP4u+r/lqZI4zI4\nnmYQsvX872DsUjuZQG3OiV515tI4TxPABsCV7lQXU8MSkuwYno0WvokmQKSp\nRSFBrrXIbzPYMD2KCjkVKPpHUll8EaKVWZZ3PIMrDGkRRwweAlUV/lZeT99y\nf6Nq7DEQrzp7J3enqM2yiUWc62MQV+I0aiWPsivY5c/Zh5FdGKU9hJnLs2KQ\nW3ktSUHfNChAMOj/xT1EG34x0xevaqVy8/81TkmJbC1lnJnCzFNLQ0MqKxt7\np9BqahgEFkGpSLN3XunZvXoH8i4IWQocQ4xGRw4ZZT3U9JQa6sIkCAeqn54O\nRjT5XWs0P0X94zTld8gHZUDBmJFrel3cD0r/y0OKK4rbghZCMKLy9pgvN+TT\nFz3bsXlzzFp6PUFYsXaNpVe9hrW5NcM8K5rwcU10aSs5ceT00ExiF/8+bGTx\noBozWRk1iRWyKEwhStLy5R6zn3v8WOS/QPaiOblkm0Vt6J0htsmnlyKdMLXX\nv4ZBmMucQ7BQGennZlBqPoztc/9YvvtWmvM2bRnSHIHGh7ielgWXAihsoNv9\nzQZalVZ0X+w41DprD0kruTAIepi7lRxSSgzi1RooIOD54jmjIxGBt+ogRtGt\nxTEq7FrYoZSUcYW40rTKqS1W5OePcmX7yol1KnZwmZHrQ3+f8wrMN5rNdzZr\n98Ka\r\n=GAWt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEMAZrItMVrujjYMnXwarhSxiUal15KVAbi8SxDsxih6AiAHk16TSUtk4rQhr/Cdb9vZvdcEAsbcjHTYksZY88GhYg=="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.1_1574325401797_0.7475121944266194"},"_hasShrinkwrap":false},"0.1.2":{"name":"react-vue-like","version":"0.1.2","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"e391c93844691ad65c33132a22cdeb2ec56b7138","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.2","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-xngeR7zc86LOiqGGw2saqmQqZvdkzGC/mMOVIzI1AmlVdHJ5CYaTJlcdIouoKtDM7mO22bFYgA0WJdySDqU3aQ==","shasum":"3adab30fad671e193cde612c2c357b1eef13faa4","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.2.tgz","fileCount":89,"unpackedSize":424257,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd16kbCRA9TVsSAnZWagAAwUAP/3qKpv+8Uu/PEsPqv9VF\ngh4siD6x5zO0nfcZqmW6Osq7+V1p6k1b9RBAzNEbfka96COX6+YB/8JkCw1b\nudcBGLUyETvFj0etJjyJKsAtfS+4+5i2HL0FXOq93l2uMUMoxPiGxrJgKYGO\nmsHCbWhqzXrfzKt2WRhfW9wONYpzSBUQZeJ5zbRTX8f4hRwDH2tJp8E+Bumt\nY1Hzg5B426FqmgSi/7pwgJPlgrt/Oz+93RlcEQCytlqZ9Ien/29efhgsmd+n\n68TB1o79n886iJi688RZLRQaN6P7ugzG1uWLbnknMl3kR9OPxOz4hvftNPbS\nGSoNwN7g67ACqJ/FoVeRjyzg5JRWr2AYiBWTzXOi+VgMQ1Jew/BXFY4jFGMM\nhUQn0VXVcn4ubJM/LNbdkS4oz+pGMyu7VfDULTwzfCimYwUCamG6bneDrfUC\nXudlsWK0/yovedXsZd9MHBWRqzlg543nA9pahR1yb0l1FhpdjtIXv0QB6sX+\nWSMjZWGOb+hj+xF6QCOtiKdLUM6RWfke7FJiynFStXnWJn4YlN7yBWCMafUW\n81k9i4vLWf+Y8o8x5acHYhZPsS4VtkzzPninKrqvU7WoQeCbs+ZudrfVhApR\nW8pAYlfI1uufzi+lHYtXVobfpDA8riVaXVLTfKm1Fy9qrKkTHF/kEi+eYW6t\n4RiY\r\n=m9NO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDi18HnIShpEqtpffEJnNWWMaJ6ToS60KORVxX4CAADdAiEAnrdLThkFY43DNny4nDiRhmpRQgnPe4pfd2QyUJqSWxQ="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.2_1574414619058_0.5879892100595825"},"_hasShrinkwrap":false},"0.1.3-alpha.0":{"name":"react-vue-like","version":"0.1.3-alpha.0","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"33e050f48700a72f03721ffbfa3b385ad9d0f2d8","readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.3-alpha.0","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-7a8M/m49qLlgdmqIoLO37qdXzpXX2rk0kOUAyfZibcSIn5/8rPXZU7rY9HhL2TF+8RMkIMvICdkRWKprrbEF2g==","shasum":"bc45144f728f0330c14ef39f3d9304c2eeeddb98","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.3-alpha.0.tgz","fileCount":89,"unpackedSize":424840,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd2KA2CRA9TVsSAnZWagAA3HcP/0CS35Lydh6ed5zE6nFi\nfxsSr9QUkJ69Adc4JQXWX8lPx9qjYEMeXK7xN1CfVX9OwLKv+XDqr/ZYluRX\n05IKnXXv3kpDcEFQb0tDAyXJkdKklPH/SV8q4/JMBx50tF0Y1JmlTsRAYJGn\n9Inu0mQsGmCP27zQ/MCf3VoaGhZobY3tnot7blD1gQQWUqAmf+kA1pRiHafS\niqhjV5WRDQupkcbsOzMGf+fSF1PtyhITc9xof08l8V3m7zrtUaICeudx7iIc\nCZc91LmIJ1Wir1TCJFcHJMMbADXbwEyjEAZLGhLkvIOTLQiw/8gWN8f13qzr\n4tL4a/yjK8fu4B1k+6sJAxK0KgdPmu4t15TZsQ3E9kXoCEpsIGW9rcMaWv6z\ndPPZ/ksRffVLMfhYQM1pl1BSw7BVaVzSwbj7DWEq7mN+WE2bz54BAvNmpYuJ\n2eOGqa277wFlEpaQq7uE0R88W+LWBucTDxLn3QekwMXDGgGVaGGVtabxU+nj\nsRtCEm6nspeMfPWvyxooJTk1PR5cWggJtujaTHJD86aZlrqDc03I4ubcwyYR\nXsKZh3CldRtSsY6GKkhlQAlXIMVj8GjbKPkIFOoWbo2BMXreMWieCIlSnmrS\n3gEG6aXlkjbW1YmRYqrYKKjtxPPqESYk/AvrFq1ED8ANSs4mWNfg7G2YlX+c\ngjYI\r\n=OPGV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvqnKguX1KqoU7Y+y8Q8OOpZw/La6mfNVKI734MpGQOgIgAbaM7OCk/j0MKTTN88+mwPqPyDXmteGkYXz7rFxKRro="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.3-alpha.0_1574477877897_0.9816656816765543"},"_hasShrinkwrap":false},"0.1.3-alpha.1":{"name":"react-vue-like","version":"0.1.3-alpha.1","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"33e050f48700a72f03721ffbfa3b385ad9d0f2d8","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.3-alpha.1","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-hS9ocHKN1dPaYqCg7CxQvdrfZKtDrIWw6pIN5q8WGKlr/dJW8wbk0MEhhSI9CAiDVyh7xaH1VcmYcNkCfRauUA==","shasum":"d11946c7cd389e203a29ca20b0167677d4c4fee5","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.3-alpha.1.tgz","fileCount":89,"unpackedSize":424963,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd24YaCRA9TVsSAnZWagAAYh8P/2RRGu3dA9grcc4rRB4c\nkw2uW1sRAdqicPnSr4eMvWEs/q8YlEeMHnvRswe/xG8j6CVX2fr5HEMq9/oD\n6ZZ/w+j7M0sQKXsJrgDRHHuK2qm3pAYyCeW7XIY2zU8jJ/Wv3xwxmhBn4Aob\nw1k9NvRtulVaUd3ZHN6xQ7GnYIhmdOXIZrPRagg6ReIrwFq9Iza1oYtBDRb/\nNAL3QbaujTsG0UI07LBE91nio3TBfMtJEjPug9OI1UW8l+cWF9xxmot4T/Tc\niUqdCE9Lg23kX1z8XJxqW2+qtwsM08UdoP/nQ28mQs3UgJuKWZvXJkGR7bUi\npjwMwKXaWBta+z3HFrYfxKnG/i6cizC52bVtHbPksBqJ9b6X4zdk9vP6XBnH\nS/1gF8g11BHmg8d6L+NxWFtQ85OK2G0f5tm/TsaISwWy82dwmSS9UMflmUNv\n95t4PEC0w4PhCv+Exwy4AU2U0qwtR4zq73/l4WM0UIpgJo8TFhVpU4GowhqS\noDyqSQ5WVSuAC6BKzKND93eeh7LsEHTMwCxwDQj7XM+CdyMBp+QJBpxBkkk2\nODXlAqcE4BFFnSnvnuTMYjy7V1vkgqwzhm3g1fqF10twWOaB23Zcm0DDm2JD\n7+FapaTlGgEjsBlPpnorq39gXAxzZFL9wdkvsrjmyCnGGVQRZCqlmcpOut09\nn/a5\r\n=1YyL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCig4/8Kk5G+7CEj2c670X1Kj1CaGHGEPiMg8/m+cDo+AIhAK3qioY565iWiW3ANbSJcFkDZ+YWwRqoHUc3ksK/82OQ"}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.3-alpha.1_1574667801722_0.8130190183617274"},"_hasShrinkwrap":false},"0.1.3-alpha.2":{"name":"react-vue-like","version":"0.1.3-alpha.2","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"33e050f48700a72f03721ffbfa3b385ad9d0f2d8","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.3-alpha.2","_nodeVersion":"10.16.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-52OJsqPrw76oDKwzNoJ/7eJ7KjkJo45CnXkHkqA8lysnIZwsKYhjt94G7GbC0whi0FY1CueXWJASzy6KaNnxGQ==","shasum":"46b1ab8539c2023d540428f0615bce5352df9448","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.3-alpha.2.tgz","fileCount":89,"unpackedSize":425047,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3lQKCRA9TVsSAnZWagAATlIP+wZsgp3v/U7MPYLduGkK\n1ZiLg24Md28H5IWIIAlgJ8u7UD96TtW0yYLX71OJu9fobyX4/W61wPvBlVbM\nGDOzDGKz29EEsH0QBOyE5F9ulmqsDHsgeoGahWtq9Sth0SYSyQWCtmQ4TtIe\ny3eRMfe6KrhnQ3DOwYaonw+asu2CHmUN/QsNE2aFSE4bZ4Mrhf5GVt9raer3\nI1j6k0ruxXekZstqNUfBhfYBW1VDhf7v+xhiyOswEGLltVQZ3lLdGLP+QxBZ\n+mb8Wjjl680iBBkhZAzd5+jvn2k0TyeieNdI9IM4iL4CwzTzZyl7paCuzZ+J\nqLji+41PwqEyP/nGsjYWaWUkgdA6Fn5ohTsIrm4ZCPi0dHxHkvqh7ZK0P5np\nGX4SQu9oKSK9VKnHwksaSSJybO2C5yhkoiffA54uboO1V4iD1xWttvo9U4Hf\nuuDNx7LKDI+zDaRKcXTqNCbQMhEPUlgx4zPb4djgunw3tYzjT0oYyOfzjYY/\nVF0LPVy2shk/gadts2E/G4PZ3zC2fMdjyubm1sZLJN9/dpGWuGNGhawPQq3V\nvCtpuN02cJa/J6NbSXrEFn6ydC7bT6Vxecbpcm1vpgw9Ao5+iZL9As/UcdLd\nlv0yk5UYCxYTt7FpopcV9nHzPptZfp7EQ5idvRIJ1X9ggYbCQ8mEehsS1CcZ\nKOBu\r\n=mJFY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGH6/fyIwZ+ezON5iqpJZEfHnwRnpERHhJPCxno90ejDAiEA0PHJUCFpMvIDb808Ef2w5KyKY6gsk1as5BMt32U3Yno="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.3-alpha.2_1574851594129_0.9661734793227623"},"_hasShrinkwrap":false},"0.1.3-alpha.3":{"name":"react-vue-like","version":"0.1.3-alpha.3","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"895fa18ee45150cf27da63fb6fa42329512a72f2","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.3-alpha.3","_nodeVersion":"12.13.1","_npmVersion":"6.12.1","dist":{"integrity":"sha512-BpOayrh+1GMdO94ApK2NvToPHtmXXKT/U2ab2Ooj/3ERMuo+9aO/YhGsUMcXo3OgXs3+00VSCM6EZ1U/ugRKYA==","shasum":"336f54f8f2aafc2f83872cfc69ea90db8617bb9b","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.3-alpha.3.tgz","fileCount":91,"unpackedSize":429894,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd4gikCRA9TVsSAnZWagAAwQoP/0HaIX0G2xhCw5dykVmD\nwXwVR/q0BMxXJzBzk/yZ0lYJz5Te79f65dJLEgCchEPoC4SDq3gozF1squW/\nXbLCrSD6MVfas/3OZl/9gfc0dAgybmVRzFefQXq259O8pWbKc2xKeOOtQma8\nFe9nuvRoA7ztPz9YkzJbwl5D2CCbyf/HQ9bX42B+iM/ZN4PWywsH56Cf/ypA\n68EOyABgDPtPUx2mNJHYCCcH2LZ/2tQFS0ux1slUzUQL+8JeQ52y1R6zBo7v\ne0JWW3x52+dJEMYr5Jxj6g0w7p/xABUUU2Sg83OU+uzIu7PF/Lw2XmoMdgQQ\n5FuWSxJxu0PIQheoQO/BFvOBXhaew8gQJeRIRn2R2Ngx+vH3zqTv//scOYXw\n94owHFsspk0WT3iREiwDTRtKy/iTUqFpa5Q3gdk9p80jzipKSRNiUzF8kiIy\n/IKspYKAJ2Q6DELbfamo/Ig7ccAz5qutLde2ikuxEBOIheGgqE++Gh9Uz9hm\nkGFtm4K1WqSZt0ogHzCuYAp55MDQb0fH17qtEBUYBjQIq4TFNGnTbB87ztmf\nQqO7B9/i/HpcK+nNELTd26wDEMxxCvu2n2LNN08sUl/8knKZHIzlgTxw7bmc\nm79uu+RPbMzcuZDkM+zbmsam2wR3le1eGhYU2LRadmKB4L1V44RuGg2dewSR\nRvWN\r\n=nkx3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDGtnA4Dhur2Ab942MRXTUGJlZHYJWMWqtmZtxM1ziPIgIgUvG5c/FHbC0v8hdq4hldBZAtXCYZNkz3R6ryJiG56Fo="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.3-alpha.3_1575094435588_0.6287953509437441"},"_hasShrinkwrap":false},"0.1.3":{"name":"react-vue-like","version":"0.1.3","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"c5cec3eaa5bbf8be9ee2429f2b2a103559022b68","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.3","_nodeVersion":"12.13.1","_npmVersion":"6.12.1","dist":{"integrity":"sha512-YwyY0EZt+UbFcP1adaFYX0Y545ZZPEK1vO40rxmSGWgsGMFHMinar2q47Us7pzQnhLOrRUMBV7riA/+I7EPnYg==","shasum":"d581f3215aee4c97fd4560b3dbb6fd281b6ad2d5","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.3.tgz","fileCount":91,"unpackedSize":432624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd4hG+CRA9TVsSAnZWagAAOy8QAItOewYW/z5W9E4c8jxS\nq4Tj+JFJ0C98g290FzyHSysgM8cD7znLwouH5F1e4YCc5fzLB458T0fp/DEx\nrz2WgJeGVdKwuXtIO2hLCFjxSQFC92y7Jz2SUXyt4a2ZDnJyKq7cZapYEwi9\n5zdLE/OjCoUbyfkklxtGlSNLmTT2e0l+IsGwxfRZiZ2vbIWyMRWXzCa/OSzS\nJ3hO2i+NwV54MpNIUfeFG+knelMNtN8ElBCky+ZglFm27zAriN+zYdM3FMa7\nB8efwji9lkk5okKVqUS9qyiMmroo3sBONqxXSbwKpo0ousHy+EoAunCgs/N7\nirzLyFR1j/gClPUYQI1GM92OxYFW+cppOC9iAkmzkDagHbhQeMJ8v2hSdo0N\nUip0iwGtlO9hdqJz7IwlxyoQQtR1zV7v3e9DRaDs9iq3JqOKpDeni0DHAHpb\nY5RmDo0im85jIZNk0TBLPKAY1ifAuK+wRcnfH/mxY0DxOt+h2SiIayQAK+Vu\nP+bGWwrele9WU1pcuW5/LJcyFmZcwsvM5lc90te3X4hV+5jLI8+svQ17Uajg\nn8GJnySD1KhhRzD09jXC3i524SPduKWcwkPlowYFpwi9PRzK5E7tZfARTSyK\nUluC40ILahrPaL65AF5sxcpQ0iUzFmna4WBdcKXaDdImaYxt8y/R45ApVOxL\np6nW\r\n=MvHz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID+0927s/uaFa5nDXbV0+pRGJl949CHr4/gm0yjvLFwIAiBUgUnoklO+ttfERe5wTEyRVIFoScVursUgz6F8QNu+pg=="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.3_1575096765820_0.2022135211889189"},"_hasShrinkwrap":false},"0.1.4-alpha.0":{"name":"react-vue-like","version":"0.1.4-alpha.0","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n:global .aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n.aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"c5cec3eaa5bbf8be9ee2429f2b2a103559022b68","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.4-alpha.0","_nodeVersion":"12.13.1","_npmVersion":"6.12.1","dist":{"integrity":"sha512-9u4hsWRPdhoP+x7VGu5X2CeeAjLy5rRflplPqoSrKnz+B7XlfyXXM3g2RruNPSFDJ+BC4hsSHeOH5lnh+RfMMA==","shasum":"0058adede94b96143b496ba83728533eaadf07bf","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.4-alpha.0.tgz","fileCount":91,"unpackedSize":432630,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5Ms6CRA9TVsSAnZWagAAsrAP+gOQA5HRQD0ebaW8EqLE\nASRJZ6420BYP4KWIzA7d3gvdjQfLll6MgIH0aE1wQOKhEtRymlQT2kka32PK\nv5Dlq19FUif9lomAe7Z9XAd3LyLFTf1r6NdKLDH0nh/FF5WPcqWb8gUqXvmB\nTeSI1b0q5Ta8CBEawJ1QMidzIN3plmdf/oZ3AF26o5zfOEb97djXakN1H64o\nsQxzOaPf99cGlBZSBEGA4G29QYZkRQQgLX0bWJqn+VEZUypUzXEfkqezn2xG\nVEbtE+BYhA6FkQCzWvfKz/K6WPy01/N0auzP3W+evLc/W9KsfZKezgdnGuwD\nKAplW//8UhlQj5MDcEJMe8Xr5XCvKBNJ02l9TKgzsxDGgEyujRg/CcY8nPdC\n2sFkdtHfwqeIlr3Bei8QjmqE56SO50ZTrqcJnoc157wCqkhhDW1+b/pAl8uX\ngoOzKPUQOVhnwAbBCFGFwo9tGYqck8BVExAHFr4xpmonveI2zMTwnmd2byzH\n6In/ltt2W+uI7033iRCkJFAIwGp/gWNxPNKpVe2E2XD63S0db5wk7vGOE7Mr\n9eeOT+45wScR3LTMlt+3tKpeVBrHL7ZAWbzt/cZ7V7Qf4/Dig67+wqShZHbS\nWMlmGTF319UYDeGwnaZdCCTMpiVxTbzdCiQr4dxgi2pXQafdAsr1tKpvG2Th\nlEMi\r\n=JB1G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGISOIAkcJ9vmcdyNTA0g8qPeEWWczxs7Q6MLUxFNuSgAiAwP8oMC0dx2WgaJuILSNTP+ZDOU04u/BXy5qA8WO6XsA=="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.4-alpha.0_1575275322405_0.3519101299812175"},"_hasShrinkwrap":false},"0.1.4-alpha.1":{"name":"react-vue-like","version":"0.1.4-alpha.1","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n:global .aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n.aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"a5241169331af6ec1e8ffae33485b0e21518fcb9","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.4-alpha.1","_nodeVersion":"12.13.1","_npmVersion":"6.12.1","dist":{"integrity":"sha512-kbjHXV+sAkL8lavWJBCHy62fh2EUmzFCpUT34lm+xFq5m4jiQiRAmzcLwU3gh7SSdbQm0qxwVh1RN6860k49cw==","shasum":"3806ecfa9a50348ef08cac4a99477561e4573461","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.4-alpha.1.tgz","fileCount":91,"unpackedSize":432922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd53k+CRA9TVsSAnZWagAAjncP/1j2mGKodAXbwPn3eE6L\nd8Yb0Q21iOFiFpaZksztKK4gv4IrsW3YfgI/D2Da7Rr5bQvHabK//psWxkLI\n6utnVO6mBKM3hdFGwZelr4kn2/z5iJKYvjw+DNTRxE//O2B+LEhQmsdjQ8ga\n5K6pBgXYdg7wXlPj/25gZ+bdyjLOYlLl/3Lo5QJZIENYM6F+bh4zhOA6W9o5\nuM84eEbKrSgxYgJ81d/9/E/Gm32e6BIWiVVyMs+jHhIKogh2gucVKpeeI52K\nS13id1Miza1hrA6PAnwR7TagDHhiLuzd17SUto5NYxzOoM3r/MIjSmO6pjKx\nNGK6e/iPVWSZ3Nt/BBpC2Ve1YJ2fnkDbpi62KMEa7s3A8N80MwpmTHtgHVw/\nJOiy2vlou3V3kyPE25ebFCkj1EJCB+74n9ro9U/B/94NmH+CEn7tVi/N+gVc\nD3GuxwPJ6VOF6Gq2sjiCiWJvp2QP4eiLhlv8Afyv1gwGTjlQC1guk20+wM4l\ncRyjmEM9kZoT+hoQBttDBdKdpICEh/P5ch0Sr6sW3bu0F+/Dfus8KoUhrMpQ\n9UWGSlCVUrK8ioTgdKys3PhfiMTdCn2uz/MH76blLgAFoJjWcUncCGcjLRsW\nv+4qZ7a692Wuc8ssafL8LYjI06m6jicG51TBmWOgWVjz9KqT4Go4SOWFtj5f\nY4fV\r\n=wNE3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkpQZOsbKPsyEQV0l/EsAA0mrZSUM3/8OKezKtLrgkNAIhALRT4iSbyH1rgmKYzDEilcdqsy9rAhn3cw1MSdZlbbfG"}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.4-alpha.1_1575450941442_0.20078882294019706"},"_hasShrinkwrap":false},"0.1.4-alpha.2":{"name":"react-vue-like","version":"0.1.4-alpha.2","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n:global .aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n.aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"be126e55f305fae5e26fd52ecbcebda95c5b84de","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.4-alpha.2","_nodeVersion":"12.13.1","_npmVersion":"6.12.1","dist":{"integrity":"sha512-+JLT4h1qrNcPQQZjCQGvpBdGDXiLg05HFLPRyBMumz8qNIiE4rAZhlrqiSRAc+g4xQjEhUYQM4Z/35otlFcuog==","shasum":"5e822c39fd07b7858fbf4f0b4094cc32fa5ea95e","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.4-alpha.2.tgz","fileCount":91,"unpackedSize":433786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6ezXCRA9TVsSAnZWagAAvD0QAJPFyhwIEL/agSLnNo/w\nqRb5si5EK4/AmF5D5uPxcgY885ddMCexo+kQ8T7ZdLQTEEkpV8xRvlp/n2zT\nOZm4mj55FKhvHuIUjtZx+5/tyZM66ubn/4fMpvdo6mUm+Yi2iNr8OcCzpENA\nb4l7XGxx3FV56CArTFfPkIwQMaXvw8sBFOeu5fNpv3mq95KCvhThA1Xqp635\nKUjHLnASKzp8FZ/jL4dU8tRO7bqcnIGqsnSM8ERvZIFhwDHiHVaojhlQ158P\nVBB9zeSgeSPG2xtAuaJ0QtvyhArX0Jjskj4g7nqhrJAy3DbfysYEjKMhci3d\nbE3tCVK94/Qt8dyI+ExqncV+QlsZbKzJjigrrclZowVvIiVAchIvbFw6D1dr\n/RDJdbBzE/6c42SbnO2J5XtA5n6reqFVQCAQDYDa8o+abf8RcOuVP99IkB6r\nAPqofZTQZ698Hr6e+IEWBSridI38Vt1l4mkwfVaZk0SZ54k6uAh9mQna9RxE\nBmfCyw14tGu/vtR3MkOuJc5m71UYE/XKAyqRs8wVGQqYLlrWCvyqLRKXOzs5\nvJ75rfb4SKmFySP4f9HU2JAL3lQn3suMtOsKPvTqyPkPsT08+CJwG9/YmvWj\nAyWBMkk5tMbTipCrcsd0uHqPv7ve3KJrasa5ZSsFqzmcls67UWu8QNtG1+Oy\njyFa\r\n=woGb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBzZM3yCPrH6Um/q1leLMoQbzNBwfUsWHQJv/5qZdPOIAiEA03aOaUc8i3rAFWVOv3iOmz6j6nBIJPbGSEywtm1WNwM="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.4-alpha.2_1575611606995_0.38993143484476667"},"_hasShrinkwrap":false},"0.1.4-alpha.3":{"name":"react-vue-like","version":"0.1.4-alpha.3","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n:global .aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n.aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"948e18074c1a42c84ee7d9d127203ee8a5d9a8e1","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.4-alpha.3","_nodeVersion":"12.13.1","_npmVersion":"6.12.1","dist":{"integrity":"sha512-WpSRCWmaXKEwymcZvHx7UwdPNEhmgjcZPPudZ+SQG2rVIfSBbddrUc5kZG4FedCOvUF10jQhVKPLvGwTSs2p9A==","shasum":"7f0a2bafa27b8f90e641e26ff18b45a4baf4bd18","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.4-alpha.3.tgz","fileCount":79,"unpackedSize":367722,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+gRPCRA9TVsSAnZWagAAjBcP/itwYQht5Ph8OAD+XDeK\nPUBlefyOhLTVuczBGlwXWyS1hLqWp0W1cCBmKxB1hwm4sQVeI7cfgjKn20lM\nWwEIm3F/K4OL68MZNgim/B44aaJ96R4H556ry5YQ7d228SACQDzzEzrdWIRK\nTXxNECMNpQMw1bMLc+KUSQ0OPKIhZ7ud0mLKB9NwyjvT8/9ZEkCk6Yx3eKos\nw+xY4S/cuaXD4t9q9AriXZNg7t8Bq/6SvJH+oJESllOga9PMf00G4X1WO0q4\nf+hDKFqqDLwphMRfzQHghSTd5NvLs0nEJvcC+i+J/MDUJ3BLX+Uo0yrijq77\nfTh5BspXpEFnpUs1d+Tg10iyz9YPpSv2SXU3xW08AUu8spvy3KxaSF0rUXM7\nz+8z43DV9AHS7va8sUTVqBlZX2jSwvWu6TpMwL2WEqtCKJ34S25x740UXqFV\nl/5O2MfuwyTGjvim7eFUFMVPxPdo06LKORJX+zh9yqqYSm0caA+Mf0FCRH8p\n3iQ1lpYx143evc0Th0dtODuvXOu4KhaEvWJ60V6QMNwMG4+y2TkMbLcFBTI4\nxqzDXUNT0qW0pAjNqnK8VxBXk3sM0SrcSBETCrYaBPrdtJUcWUpnm1rVMOwH\n5dXMEgZboGZlrovuisnthQbvblis6Kw26Bwp7aZZNl4UUtD+Sju56dVQSwIK\nPKvk\r\n=gQPQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDaEPopuWB0BXHCaVzyxnduonbLOfyF56OuPsQ/3n+4QwIhAPagZLOKB0wVDUr9iRSnQDxQwGGImoggwD8WmNTvSeWm"}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.4-alpha.3_1576666191331_0.03666162719255328"},"_hasShrinkwrap":false},"0.1.4-alpha.4":{"name":"react-vue-like","version":"0.1.4-alpha.4","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n:global .aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n.aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"02fda1b3f8cfe52904aedc70feefcfec3a65b584","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.4-alpha.4","_nodeVersion":"12.13.1","_npmVersion":"6.12.1","dist":{"integrity":"sha512-D2GBEqyo+H8KoyZBtP4OSYsrie0sh1T91p15IRlK/ZaPoN561bmXfwRdj4mQFiIVIDL/JeIR/OQHxC4QUsTmaw==","shasum":"07c51fada679821d105205da84b60b68497801b8","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.4-alpha.4.tgz","fileCount":77,"unpackedSize":299038,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBNFWCRA9TVsSAnZWagAAUTgQAIb3XmIgjxiSARby4n2x\nHQyl91eiqnF/YwLoHAq4iYP9+ffQqqacHiO3I3zs/Nouh9WhkiYHM4PnQHik\ns1vC6Ofej+/TqJAl12l89jjrhcsVoQxZDxseMiI1SIq58cUsO1oUHzTiyyfR\nL8h60tTPKe/QDnH1jmF0DuE2LuXxV6j0o8+tgt3u7OI+/ea8i/5eypSelb/E\ncaUxrtXNS4a5+Tn9IHPoxgKcdbNsZSVsXZq34/qMvXY0PlJNWyOuz1E5W4Yy\n8yJ5t/EgoiOOJVlo76w+XlXh/n7RYGwGnt6uO23IqEDGFIHVyzuCw56UfXhb\nPNcTjuBnb83TuPnuf6rmO88j/YG/DF7VoJdnhQDOEDX/8FXIqkDXj3uxDDci\nCU9L6nsRSrCAz3QcHSSO4X+7N8kUkjTZwPO8dRGx7sjnib4nUoo4/kDXnD16\nWpQdYAvZaIhzUR7lyaQOiax9ggMmMlIK8DlTsfsU9wDrREe3URAVMC64mG0A\nMkw1eBBDamrdL7O+/ID9jBNkkj6OiL+nKxUj7Clq1gaiu9oQtlPGckaDcYPV\nDfDIQUa0b+N5WJBsVG2WJE7FhfuSGfoBz0oeTxKQdHHqEdtT/z5wZjLl4QOs\nTvJHGdWngQ3QolXAIPCq2VmQnXsGiv1VrFzqfUumizk7Z63NZD5mI2esYRYg\nw63z\r\n=DWFb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAJrqQTAzMv5AR6cLRTCzibyLlnaI61i66a/e5rw4XwqAiEA12UCd5sO8w3F0fnzTrKbb9qnHsbDFzPlFRx8gFOlbUQ="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.4-alpha.4_1577374037680_0.339632276294876"},"_hasShrinkwrap":false},"0.1.4-alpha.5":{"name":"react-vue-like","version":"0.1.4-alpha.5","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n:global .aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n.aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"02fda1b3f8cfe52904aedc70feefcfec3a65b584","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.4-alpha.5","_nodeVersion":"12.13.1","_npmVersion":"6.12.1","dist":{"integrity":"sha512-3xHSuS1NceW9a+uAR72IE1MzRdT4smCSlap3DszxaQvWJ70Six4WOeU5QxV8ex6G5YTeE3xiUro0k4OcyfatGQ==","shasum":"0ae7495ec8b5a25204d9182ace20d25dd8a6e826","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.4-alpha.5.tgz","fileCount":77,"unpackedSize":299959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBZnaCRA9TVsSAnZWagAAS2cP/19tMm6RYVSpETqWZ6j6\nZBqBMSPpDYW/+KozTgYp1RWaKtLkdi2izBDc8T2IRMlh19T4bjCDk/3f+VSV\nam3M4SxNSgaztzCK0CunH2N4gKSk4QHrWYAgpXUXpBCQ7hQaWGvDp8HAz2jk\nNXatEiPGFqv7w/VN2Jbp7FwkI6OePlQXkrRJq4GygluE1brjyvFnYojq+Cco\nhZseMF/VwLZdxat5NxSmMJ5/fVHwY6I4+hz2IQYYJM/jckOVR6XD2BJw47ID\nk7sYaBMpbauqegpTKG9VRwyNVcBY1ph5R5ohPAWHGx3+QbYAivTMKzHLBNTD\npmfp+Aecv3rcoJ7cktfbnv9sJMK9GMVFBNR+TC23wcH10C9+bDfpq6h3YkdE\n8RQ9i+7r0cFCIKOK6IIucnHddVdwTeDusVvgvqX1WRLlmDv1L5OUMarbfZsl\nBR1MGj9SPgHYZ7niadBVq2FAkhLG+TaDF4qOhS0sObfRcc7GY1D8C0AmLnVq\n3TE+DpXNo0tsesY1TzOGeDzmIckwlCnP5F6CumZzw90/Ep1KVwzTSxwSqpdn\nhN11eY4a97eIgM3CGFEHE9CMd1xM6pcDXM2CMANNYkzSM2khNRXd88828Wn7\nCq4TmWllDRVRaG2FP7VzIYR8X2YaN4eJk7nZ28ZPfH9hHMhz9RcOG6la1PDP\nTD/I\r\n=R3ro\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5E0B8CYRaKI6v+Yq59KIpkjoJni3LRLv1+iU0lmDUQgIhAP1HuA7Tl7LnkPz+pX2/ln6LN7zoSIlHVN1r0nLB6z4C"}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.4-alpha.5_1577425370303_0.9971221018815732"},"_hasShrinkwrap":false},"0.1.4-alpha.6":{"name":"react-vue-like","version":"0.1.4-alpha.6","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n:global .aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n.aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"78d6a29370c3a1f69576c76dffac30bf3679b16d","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.4-alpha.6","_nodeVersion":"12.13.1","_npmVersion":"6.12.1","dist":{"integrity":"sha512-dsEMGYL4wyo1bfY+U1JAqDqPkuB/NO91sswcq0ZC4jWywSygng2l43Rq1Ogj7osNhElSnR6gWToDrHmJCg764g==","shasum":"0e1cbe8c873a49ef9f6a34525b6df7968bba9703","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.4-alpha.6.tgz","fileCount":77,"unpackedSize":301107,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDYYeCRA9TVsSAnZWagAAs1YQAJgbXLlo3RK8NqPGn0Q4\ndFL2Ue9IvWdu3rJzCPPyr5GvMvKO7ykJ8+9dJQa4R/aZJoNN8jeoVceELJpt\n4BCWyIAWsyBwbASeOgq5i0saQ7SplbqmceW29KRWp1gYc/nR55QkXteGwtdH\n1iolGuPe+9md/bKK1ZFcYE3do0xWB82lq02lZeWP1QMDwcJ4eiKy6oE+RT/m\nshHeG7y55pWyu2VWhjfGZSdCCwnt6++K3AcoHFE5zdctxbMG7B1Ibxc8r4r/\nQNIHUkf6aYJin35339KheZb5b3zKUnIgPttkdUp4tU6QgKHuzG4p0AAcdsqe\nycsrGSE8z7FpvOHn6MsAPNlnPuhSgWaSHm4lJcYmAgHD4RCwtWxdhSDAzHK/\nkxFBpOo9f8tR0tYC8l1+5YLSfXhazerDOe79KIjj7E6zBekNrWiDQG35MPtn\nomXqAx7hDt0X5MWiVv1UnPPPMokN5JRzsFR12HEQLs8WUWTng6qJFJRFNMyi\ncSIshMP04R5T3WwFU4d/l6JNSuKC/YPG8+uVzm64SMr6sRcJaCok5x5HFmtc\nrR3KMTBCA8eCbp+T2krWzAp0hgxcMVTTfKXGZztHC37LW3ydcnFwdz2FfkGR\nq+fMXXlruBEgP+DjclbnMZdhBdYamUNp8AUFYV1WTWV1hk/sLTsIGLv4stfm\nW1Gq\r\n=IMDS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHkxKpSkZlbj9Buj2li/qYJiyHiysTqytEwSmf0ys1FaAiEAicnvUbmxF7YF1Kmw41BACI6gntomnb9LKFzZpJNQRYA="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.4-alpha.6_1577944606140_0.6880456313274623"},"_hasShrinkwrap":false},"0.1.4-alpha.7":{"name":"react-vue-like","version":"0.1.4-alpha.7","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n:global .aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n.aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"2efcf5ffe3d7c105f428554a002928de83d1cc7c","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.4-alpha.7","_nodeVersion":"12.13.1","_npmVersion":"6.12.1","dist":{"integrity":"sha512-yxa6gepOTsgjGDFs1tPq0sD3D8n43KfqC9o35bb8jra1UHu6X0iCOXuacYXLMSqOeC+k9sB05UvWqnLbzibNIQ==","shasum":"26e8371cb2874e4a296afe8335c87ba71f1f5427","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.4-alpha.7.tgz","fileCount":77,"unpackedSize":301147,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFf9cCRA9TVsSAnZWagAAwK0P/0Z8QcU6mrOrTG3ASs5H\n/bKVgkR3MvMR0lIVSOmikRW3GgXUY9klYFVdzILMAmV4SFWlKXbXgXW6tY0I\nV4lpknOd3+ppNKvKejJ6Av6Q3kUsoWoqlU8iSYys9VKNXeFMnqATY3O4zny+\naJIiDvAvFNtaDk3bS5jMxdq9osiPbsoIWjI/yMjaxvDpmqnBUrS/q7c9BmVa\n056Luk9xrUFuyZfLPTFAj2PUoUkYPea1gdAcQa9yR/S+7QSmBajJmyV2B17y\npLwcV904Lhyt/Df2VOsrlsSWMsCQ2zIudFeFD65eoK+x/Y5eYW7ih0aAYROe\nvDl/Jox4R93Ao5vd2tNomUD1pliQ7MVyR4G1ejBkNNHShpxEUIB/U1DrIdJm\nRpEGOgpHe+PgqKKlhCgkJ53K45KwuFcpxPEmhkkva30drerF88yxlzLkqzkT\nuPiqUghVb9W32tg3B8VurMGIP+DNhq7Odjrg4MpsoAXCvY4Dl3CsCBE+XTzt\nqtFgr33FOU2N2exlKOOMgDCGwt6+rgvcqcgdNx3vZjudXZkSWzeIMA/Tf8Dh\nnPjop7huhR1iZbChqm+rtfTIzUBnb5lCFrHVcEbLe+EBISdqtSyeinRSl5sT\nHECK7YsV9UQTXPYMUJcj7pLwo5Pe8g84mXHz3/SEy8Am0VZc0PzySO7++vHB\nHcHZ\r\n=qoEh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDh9yNFLFEnDYlZiMpUUm8rFRRq4HmfnkZDd9Tp/3IDHQIhAJA0jnyDfijxND48QuoBRWLCz1V3amea4FEUjpikRWnV"}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.4-alpha.7_1578499932397_0.4125132347658953"},"_hasShrinkwrap":false},"0.1.4":{"name":"react-vue-like","version":"0.1.4","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"cf5bf7a8b3a76ada96b52472d8a12b6edb0c21f2","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.4","_nodeVersion":"12.13.1","_npmVersion":"6.12.1","dist":{"integrity":"sha512-Epu4VxDYziuPsApLO0FoOpzJVQGGWYH3eAmXJlzZbvc690SvjxiGhCoF8iRvhL6hv5RdE9kRasG2swlf6ynF0A==","shasum":"14e75ab05e8f1e7ec7c5395c69a03f8f93b5df97","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.4.tgz","fileCount":77,"unpackedSize":301406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeG8QjCRA9TVsSAnZWagAAnQkP/RDsw9JGroozHCRiMmuE\nS2keUPJp5PO8gDyGiXzuRYdBpCUvvoand4kjbnok2TA5Awn+cdiUMuaOtxmv\nPGqXBZWa0BKnQcLon5XFV0ac4FyiHyGt2uz9Rvli7abF0lA6XZNy3Hd8reBK\nRq9WVCkQdPKza6VJjzeQQS7e5kDGlTQodiInOkXvonzWlF+klr4sEkLkAu3U\nxHqZU+NoGUEMaQV+bOS8hb4Pl8K5f1BzRJ1723AZGBMpkcTD3j1PvpCEWUk0\nj5pLV1ojVybXZ83+oSmfrfG+wjbg5G9+dEafWM+iodz/JPuxoLleGfH/WCE/\nHRM6q3HhhZ74uSGYGY0FqBRyDHYjBkLyl4sbdxWoSeRmEDW5cLi07nnvPuKT\n9nsJcJnx3kM2QZT96R6sL2FP8GTxX1x+oZuJr7Y2iLccdNBqcUs9ZXb/y42P\n13fOe1u7vwkcrtC5snsYdsMH07e+mettDuygYC5QMWZjUiutInL78a1QpT/v\nvG0tPhXhEhF29Fc/mZkz0DBh+GGi5lHrHtqpbBJVl5dyd4ktcQyKIP/N6xJV\nRMpGbc+ZH2OswJvFJ3XHlOye6KlA4+dblwNv9MBXtg6FlAtdMq2w0BxwecJo\nw9Gk2OS2+vauJybE4ng1ptyPXWaRiCVarMSThu8+KQw9i2plJzYErd1mu1SL\nSng/\r\n=//u0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDGC+8vCO6mejwjtc6n/8u2uTpyc+1QMvoeTT/M5ihbMgIhAOG8RfyvRCTFQ/5fWga8xvGLtgGeMdeoHnl5yAh/8JtH"}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.4_1578877986566_0.5051390776216453"},"_hasShrinkwrap":false},"0.1.5-alpha.0":{"name":"react-vue-like","version":"0.1.5-alpha.0","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n:global .aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n.aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"1df91c8b8b3ce7644507ff0523797792f4b0d4c6","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.5-alpha.0","_nodeVersion":"12.13.1","_npmVersion":"6.12.1","dist":{"integrity":"sha512-fzHMCNe/j5B+NjFIrVmfn8wE/bL+l88ECLaF70Uz82c6WDuN5PzUE33D7sEQclEZ000VqA+c5Z+HwlqYM6tZ7Q==","shasum":"4553f68f71688a58ffe76a1b5da4671ce7851c45","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.5-alpha.0.tgz","fileCount":77,"unpackedSize":301513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQMzTCRA9TVsSAnZWagAAw4gP/2R0+qzzvtMQe26YrhYX\n8JOTgjlJiWq6dme4HOKv7Thol6Oq2Rdj72h9lRAjbuez+7jQ6zx58b/SRKfK\nLkcP4WPhtRfY0buHItGo8rE6y9La2Btd6/eO/BEqBSeAlGBER0qZNzL42SIN\n1zPq1Hv9mSihBpDFL6Y9FuCLW0Fl/J7YBk61phQsxcT7XaQfkZs5BIhxJHYw\nTPZdKJ0shVYFw/hWU9xCRkdec+GGp0MlSgqnhjqcvvqi0Ri2oKuWd5n1L/IC\nZpy+ueBFwh1ZjPtF/tXcNiZoRwBhoiyvM6OrxFQqiiKija1avgUiQ8gOxU7f\n8rLoA5wFmcQDrigA1UldotKQsIkG28hH2AWUIRBwVXrVqhz2ySdar14pS+z7\nxZ4U19WiaQbKKTFGQsnusb33jxT+Lg/u95GotKUggpPwbU+7JDGlXmpewsjg\nvERVQKnfpUC3z8c4SWruURWtmDDhBSzn5uo2CJfQgB666jiwbU35lAH3Ll8b\nxdLcekw3OZlTmkJ3I32C65fG3+omEPaOC85C32d3NJ6MtaZCHJOdk4ruGoe7\na/sbV2drJKPjkNwmr3roUe6eYho6mg3tEZpGzZXyxwNUdwzo/LE/wfvvzylz\naUBgpHmIbgKPZI4Z0Z8P1tSt/kS3jhuH65pvuHiMeVVX2RaFynGVoL0T9lbD\n7965\r\n=DKT5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMDjatbzn8OU9usEbaeUHYkyXwX2JbnC5b/4duSCydUwIhAMr9IAq+pajVEammqQTmKdMgkgNoRhgqenrN34fgfche"}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.5-alpha.0_1581305043178_0.858496440653733"},"_hasShrinkwrap":false},"0.1.5-alpha.1":{"name":"react-vue-like","version":"0.1.5-alpha.1","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n:global .aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n.aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"8b3260824c92a1164f95559f41664dcc61f06e99","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.5-alpha.1","_nodeVersion":"12.13.1","_npmVersion":"6.12.1","dist":{"integrity":"sha512-kVG0xZrZo4fFRQJZMZMtERrTd5PYWC9wvASfQFO43OPho7HiBzxl1GAh5iFREhi7vgC+5myiFEtVhSzS8hSEfQ==","shasum":"d545f9d03214a0469eb5e61aa1c8b868af831071","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.5-alpha.1.tgz","fileCount":77,"unpackedSize":302081,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRhOSCRA9TVsSAnZWagAAx5wQAIzUZ3y+kQCWGcYFRGDV\njiWPLVCcLWTb58g+H7NAL8pCG8edUnT7F3Z0xnSw3n1pmll6EcqzxdnswpLC\nAnjAHJ89ocwRjYBEpXL++0ao6H/+98pUfd+DTiozk0MRBheEiAYq959b+0vT\nub7QHah1UKvFzmdD8os2dwvIadJvBvU/f98mymYiI+FKjbRuUKV8B4r8IVyh\nwDboG4myVfykd+YVVCo4b1jrJlp/THO5DTcftLDnig5AlHZAz8uoR4R7o6Td\nw2redvL0+pmcvCs7VvmDr6zLxdrz6zvogy6x6kVdsoj7AHj+mh/m0HUb3K8S\nbFXHn0zRgCSgIFEwWgsG6lLg62pAigfGxGbWW6RCVEMKDssF2LVK822JW2DH\nk1Tf8XrvhvM72RQ0ynAl1DJbTy3x4w2olmdQa+GXLK9i3G56N9GtPaPvQDfi\nDL+himsXnYXQHP6dMq0mgPSx9dOR8cDNGFDfV+/xBsT2eqpoMb7arKy+qfw6\nkB0ohcXiJIdv+4TrZkNTWJJSJfaNwBrOcRfru5gk9sQgOlzE94rOa8BGaoLN\njuToaovpcc5RdWQTPLZNS1KK7Jnya/BO1pmDlRktLqNWXPoc9JlxdlFx3G+6\nzQafiHoGHFP4TkvEyMHymEs1amOascyqnT5fXb8rOWyYozB/XyReMYU2oyXY\n8kjx\r\n=8NLp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFbFChh/6l3AWUPkyzyQee2Pk9wAE1+Rf/FXPXW5lvNpAiEAkG2RqDU/7Gs3jidsVXTT2OntE1SN18k0R/QhBPjgW9Y="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.5-alpha.1_1581650834264_0.4322746284087844"},"_hasShrinkwrap":false},"0.1.5-alpha.2":{"name":"react-vue-like","version":"0.1.5-alpha.2","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n:global .aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n.aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"8b3260824c92a1164f95559f41664dcc61f06e99","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.5-alpha.2","_nodeVersion":"12.13.1","_npmVersion":"6.12.1","dist":{"integrity":"sha512-RsmMx6EivMwO8m5Vz13ySFUgBRpD7mw9IF2THXihr1JamCHhRhtji8tBkqwgeY/Tvu4W1XAou06WTyjpdaUj4w==","shasum":"31571c4e2cd6591a2fccadb74cb74a694cb42a24","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.5-alpha.2.tgz","fileCount":77,"unpackedSize":302600,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeS1lpCRA9TVsSAnZWagAAtOcP/3RdYttOHeec2Sr7OXmD\n3Od9Tzjoozrr1oPAF3zfK3qU5JA8MpqMsUDcpXG5XRYIAQcqwQmjVMkQwIL0\nhLLZcXQOeojQ/U1UhjzrTf5HCwo303XgO3uBUAsz5VO2G4RiAFSaU7yzgOgh\nDDZ1nCGnEm58U1W0qOGy1tRAZZ7PTxgq//XmutV0wdVbeRJz6ahk3QCxnrIa\n3DMamTciJQmm6JjIbXvQAm+4/qzqy0lrTg0u8gXBnK29TUD49x+VTrlgxAHI\nFHxpidWrEcm1ijxfrZWftmOjIGJ7CmOO6k3pSKN2rPg2bPClUsFX95vJPvvQ\n/cD0tGQ/2wJzRAa8EfnQR2dqKwaEcGGfVlFwzWzQzq52wk8vcbL/I0cVvIgv\nSJVRwLPO1Am7yT0+YThV73qRZIJrouqCkZvP+pVXxC71piccmpIibzYJN+MH\nYlcAJxnm/HViCggFhzsYPG7V4CDzX0D4SRgDbp5KDYOTSB2tgWHb7d3Xn+Vx\nEmMgybtgxfqv9s59QBPAP0p6g5qMdir2tR1OlE9HpQ9W7tJr+N5rkNwa6hfX\nFYqYQ9YzCphOPA8osjgmHIeX+1BB9ASGLj2KIQTcsE98D2yWDjOeNYQwSH/R\nFwHDhA+tTV89iCWxH/TAuhmvXnwoS4+U2K0IgFrb5avmGlZOx7yAxLB97yQ4\n7z6z\r\n=YWGp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgrAoubmj5tjtCuA1wjw20X9hLW8FXk4zIvOsvBT3SFwIgG4Y8j311CkvQ3ufOJUpwAKJOmDFdpuyMx7WopxPZaxc="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.5-alpha.2_1581996392385_0.20512795490047386"},"_hasShrinkwrap":false},"0.1.5-alpha.3":{"name":"react-vue-like","version":"0.1.5-alpha.3","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n:global .aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n.aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"975a337581059110ecd98b63873274daad0003f5","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.5-alpha.3","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-jlgxY0V8EuIBRgPFdw48FvkFPVbM67O5TBgQwv0WhXEJdoOxfj5fcBgYCxnTc2PE9y/V7tCsHv9VA1/RQiT4wA==","shasum":"3ea09a513094851ff57526ccafc75d03482b3194","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.5-alpha.3.tgz","fileCount":77,"unpackedSize":302794,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeU5L/CRA9TVsSAnZWagAA5DYP/1xHE0pWNb9GuLeYh/hh\n7VA5SNgRv3JIEdSHRwc2pl7UbAovAZ+ckLPuP5s6o+ZM+moQgo5K2Uop+vdx\niW19gxbcWamIyOubOJ4Y7Ig+7h5lRBFa11QC5/ovjLXXVe83u7f5rHfSn3az\nJeVNPqzUcjhIBgFqQrHOVFfB7peVi8+eEmV7YUscOWW8sZBumwhDPES0DwdZ\nZsaEUYUYYZ6R9KWtol0asoCIO2sIylzoCt7hhORysYI331n25NGBOVmllc4w\n4qe+LHv2OXYpcy9OMJclS1ISb1RjVYyeMKoxwmIuo6GqItUU9sSjFBHG3tGo\nIjFrig7+B6wkx3wSyH18bNu1Ozk6KseXhlM+qyErx7JMQvkVPtZ7eJRes9yL\nn/MdvMnxo4sf0A3N6gzsoRCRp993Vwbqj1Pk61uqO5LfKaAV0qLp/0cis7uX\nQiypgqinwyu/b11pkBpYt8puLtJjRFDOp27osKjD1q54j+7feOqoYIxx6q/R\n1xtk8zLCvxkxzMaH1uhS429G4nRrzvtuw2eIYsh8xkg68dWQlD/1xTdEpVtt\n8RMiemjkhh6OfcEAwY2KL/raUhrm6wTQciktZNL3SKx9FaYmXMMAHTIfzc2B\nkpULQeNB23g41qxmWAyv8xrTi+1geSNgy9LvI2/m0ZuWVUY96Vbt5OjYlWJP\nZEL8\r\n=SSF7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEtZyGsHWPC0IPFtFl122MoJgQUXzrEHJikIqVYcD8IwIhALBdpLCe9MsBJlJzSCrLRSu8g2Eg4jvz6dWhZD0NOd2O"}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.5-alpha.3_1582535422900_0.206990802963269"},"_hasShrinkwrap":false},"0.1.5-alpha.4":{"name":"react-vue-like","version":"0.1.5-alpha.4","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n:global .aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n.aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"d8277eae11be03cdeaafe0d8b6f9919f44ccf7e5","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.5-alpha.4","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-MjJmsMD1fjdnVdobptpZSYEVbzFYZzfMjVtiY5SMHzJiDh59lKNWUo+eRqtFYk/xIopzvDO11jfjY5zFvnXxxA==","shasum":"efcfa2b96220967fa397c812f139bb7e453f9292","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.5-alpha.4.tgz","fileCount":78,"unpackedSize":304382,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVIhaCRA9TVsSAnZWagAAPCgP/RPahZHBbv2Il/PwiXGH\n3yOZW48NzSz4AMD570pQTM+YxletnJkUBCrzymjL5aRyatkwWf0dzGin6Fz3\nATOXaOlI1bAO6gxlpSMpIYeOhxK5WbxgxXn8nAsJL0TQsyOMZSm49d6MxOst\n3wEhVTJdLR6UChqJor/D8wGWkbS/MPY2+q5H+K9h2ymMSDJf10c/dWgE4T02\n+p9CsGAyBzZ7etGxq1ZkybUAdAnggVPazzj8h3Hfv9yHPXzlpNd74J7oBlCF\nWJCQhSq3LF6m7DL09mf9s6f8A+xMOX/ZkhFdGYGjkXUa8SpYk0pNf5RXPpGI\nRNSi3oOHXPXknHuGDW80qlZVcIE5xnenQhljzlF1HcQGAL4FAT6CyZ8dMM/e\ntMHJ5VvQ/l5aOymqMbDVXJuOBezRalwPnIXeZfK7RH0y7GWVg/eCYe+RbXoQ\nBuMb2bTZz8OpLZc78ALf3/hn4BqSRGPo4J/x4PyXPiveV46p6LOfgLVsBS+8\nyfG1K3ErflniXEACvWaHvR6X+bm7Q1toTiEYTDaJO0tiSPS7fhZF1YsE8HSY\nE5ADQZ7jDvCm8DQ5wOvbSL8MqsBAzquuuKG/yvD8p5jEhFTIBO53pPZkVm5c\nlItzR2eG/sfUjZXofyHgHDF3l+TY5y1HzWCeiizJ/XNJeCb2HS47wp1Vw8Jk\nDfrb\r\n=7pqz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCGTKXICi7QggGFX95jXJIaUjZi694Lk5ApCaa0j/lolwIhANsjAHdQCSqUqOuOk8WgddFR9I9F7szjzQekVOCfij8B"}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.5-alpha.4_1582598233607_0.7636033706189138"},"_hasShrinkwrap":false},"0.1.5-alpha.5":{"name":"react-vue-like","version":"0.1.5-alpha.5","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n:global .aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n.aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"9826eb7a26c567c145c487c1602ef982aae559be","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.5-alpha.5","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-OdGL6Xzb4+U97YgCNqu+QW/APPHm57xZGIYdFpgxKBxroV+tLdgzdx7jincFf0N461CzUc00S39kGtkov1fRQg==","shasum":"dc4195582731167e79a73e1c0e0cdba071eb476e","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.5-alpha.5.tgz","fileCount":78,"unpackedSize":303175,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVh1zCRA9TVsSAnZWagAAiyIP/2dFC0KEZRekEcU24cpr\nunOEKD9/fGDvEDJNaBQ48UTeLMgA1Ae/x9yx+xZgoMRiKhabJ3jSxlThAoTW\nnAIbTMTnPZ59Pu/hYj90d7WJCcDaPlI4bmrQJ+53emyDra9oi9wwkjAjMDu/\nemJCf/ZepXayCPCQlDIor9oASvJBQt3W4skHI57mF7vhvBuz8eeWke2ulKsv\ndEcWq5V9Nnj9gpodQPmUl+WMsJtWlWt65W2kbEZM+GhYNQF4ljIXnGaK46t8\nisVlE73mIiDUjahwAn8SMijbbUpLTNHY+mRg+PG49SthbGdz8GVl7VgAZMvD\nTgbexGoHLfPYNWqnPvCwdo+jpsCesr85OBQ5NIkDZs75Newf62QgkTum+3qe\nYC/iQmFty2fMX1b0RcPKSc05wC2F759wzG1A83Dwwk5tNgeqLNhUJ0a6U1Nd\na+j3H/jZvp0V9rN0HwYmsf3xATeC0CS+Qpx70SigBaH6iqvkCATpsPLNoRRC\n79HxtVQ7Mtqv8/i0Xk+q/MtD5FnlsPTt9KpLHSo/d+nhSZcQY7pybwiCBhgg\nKhS0ITRiO4QGoDWdHNkG7mtGBtxlAsKaCRbFr0i4rfaQHdwS+iAMDZmEF6QT\ngaKkiPIgylZxuuUWG9GtTFqtf6t44fiAf/46RJcX8e2Retd6+y01Oi+WjJbG\nusU7\r\n=7+WX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHWJfA/Jjgk90q1p+1IFUZooizi9jAbTWZUl10zFdZZYAiBvc0nYu0R/8cBx9ZRSl6bny+ky45ANJHvIHU39fDcsVw=="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.5-alpha.5_1582701938831_0.4085821582289719"},"_hasShrinkwrap":false},"0.1.5-alpha.6":{"name":"react-vue-like","version":"0.1.5-alpha.6","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n:global .aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n.aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"87ed52f018b51276500562f4558b80b3ee67dd0a","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.5-alpha.6","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-pc53Jw9qpfmwDuMT0Ks+G8QyYYyBrXt8Uh7fz5U7P3ZeLzx0l9Qcq0nMoVTk8gUX+l9DX8+0rq39uwJuZ+N/sA==","shasum":"78fbe715120ce143f97929dfefb1965ff27c107d","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.5-alpha.6.tgz","fileCount":78,"unpackedSize":303917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVi06CRA9TVsSAnZWagAADssP/0beA/jL+vB9nUE47+3F\nNzzfmePmyUdiXv5qkl+R26RihFHQkN3sCJNfF9dsYUWmo5TlMRWL+u7iUfgp\ngZWfHPlLPYyEdNN9J3IqgVTBn9biTQJC6t6MqOgUXpqlMOehTMmFhlfemiwB\nrEkIPi2Gtl1FePzC4QIdiGmTpfbuTjg2VsdH4EBp2oTypMAMnoIH+2zUsz9x\niqCqAuTzs+YlDgXpEu7oRACkkw/dffmtl2ENGrb/B5QQcptKluozyeiN9UTg\nt+hvZUkybCEz4DNEWC3PciXBciK+DWpLHKvkGG/GeZrPh3+FHox5RKV+c8Lj\n9Jh/USJLQUY+EjMfcKbavI+tk6FAiqSj/+02885ldnK8tD+YKqPOCz/dyMh5\nLlAcna5Xc3Ay7eNESsz7Ph6nFc9sWckmJhHdIofM2gsZGnBPZC7Hu7mJWaOG\ndE2e76gvc/qTEUw9SrlzKeljK7x2Dxep+tM4vnBGULGmU8UmuUEW5HZ85k+p\n06OWdtDl4i1mElNp08L2W42okASC8lrw/liXge5PfU5nJI/M6WJzEoVCLhAP\ndzgOr2qtNh0lOdTJZvKhSJYbLm3TCt50QjlBmobLCJur67Tn6rNEKvn/+HoL\nVBSej8cHZsW4K7xBydr8OAS5LepBQaWpJY/HWPJ/v3bHxjk/xotmbDYNDWRf\nQB4E\r\n=WDU9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD1XnEvM+QHBatQE7hNhz0bcgEbvyPrRF+Hm5wKQPAq0wIgB0SXUTU+G94TZNDSsmY1HhlJhdWoOFAq7LfVo+eHNKQ="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.5-alpha.6_1582705978302_0.29249023209916425"},"_hasShrinkwrap":false},"0.1.5":{"name":"react-vue-like","version":"0.1.5","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"87ed52f018b51276500562f4558b80b3ee67dd0a","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.5","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-Li3zecQjkky5q5vOT0z03mHAqtSRn2uaDzpq4DILJxkgUt6GDcvkQ4aArhV6i2piyE1VRS7gtzxHxWVmSXSzzw==","shasum":"d65ea25b85d575aff30f8c073f631d6854f94334","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.5.tgz","fileCount":78,"unpackedSize":303909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXF2aCRA9TVsSAnZWagAA7IEP/3N3tk8nVb8wqiKjjxMW\nfbnUtYrtfLRm+5J59ZYyCJJ7p1lREigglO6EMnQrzzPJjuWxbhidZuXaKyEy\n3RV8kkEV6iKZnKSz++cax4FJWAtKF6V8yNkRh920cZa/TxHSPZwLqQeO1jeP\n/e5uLCOc0Y2XRbZTUzzcqaPDusXJEAcNXnlzBLMjcnEqGDLUgDB4zsqWCXw0\nYvrKV+QFAA/rfgir1HRndbpuaD3PWrqciFQGSqXc2sXAjrLaatYxDwMjyC1Q\nEL1vCxb/Mcqi+C8s6DQUI1NsTAL1InyCawW6KyX1jG0s9Eqv2FP4o1529JcI\nRYsehmVdpBXxJUD6Rrl4oJTbYBLRYZ6leLfwJ9qPN232OStq9c8/5P8bTyKh\np9ndfSj856KuA4ssNhGftJok73DI+2ofqysyXRgPjXFMRFByJ+LehDZ6Bl1Q\nNDA2Bb98dRVCfIweNBW7Yq6BPjZQFLj5RRnDR/8owJvOB9gSbPMAlUbKHOd2\nvzL7GxGHQGnx5D5Zn4g8/88qCLEHF7Js5GmIetxUOXiFRFx2jM5JFKlNrNVF\nNQMKyUtrDTWWivnclsj3gixZCBnmLDK+NBRR5EF/3o/MD7Fj22qjcW+I5J7D\npW85l7DHcdadwPDIBBBoRYcJKoFXkpKJPwunPoBeH1MV+w0rC7qyf/rLfDRG\ndycO\r\n=9LWK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCyNSMiDgWNx9lyWPVOC+InIx3Wq/0E6nY5PMiUBMBOugIgOe3R/9pDRIXBVgVxEL5xsZpE5HqM3WDHA86Mw4ss/H0="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.5_1583111577823_0.7248152109350563"},"_hasShrinkwrap":false},"0.1.6":{"name":"react-vue-like","version":"0.1.6","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"f53efcf75fea0f8c31605105bada056c1d3439f5","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.6","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-5/Ks5EgN8wVel5LoVTK9ft6xRBZ+q4QkXyTrNWPlo/E3eVgL0Eqgz/RvR++TrLMrukq7oaku8Jo0DDwp2sLbXQ==","shasum":"e978f30267b12437c2978b786509ab37286440bd","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.6.tgz","fileCount":80,"unpackedSize":326028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedyVpCRA9TVsSAnZWagAAut8P/38qBz6Q7iRqDhXAhbz2\nh6d5P2LmS65SHaDCCXUiLD0MxZaF2TMeKotl67FfjfRhYChEBslQOActWnlC\neWf47HRwDhevzJUTjYznhkG2RPDe9fxoYABI1fK/xOJKU3wv7uer1CqgZbYU\npf9zuEgh8NvSMGZg/99G4yXRW43PhksSWJMnVlxPpF9P65DxFAftPkE8PlWq\nJ5hfBP5tFeOVvkcQ5MOkIyGxnc8daY6zTu1vRU90vfcyeXSX6M83IEVf/r1e\nbF4mHzNH40bcW7Xj441ZAwxCo+E+qgvJEhSRCvtzK035hUP+T4egWJ+DslgZ\nYq29oKT0c1xoTyRbej4lCd6hMsbIURDjfwgfpw5u1GhJMrutkZLqGg35BskU\nyd17UAPctu+IV8R68r3wPcjXoSmPz7ktcCHX3p2B/vXHaw9jWK2rZ5anFaTb\nYOtK9vFgzNqEjkhF3dgiPhy5gIkjDtsQiLcibCfqT/q1gfZ4t+iGOPI3C2qV\nedK8fTCaxeYnkBpRCEfviWrRLD4j0NiUJok9JEDNA1Pxstc7OpOXPX9OW7pN\nXAf11a5AhoYXK1vFmLuTjCbgEEMl7Ka0q49sztVN+q1cyyBwhd7sMtVdgjWs\n3L+iiwdwidOyjsaJoLZ7xGdRSKo2XkPEaxONYE4elP32b3od/khrfYCy+Zlt\nISxV\r\n=EVJv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC3ImmENFmCHZCSNKLkkJkg3qGEtTC2iEjS7z7PlkD9lAiEAhops6gTeij23uFroGmXbOapJFiJi8bDDHQlDkWqCgEY="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.6_1584866665214_0.2524542226299562"},"_hasShrinkwrap":false},"0.1.7":{"name":"react-vue-like","version":"0.1.7","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n:global .aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n.aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"349d92701c5f135b6ee0c615b6af2333f0348b2b","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.7","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-zgMPQcWFRK/GOrCXbPCKrIlNwsK+liEd4j/c5ngnvG4I4z3Svfxlfu0GhEGeCBDtcW0A1qgJ0ao0wbRz+7a9Ug==","shasum":"9a0fe29b86d86a8262554e76c0651906f252142f","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.7.tgz","fileCount":80,"unpackedSize":326204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee1AFCRA9TVsSAnZWagAA7WoP/jRytHuNt3fOggOP5Nz7\n2cGDvRo5ihzQU60vfbODYFmVkvH/Ff6oGcN4OR5YnSV7qZ2p9KEUPf3J3tjg\naL1W+s12kQtap8E69rgtnJ0VONp7Hjgc5XwXwITEpw+NoDQIDwzqSLoNxNlv\nwq3scy06Ytd+fLYvCSFLhgAlvMcxjNR3f7D6qlfYuSxE+bHhq2kejY4nPd1h\nXjJtVZtVajoly5VPli0U3Ukvtsxwyf6gRAU8jL5MzfvBrV37zMXE3FUJ9+EU\no9BxaMCtcroHqDyFXjO8HWWd2MLHG/4mKKyVCh+HQYpRPYVEwdohOyBZgNgM\n5wyv7ZFYkBx3wh4pJRAJWEiibEku0iJ+tersyTPTY6o3j1f2XgDQOPPSYC7E\njZDUzmALVVNhAcWQ/PbjS8/Iq4jx1kC6Av+qZ/DBQg8lduAgiUufbkKsz2u0\nzL0nSBjVhiiXte7UF58OCxanHEduqaqKoNFBD0jZPt6qswnYvvDY00lIRhc/\nR2pBHxGEpAB4U+LWdmY4V0BgUB3xj74dvfGvsm9yv7D2xP1U+qCGzFanX9t5\nNjQaA/bnLqnIs2sI2XCMTJjuD1Xf9dzSVXYt4QWPtnqwCp/CJs6iaZwleGtG\nVvviAsvNUQkISG0uqt4E/BsoCrN/i84jCNlfN7JTLWMAeSnl98VXARUNqulv\ncDnJ\r\n=C89o\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzNgjNTM+3R0hO8NO4jSj48sgHgQ0OKqFkbxvmD/gbUQIhAPpYIlMcjj5meKk+CheiknRxHELbP6XPhKlrLSAB4KjL"}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.7_1585139717195_0.1667321117645002"},"_hasShrinkwrap":false},"0.1.8-alpha.0":{"name":"react-vue-like","version":"0.1.8-alpha.0","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n:global .aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n.aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"ddc7acf14e8afd0955b59ab3b461e0da5bea73c0","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.8-alpha.0","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-MOxBUTGfolORoufCek1ui8MohxE09ECU3CdnO1z2QFxnIXh2z4eWxVku1Pb7M6XXbE28u4RjGuQ8SF9Jbxmbxg==","shasum":"debcb43d9a252a2f5589e44235b67bf7d1298681","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.8-alpha.0.tgz","fileCount":80,"unpackedSize":328564,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehZrKCRA9TVsSAnZWagAAN2EP/0iyCqHHCOwKyrdjBXCD\nPGNmrcmoW5lsf/coxMAHR47DKyXI0J/uIFdReSb+38U+6GjsNpBuEY2BcUwJ\nFLI0bGhM088JUFPVJWyCmLfp3LqU3EhBASOVfnDBvQspfVbMlsIXvkHl2MEF\nWer68aQVZuPn1LUe4VnI3ofHQVs8Wmv2aDzz9J4JsD+aF7MQo5SPwH4rzYDP\n6Z2ZI45P5WFJtx2lVpMEHTU+mm8LNrTWT90PmQaigBUKgbWh+9rA7ff4zz6w\nDRt/8tW1C5A7fVZa8rQ0FR0z/DDuFtwyRZmnyo1yT7JLoXoFlc5jwE16tML/\nHJEYUXZdV7zRSGGkXa2aHRVWi8vS49DIQAhsbY+wFlMR6FZ/AEsAO1VWyqC3\nKmKk0jGPu7osUqp84IHdWMDEFQ6+V2L4eIiBnS+MqZXUslk1NKtH89Z4w2Ul\nRnpg4jzuQe1J3sFC2Yj34fDehEPk63p67bBAdRaqVl/BRCB+xHai46uTIX9a\ncSwDmT6rf8OhXyC8EQSbIrFB1JX6iPtgSNONUqvT8vPL4kyxnNMksYyTH5An\nb2AMZkUd4p6BkX2UzGAR9YXBy8C85AtJPc+bsyPGkaifIdye+cP5NfA+Sh1e\ngw6F3lvVqGaz1hWSLdyW3iRRMA/z7Jq8gCCpvFtzCcjKHReZetda89Z4WMqj\nPp8m\r\n=uNxE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC32NLSaDIdDsOZMtOiAR8YxjGfUHcDnboJ6/jG3MvUpQIgMkHw11jGr1rJmI4ltMPh87jWNXb7AG9Eo+dMRtmHESI="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.8-alpha.0_1585814218252_0.5123031451842095"},"_hasShrinkwrap":false},"0.1.8-alpha.1":{"name":"react-vue-like","version":"0.1.8-alpha.1","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":"> 6.9.1"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n:global .aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n.aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"81ffaee6016a5cd90804e50a5cd1aa5c77b1874d","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.8-alpha.1","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-MrYFQxo05lxQR1IzeuRch64LeHeF6mot5XKs8JDBafQrk70EotgXSVw7Je8eokv5aHMY9TT9TdpgvgjnCvTnaw==","shasum":"07554974c7d56de7f98e1a20ec87c2e4167a92b8","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.8-alpha.1.tgz","fileCount":80,"unpackedSize":329132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehvGZCRA9TVsSAnZWagAAobcP/1+eRjDGR6wSbSvDwm6b\nzC5hkYB6Rp1iOmzgwTgoaGYVDElmvB3ABN7Eo1vtYsATqJ+7ZnyRRMx2FXMV\nkDjq+XKD7u15HbNxnApItXpQpPLnFqBKXz6I3s9J/HTtzzoUZOWpWup+BLDz\nMEpLDbzbX3PEg/9zSwCP5Qdn4boYVjyvZTIDngx/0NyfUGaZ4fjk7//eAVAj\nX5kY2+nv2tpcakscpBWrJJ6VS0sKZu1fgT1PuDLijXp2lCZvvAVi+vlLXdx1\noGsQ53v97RhH03bLKql59WYm+nNcyX/zHgTdkYHt5RaNWlubz17UkHMqsHyZ\ntXx9RcN/0x+C6XWzYegD5zfYtz9sireSQh33Fe1Qm0Vh28ch1i4YrbjB7My4\nID5tuA+70VyhpwoqQ8UDW6BfAW6z1r2NyRq+wbOUdEAivLKHwwv36JtLR0Wh\ngj0xvUdrRzXSGFUkEKw0vf16OyjjIdDdjSQc5B/Rp9N2zpeyHdPtQO40TeUA\nllGAmUc9emlltJ8PmXlPxk0gsDpn86drbgkaRNf/KFmlbaScyYhL0aLT5Yv4\nwyXvBUhoN0AzejDp3FU70oPsOyssVPMAIhTCyP9J7/VF3czGxyiMs6LePKbY\n/C2F6ItzLXlAOlQ/qiE6iYWLYXJcqCyhRPGlIY0FVlcNiv0SrX99JHc90Xe+\n9Uux\r\n=GCmv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDauM8Hp0Df9A2s5GzDaKHz+fJhHr/8IfLFg8OjIDGypwIgV1VtUXQVQmGakUsfU19uDlehF3U5oBGETIEmFrMealU="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.8-alpha.1_1585901976798_0.20183922342028682"},"_hasShrinkwrap":false},"0.1.8-alpha.2":{"name":"react-vue-like","version":"0.1.8-alpha.2","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":">=8.9"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n:global .aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n.aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"ac74a5c47a689f4485e3c3fa87b0db92152aabdc","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.8-alpha.2","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-lkHW/fdIZtDTTiGQkA4tk+zEHKYvF3oFvKH3qCRqu3dRbtaoaPMdsvsgOuf8rSGN0mRFE+J8ce0FbtBCq4vNWA==","shasum":"1cc2e70eaa9b50d3157081822a1705adf9f5b610","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.8-alpha.2.tgz","fileCount":80,"unpackedSize":330515,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejtsiCRA9TVsSAnZWagAAKOUP/0ml/Qo1DfVqDnojI2tE\ndNeKx4QAmbds7Lcijsvcp6uLrdQ7Xdt7tlZaAyNnFMlsxZfmcxpwufPN8sPo\n/W1cl/xDarVAsjbI27pvKbRz3wy+EbLmyQ0nlu4XP02RO8XyAmIJvzS/rzlR\nNruoCe9GKgnNd44Z+2OCHqL9yc4pScLX7schczNTLNcYxjAlo5DXw2+WQ/EQ\nEadN91VdZcjDyVQcr5qqp9Rni8gCDGKo52kJqAJwT5ARSprBS1YSuck+lTSE\nwWnl+X8+QcimKlgAcuwoUa5VMh3lBxgl8U4CkmGDfVVi2S4zUShSg+XXuTUL\nOA3wWtjgpQC1k+Inb6hrMxPnnSsfXPjTxTOCuxBV8u1cU5UtGO2BKPH5cFem\nKqDUQ5C+6Sw3FpOEGjxmg0hS7I3h9LnlRQUwNztUtA90vpFfbaSfJGR3Ypmo\n+kMNyp5dUfUI2L18b0g7EUUXGHkUE6g8pivJMLvVnhqMhtnVVlDu09XF3/Xi\n7V2iTAlzkQ+6NAv/5f07wxKL3L+RSB9khSK/AfmxArbIUmZ2P9Lh/SM/T6LB\nSHxIg5CECfqEf3ZrY0haaPTuwCYmU+O88mQAjD0jvxRRI0tVLgns5ltDXknL\nPGJM1zLNKMnCJDXNVvqKvxUdzCIF0+LcdLNJ72CfxiQXfntBm0x62b6dkcIv\nakQi\r\n=8tn6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCqs2Qx7dHGpglU/F/3uqqPGzMQNgI4t2L9WHKcinHL/AIgXbV2IbZy9xyIlkikNgF9uVF9ETn9R+1xZ4L/DK68haY="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.8-alpha.2_1586420513978_0.8558488253724827"},"_hasShrinkwrap":false},"0.1.8-alpha.3":{"name":"react-vue-like","version":"0.1.8-alpha.3","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":">=8.9"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n:global .aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n.aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"aa813f48b601eb0473c6d2b1fc62da12f41e720f","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.8-alpha.3","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"integrity":"sha512-L/v5IXP0wOdFZWXenJNvrGDVMaKp/398usdphVk//olvpIar9xtuOSvlQszkztmDTox/dM3v5nkJfpMGSmhBgg==","shasum":"97ffad614ad9bf36fbaa6f86a96d4ac6de8f2382","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.8-alpha.3.tgz","fileCount":80,"unpackedSize":330701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekVsgCRA9TVsSAnZWagAAffEP/RYfV5gtBPOlGa8SJoCu\nZEjK6eCMH5wwAMdGpE2KW5XKmhezS5Imo5Jhdb0fhaWLjZ/hwWgsgKc/ruwl\n535OVWjIf2AlqXm9PHALKLSEJgOkSHlLA7r15tlBtgMEY0DxS9qFOyUz+N+z\nKwqdU3+46XZy8VKRBjLTlRt9V4bsOlpKvDqWq4S3b9lDvi+eDlNmJBkqAf7B\nU4XTZb3mlk58e8CVlmE4n/+sof1vzNKNh7vpWQqHZSE6HDVwAVg7FyO9xFEv\niGZCWRdJ7cMlqCMUdJQoIdG4+inr1DGE+O36PFD+ZlfoK6nli00A1qM7eUfs\na+UdVkqd05ku5uHC/bfDhjhV8GHbbFQFf1jmax/j1h51TtTOEGUWF3rrWS9/\nfB7urfj+lmTq/OugLK5ETgfVv5g6+z7oUNf0rfiNCrsqzwHN7ammWv9us9UW\nW8xznEOfLKOxOmZhFsHXPMUArmakV0qO2wtdjNb+TPxnouG9J2xe9Qz3TKZW\n8ugN8Y84+g4VDZQ9+l5eqxACWR0NoM14d+dU4WYu4n/ev6LugGBa69U3urqt\n16wRJF8oEJnhZIvJhKkDPpXhAlStY7PKDYj1wmh0LbxH+T4wMYj1IEACCd4f\ntKw8CVBiVpscbMXk8pg6n1ID4L2pVFinvzew+JUUPRhB0XSV/bkVEuQtDGU3\nAYU3\r\n=T/aR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICiFQ4K0H8rVXZlf1ycDuROBO4otQcqIDlExms88QjKwAiEA8fHh89gsYw4x3cOlYp9bGinKGN/HhrylnpQc1cr0bcw="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.8-alpha.3_1586584352319_0.5920104938360284"},"_hasShrinkwrap":false},"0.1.8-alpha.4":{"name":"react-vue-like","version":"0.1.8-alpha.4","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":">=8.9"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n:global .aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n.aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$forceUpdate`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"9ad3315b8b3306dcaabecd7c8645f160fdc1814a","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.8-alpha.4","_nodeVersion":"12.16.2","_npmVersion":"6.14.4","dist":{"integrity":"sha512-Fkg6O/oc0fjoj+UFI3gcEAoH0EvfM+sf5mx4HrtWtVKNt5JiFE3L+WblVUIcGeFlbL1j120tFTVe0160Tu8/BQ==","shasum":"03ab5ebee56ce18390e24b42778c510792c0b8e8","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.8-alpha.4.tgz","fileCount":80,"unpackedSize":337958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoWwhCRA9TVsSAnZWagAA1b4P/RZKeAlm2I+6Kag2LIpd\nR8R8oAOvW0YOs3cIrX5flLTRh7UFBEAA1NIN+tZUIIZcFWzuHPKyLjknjiDS\nvvDlXUmrUGjxxRxrTxZkUfMsbGprrRFj+5gHJ6x8hHw9gj8Wd3nmh1o2rs9p\nv3cdjwRPwPAhqd9xo9hQLlLuhxlxeNgbOojTi1oYciugHKScLD3qh1+Wdy2k\n4/MnRK/OBH0gMe/3SPw9b6/EyZWb/H5bU9U+OFRGn1Lmcdv7yt2ZwZ1B0Agl\nHWn5XA44c1N2hPMiEe88yqQ/kWzVbbKzSU7qbBo7VAjbcYdQ4r1PWY4q/Cfa\nJKHtRY8n4tSeTIYRkjvFUMCbDHCHubPKh2W2B5fl7ZYpSHhi2w5l5WWWK2+A\nTJJk/VjBUDv7UFyvrdawApHUXzIUoV67+XoS4LLEuFdh+VElCVtFlbvoadm1\nwFm5j+VCp70Ey7NImmho81fWnNrzg3ogfLFdaYtbpY8FlrXF+6V6bmccm4fb\nLQv9x8c6vrSJ/Wg2CQiqss7MrbH9m98pMfd5d+XbWdgzdEZX0h8tAop4ykqc\nkvyfHQ6kyDW0DFJor+e/s+cxTAoCuq9wofsMxULuFDUYyEjliwTiIrzLOu3w\nKNU5GRMv/D+W6T3cwBFFV2am92igwEzCQFxgcHAqZPlwu7RBcmYr4WWEDbxQ\nCEVA\r\n=8Xaw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6b0Hugl03woAcnL62Z/eOtwn3awiNeByjTFEDtsXnrgIhANtrj+oLODFET7bUvL8NwYbsK8NhsP2pNuixynbvNaZv"}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.8-alpha.4_1587637281372_0.9235587804516199"},"_hasShrinkwrap":false},"0.1.8":{"name":"react-vue-like","version":"0.1.8","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":">=8.9"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"0b9d7efb59b4bf40e4dbd8839efbf98e5c44a9f3","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.1.8","_nodeVersion":"12.16.2","_npmVersion":"6.14.4","dist":{"integrity":"sha512-jE5bJmtHz3RRNnNoJPWLcXcUARCWOcexRK38V9KGOhxGuVDR12I+4/p1YTLC+a6vAztI1di8+ms4gdAnsPg2JA==","shasum":"6293cbe8cb5359f5c46dad003ad3d899af0d1470","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.1.8.tgz","fileCount":90,"unpackedSize":381862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJer8FDCRA9TVsSAnZWagAAPLUP/2qoOQmoAMMvCkow8hLk\nZjnbZ5eB8ctg89mFnuTRdzXeEGk8vvO8CVPZ0ELeJJmIaYe6VkDBZfyfQfaV\nLpQL0U8+sMLcpZSC9oqR6nA+pRNbJsWRR07GAVr0bbt9RWRrg/xbCOYbT5TD\n+ogkQVKvqdVTnLmabrjLz9m52o32sKAHcdGXFuQBd/tOY3R4C2jJQcJo8nyD\nzIyuqCrp52SmN27xtqhpr0vAC8Rcg9CskCk4b8yOB0oIA0ApDmAttYhu1e3Q\nsMTqtU+KUwZ3+1UAE6it6NAM//YFBxdx37HTpjtAb0fzcduWDGTE1zR2/Ym6\n8sz7hfyagoLIwhLwggi3VzgG8kWUKhRD+GlrwwzybZDOT4vkhDXkZIsPSXSf\nLk+Ytp3QK7GGMmDI/XxPj7d3En0eD1DBh+HP3Bplu8iYnJBeMCu13KwrtBrg\nytvhTjwOcPGG2yNz2eiB3LK8rF1KxKJZRnpp8+bg7SxZLtkyqVhvti8cvT4M\nXdNUiOPzbdipkMfslu42YDTu+4QaoxRejAfusWG9kOpZV3Dl17e8/owZ6uHG\nEOLfVg0Sg4WAnz5eIfUHHXMs1u6BBQD7uf3VIjCDXEZioZKtqPE9N5bnDxB/\nXuWcrBR5ZCEQ+iUeNd+Qais4IHozsHknZ5Wab903W3CEcN6y+dCEwNEBqPpO\nktgr\r\n=OLre\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRew5+8yr/X9ggQOgYDAY8dkEttzeTC7P7n15xCEO0jwIhAIJC0l/zL2jZPi2St2/N4L0kCnAzT4ZQnvZkZFrgj63A"}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.1.8_1588576578782_0.14584001035021643"},"_hasShrinkwrap":false},"0.2.0-alpha.0":{"name":"react-vue-like","version":"0.2.0-alpha.0","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":">=8.9"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n:global .aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n.aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"0cb82d6a25ccf6ead8c24de72c515010de593e65","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.2.0-alpha.0","_nodeVersion":"12.16.2","_npmVersion":"6.14.4","dist":{"integrity":"sha512-6nDbFLAcGPFgh9z4+r7tK56vPIiiu1v5xyOxmqhi90gb23RL2+MOnNdGjyrfKqw1lDpQ747snOWLMEH6g/dn7A==","shasum":"a910e9129ecbd278f89865c6ce61d19d87bd78f2","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.2.0-alpha.0.tgz","fileCount":91,"unpackedSize":366424,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJer8M/CRA9TVsSAnZWagAAJIkP/0wH/XSrt+WZOAl1im7T\ndWeH0M0newDDj2On5hU6wHBP31dJD3vccJFwvqwjlaZukgOpVbnwAZsY0IZQ\nz551eJyc7eG/szJQsd4CtSC5sghSOSSAVfoBRHQwk572mW9qp/OCJoYs8AF+\nOgt8oIC+a+igkkB60chCvQJohLkqfdJn9JkF73DsIr0s52qtkisgu52fKrpS\n7+zoO/DZMz0GwhAFzEF5ZCxByd9gBhoDN9MPeJHAig/sLkyYkH0y54rhT5jJ\nsNVJyrrIhcecrz0lDb2cI71Mph6OLzFheMmI+6TKzYaEzTgRy9ZNyB/xsCIa\nOOhd1raD4gXzEw5mpZ+RNXkPZ4y9u0NiUA8cmyqURGXBWlZdZhLr+HzQNWyT\nYJ5ltDQ3mqF9YsmNxw5XNtrPkztRsyf01KXdGa+3RN2weRDhOsxYV+fpzp2+\ntwBA6mVbfpHCfHC9em2f2xscQNdvn51NyAIrYGCAmi7G9xBCIk+nOmWhRQ0/\nroE+PNr9thIWohK/eyHIFu+w5XWJeCs5/cIazJ8gEndixc+5ZFEpNMrihE8x\nFuJ2qQGbbgeUW+ZO2lQQRxNzqpgGXmWOarUG1wkoznFlY1KtkhV5E4fT8JSt\nUWnKYys54mte10JyfNxJIA+XO4CqyZX0fxD79vVLTbLTGh3wHDbNtHnI4R6b\ntxci\r\n=+joF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH67rqGEv7CsZnVDw8V1LLRm4FT/rVCzif836AYRzz3lAiEA7QrysggFnMYufFPGogPv+TcvFvhgW1RPeWpJQNwzOSI="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.2.0-alpha.0_1588577087436_0.7345525526006265"},"_hasShrinkwrap":false},"0.2.0-alpha.1":{"name":"react-vue-like","version":"0.2.0-alpha.1","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":">=8.9"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike.Component {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike.Component {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike.Component {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike.Component {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike.Component {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike.Component {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike.Component {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike.Component {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike.Component {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike.Component {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike.Component {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n:global .aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike.Component {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n.aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike.Component {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike.Component {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike.Component {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike.Component {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike.Component {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike.Component {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike.Component {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike.Component {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike.Component {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.config`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike.Component {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike.Component {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike.Component {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike.Component {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike.Component {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike.Component {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike.Component {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike.Component {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"3472ef7ac896b6fe30cef666aeef08dd9570ecf5","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.2.0-alpha.1","_nodeVersion":"12.16.2","_npmVersion":"6.14.4","dist":{"integrity":"sha512-aJOJf/Gsw/PzkgKlVcFdfnD+w2A5Sw4SYE1QtDnJGAmD2FHSgLKRbJBbGCqkxySACI6gyXVI75unS38ZsHtV1w==","shasum":"bdf3be0029b662d811f7128bdbd0ecfa82dbde9b","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.2.0-alpha.1.tgz","fileCount":91,"unpackedSize":395470,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJer+LZCRA9TVsSAnZWagAA890P/RAtg7/gtMUpewwiumL6\nB0iFdgdi03E9IYVM14VlvrON2XkhT94cmLXsd3AASd9Uoxp/gzqzxouBf605\np90SBjDy50Uh4wRRu7lhnvwWCX9yTaUAL4ZcrtNoZV7Vur9EEPIgwJapq/3l\nND91+YhQVGc3vOSsb/YQ1MkoJXiZytnXWTTMEezDCTvhynLrSMzGqKmI29zp\nJAbuQ0/OCbs1kNjDxAbV8P4tyTPZhZSS7KVVxIIMOXmxcpbl1+mXl21arein\n/4QM71JmUYC3vrjcJxDgROQ0bXGcPu2pqdnzfN6WQEGKFZuyXh03H+iCxdM5\nZ4z56kAB+f4onlfgZU0H2ROEZB3CflChSYoFE3aZ1IHISVp5Zx52mLfdFGGB\nwtfo+MhhCAPA7zPEN0cL9AkiDMpVlRPtKUX0FQBp1eyP/rPGoPWPsmr7kbZL\nbQOpEPtsfywpZ82M+JxOMg5NWZqDlfrQyieYIK5dD1F7IM07ZzV2R7f5eHqN\nkmdcL7V3fC3YbTrnCTZrw2Z12ZE8u5Shmr/07od/sQED2U65hnp+uVHsOMU3\n9lafA98trXWM4lKXdbcNCDAWbcx5h3AcUgb7eUPi8plbgWjUnisC1tlXOFdL\ne43gTie7zVBaijP3iHSHARnKArHlbz8ycC+Md+kyY0j0sRZgH/yZNNKHwXzn\nksN7\r\n=2Ahf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICfHF2L7AfDoLiJ4BB9/QF38fravtsijO4f3vb9jgjPyAiEAmDi0jEUNShiKDso/h0bHqyTcLTpkBErY1jsVa8KVra8="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.2.0-alpha.1_1588585176986_0.13855771252061633"},"_hasShrinkwrap":false},"0.2.0-alpha.2":{"name":"react-vue-like","version":"0.2.0-alpha.2","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":">=8.9"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike.Component {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike.Component {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike.Component {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike.Component {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike.Component {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike.Component {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike.Component {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike.Component {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike.Component {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike.Component {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike.Component {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n:global .aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike.Component {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n.aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike.Component {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike.Component {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike.Component {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike.Component {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike.Component {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike.Component {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike.Component {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike.Component {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike.Component {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.configure`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike.Component {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike.Component {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike.Component {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike.Component {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike.Component {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike.Component {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike.Component {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike.Component {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md","gitHead":"6379674bbd3631e8a4f8abc17d833ad82b0825f8","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.2.0-alpha.2","_nodeVersion":"12.16.2","_npmVersion":"6.14.4","dist":{"integrity":"sha512-Vxy0ARsNeIEcSr5x49Zt/YwEpruadyxL4kmVJYP2cSC7wwIMC6UdpBXnW8RvSlRkTgGAIW4rx6AJmzv1A8XJRg==","shasum":"4909b58bba2f0dbbd344e813b7329fdb1e3dcb67","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.2.0-alpha.2.tgz","fileCount":95,"unpackedSize":424303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesTErCRA9TVsSAnZWagAA8AsQAIEcj5PoHMAJAJj8hjK/\nGJd6yuQlWox7Da9CVLexTmnK0lsnt64j9qk3H6xl74xARhDkva01V3UytFWa\nrZdyOoEWLNffLH3jnDwlolKh5E3FsGy7Y3VNCOkIeTtgMPJq633PC3V4AVoU\nd4aMiJkSl9MyN1ZFwxSw87d8ilY5WynpN7Pr5QCzP0W2gXGf1iN4+RwNAC2C\npJI/JGvW11WcrghqAlw5GLQ5ntooD6ayZwAmiBgHXmndX0HWEDsbii2lzUmy\n0V62QyOLLUu9d3yQ9vGCWictbheKe/55adkQ0OVcS8FHkSfWlGIfAbKluVD1\nEOhBCuzCdrHXltnFsFd75XmPhibu2ybYTRmAusztneG9oMiYmIVksfIZpBZh\nPPwDG9Hy0iVKyRLlYI/q+gTmQXjje9ec6nAUvziHU5cBcZAsSQCmWH0X0yqt\nGDkyMrdF46SDS/J5yvaHml3MUuzyMNrRT8AMlqbL9YFkxS88hNHkYzNErX5Y\n0/afIwGxDgiFLN2punDd9zD31YQWEcq7WBDsjaItBtPFFtT5M7x4emVo2KVz\nory1/9scTw3ZZ86u2Z+/7jnlqRKtP9YsYRIzXD86IrPdRoCujZKznRLKVwmg\nrW1Op/BMOEQIX4No3XRqq9g1sZmaDf31+/CKOVUgTpmSGL7ZZLobwElbnsmH\nZ6lE\r\n=YAOh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGaebEk0uw5ijKww0nch8CRUxcAeoRwbMDMM+3iPPJgoAiA+YRQDOFyNqUDPDMo1XnC9kaRjdhdrKEHx8Mhfh6DYGQ=="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.2.0-alpha.2_1588670762561_0.8932955541821421"},"_hasShrinkwrap":false},"0.2.0":{"name":"react-vue-like","version":"0.2.0","description":"write react component like vue","keywords":["react-vue-like","react","vue"],"sideEffects":false,"main":"dist/react-vue-like.min.js","module":"esm/index.js","engines":{"node":">=8.9"},"scripts":{"build-src":"cross-env NODE_ENV=production webpack --progresss  --config build/webpack-prod.config.js","build-esm":"babel src -d esm","build":"npm run build-src && npm run build-esm","build-preset-demo":"babel preset/demo/src -d preset/demo/out","build-posscss-demo":"postcss -o postcss/demo/out/main.css postcss/demo/src/*.css","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"dependencies":{"@babel/cli":"^7.2.3","@babel/core":"^7.5.4","@babel/plugin-proposal-class-properties":"^7.5.0","@babel/plugin-proposal-decorators":"^7.4.4","@babel/plugin-proposal-export-default-from":"^7.2.0","@babel/plugin-proposal-export-namespace-from":"^7.2.0","@babel/plugin-proposal-json-strings":"^7.2.0","@babel/plugin-proposal-object-rest-spread":"^7.5.4","@babel/plugin-syntax-dynamic-import":"^7.2.0","@babel/plugin-syntax-import-meta":"^7.2.0","@babel/plugin-syntax-jsx":"^7.2.0","@babel/plugin-transform-arrow-functions":"^7.2.0","@babel/plugin-transform-destructuring":"^7.2.0","@babel/plugin-transform-modules-commonjs":"^7.2.0","@babel/plugin-transform-parameters":"^7.2.0","@babel/plugin-transform-runtime":"^7.5.5","@babel/plugin-transform-spread":"^7.2.2","@babel/plugin-transform-strict-mode":"^7.2.0","@babel/preset-env":"7.4.5","@babel/preset-react":"^7.0.0","camelcase":"^5.3.1","find-up":"^4.1.0","hash-sum":"^2.0.0","postcss-cli":"^6.1.3","postcss-selector-parser":"^6.0.2","qs":"^6.8.0"},"peerDependencies":{"core-js":">=2","mobx":"^4.13.0","mobx-react":">= 5","prop-types":"^15.7.2","react":"^16.8.0","react-dom":"^16.8.0"},"devDependencies":{"babel-eslint":"^10.0.2","babel-loader":"^8.0.6","clean-webpack-plugin":"^1.0.1","cross-env":"^5.2.0","eslint":"^6.0.1","eslint-config-airbnb-base":"^13.2.0","eslint-config-react-app":"^5.0.1","eslint-import-resolver-webpack":"^0.11.1","eslint-loader":"^2.2.1","eslint-plugin-flowtype":"^4.2.0","eslint-plugin-import":"^2.18.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-react":"^7.14.3","eslint-plugin-react-hooks":"^1.6.0","file-loader":"^4.0.0","friendly-errors-webpack-plugin":"^1.7.0","jsx-loader":"^0.13.2","lodash.clonedeep":"^4.5.0","progress-bar-webpack-plugin":"^1.12.1","uglifyjs-webpack-plugin":"^2.1.3","webpack":"^4.35.3","webpack-bundle-analyzer":"^3.4.1","webpack-cli":"^3.3.5","webpack-dev-server":"^3.7.2"},"gitHead":"871cc5501b9d800183a9ee7429a626a4b93ecb5a","bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"homepage":"https://github.com/gxlmyacc/react-vue-like#readme","_id":"react-vue-like@0.2.0","_nodeVersion":"12.16.2","_npmVersion":"6.14.4","dist":{"integrity":"sha512-kADr+tJu0QVh5m2M8usGf+U2MMVhyy/CrKol9vIeeiUz4m+adTOawbUArNPOFfrkeMcTaa7jO4r4mUwRF6gMVg==","shasum":"b961ba7de94a0588c8d9fe39ecb1b75749f5373e","tarball":"https://registry.npmjs.org/react-vue-like/-/react-vue-like-0.2.0.tgz","fileCount":99,"unpackedSize":451072,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDW9UCRA9TVsSAnZWagAAolAP/2T2v/WYmdI9mUNf2CkP\nmnUe2UsP9BDuU+9ogcwqksaS8hdzMgt3PE80xGd51V+mrscNYJ/n2sOxDrrs\nzxwKViae8saU/hzaq9Cnp0VLAp2ZcOxPUmnTS+Muu2ajVOcewj7NBFrcBQCZ\n17tNiitPnVxwDrGoIbbxP7vmHGn8iB+vJqvhn1CvjO9ZIYvLGMNg+5NOq8c1\ngEOhHxGrlXSy3+fQkPKj8+6qrcX+KJ0fDfinTN2TTN96qHeDARaj8tx0lVEh\n5Evmod1P6Qy3ALnSSsLfRaWtbwOZEHuXel4KQwP89zxI7G4BYOIjta+maPQs\noxTkToUUPFbLHekPPNNBP5CYZ3Pk6+ycfUejJBArK1aJxBbyl+YeaWygnxf1\nRKDFUY4eUpj2YtdfpBtMvX9/KqBv9z6F0V63ieZUlb8sWzfwLSPdYX+0ujrG\nsF6YOAJM4V6+FdM/WHQsqpJVkAtUGspZX08TRGD7cNnPeKyeczE0/te97WjW\nhDovh0LXHbEwCeATKwH+HSFbb+FpJrwDPncLbLV45Sd+I7K5mO1D2XZJDPHZ\nEKmXThho+fGuMA6e1cz0jghCZ2QNa32p9Wzh18InMJj13in+iWKwkW+ymZSU\n5avI6Met4nphtNYB9yKJnBpJHUdG7mtfEu8AyuPjbeP6j4pohOPC91cd1Wen\nbE9d\r\n=4AUo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICvKmRyD6mFFEX2NqPM1GZcyQhOVr1LXsbVsR9v3r4P/AiANfQmKHwZkuzR3fN1woLcr5TVG08wCzVEQELM0VL78yg=="}]},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"_npmUser":{"name":"gxlmyacc","email":"gxl.mymail@163.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-vue-like_0.2.0_1594715987853_0.6350760268965596"},"_hasShrinkwrap":false}},"time":{"created":"2019-08-27T07:19:11.154Z","0.0.1":"2019-08-27T07:19:11.359Z","modified":"2022-05-15T07:38:44.112Z","0.0.2":"2019-08-27T08:20:59.378Z","0.0.3":"2019-08-29T12:21:32.508Z","0.0.4":"2019-08-29T15:36:32.643Z","0.0.5":"2019-08-30T11:11:32.287Z","0.0.6":"2019-08-30T12:45:54.266Z","0.0.7":"2019-09-01T10:05:58.156Z","0.0.8":"2019-09-04T06:58:02.701Z","0.0.9":"2019-09-05T03:21:50.023Z","0.0.10":"2019-09-05T05:39:22.980Z","0.0.11":"2019-09-05T05:52:50.686Z","0.0.12":"2019-09-05T07:39:20.551Z","0.0.13":"2019-09-08T08:04:36.167Z","0.0.14":"2019-09-09T00:59:38.739Z","0.0.15":"2019-09-09T07:50:46.091Z","0.0.16":"2019-09-10T11:05:11.856Z","0.0.17":"2019-09-11T12:08:40.671Z","0.0.18":"2019-09-12T10:20:37.344Z","0.0.19":"2019-09-15T09:21:10.748Z","0.0.20":"2019-09-15T09:32:34.398Z","0.0.21":"2019-09-15T09:50:51.546Z","0.0.22":"2019-09-16T10:10:44.875Z","0.0.23":"2019-09-16T12:30:15.147Z","0.0.24":"2019-09-18T02:55:38.961Z","0.0.25":"2019-09-18T11:10:42.313Z","0.0.26":"2019-09-19T13:21:06.755Z","0.0.27":"2019-09-22T15:08:45.390Z","0.0.28":"2019-09-23T03:00:52.066Z","0.0.29":"2019-09-25T11:22:35.591Z","0.0.30":"2019-09-25T11:47:14.858Z","0.0.31":"2019-09-30T03:13:12.713Z","0.0.32":"2019-10-06T04:14:08.172Z","0.0.33":"2019-10-08T02:21:07.387Z","0.0.34":"2019-10-21T10:16:14.586Z","0.0.35":"2019-10-23T12:33:52.639Z","0.0.36":"2019-10-23T12:56:25.853Z","0.0.37":"2019-10-29T16:05:50.865Z","0.0.38":"2019-10-29T16:19:42.230Z","0.0.39-alpha.0":"2019-11-01T01:55:15.880Z","0.0.39-alpha.1":"2019-11-03T07:10:42.338Z","0.0.39-alpha.2":"2019-11-09T07:37:50.338Z","0.0.39-alpha.3":"2019-11-09T08:09:37.790Z","0.1.0-alpha.0":"2019-11-11T02:32:10.142Z","0.1.0-alpha.1":"2019-11-18T09:02:12.843Z","0.1.0-alpha.2":"2019-11-19T04:22:58.252Z","0.1.0-alpha.3":"2019-11-19T09:40:17.700Z","0.1.0-alpha.4":"2019-11-20T11:21:49.374Z","0.1.0-alpha.5":"2019-11-21T06:54:39.858Z","0.1.0-alpha.6":"2019-11-21T07:23:01.647Z","0.1.0-alpha.7":"2019-11-21T07:32:32.631Z","0.1.0":"2019-11-21T07:33:41.728Z","0.1.1":"2019-11-21T08:36:41.946Z","0.1.2":"2019-11-22T09:23:39.222Z","0.1.3-alpha.0":"2019-11-23T02:57:58.080Z","0.1.3-alpha.1":"2019-11-25T07:43:21.856Z","0.1.3-alpha.2":"2019-11-27T10:46:34.291Z","0.1.3-alpha.3":"2019-11-30T06:13:55.839Z","0.1.3":"2019-11-30T06:52:46.178Z","0.1.4-alpha.0":"2019-12-02T08:28:42.587Z","0.1.4-alpha.1":"2019-12-04T09:15:41.647Z","0.1.4-alpha.2":"2019-12-06T05:53:27.102Z","0.1.4-alpha.3":"2019-12-18T10:49:51.458Z","0.1.4-alpha.4":"2019-12-26T15:27:17.883Z","0.1.4-alpha.5":"2019-12-27T05:42:50.463Z","0.1.4-alpha.6":"2020-01-02T05:56:46.252Z","0.1.4-alpha.7":"2020-01-08T16:12:12.514Z","0.1.4":"2020-01-13T01:13:06.766Z","0.1.5-alpha.0":"2020-02-10T03:24:03.355Z","0.1.5-alpha.1":"2020-02-14T03:27:14.411Z","0.1.5-alpha.2":"2020-02-18T03:26:32.555Z","0.1.5-alpha.3":"2020-02-24T09:10:23.046Z","0.1.5-alpha.4":"2020-02-25T02:37:13.783Z","0.1.5-alpha.5":"2020-02-26T07:25:38.929Z","0.1.5-alpha.6":"2020-02-26T08:32:58.665Z","0.1.5":"2020-03-02T01:12:57.951Z","0.1.6":"2020-03-22T08:44:25.365Z","0.1.7":"2020-03-25T12:35:17.399Z","0.1.8-alpha.0":"2020-04-02T07:56:58.400Z","0.1.8-alpha.1":"2020-04-03T08:19:36.937Z","0.1.8-alpha.2":"2020-04-09T08:21:54.314Z","0.1.8-alpha.3":"2020-04-11T05:52:32.479Z","0.1.8-alpha.4":"2020-04-23T10:21:21.600Z","0.1.8":"2020-05-04T07:16:19.009Z","0.2.0-alpha.0":"2020-05-04T07:24:47.607Z","0.2.0-alpha.1":"2020-05-04T09:39:37.089Z","0.2.0-alpha.2":"2020-05-05T09:26:02.753Z","0.2.0":"2020-07-14T08:39:48.027Z"},"maintainers":[{"name":"gxlmyacc","email":"gxl.mymail@163.com"}],"description":"write react component like vue","homepage":"https://github.com/gxlmyacc/react-vue-like#readme","keywords":["react-vue-like","react","vue"],"repository":{"type":"git","url":"git+https://github.com/gxlmyacc/react-vue-like.git"},"author":{"name":"gxlmyacc"},"bugs":{"url":"https://github.com/gxlmyacc/react-vue-like/issues"},"readme":"# react-vue-like\n\n[![NPM version](https://img.shields.io/npm/v/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n[![NPM downloads](https://img.shields.io/npm/dm/react-vue-like.svg?style=flat)](https://npmjs.com/package/react-vue-like)\n\nwrite react component like vue, implementation based on mbox@4.\n\n# Table of Contents:\n\n* [Installation](#installation)\n\n* [Support Vue Feature](#support-vue-feature)\n\n  * [props](#props)\n  * [components](#components)\n  * [filters](#filters)\n  * [directives](#directives)\n  * [mixin](#mixin)\n  * [data](#data)\n  * [methods](#methods)\n  * [computed](#computed)\n  * [watch](#watch)\n  * [Lifecycle](#lifecycle)\n  * [Scoped Style](#scoped-style)\n  * [Slot](#slot)\n  * [Vue Internal Directives](#vue-internal-directives)\n  * [VueLike Internal Directives](#vuelike-internal-directives)\n  * [Event Mechanism](#event-mechanism)\n  * [Attribute Transform](#attribute-transform)\n  * [Ref](#ref)\n  * [Vue Like Props](#vue-like-props)\n  * [Vue like Methods](#vue-like-methods)\n  * [Attrs Inheirt](#attrs-inheirt)\n  * [Class Attribute Support And Enhance](#class-attribute-support-and-enhance)\n  * [Prop And Event Modifiers](#prop-and-event-modifiers)\n  * [Provide Inject](#provide-inject)\n  * [Vuex Store](#vuex-store) <span style=\"color:red;\">(note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like)</span>)\n  \n* [Other Feature](#other-feature)\n\n  * [Const Var](#const-var)\n  * [Instance Methods](#instance-methods)\n  * [Static Methods](#static-methods)\n\n* [Usage](#usage)\n\n* [Note](#note)\n\n* [License](#license)\n\n\n## Installation\n\n```bash\nnpm install react-vue-like --save\n# or\nyarn add react-vue-like\n```\n\n## Support Vue feature\n\n### `props` \n\nwill transfrom to react's `propTypes` and `defaultProps`\n\nsee [Vue props](https://vuejs.org/v2/api/index.html#props)\n\n example:\n ```js\n class Test extends ReactVueLike.Component {\n   static props = {\n     aa: {\n       type: String,\n       default: 'aa',\n       required: true,\n     },\n     bb: Boolean,\n   }\n }\n```\nequals:\n ```js\n import PropTypes from 'prop-types';\n class Test extends ReactVueLike.Component {\n   static propTypes = {\n     aa: PropTypes.string.isRequired,\n     bb: PropTypes.bool\n   }\n   static defaultProps = {\n     aa: 'aa'\n   }\n }\n```\n### `components` \n\nif tag name has `-` char will be treat as a component that find from self's `components` section or root's `components` section.\n\nsee [Vue components](https://vuejs.org/v2/api/index.html#components)\n\n example:\n ```js\n import AComponent from './AComponent';\n\n class Test extends ReactVueLike.Component {\n   static components = {\n     AComponent\n   }\n\n   render() {\n     return (<a-component>dd</a-component>)\n   }\n }\n```\n\n### `filters`\n example:\n ```js\n class Test extends ReactVueLike.Component {\n   static filters = {\n     prefix(val, suffix = '') {\n       return `test:${val}${suffix}`;\n     }\n   }\n\n   render() {\n     return (<div>\n       {// output: test:hello }\n       { 'hello' | 'test' }  \n       {// output: test:helloa suffix }\n       { 'hello' | 'test'('a suffix') }\n       </div>);\n   }\n }\n ```\n\n### `directives` \n\nsee [Vue directives](https://vuejs.org/v2/api/index.html#directives)\n\nexample:\n  ```js\n  class Test extends ReactVueLike.Component {\n   static directives = {\n     test: {\n       bind(el, binding, vnode) {\n\n       },\n       insert(el, binding, vnode) {\n\n       },\n       update(el, binding, vnode) {\n\n       },\n       unbind(el, binding, vnode) {\n\n       },\n     }\n   }\n\n   render() {\n     return (<div v-test_arg$aa$bb={1+1} {/* or */} v-test:arg$aa$bb={1+1} ></div>);\n   }\n }\n  ```\n  `v-test_arg$aa$bb={1+1}`, the `binding` will be:\n  ```js\n   { \n     name: 'test', \n     arg: 'arg',\n     value: 2,\n     modifiers: {\n       aa: true,\n       bb: true\n     },\n     expression: '1+1'\n  }\n  ```\n\n### `mixin`\nsee [Vue mixin](https://vuejs.org/v2/api/index.html#mixins)\n example:\n```js\nclass Test extends ReactVueLike.Component {\n  static mixins = [\n    {\n      data() {\n        return {\n          text: 'aa',\n        };\n      },\n      methods: {\n        test() {\n          console.log('test');\n        }\n      }\n    }\n  ]\n  \n\n  render() {\n    return (<div>\n      <span onClick={this.test}>{this.text}</span>\n    </div>);\n  }\n}\n```\n### `data`\nsee [Vue data](https://vuejs.org/v2/api/index.html#data)\n example:\n ```js\n class Test extends ReactVueLike.Component {\n   static data() {\n     return {\n       text: 'aa',\n       formData: {\n         name: 'dddd'\n       }\n     }\n   }\n\n   render() {\n     return (<div>\n        <span>{this.text}</span>\n        <span>{this.formData.name}</span>\n       </div>);\n   }\n }\n ```\n### `methods`\n\nsee [Vue methods](https://vuejs.org/v2/api/index.html#methods)\n\n example:\n ```js\n class Test extends ReactVueLike.Component {\n   static methods = {\n     test1() {\n       console.log('test1');\n     }\n   }\n\n   test2() {\n      console.log('test2');\n   }\n\n   render() {\n     return (<div>\n        <span onClick={this.test1}>aa</span>\n        <span onClick={this.test2}>dd</span>\n       </div>);\n   }\n }\n ```\n### `computed`\n\nsee [Vue computed](https://vuejs.org/v2/api/index.html#computed)\n\nexample:\n```js\nclass Test extends ReactVueLike.Component {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static computed = {\n    test1() {\n      return `test1:${this.text}`;\n    },\n    test2: {\n      get() {\n        return `test2:${this.text}`;\n      },\n      set(v) {\n        this.text = v;\n      }\n    }\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <span>{this.test1}</span>\n      <span onClick={() => this.test2 = 'bb'}>{this.test2}</span>\n      </div>);\n  }\n}\n```\n\n### `watch`\n\nsee [Vue watch](https://vuejs.org/v2/api/index.html#watch)\n\nexample:\n\n```js\nclass Test extends ReactVueLike.Component {\n  static data() {\n    return {\n      text: 'aa',\n    }\n  }\n\n  static watch = {\n    text(newVal, olVal) {\n      console.log('text chagned', newVal, oldVal);\n    },\n  }\n\n  render() {\n    return (<div>\n      <span>{this.text}</span>\n      <button onClick={() => this.text = 'bb'}>change</button>\n      </div>);\n  }\n}\n```\n\n### `lifecycle`\n\nsee [Options-Lifecycle-Hooks](https://vuejs.org/v2/api/index.html#Options-Lifecycle-Hooks)\n\nexample:\n```js\nclass Test extends ReactVueLike.Component {\n\n  breforeCreate() { }\n\n  created() { }\n\n  beforeMount() { }\n\n  mounted() { }\n\n  beforeUpdate() {  }\n\n  updated() { }\n\n  beforeDestroy() { }\n\n  render() {\n    return (<div>haha</div>);\n  }\n\n}\n```\n\n### `scoped style` \n\nif import's style file name has `?scoped`, then it will treat as `scoped style`\n\nexample:\n```scss\n.aa .bb {\n  height: 100%;\n}\n\n.aa .bb >>> .cc {\n  background-color: red;\n}\n\n.aa .bb:scope > .cc {\n  background-color: red;\n}\n\n:global .aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike.Component {\n\n  render() {\n    return (<div className=\"aa\">\n      haha\n      <span>dd</span>\n      <a-component className=\"bb\" />\n    </div>);\n  }\n\n}\n```\n\nwill transform to like this:\n```scss\n.aa .bb.v-123dse43 {\n  height: 100%;\n}\n\n.aa .bb.v-123dse43 .cc {\n  background-color: red;\n}\n\n.aa .bb.v-123dse43 > .cc {\n  background-color: red;\n}\n\n.aa .bb {\n  background-color: red;\n}\n\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike.Component {\n\n  render() {\n    return (<div className=\"v-123dse43 aa\">\n      haha\n      <span className=\"v-123dse43\">dd</span>\n      <a-component className=\"v-123dse43 bb\" />\n    </div>);\n  }\n\n}\n```\n\n### `slot`\n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike.Component {\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n    </div>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike.Component {\n\n  render() {\n    return (<ChildComponent>\n      {/* if child-component is `ReactVueLike Component` then it will has `$slots: { header, default, footer }` */}\n      {/* if child-component is `React Component` then it will has `header, footer` attributes, default slot will be it's 'children'  */}\n      <span slot=\"header\">this is header</span>\n\n      {/* scoped slot */}\n      <template>\n        ({ value, user }) => <span>this is body: {user.name}: {value}</span>\n      </template>\n\n      <span slot=\"footer\">this is footer</span>\n    </ChildComponent>);\n  }\n\n}\n```\n\n### `Vue Internal Directives`\n`v-if/v-else-if/v-else`,`v-show`,`v-model`, `v-html`\nsee [Vue Directives](https://vuejs.org/v2/api/index.html#Directives) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike.Component {\n\n  static data() {\n    return {\n      vif: true,\n      vshow: true,\n      text1: '',\n      text2: 0,\n      text3: ''\n    }\n  }\n\n  render() {\n    return (<div>\n      <span v-if={this.vif}>v-if showing</span>\n      <span v-else>else showing</span>\n\n      <span v-show={this.vshow}>\n        v-show showing\n      </span>\n\n      <input v-model$trim={this.text1}></input>\n      <input type=\"number\" v-model$number={this.text2}></input>\n      <input v-model$lazy={this.text3}></input>\n\n      {/* equals: dangerouslySetInnerHTML={{ __html: \"<a href='#'>dd</a>\" }} */}\n      <span v-html=\"<a href='#'>dd</a>\"></span>\n    </div>);\n  }\n\n}\n```\n### `Vuelike Internal Directives`\n\n`v-observer`\nsee [Mobx Observer](https://github.com/mobxjs/mobx-react#observer) \n\nexample:\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass Test extends ReactVueLike.Component {\n\n  render() {\n    return (<div>\n      {/* will transform <Observer>{() => <span v-observer>ddd</span>}</Observer> */}\n      <span v-observer>ddd</span>\n      {/* will transform <Observer render={() => <span v-observer>ddd</span>}</Observer>} /> */}\n      <span v-observer$render>ddd</span>\n    </div>);\n  }\n\n}\n```\n\n### `Event Mechanism`\nyou can use `$emit` to send event message to `bind Event` that bind by `$on` or `onXXXX` event. see [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike.Component {\n\n  mounted() {\n    this.$on('change-user', (user) => {\n      console.log('user changed', user);\n    })\n  }\n\n  handleClick() {\n    console.log('you click');\n  }\n\n  handleCusomEvent(message) {\n    console.log('handing custom event...', message);\n  }\n\n  render() {\n    return (<ChildComponent onClick={this.handleClick} onCustomEvent={this.handleCusomEvent}>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike.Component {\n\n  render() {\n    return (<div>\n      <button onClick={this.$emit('click')}>click</button>\n      <button onClick={this.$parent.$emit('change-user', { name: 'james' })}>change user</button>\n      <button onClick={this.$emit('custom-event', 'something')}>cusom event</button>\n    </div>);\n  }\n\n}\n```\n\n### `attribute transform` \n  img src attribute string value transform to `require` expression\n example:\n```js\nclass Test extends ReactVueLike.Component {\n\n  render() {\n    return (<div>\n      { /* src will transform to `require('./image/pic1.png')` */ }\n      <img src=\"./image/pic1.png\">\n    </div>);\n  }\n\n}\n```\n\n### `ref` \n\n`string ref` transform to `ref function` and set `ref` to `$refs`. see[vue ref](https://vuejs.org/v2/api/index.html#ref)\n\n```js\nclass Test extends ReactVueLike.Component {\n\n  static data() {\n    return {\n      list: [\n        { key: 'a', value: 1 },\n        { key: 'b', value: 2 },\n        { key: 'c', value: 3 },\n      ]\n    }\n  }\n  \n  test() {\n    this.$refs.some.doSomething();\n  }\n \n  render() {\n    return (<div>\n      { /* \n      if ref value is string, then ref value will transform to `ref=>this.$refs['some']=ref`, otherwise do nothing.\n      */ }\n      <SomeComponent ref=\"some\" onClick={this.test}></SomeComponent>\n\n      {\n        this.list.map((v, i/*if not has second param, will auto inject `$index` */) => {\n          {/* support Array.map/filter/sort/slice/reverse */}\n          return [\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = [];\n                this.$refs['item1'][$index] = ref;\n              }\n            */}\n            <span ref=\"item1\" key={v.key}>{v.value}</span>,\n\n            {/* \n              will transform to:\n              ref=> {\n                if (!this.$refs['item1']) this.$refs['item1'] = {};\n                this.$refs['item1'][v.key] = ref;\n              }\n            */}\n            <span ref$key=\"item2\" key={v.key}>{v.value}</span>,\n          ]\n        })\n      }\n    </div>);\n  }\n\n}\n```\n\n### `Vue like props` \nlike `$el`,`$options`,`$parent`,`$root`,`$refs`,`$slots`,`$attrs`. see[Instance-Properties](https://vuejs.org/v2/api/index.html#Instance-Properties)\n\n### `Vue like methods` \nlike `$nextTick`,`$set`,`$delete`,`$watch`,`$emit`,`$on`,`$off`,`$once`,`renderError`, `ReactVueLike.use`, `ReactVueLike.configure`. see [Instance-Methods-Data](https://vuejs.org/v2/api/index.html#Instance-Methods-Data) and [Instance-Methods-Events](https://vuejs.org/v2/api/index.html#Instance-Methods-Events)\n\n### `Attrs Inheirt` \ndefault ReactVueLike component will inherit `className`, `style`, `id`, `disabled` attributes that be defined in it`s parent component\n\n### `Class Attribute Support And Enhance` \n`class attribute` in jsx will transfrom to `className`, and now `class/className` support `String/Array/Object` types. see [Vue class](https://vuejs.org/v2/guide/class-and-style.html)\n\n```js\nclass Test extends ReactVueLike.Component {\n  \n  static data() {\n    return {\n      myClass: {\n        cc: true,\n        dd: false\n      }\n    }\n  }\n \n  render() {\n    return (<div class=\"root\">\n      <span className={['aa', 'bb', this.myClass, ['ee', 'ff'] ]}></span>\n    </div>);\n  }\n\n}\n```\n\n### `Prop And Event Modifiers`\nsee:\n  [v-model](https://vuejs.org/v2/api/index.html#v-model)\n  [v-bind](https://vuejs.org/v2/api/index.html#v-bind)\n  [v-no](https://vuejs.org/v2/api/index.html#v-on)\n```js\nimport Child from './child';\n\nclass Test extends ReactVueLike.Component {\n \n  render() {\n    return (<div>\n      {/* equals <div aa={this.aa} onChangeAa={v=>this.aa=v}></div> */}\n      <Child aa$sync={this.aa}></Child>\n      <div onClick$stop={this.test}></div>\n      <div onClick$prevent={this.test}></div>\n      <div onClick$capture={this.test}></div>\n      <div onClick$self={this.test}></div>\n      <div onClick$native={this.test}></div>\n      <div onClick$once={this.test}></div>\n      <div onClick$left={this.test}></div>\n      <div onClick$right={this.test}></div>\n      <div onClick$middle={this.test}></div>\n      <div onClick$passive={this.test}></div>\n      <div onClick$enter={this.test}></div>\n      <div onClick$13={this.test}></div>\n    </div>);\n  }\n\n}\n```\n\n```js\nclass Child extends ReactVueLike.Component {\n \n  changeAa() {\n    this.$emit('change:aa', 1);\n  }\n\n  render() {\n    return (<div>\n      <button onClick={this.changeAa}></button>\n    </div>);\n  }\n\n}\n```\n\n### `Provide Inject`\n\nsee [provide/inject](https://vuejs.org/v2/api/index.html#provide-inject)\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport ChildComponent from './ChildComponent';\n\nclass ParentComponent extends ReactVueLike.Component {\n\n  static provide() {\n    return {\n      text: this.formData\n    }\n  }\n\n  static data() {\n    return {\n      formData: {\n        text: '111'\n      }\n    }\n  }\n\n  render() {\n    return (<ChildComponent>\n    </ChildComponent>);\n  }\n\n}\n```\n\n```js\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n\nclass ChildComponent extends ReactVueLike.Component {\n\n  static inject = ['formData'];\n\n  render() {\n    return (<div>{this.formData.text}</div>);\n  }\n\n}\n```\n\n### `Vuex Store` \n\nsupport `Vuex.Store` and `mapState`,`mapMutations`,`mapGetters`,`mapActions`,`createNamespacedHelpers`. see [Vuex](https://vuex.vuejs.org/guide/)\n\n<span style=\"color:red;\">Note: Store was moved to [react-vuex-like](https://github.com/gxlmyacc/react-vuex-like).</span>\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vuex-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Other feature\n\n###  `Const Var` \nsupport `__filename`, `__dirname`, `__packagename`, `__packageversion`, `__now`\n\n### `Instance Methods`\n\n`function $computed(target, expr, value)` defined a computed in `ReactVueLike Component` instance.\n\n`function $runAction(nameOfFn, fn?)` run `fn` in mobx action, equals `runInAction` in `mobx`. \n\n### `Static Methods`\n\n`ReactVueLike.runAction(nameOfFn, fn?)` - equals `$runAction` in component instance.\n\n`ReactVueLike.observable` - `observable` method in `mobx`, just re-export.\n\n`ReactVueLike.flow` - `flow` method in `mobx`, just re-export.\n\n`ReactVueLike.action` - `action` method in `mobx`, just re-export.\n\n`ReactVueLike.set` - `set` method in `mobx`, just re-export.\n\n`ReactVueLike.delete` - `remove` method in `mobx`, just re-export.\n\n`ReactVueLike.config` - config something in ReactVueLike, example: `ReactVueLike.config({ enforceActions: true })`;\n\n`toJS, isObservable, isObservableProp, isObservableObject, isObservableArray, isObservableMap, isBoxedObservable,\nisArrayLike, isAction, isComputed, isComputedProp,\nobservable, extendObservable, observe, decorate, reaction, intercept,\ncomputed, action, autorun, when, runInAction, createAtom,\nset, get, remove, has, flow, configure,\nonBecomeObserved, onBecomeUnobserved` mobx methods, just re-export.\n\n## Usage\n\nwebpack.config.js:\n```js\n{\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.scss$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      },\n      {\n        test: /\\.less$/,\n        use: [\n          'css-loader',\n          'react-vue-like/loader',\n          ...\n        ]\n      }\n    ]\n  }\n}\n```\n\nbabel.config.js\n```js\nmodule.exports = {\n    presets: [\n    '@babel/preset-env',\n    'react-vue-like/preset',\n    '@babel/preset-react'\n  ],\n}\n```\n\nroutes file:\n```js\n// routes.js\nimport Test from './test';\n\nconst routes = [\n  {\n    path: '/',\n    component: Test\n  }\n]\n\nexport default routes;\n```\n\nrouter file: \n```js\n// router.js\nimport ReactViewRouter from 'react-view-router';\nimport routes from './routes';\n\nconst router = new ReactViewRouter({ routes });\n\nexport default router;\n```\n\nglobal filters:\n```js\n// filters.js\nexport default {\n  myFilter(value) {\n    return `myFilter:${value}`;\n  }\n\n  install(ReactVueLike, { App }) {\n    App.filters = this;\n  }\n}\n```\n\nglobal directives:\n```js\n// directives.js\nexport default {\n  test: {\n    bind(el, binding, vnode) {\n\n    }\n  }\n\n  install(ReactVueLike, { App }) {\n    App.directives = this;\n  }\n}\n```\n\nglobal components:\n```js\nimport * as antd from 'antd';\n\nconst PREFIX = 'Ad';\nfunction normalizeComps(comps, parentKey = '') {\n  const COMP_REGX = /^[A-Z][A-Za-z]+/;\n  let ret = {};\n  Object.keys(comps).forEach(key => {\n    if (!COMP_REGX.test(key)) return;\n    const comp = comps[key];\n    ret[`${PREFIX}${parentKey}${key}`] = comp;\n    if (!parentKey) Object.assign(ret, normalizeComps(comp, key));\n  });\n  return ret;\n}\n\n// components.js\nexport default function install(ReactVueLike, { App }) {\n  if (!App.components) App.components = {};\n  Object.assign(App.components, normalizeComps(antd));\n}\n```\n\nentry file:\n\n```js\n// index.js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport ReactVueLike from 'react-vue-like';\nimport store from './store';\nimport router from './router';\nimport filters from './filters';\nimport directives from './directives';\nimport components from './components';\nimport App from 'react-vue-like';\n\nReactVueLike.config({ enforceActions: true });\n\nReactVueLike.use(store, { App });\nReactVueLike.use(router, { App });\nReactVueLike.use(filters, { App });\nReactVueLike.use(directives, { App });\nReactVueLike.use(components, { App });\n\nrouter.beforeEach((to, from, next) => {\n  if (to) {\n    console.log(\n      '%croute changed',\n      'background-color:#ccc;color:green;font-weight:bold;font-size:14px;',\n      to.url, to.query, to.meta, to.redirectedFrom\n    );\n    return next();\n  }\n});\n\nReactDOM.render(<App />, document.getElementById('#root'));\n```\n\nroot ReactVueLike component:\n```js\n  // app.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\nimport { RouterView } from 'react-view-router';\nimport router from './router';\nimport SomeComponent from './SomeComponent';\n// scoped css\nimport './app.scss?scoped';\n\nclass App extends ReactVueLike.Component {\n\n  static isRoot = true\n\n  static data() {\n    return {\n      formData: {\n        text: ''\n      }\n    };\n  }\n\n\n  static computed = {\n    computedText() {\n      return `haha:${this.formData.text}`;\n    },\n  }\n\n  static methods = {\n    func1(v) {\n      console.log('dddd', v);\n    }\n  }\n\n  render() {\n    return (<div class=\"root\">\n      {/* root RouterView need `router` prop */}\n      <RouterView router={router} />\n    </div>);\n  }\n\n}\n\nexport default App;\n```\n\n```js\n  // some-component.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './some-component.scss?scoped';\n\nclass SomeComponent extends ReactVueLike.Component {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    doSomething() {\n      console.log('doSomething');\n    }\n  }\n\n  // when render throw error, then will call renderError\n  renderError(error) {\n    return `render has some error:${error.message}`;\n  }\n\n  render() {\n    return (<div>\n      <slot name=\"header\">\n      haha1\n      {\n        [1, 2, 3].map(v => <slot value={v} user={user} />)\n      }\n      haha2\n      <slot name=\"footer\">\n\n      {/* src will be transformed: require('./images/pic1.png') */}\n      <img src=\"./images/pic1.png\" />\n    </div>);\n  }\n}\n```\n\n```js\n  // test.jsx\nimport React from 'react';\nimport ReactVueLike from 'react-vue-like';\n// scoped css\nimport './test.scss?scoped';\n\nclass Test extends ReactVueLike.Component {\n\n  static computed = {\n    user() {\n      return this.$store.state.user;\n    }\n  }\n\n  static methods = {\n    test() {\n      this.$refs.some.doSomething();\n    }\n  }\n\n  render() {\n    return (<div>\n      {/* donot need import,  it will find from it's root component's components section */}\n      <some-component ref=\"some\" onClick={this.test} />\n    </div>);\n  }\n}\n```\n\nstore like Vuex.Store:\n```js\nimport { Store } from 'react-vue-like';\n\nconst store = new Store({\n  modules: {\n    child1: {\n      state: {\n        aa: true\n      }\n    },\n    child2: {\n      state: {\n        bb: true\n      }\n    }\n  },\n  state: {\n    user: {\n      name: 'name1'\n    },\n  },\n  getters: {\n    aa(state) {\n      return state.globalLoading;\n    }\n  }\n  mutations: {\n    'update-user'(state, v) {\n      state.user = v;\n    },\n    'update-user-info'(state, v) {\n      Object.keys(v).forEach(key => state.user[key] = v[key]);\n    }\n  },\n  actions: {\n    'update-user-info'({ commit }, v) {\n      commit('update-user', v);\n    }\n  },\n});\n\nexport default store;\n```\n\n## Note\n\n1. In ReactVueLike Component, try not to use `this.props`, please use `this.$attrs` instead. and you can use `this.$slots.default` instead of `this.props.children`;\n\n2. the `prop name` that bind to ReactVueLike Component, do not begin with '_'or'$' chars, they are recognized as internal values of ReactVueLike. \n\n## License\n\n[MIT](./LICENSE)\n","readmeFilename":"README.md"}