{"_id":"@arun413kadari/react-component-generator","_rev":"2-6f3633beea9d2353a3532c2372942806","name":"@arun413kadari/react-component-generator","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@arun413kadari/react-component-generator","version":"1.0.0","main":"generator.js","scripts":{"test":"npm test"},"keywords":["reaact","reactjs","nodejs","react-tools","componet generator"],"author":{"name":"arun"},"license":"ISC","description":"A simple utility tool to create react component files with some boilerplate code","dependencies":{"js-yaml":"^3.13.1"},"repository":{"type":"git","url":"git+https://github.com/arunkumar413/react_component_generator.git"},"gitHead":"3d7b9489590ceae7f366b9b124c8b1e9d7934dc0","bugs":{"url":"https://github.com/arunkumar413/react_component_generator/issues"},"homepage":"https://github.com/arunkumar413/react_component_generator#readme","_id":"@arun413kadari/react-component-generator@1.0.0","_nodeVersion":"12.4.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-x0xpqrt24Csk+UcrshkqK0bQkFYjH5qsYet/vBBCkjm2xy9+SVANbkk48gPz2pYy/vhZbmmQfhf3pVkaKncHQw==","shasum":"3669ad4b39c12f08afb458eee05dd368638f8212","tarball":"https://registry.npmjs.org/@arun413kadari/react-component-generator/-/react-component-generator-1.0.0.tgz","fileCount":5,"unpackedSize":6405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCcn3CRA9TVsSAnZWagAAHwgQAJiM/0Whg6d/ule7jZUM\nzEt0SEFvj4FslQKExspSGNNR82nIledwwHebn+PvoRDuQBQTucoUsBPDzTdB\n1vyXVXkihkUZlkF7vns82v/eO153HiaQxrBSwmylBJxcKE1HgAFeOOQShejw\n+ehKtcsKV4XlSrj/BqZhBmQScvkzZMxzomjc3S+FNIgIeqbFdOH6nW8rMXMn\ngnnlMOA/EuxY5gAxxUbzbIZKDHVbnKzyh5o2fvuUuC13vyX3GC/hC9N1mr1V\nC1eWTAUXdpD+epMCRcOMn6SIyjtJIRbHoFLc+McQdcP62PHT1F/xoKh8SP3u\nCb4XOWTitQY0wtm+p6Y7ECH1nZenyIGpyg5wnwDVGND1DoFjgTpYmnqCAbQu\nOWyrAgX3RgvzvBjMueDjPsxcfoWEJWh9CpzZxtQn1HONjpEG5bw+A0fGEbSu\nFrRlsW8jo2V8S3SXBMUUyw+MFA6t4G7CMD242jDrpvQf58TDojDYs3OBYhrc\nfKhBWxj1tTaGdJOZ8Zn05Eb0CHLbLqsz4faoOY83JaocpPoyRnpdiOgzxb5S\n4O2WRq/wOn6IEIZ52rpCdiH5wLwDHfz1XilnVJqArQNPXRtliEykJZcAUCRa\nPKObH4GhxXSTl1UUSFPVbq+qpd1V3EPCdQkBMqntZ88hnLsxZehGRuoiUFcu\nfYA2\r\n=TCQl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEVmWbyesnErWAaCo7YMsaDRU/As1xzDIGwum9blq/TIAiAwlsa46gg5lH4AGgVQ4qBCtheBzHx3/GFoF9YkJU2EZw=="}]},"maintainers":[{"name":"arunkumar413","email":"arunkumar413@gmail.com"}],"_npmUser":{"name":"arunkumar413","email":"arunkumar413@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-component-generator_1.0.0_1560922614903_0.4520996684484253"},"_hasShrinkwrap":false},"1.0.1":{"name":"@arun413kadari/react-component-generator","version":"1.0.1","main":"generator.js","scripts":{"test":"npm test"},"keywords":["react","reactjs","nodejs","react-tools","component generator"],"author":{"name":"arun"},"license":"ISC","description":"A simple utility tool to create react component files with some boilerplate code","dependencies":{"js-yaml":"^3.13.1"},"repository":{"type":"git","url":"git+https://github.com/arunkumar413/react_component_generator.git"},"gitHead":"3d7b9489590ceae7f366b9b124c8b1e9d7934dc0","bugs":{"url":"https://github.com/arunkumar413/react_component_generator/issues"},"homepage":"https://github.com/arunkumar413/react_component_generator#readme","_id":"@arun413kadari/react-component-generator@1.0.1","_nodeVersion":"12.4.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-mGfD/G9tlWjUWArxKmSzTNmLOZ2MKYRBw8zdwbwvr/sYCUSw1DGoS/aVpez7pPwn/oxxU0WToblsUjeRsLfcLg==","shasum":"43a20cddde0fb47bda6439c33d7cefd03a218afa","tarball":"https://registry.npmjs.org/@arun413kadari/react-component-generator/-/react-component-generator-1.0.1.tgz","fileCount":5,"unpackedSize":6405,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCcqPCRA9TVsSAnZWagAA2vMP/ROMNcjDZkl+uANctwBd\n7LpXcBgsdeyhBh4Z0LWHRUSrb8Tybg3GJqSD2iFKecD1ulfM4llZLr9V5yVC\npYgWo2ZoanC+pzNdNuRQ++9NPSBYPHXQwh90u8AcPqTW2PCuYlzDJMo/LdYD\nMWD5uLHBzWWil789e6UySWNx9Mp4x/Jl3LdKT5qNWypKpJziGg+OOVDQM54B\n/++1OKHQzkRi+MMPuM/r6lP9FFbBEiMhGze9+1etuZcr5SU7vFW37Gol01Sw\nhQcu8lbtzr9twOI5zkhH2RRM1wXgqLwaM77v6Ijtl5EoEpqNPnGlszIYgIFH\ndEsnbpZguNiixDqzOQYJJMSVTaqZHMyXogqVYVCDRkNUc6HS6v2IZ3tV4KZh\nq4xvL4Yhifn/K0Uu3eZFhtSVfJ4JTFBwQE14IeRHEK2kEG/72YTF5DSxEPZR\nDpBH/RmubrGQhel0/qH8q36TUmZIWGW4Yw7ILtJybShRELbjz0laW8rz1jQs\npBxsoJiOTgtmbaajgTybjf3bpf8ZWT4NuCAwApqP9CWRajQsXz7XWoB7ALNj\nxI5r2BlMXkD8lb1huJp85Okay4apb3NhzlciV6bjBk3tgukdrkXEKKu4iayR\ny+IqvGykTNAvBQsK/AF5Kn6/r02On8oIZ3DNGbM+QIpKtAzOniDNEoVf9l8E\n2oR1\r\n=mXYR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3qH3dttKdalCVaOuwQnb4tlh5e9QDuCjfqQK/Nm5urgIgZqnLxX9USKndOBM+lxkx0gUnRnZF7pMiKfXZUAWEaq8="}]},"maintainers":[{"name":"arunkumar413","email":"arunkumar413@gmail.com"}],"_npmUser":{"name":"arunkumar413","email":"arunkumar413@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-component-generator_1.0.1_1560922766815_0.762783456343185"},"_hasShrinkwrap":false}},"time":{"created":"2019-06-19T05:36:54.696Z","1.0.0":"2019-06-19T05:36:55.042Z","modified":"2022-04-04T15:40:48.147Z","1.0.1":"2019-06-19T05:39:27.011Z"},"maintainers":[{"name":"arunkumar413","email":"arunkumar413@gmail.com"}],"description":"A simple utility tool to create react component files with some boilerplate code","homepage":"https://github.com/arunkumar413/react_component_generator#readme","keywords":["react","reactjs","nodejs","react-tools","component generator"],"repository":{"type":"git","url":"git+https://github.com/arunkumar413/react_component_generator.git"},"author":{"name":"arun"},"bugs":{"url":"https://github.com/arunkumar413/react_component_generator/issues"},"license":"ISC","readme":"# react_component_generator\nA simple utility tool to create react component files with some boilerplate code.\n\n## Note\n\nThis tool only works with the new react hooks (https://reactjs.org/docs/hooks-intro.html) and doesn't work/support class or other function based components. Hooks are the new addition or new avatar of react components and they're much easier and offer cleaner syntax to work with. So I'm restricting this tool only to hooks and I have no plans or interest to make this work with class based components.\n\nHowever, if you're interested to make this work with class based components please feel free to fork this repo and contribute. \n\n### What does this tool do?\n\nThis small tool helps you in saving time by creating component files for your react applicaton. You simply need to write a small specification in YAML format describing the basic structure of each compnent such as name, state variables and handler functions. The tool, when run, will turn the specification into component files with specified boilerplate code.\n\n### Inspiration\n\nThis tools draws it's inspiration from the Open API Specification (https://swagger.io/docs/specification/about/) which helps us to design and develop most of the backend REST API. \n\nWhen I started learning reactjs, I realized that it's cumbursome and routine to write/create component files by hand everytime we create a new project. I observed some of the common patterns in reactjs programming and decided to convert those patterns into a specification on the lines of Open API specification. Currently the tool is very basic in nature and I believe there is a lot of scope for evolution. \n\n### Usage\n1)  Clone this repo\n2)  cd to the directory  \n3)  Run the `npm install --save` command to install the dependencies\n4)  Run the command followed by the specification file `node generator.js <filename> `\n\nExample:\n\n`node generator.js sample_spec.yaml`\n\n### Specification structure\n\nThis tool includes a sample specification file (sample_spec.yaml) to test, understand and write your own specification and below is it's structure.\n\n```\ncomponents:\n    -\n        name: Component1\n        state:\n            variable_name: count1\n            function_name: setcount1\n            initial_value: 0\n        handlers:\n            - clickHandler\n            - loginHandler\n    \n    -\n        name: Component2\n        state:\n            variable_name: count2\n            function_name: setcount2\n            initial_value: 0\n        handlers:\n            - clickHandler\n            - hoverHandler\n```\n\nThe specification is very easy and flat to understand. All the components are stored in an array. And each component has name, state and handlers. Please follow the above structure to write your own component specification.","readmeFilename":"README.md"}