RocketJS
Translate HTML code to Vue or React.
Instalation
To install simply:
Clone the repository and install dependencies.
npm i -g rocket-translator
Getting Started
Basic
You can convert this:
<div>Hello {name - state - "World"}!</div>
into this:
import React, {Component} from "react";
class MyComponent extends Component {
super();
this.state = {
name:"World"
};
render(){
return(
<div>Hello {this.state.name}!</div>
)
}
}
export default MyComponent;
or this:
<template>
<div>Hello {{name}}!</div>
</template>
<script>
export default {
name:"MyComponent",
data(){
return {
name:"World"
}
}
}
</script>
How to Use
To use, simpy create a HTML file, with the code to translate, and run:
rocket [mode] path/to/file.html [output folder]
The mode may be -v
to Vue or -r
to React.
The output folder is optional, if this is not defined will create a folder named dist.
Guide
States Simple
A 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.
To 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.
The Simple mode, is declared writing only the state name into the template and writing the type: state.
Example:
<div>{myState - state}</div>
In the With Value mode, is declared when, we write the state name, the type: state and the value for this state.
Example:
<div>{stateName - state - "Some Value"}</div>
The value may be String
, Number
, Boolean
,Array
and Object
.
And in the simple case, we obtain the next component state.
In Vue:
data(){
return {
myState:""
}
}
And in React we obtain:
this.state = {
myState:""
}
In the With value case we obtain. In Vue:
data(){
return {
stateName:"Some Value"
}
}
And in React:
this.state = {
stateName:"Some Value"
}
To know more about states, and Javascript Management. You can see JavaScript Management section.
Props
The props in a component, are data that a parent (container) component pass to a child component.
And like the state, we may declare a prop with this format {propName - prop}
.
Example:
<div>{parentData - prop}</div>
And declaring a prop, the final template will render, in Vue:
props:{
parentData:{
type:String,
required:true,
default:"Hello World"
}
}
And in React, pass the props trought the Component Constructor and auto declares the props.
constructor(props){
super(props);
}
render(){
return(
<div>{this.props.parentData}</div>
)
}
Computed
A 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.
<div>{computedName - computed}</div>
This 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.
<div>Hi I Am {fullName - computed}!</div>
<script>
function fullName() {
var name = "Foo";
var lastName = "Bar";
return `${name} ${lastName}`;
}
</script>
Too know more about Javascript Management go to JavaScript Management section.
Methods
A 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.
<button onclick="hello()">Say Hello</button>
<script>
function hello() {
alert("Hello World");
}
</script>
Components (Partial)
To import a component inside the main component. Only add the tag with the component syntax.
<MyComponent />
And to add a attr with a state value add :
on the attr front.
<MyComponent :my-bind-attr="stateName" />
State Watchers
Para 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.
watch stateName = e => {
}
Inputs Handler
To 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.
<input type="text" name="username" />
On Vue will render.
<template>
<input type="text" v-model="username" name="username"/>
</template>
<script>
export default {
name:"MyComponent",
data() {
return {
username:""
}
}
}
</script>
On React.
import React, {Component} from "react";
class MyComponent extends Component {
constructor() {
super();
this.state = {
username:""
}
}
inputHandler({target}){
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
})
}`
}
Conditionals
To declare a conditional, add the if
tag, with the cond
attr, where cond
is the condition to evaluate.
Example:
<if cond="auth">
<span>Congratulations! you are Sign in this platform</span>
</if>
And you can set it with an else
tag.
<if cond="password.length < 6">
<span>Password must have more of 6 characters</span>
</if>
<else>
<span>Password is very strong</span>
</else>
List Render
Like the conditionals, add a loop is't very easy, add a for
tag, with the val
attr.
<for val="varName in stateName">
<span>{varName}</span>
</for>
Bind Attributes
Styles
JavaScript Management
HTML Syntax
To Do
Features Support
Note: if you see that some feature is missing, you can write an issue, and tell what feature is missing.
Contributing
To contribute you can Join to our Slack channel for more info. (Info in Spanish)
Coming soon we add an english thread.