rocket-translator

RocketJS

Translate HTML code to Vue or React.

Instalation

To install simply: Use npm

npm i -g rocket-translator

or Yarn

yarn global add 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 {
    constructor() {
        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 vue or react.

The output folder is optional, if this is not defined will create a folder named dist.

Guide

• States Simple
• Props
• Computed
• Methods
• Components
• Watchers
• Inputs Handler
• Conditionals
• List Render
• Bind Attributes
• JavaScript Management
• HTML Syntax

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, auto declares the prop.

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 and create the function to execute that match with the computed name.

<div>{hello - computed}</div>

function hello() {
    return "Hello World";
}

This will create a computed properties that returns a Hello World.

Example:

<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" />

To write the component content, add a component tag with the component content. And a attr name with the component name. And others attrs can be passed to the component.

<component name="HelloWorldComponent" name="World">
    <div>
        <h1>Hello {name - prop}!</h1>
    </div>
</component>

State Watchers

To declare a State Watcher you must add the keyword watch followed by the state name to watch equal to function to execute when the state changes.

watch stateName = function(e) {
    //Handle State
}
//Or with ES6
watch stateName = e => {
    //Handle State
}

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

A Bind Attribute is a form to set a state value on a tag attribute. And the syntax is like on Vue.

<span :style="stateName">Hello World</span>

If you want add a default value you must add a - followed of the value.

<button :class="classButton - 'value'"></button>

JavaScript Management

To the JavaScript Management, we add a few of keywords to help with the code imports. We must follow some rules to the correctly function of the translator.

To include JavaScript on the template, add a script tag with the JavaScript code to translate. Or you can add the line #js path/to/js.js to import a external file.

Keywords

State

The keyword state is used to declare a state from JavaScript. Using the next format: state stateName = stateValue.

The State Value can be type: String, Number, Boolean, Array or Object.

Watch

The keyword watch is used to assign a Watcher to a state or prop. Assigning as value the function to execute with the param that the function get.

watch stateOrProp = function(e) {
    console.log(e);
}

// Or use ES6

watch stateOrProp = e => {
    console.log(e);
}

Functions

The Functions are to change the method and computed properties execution. If the method or computed name match with the function name, this will be that method or computed.

<div>
    <span>This is my {computedPropierty - computed} propierty</span>
    <button onclick="sayHello()">Say Hello</button>
</div>
<script>
    function computedPropierty() {
        return "Computed"
    }

    function sayHello() {
        alert("Hello World");
    }
</script>

Filter

The JavaScript Filter is structured to filter the states and props. If into the code we have a function that contain a var with the state or prop name, this will be replaced automaticaly. Is not necesary declare like a state.

state name = "Hello";
state lastName = "World";

function sayHello() {
    alert(name + " " + lastName);
    /* 
        will return on React: alert(this.state.name + " " + this.state.lastName);
        and on Vue: alert(this.name + " " + this.lastName);
    */
} 

Note: You must evite use vars with state names, until we fix this.

HTML Syntax

Like on JavaScript, on HTML we have a specific syntax, that we must follow to the correctly translator function.

Bars Declaration

The most used is the bars declaration {}, this is used to assign a state, prop, computed or the out framework syntax.

Framework Declarative Syntax: { unsignedValue }

State without value: {stateName - state}

State With Value: {stateName - state - value} The value can be type: String, Number, Boolean, Array and Object.

Prop: {propName - prop}

Computed Propierty: {computedName - computed}

Import Tag

To import a JavaScript external file, we use: #js path/to/js.js.

Note: We want add CSS Support.

Bind Attributes

To execute JavaScript syntax or assign a state or prop value on an HTML attribute, we use :attrName="Js or State".

Conditionals And Loops Tags

We add three HTML tags to assign Conditionals and Loops. if, else and for.

<if cond="condToEvaluate">
    <span>If Content</span>
</if>
<else>
    <span>Else Content</span>
</else>
<for val="varName in stateName">
    <span>For Content</span>
</for>

Component Tag

We add this tag to declare a custom component inside the Main Component

<component name="ComponentName">
    <span>Component Content</span>
</component>

To Do

Features Support

• States
• Methods
• Computed
• Props
• States Watchers
• Components
• Bind States, Props, JS Expresions
• Input Handlers
• JavaScript Management (partial)
• Conditionals
• Nested Conditionals
• Loops
• Nested Loops
• Inner HTML
• Lifecycles
• React without JSX
• React without ES6
• Vue Standalone
• Next Framework
• Angular Support

Note: If you see that some feature is missing, you can open a pull request or write an issue, and tell what feature is missing.

Contributing

To contribute you can open a pull request with the changes to improve in the code, or open a new issue.