{"_id":"@davids-devel/rocket-translator","_rev":"2-d932dfb26315e6c43c3e323d86e44c2c","name":"@davids-devel/rocket-translator","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@davids-devel/rocket-translator","version":"1.0.0","description":"Translate your HTML files to React.js and Vue.js","keywords":["vue","react","translator","html translator"],"engines":{"node":">= 0.1"},"directories":{"test":"test"},"main":"./Lib/core","repository":{"type":"git","url":"git+https://github.com/Davids-Devel/RocketJS.git"},"scripts":{"publish-major":"git push origin master && npm version major && npm publish --access public","publish-minor":"git push origin master && npm version minor && npm publish --access public","publish-patch":"git push origin master && npm version patch && npm publish --access public","vue":"node ./bin/cli.js -v","react":"node ./bin/cli.js -r"},"bugs":{"url":"https://github.com/Davids-Devel/RocketJS/issues"},"homepage":"https://github.com/Davids-Devel/RocketJS#readme","author":{"name":"David González"},"license":"ISC","bin":{"rocket":"bin/cli.js"},"dependencies":{"accepts":"^1.3.5","archiver":"^3.0.0","array-flatten":"^1.1.1","async":"^2.6.1","balanced-match":"^1.0.0","bl":"^1.2.2","body-parser":"^1.18.3","brace-expansion":"^1.1.11","buffer-alloc":"^1.2.0","buffer-alloc-unsafe":"^1.1.0","buffer-crc32":"^0.2.13","buffer-fill":"^1.0.0","bytes":"^3.0.0","compress-commons":"^1.2.2","concat-map":"^0.0.1","content-disposition":"^0.5.2","content-type":"^1.0.4","cookie":"^0.3.1","cookie-signature":"^1.0.6","core-util-is":"^1.0.2","crc":"^3.8.0","crc32-stream":"^2.0.0","debug":"^2.6.9","depd":"^1.1.2","destroy":"^1.0.4","ee-first":"^1.1.1","encodeurl":"^1.0.2","end-of-stream":"^1.4.1","escape-html":"^1.0.3","etag":"^1.8.1","base64-js":"^1.3.0","express":"^4.16.4","finalhandler":"^1.1.1","forwarded":"^0.1.2","fresh":"^0.5.2","fs-constants":"^1.0.0","fs.realpath":"^1.0.0","glob":"^7.1.3","graceful-fs":"^4.1.15","http-errors":"^1.6.3","iconv-lite":"^0.4.23","inflight":"^1.0.6","inherits":"^2.0.3","ipaddr.js":"^1.8.0","isarray":"^1.0.0","buffer":"^5.2.1","lazystream":"^1.0.0","lodash.assign":"^4.2.0","lodash.defaults":"^4.2.0","lodash.difference":"^4.5.0","lodash.flatten":"^4.4.0","lodash.isplainobject":"^4.0.6","lodash.union":"^4.6.0","lodash.toarray":"^4.4.0","media-typer":"^0.3.0","merge-descriptors":"^1.0.1","methods":"^1.1.2","mime":"^1.4.1","mime-db":"^1.36.0","mime-types":"^2.1.20","minimatch":"^3.0.4","ms":"^2.0.0","negotiator":"^0.6.1","normalize-path":"^3.0.0","on-finished":"^2.3.0","once":"^1.4.0","parseurl":"^1.3.2","path-is-absolute":"^1.0.1","ieee754":"^1.1.12","path-to-regexp":"^0.1.7","process-nextick-args":"^2.0.0","proxy-addr":"^2.0.4","qs":"^6.5.2","range-parser":"^1.2.0","raw-body":"^2.3.3","readable-stream":"^2.3.6","remove-trailing-separator":"^1.1.0","safe-buffer":"^5.1.2","safer-buffer":"^2.1.2","send":"^0.16.2","lodash":"^4.17.11","serve-static":"^1.13.2","setprototypeof":"^1.1.0","statuses":"^1.4.0","tar-stream":"^1.6.2","to-buffer":"^1.1.1","type-is":"^1.6.16","unpipe":"^1.0.0","util-deprecate":"^1.0.2","utils-merge":"^1.0.1","vary":"^1.1.2","wrappy":"^1.0.2","xtend":"^4.0.1","zip-stream":"^2.0.1","archiver-utils":"^2.0.0","string_decoder":"^1.1.1"},"gitHead":"3cc24af2efe7aed0fcb3a34ed41f2de3733f4ed3","_id":"@davids-devel/rocket-translator@1.0.0","_npmVersion":"6.4.1","_nodeVersion":"10.14.0","_npmUser":{"name":"davids-devel","email":"djgm1206@gmail.com"},"dist":{"integrity":"sha512-vI7R+bqm0vLHKo7JQ93xxYH26wF5GbiPvM5R5utVDF0aiSSluFD2V6Vvt9vr9lZE5MuErALMi2zCa7orCz87dw==","shasum":"034c593239eb61acbf37c56fb053c3633389c211","tarball":"https://registry.npmjs.org/@davids-devel/rocket-translator/-/rocket-translator-1.0.0.tgz","fileCount":14,"unpackedSize":83585,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcAHdXCRA9TVsSAnZWagAAspsP/iCFQqg5zkWMI6wDPv4C\nNqcAErOsHvDsLbKgqyhgMgh8wYz2lOKr4mnEvZU633d+7bDd0HC2MeIIT5HT\nkRRgBZLnO86kfMcBS/acLS8I0juqtokqqH0yC1s0adZ59thdCmQV2J9K8ulR\nHpNcLmipyNM1HbIkcclVPTwiDWNRE/ra2PZTeDNDPnKqQgjUynJbTNmEskug\nu1YQ2p00ZzsKjvlwKdbZEPw4VMWS/zx84jnDpFvmcUV2id8biDiLjW3IqOvY\nmDWUMnLP/qy7TKUnW/ybKD1WRseH9KbDb3fHd0EnJbK0JHIN2Ra2+G5tFIhI\nfFECSkvm6OWvbRGdOOwznnIuzOB0b/i3F215+XGLzY+zuDERG9UPTAswAqZs\nC3OFA2qRju+J9TTR5bDHYcjJPP26rKiap2zeA7oAddfHf5GeUk8C9O8ZM/HN\nhlGJqbcvyEGJU0PqUHtzqcNLX8eN6wpmdwVB+i3Pr/VMOJtg3B0EuoJCOaFX\nQ/QrzVsw+scPE2VpDWhg0aWba3PuazQVTOabcQwdCHCQzHSYTY9hHRaRoc+R\nSmtUue4C7aHtuwFr6zpUzZxvXMgIoVnSGf1MUt7jMEatnCgEUJWnYW0t54vg\nuvRDnNDB+39a4h9EoJei70sDzWEl+T98G8owj/yOIiUEd/dvhJyey5MW+ic0\nG9/N\r\n=ewKm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9ZIi9qtQtOyae9wr/oLhSKb/Llxvjr4hbiqNbaI8eVgIhAOrZ3s+9oSaE7MJkiv2N+xy1fdk3eUUE3dApS0wk9ZAc"}]},"maintainers":[{"name":"davids-devel","email":"djgm1206@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/rocket-translator_1.0.0_1543534422792_0.23426420178435237"},"_hasShrinkwrap":false,"deprecated":"Rename to rocket-translator"}},"time":{"created":"2018-11-29T23:33:42.627Z","1.0.0":"2018-11-29T23:33:42.900Z","modified":"2022-04-05T03:06:15.870Z"},"maintainers":[{"name":"davids-devel","email":"djgm1206@gmail.com"}],"description":"Translate your HTML files to React.js and Vue.js","homepage":"https://github.com/Davids-Devel/RocketJS#readme","keywords":["vue","react","translator","html translator"],"repository":{"type":"git","url":"git+https://github.com/Davids-Devel/RocketJS.git"},"author":{"name":"David González"},"bugs":{"url":"https://github.com/Davids-Devel/RocketJS/issues"},"license":"ISC","readme":"# RocketJS\r\n\r\nTranslate HTML code to Vue or React.\r\n\r\n## Instalation\r\n\r\nTo install simply:\r\nClone the repository and install dependencies.\r\n\r\n```sh \r\nnpm i -g rocket-translator\r\n```\r\n\r\n## Getting Started\r\n\r\n### Basic\r\n\r\nYou can convert this:\r\n\r\n```html\r\n
\r\n\r\n\r\n```\r\n\r\n### How to Use\r\n\r\nTo use, simpy create a HTML file, with the code to translate, and run:\r\n\r\n```sh\r\nrocket [mode] path/to/file.html [output folder]\r\n```\r\n\r\nThe **mode** may be `-v` to Vue or `-r` to React.\r\n\r\nThe **output folder** is optional, if this is not defined will create a folder named **dist**.\r\n\r\n## Guide\r\n\r\n* [States Simple](#states-simple)\r\n* [Props](#props)\r\n* [Computed](#computed)\r\n* [Methods](#methods)\r\n* [Components](#components)\r\n* [Watchers](#watchers)\r\n* [Inputs Handler](#inputs)\r\n* [Conditionals](#conditionals)\r\n* [List Render](#loops)\r\n* [Bind Attributes](#binds)\r\n* [Styles](#styles)\r\n* [JavaScript Management](#js-management)\r\n* [HTML Syntax](#syntax)\r\n\r\n### States Simple \r\n\r\nA **State** in a Vue or React component, are a way to set data that affect the view, and when this changes, the component re-render the view.\r\n\r\nTo get values from the HTML, we must declare into `{}`. And to the declare a state, we have 2 modes to set it: **Simple**, **With Value**.\r\n\r\nThe **Simple** mode, is declared writing only the state name into the template and writing the type: **state**.\r\n\r\nExample:\r\n\r\n```html\r\n
{myState - state}
\r\n```\r\n\r\nIn the **With Value** mode, is declared when, we write the state name, the type: **state** and the value for this state.\r\n\r\nExample:\r\n\r\n```html\r\n
{stateName - state - \"Some Value\"}
\r\n```\r\nThe **value** may be `String`, `Number`, `Boolean`,`Array` and `Object`.\r\n\r\nAnd in the **simple** case, we obtain the next component state.\r\n\r\nIn Vue:\r\n\r\n```js\r\ndata(){\r\n\treturn {\r\n\t\tmyState:\"\"\r\n\t}\r\n}\r\n```\r\nAnd in React we obtain:\r\n\r\n```js\r\nthis.state = {\r\n\tmyState:\"\"\r\n}\r\n```\r\n\r\nIn the **With value** case we obtain. In Vue:\r\n\r\n```js\r\ndata(){\r\n\treturn {\r\n\t\tstateName:\"Some Value\"\r\n\t}\r\n}\r\n```\r\n\r\nAnd in React:\r\n\r\n```js\r\nthis.state = {\r\n\tstateName:\"Some Value\"\r\n}\r\n```\r\n\r\nTo know more about states, and Javascript Management. You can see [JavaScript Management](#js-management) section. \r\n\r\n### Props \r\n\r\nThe **props** in a component, are data that a parent \\(**container**\\) component pass to a child component.\r\n\r\nAnd like the **state**, we may declare a prop with this format `{propName - prop}`.\r\n\r\nExample:\r\n\r\n```html\r\n
{parentData - prop}
\r\n```\r\n\r\nAnd declaring a prop, the final template will render, in Vue:\r\n\r\n```js\r\nprops:{\r\n\tparentData:{\r\n\t\ttype:String,\r\n\t\trequired:true,\r\n\t\tdefault:\"Hello World\"\r\n\t}\r\n}\r\n```\r\nAnd in React, pass the props trought the **Component Constructor** and auto declares the props.\r\n\r\n```js\r\nconstructor(props){\r\n\tsuper(props);\r\n}\r\nrender(){\r\n\treturn(\r\n\t\t
{this.props.parentData}
\r\n\t)\r\n}\r\n```\r\n\r\n### Computed \r\n\r\nA **Computed** propierty is a function that return a `String` or `Number` value, and this is render on the template. And to declare a computed propierty, simply we can set the computed propierty name and the type: **computed**.\r\n\r\n```html\r\n
{computedName - computed}
\r\n```\r\n\r\nThis will create a computed propierties that returns a **Hello World**. And to set your own computed propierty, you must add a **script** tag and create a function named like the computed propierty.\r\n\r\n```html\r\n
Hi I Am {fullName - computed}!
\r\n\r\n```\r\nToo know more about Javascript Management go to [JavaScript Management](#js-management) section.\r\n\r\n### Methods \r\n\r\nA **Method** is a function executed by an event on the final render or by the render. Is not necesary declare the method only set the event into the tag.\r\n\r\n```html\r\n\r\n\r\n```\r\n\r\n\r\n### Components \\(**Partial**\\)\r\n\r\nTo import a **component** inside the main component. Only add the tag with the component syntax.\r\n\r\n```html\r\n\r\n```\r\nAnd to add a attr with a state value add `:` on the attr front.\r\n\r\n```html\r\n\r\n``` \r\n\r\n### State Watchers \r\n\r\nPara declarar un State Watcher añadan la palabra reservada `watch` seguido del nombre del estado igual a la funcion a ejecutar cuando cambie el estate.\r\n\r\n```js\r\nwatch stateName = e => {\r\n\t//Handle State\r\n}\r\n```\r\n\r\n### Inputs Handler \r\n\r\nTo **handle** a input, you must add the attr `name` on the input tag, and the value will be take to add a state with that name.\r\n\r\n```html\r\n\r\n```\r\n\r\nOn **Vue** will render.\r\n\r\n```html\r\n\r\n\t\r\n\r\n\r\n```\r\n\r\nOn React.\r\n\r\n```jsx\r\nimport React, {Component} from \"react\";\r\n\r\nclass MyComponent extends Component {\r\n\tconstructor() {\r\n\t\tsuper();\r\n\t\tthis.state = {\r\n\t\t\tusername:\"\"\r\n\t\t}\r\n\t}\r\n\tinputHandler({target}){\r\n\t\tconst value = target.type === 'checkbox' ? target.checked : target.value;\r\n\t\tconst name = target.name;\r\n\t\tthis.setState({\r\n\t\t\t[name]: value\r\n\t\t})\r\n\t}`\r\n}\r\n```\r\n\r\n### Conditionals \r\n\r\nTo declare a **conditional**, add the `if` tag, with the `cond` attr, where `cond` is the condition to evaluate.\r\n\r\nExample:\r\n\r\n```html\r\n\r\n\tCongratulations! you are Sign in this platform\r\n\r\n```\r\n\r\nAnd you can set it with an `else` tag.\r\n```html\r\n\r\n\tPassword must have more of 6 characters\r\n\r\n\r\n\tPassword is very strong\r\n\r\n```\r\n\r\n### List Render \r\nLike the conditionals, add a loop is't very easy, add a `for` tag, with the `val` attr.\r\n\r\n```html\r\n\r\n\t{varName}\r\n\r\n```\r\n### Bind Attributes \r\n\r\n### Styles \r\n\r\n### JavaScript Management \r\n\r\n### HTML Syntax \r\n\r\n\r\n## To Do\r\n\r\n### Features Support\r\n\r\n- [x] States\r\n- [x] Methods\r\n- [x] Computed\r\n- [x] Props\r\n- [x] States Watchers\r\n- [x] Components\r\n- [x] Bind States, Props, JS Expresions\r\n- [x] Input Handlers\r\n- [x] Javscript Management \\(**partial**\\)\r\n- [x] Conditionals\r\n- [x] Loops\r\n- [ ] Inner HTML \r\n- [ ] Lifecycles\r\n- [ ] React without JSX\r\n- [ ] React without ES6\r\n- [ ] Vue Web Browser\r\n- [ ] Next Framework\r\n- [ ] Angular Support\r\n\r\n**Note:** if you see that some feature is missing, you can write an issue, and tell what feature is missing.\r\n\r\n## Contributing\r\n\r\nTo contribute you can Join to our [Slack](https://rocketjs.slack.com) channel for more info. \\(**Info in Spanish**\\)\r\n\r\nComing soon we add an english thread.\r\n","readmeFilename":"README.md"}