Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

rocket-translator

Package Overview
Dependencies
Maintainers
1
Versions
20
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

rocket-translator - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

Lib/const/Events.json

20

bin/cli.js

@@ -17,8 +17,9 @@ #!/usr/bin/env node

console.log(
` Usage: rocket [-v | -r] <input-file> <output-folder>
` Usage: rocket [vue | react] <input-file> <output-folder>
Commands:
Compile to react: -r
Compile to vue: -v
Help: -h`
Translate to React: react
Translate to Vue: vue
Help: --help | -h
Version: --version | -v`
);

@@ -28,4 +29,4 @@ process.exit(1); //Stop execution

} else if (
mode === "-v" ||
mode === "-r"
mode === "vue" ||
mode === "react"
) {

@@ -61,3 +62,3 @@

var compiled;
if (mode === "-v"){
if (mode === "vue"){
compiled = {

@@ -68,3 +69,3 @@ name,/*File Name*/

}
} else if (mode === "-r"){
} else if (mode === "react"){
compiled = {

@@ -81,2 +82,5 @@ name,

console.log(`Thanks for use html compiler.\n\nOpen "${output}" to view your files.`);
} else if(mode === "--version" || mode === "-v") {
let {version} = require("../package.json");
console.log("v"+version);
}

0

Lib/core/index.js

@@ -0,0 +0,0 @@ const RSM = require("./StateManagement").ReactStateManagement,

19

Lib/core/JavascriptManagement/index.js
class JavascriptManagement {
constructor(js){
this.splitReg = /(\n|\r\n|\r)*(?=watch|state|function(?!\(|\s*\()|var|let|const)/g;
this.splitVars = /(\n|\r\n|\r)*(var|let|const)/g;
this.splitJs = /(\n|\r\n|\r)*(?=watch|state|function(?!\(|\s*\())/g;
this._watchers = new Array();

@@ -14,3 +15,3 @@ this._vars = new Array();

set functions(js){
let methods = js.split(this.splitReg).filter(e=>{
let methods = js.split(this.splitJs).filter(e=>{
if(e && e.startsWith("function")) return e

@@ -25,6 +26,6 @@ })

let content = e.replace(/function \w*\(.*\)/g, "");
let funcName = e.match(/function \w*\(.*\)/g)[0].replace("function ", "");
let params = e.match(/\(.*(?=\))/g)[0].slice(1);
return {
name,
funcName,
params,
content

@@ -42,5 +43,4 @@ }

}
set states(js){
let states = js.split(this.splitReg).filter(e=>{
let states = js.split(this.splitJs).filter(e=>{
if (e && e.startsWith("state")) return e

@@ -71,5 +71,5 @@ })

set watchers(js){
let watchers = js.split(this.splitReg).filter(e=>{
let watchers = js.split(this.splitJs).filter(e=>{
if(e && e.startsWith("watch")) return e;
})
});
if (watchers) {

@@ -101,3 +101,3 @@ watchers.forEach(e=>{

set vars(js){
let varMatched = js.split(this.splitReg).filter(e=>{
let varMatched = js.split(this.splitVars).filter(e=>{
if (e)

@@ -125,3 +125,2 @@ if (e.startsWith("var") ||

}
module.exports = JavascriptManagement;

0

Lib/core/StateManagement/index.js
exports.ReactStateManagement = require("./ReactStateManagement");
exports.VueStateManagement = require("./VueStateManagement")

333

Lib/core/StateManagement/ReactStateManagement.js
const StateManagement = require("./StateManagement");
const JavaScriptEvents = require("../../const/Events.json");
/**

@@ -77,4 +77,4 @@ * Class React State Management

if(this.methods.length > 0){
let mappedMethods = this.methods.map(({name, content})=>{
return name+content;
let mappedMethods = this.methods.map(({name, content, params})=>{
return `${name}(${params}) ${content}`;
})

@@ -146,20 +146,43 @@ methods = "\n\t"+mappedMethods.join("\n\t");

if (!this.condMapped) {
this.conditionals.forEach(e=>{
let splittedCond = html.split(/<(?=if\s*cond)/);
this.conditionals.forEach((e, ind)=>{
let id = "";
for (var i = 0; i <= 3; i++) {
for (let a = 0; a <= 3; a++) {
id += new String(Math.floor(Math.random()*10));
}
html = html.replace(new RegExp(`(\t)*<if cond=('|")${e.cond}('|")>(\n|\r|\r\n)*${e.if}(\n|\r|\r\n)*\t*</if>(\r|\n|\r\n)*`, "m"), `{cond_${id}}`);
html = html.replace(new RegExp(`(\t)*<else>(\n|\r|\r\n)${e.else}</else>`, "m"), "");
let replaced = splittedCond[ind+1].split("</else>");
replaced[0] = `{cond_${id}}`;
splittedCond[ind+1] = replaced.join("");
let filterIf = e.if
.replace(/\t|\s\s/g, "")
.replace(/(\n|\r\n|\r)/g, "")
.split(/<(?=img|br|input)/)
.map((ev, i)=>{
if (i > 0) return ev.replace(/>|\/>/, "/>");
else return ev;
}).join("<")
let filterElse = e.else
.replace(/\t|\s\s/g, "")
.replace(/(\n|\r\n|\r)/g, "")
.split(/<(?=img|br|input)/)
.map((ev, i)=>{
if (i > 0) return ev.replace(/>|\/>/, "/>");
else return ev;
}).join("<");
this.condStates.push({
id,
cond:e.cond,
if:e.if.replace(/\t|^\s*/g, ""),
else:e.else.replace(/\t|^\s*/g, "").replace(/(\n|\r|\r\n)(\t)*$/, "")
if:filterIf,
else:filterElse
});
})
});
html = splittedCond.join("");
this.condMapped = true;
}
if (!this.loopsMapped){
let splittedLoops = html.split(/<(?=for\s*val)/);
this.loops.forEach(e=>{

@@ -170,3 +193,6 @@ let id = "";

}
html = html.replace(new RegExp(`<for val=(\\'|\\").*(\\'|\\")>(\\n|\\r|\\r\\n)${e.content.replace(/\(/g, ".").replace(/\)/g ,".").replace(/\t/g, "\\t")}<\\/for>`), `{loop_${id}}`);
let replaced = splittedCond[ind+1].split("</for>");
replaced[0] = `{loop_${id}}`;
splittedCond[ind+1] = replaced.join("");
this.loopsState.push({

@@ -179,2 +205,3 @@ id,

})
html = splittedLoops.join("");
this.loopsMapped = true;

@@ -216,5 +243,4 @@ }

})
valueToReturn = e.replace(/'(?=\w*)/, isState ? "{this.state." : "{").replace(/('|\s\-.*')(?=\s|\/)/, "}");
valueToReturn = e.replace(/'/, isState ? "{this.state." : "{").replace(/'/, "}");
} else if (e.match(/^\w*='\w*\s*\-\s*\w*'/)) {
let isState = false;

@@ -229,5 +255,5 @@ let toCompare = e.match(/^\w*='\w*/g)[0];

valueToReturn = e.replace(/'(?=\w*)/, isState ? "{this.state." : "{").replace(/\s*-\s*.*''/, "}").replace(/}'/, "}}");
} else if (e.match(/^\w*='\w*\s*\?\s*(\{|\')/)) {
} else if (e.match(/^\w*='(\w*|\w*(\.\w*)*)\s*(\<|\>|\=\=|\=\=\=|\?)/)) {
let isState = false;
let toCompare = e.match(/\w*(?=\s*\?)/)[0];
let toCompare = e.match(/(\w*|\w*(\.\w*)*)(?=\s*(\<|\>|\=\=|\=\=\=|\?))/)[0];
this.states.forEach(state=>{

@@ -239,3 +265,3 @@ state = typeof state === "object" ? state.key : state;

});
valueToReturn = e.replace(/'(?=\w*)/, isState ? "{this.state." : "{").replace(/''/, "'}").replace(/}'/, "}}");
valueToReturn = e.replace(/'(?=\w*)/, isState ? "{this.state." : "{").replace(/'''/, "\"\"}").replace(/''/, "'}").replace(/='}/, "=''").replace(/}'/, "}}");
}

@@ -249,3 +275,3 @@ } else {

.replace(/\s\-\s.*'/g, "}")
.split(/on(?=\w*='\w*\(\)')/)
.split(new RegExp(`on(?=${JavaScriptEvents.join("|")})`))
.map((e, index)=>{

@@ -255,31 +281,250 @@ if (index === 0) {

} else {
return "on" + e[0].toUpperCase() + e.slice(1)
.replace(/'(?=\w*)/, "{this.")
.replace(/\(\)'(?=\s|\/|\>)/, "}");
let eventName = e.match(/^\w*/)[0].toLowerCase();
switch (eventName) {
case "afterprint":
eventName = "AfterPrint";
break;
case "animationend":
eventName = "AnimationEnd";
break;
case "animationiteration":
eventName = "AnimationIteration";
break;
case "animationstart":
eventName = "AnimationStart";
break;
case "beforeprint":
eventName = "BeforePrint";
break;
case "beforeunload":
eventName = "BeforeUnload";
break;
case "canplay":
eventName = "CanPlay";
break;
case "canplaythrough":
eventName = "CanPlayThrough";
break;
case "contextmenu":
eventName = "ContextMenu";
break;
case "compositionend":
eventName = "CompositionEnd";
break;
case "compositionstart":
eventName = "CompositionStart";
break;
case "compositionupdate":
eventName = "CompositionUpdate";
break;
case "dblclick":
eventName = "DoubleClick";
break;
case "dragend":
eventName = "DragEnd";
break;
case "dragenter":
eventName = "DragEnter";
break;
case "dragleave":
eventName = "DragLeave";
break;
case "dragover":
eventName = "DragOver";
break;
case "dragstart":
eventName = "DragStart";
break;
case "durationchange":
eventName = "DurationChange";
break;
case "focusin":
eventName = "FocusIn";
break;
case "focusout":
eventName = "FocusOut";
break;
case "fullscreenchange":
break;
case "fullscreenerror":
break;
case "hashchange":
eventName = "HashChange";
break;
case "keydown":
eventName = "KeyDown";
break;
case "keypress":
eventName = "KeyPress";
break;
case "keyup":
eventName = "KeyUp";
break;
case "loadeddata":
eventName = "LoadedData";
break;
case "loadedmetadata":
eventName = "LoadedMetadata";
break;
case "loadstart":
eventName = "LoadStart";
break;
case "mousedown":
eventName = "MouseDown";
break;
case "mouseenter":
eventName = "MouseEnter";
break;
case "mouseleave":
eventName = "MouseLeave";
break;
case "mousemove":
eventName = "MouseMove";
break;
case "mouseover":
eventName = "MouseOver";
break;
case "mouseout":
eventName = "MouseOut";
break;
case "mouseup":
eventName = "MouseUp";
break;
case "pagehide":
eventName = "PageHide";
break;
case "pageshow":
eventName = "PageShow";
break;
case "pointerdown":
eventName = "PointerDown";
break;
case "pointermove":
eventName = "PointerMove";
break;
case "pointerup":
eventName = "PointerUp";
break;
case "pointercancel":
eventName = "PointerCancel";
break;
case "gotpointercapture":
eventName = "GotPointerCapture";
break;
case "lostpointercapture":
eventName = "LostPointerCapture";
break;
case "pointerenter":
eventName = "PointerEnter";
break;
case "pointerleave":
eventName = "PointerLeave";
break;
case "pointerover":
eventName = "PointerOver";
break;
case "pointerout":
eventName = "PointerOut";
break;
case "popstate":
eventName = "PopState";
break;
case "ratechange":
eventName = "RateChange";
break;
case "timeupdate":
eventName = "TimeUpdate";
break;
case "touchcancel":
eventName = "TouchCancel";
break;
case "touchend":
eventName = "TouchEnd";
break;
case "touchmove":
eventName = "TouchMove";
break;
case "touchstart":
eventName = "TouchStart";
break;
case "transitionend":
eventName = "TransitionEnd";
break;
case "volumechange":
eventName = "VolumeChange";
break;
default:
eventName = eventName[0].toUpperCase() + eventName.slice(1);
break;
}
if(e.match(/='\w*\(\)/)) {
return e.replace(/\w*/, eventName)
.replace(/'(?=\w*)/, "{this.")
.replace(/\(\)'(?=\s|\/|\>)/, "}");
} else if(e.match(/='\w*\(.*\)/)) {
return e.replace(/\w*/, eventName)
.replace(/'(?=\w*)/, "{()=>this.")
.replace(/\)'(?=\s|\/|\>)/, ")}");
} else {
return e.replace(/\w*/, eventName)
.replace("'", "{")
.replace("'", "}");
}
}
})
.join("")
.split(/<(?=input|textarea|select)/g)
.map(e=>{
let name = e.match(/name=("|')\w*("|')/);
let handler = "";
if (name) {
handler = `onChange={this.inputHandler.bind(this)}`;
}
let replaced;
if (e.match(/input/)) {
replaced = e.replace("input", `input ${handler}`);
} else if (e.match(/textarea/)) {
replaced = e.replace("textarea", `textarea ${handler}`);
} else if (e.match(/select/)) {
replaced = e.replace("select", `select ${handler}`);
} else {
replaced = e;
}
return replaced;
.join("on")
.split(/<input/)
.map((e, i)=>{
if (i > 0) {
let name = e.match(/name=("|')\w*("|')/);
let handler = "";
if (name) {
handler = `onChange={this.inputHandler.bind(this)}`;
}
return handler + e;
} else return e;
})
.join("<")
.join("<input ")
.split(/<textarea/)
.map((e, i)=>{
if (i > 0) {
let name = e.match(/name=("|')\w*("|')/);
let handler = "";
if (name) {
handler = `onChange={this.inputHandler.bind(this)}`;
}
return handler + e;
} else return e;
})
.join("<textarea ")
.split(/<select/)
.map((e, i)=>{
if (i > 0) {
let name = e.match(/name=("|')\w*("|')/);
let handler = "";
if (name) {
handler = `onChange={this.inputHandler.bind(this)}`;
}
return handler + e;
} else return e;
})
.join("<select ")
.replace(/class(?=='|={)/g, "className")
.replace(/for(?=='|={)/g, "htmlFor");
.replace(/for(?=='|={)/g, "htmlFor")
.split(/<br/)
.map((e, i)=>{
if (i > 0) return e.replace(/>|\/>/, "/>");
else return e
}).join("<br")
.split(/<img/)
.map((e, i)=>{
if (i > 0) return e.replace(/>|\/>/, "/>");
else return e
}).join("<img")
.split(/<input/)
.map((e, i)=>{
if (i > 0) return e.replace(/>|\/>/, "/>");
else return e
}).join("<input")

@@ -290,3 +535,3 @@ return html

let cond = this.condStates.map(e=>{
return `var cond_${e.id};\n\t\tif(this.state.${e.cond}) {\n\t\t\tcond_${e.id} = ${e.if}\n\t\t} ${e.else ? `else {\n\t\t\tcond_${e.id} = ${e.else}\n\t\t}\n\t\t`:""}`
return `var cond_${e.id};\n\t\tif(this.state.${e.cond}) {\n\t\t\tcond_${e.id} = ${this.setReactFilterHTMLState(e.if)}\n\t\t} ${e.else ? `else {\n\t\t\tcond_${e.id} = ${this.setReactFilterHTMLState(e.else)}\n\t\t}\n\t\t`:""}`
})

@@ -293,0 +538,0 @@ let loops = this.loopsState.map(e=>{

293

Lib/core/StateManagement/StateManagement.js

@@ -60,14 +60,14 @@ /**

//Map Methods
this.methods.forEach(({name}, i)=>{
if (e.funcName === name) {
this.methods[i].content = e.content;
this.methods.forEach((method, i)=>{
if (e.name === method.name) {
this._methods[i].content = e.content;
this._methods[i].params = e.params;
}
})
});
//Map Computed
this.computed.forEach(({name}, i)=>{
if (e.name === name) {
this.computed[i].content = e.content;
this._computed[i].content = e.content;
}
})
});
});

@@ -151,129 +151,151 @@ }

*/
set components(html){
let _matchComponents = html.match(/\<([A-Z]\w*).*\/\>/g); //Match Components
if (_matchComponents) {
_matchComponents.forEach(e=>{
let name = e.match(/[A-Z]\w*/g)[0]; //Get Component Name
let bindData = e.match(/\:\w*\=(\'|\")\w*(\'|\")/g); //Get Bind Prop Data
let bindDataHasNameAndValue = e.match(/\:\w*\=(\'|\")\w*\s\-\s('|")\w*('|")(\'|\")/g); //Get Bind Prop Data and Value
if (bindData) {
this._states.push(bindData[0].replace(/'|"/g, "").slice(1).split("=")[1]); //Push Bind Data to States
}
if(bindDataHasNameAndValue){
let dataArray = bindDataHasNameAndValue[0].split('='); //Get Data Array
let keyValue = dataArray[1].split(' - '); //Split Key And Value
let key = keyValue[0].slice(1); //Set Key Name
let value = this._defineTypeFromString(keyValue[1].slice(0, keyValue[1].length - 1)); //Get Type of Value and Set it
this._states.push({key, value}); //Push Bind Data With Value to States
}
this._components.push(name);
})
}
}
get components() {
return this._components;
}
/**
* Get Computed Methods from the data Array
*
* @private
* @param {array} dataArray Array With All Data
*/
set computed(dataArray){
let _computedArray=[]; //Declare Empty Array
//Map Array to get computed methods
dataArray.forEach(e=>{
let _computedMatched = e.match(this._regExpToMatchComputed);
//If Match push to empty array
if (_computedMatched) {
//This must match something like: {Name - computed}
_computedArray.push(_computedMatched[0]);
}
})
//If have matched computed push to Component Computed
if (_computedArray.length > 0) {
_computedArray.forEach(e=>{
this._computed.push({
name:e.match(/^\w*/g)[0],
content:"{\n\t\t\treturn 'Hello World'\n\t\t}"
});
});
}
}
get computed() {
return this._computed;
}
/**
* Get State From Data Array
*
* @private
* @param {array} dataArray
*/
set states(dataArray){
/*
Capture State Without Value and push to Empty Array
*/
let _stateArray = []; //Declare Empty Array to State With Declaration: {name - state}
dataArray.forEach(e=>{
let _matched = e.match(this._regExpToMatchState);
if(_matched){
_stateArray.push(_matched[0]);
}
});
/*
Capture State With Value and Instance and push to Empty Array
*/
let _stateWithValueArray = []; //Declare Empty Array to State With Value: {name - state - someValue}
dataArray.forEach(e=>{
let _matched = e.match(this._regExpToMatchStateWithValue);
if (_matched) {
_stateWithValueArray.push(_matched[0]);
}
});
set components(html){
let _matchComponents = html.match(/\<([A-Z]\w*).*\/\>/g); //Match Components
if (_matchComponents) {
_matchComponents.forEach(e=>{
let name = e.match(/[A-Z]\w*/g)[0]; //Get Component Name
let bindData = e.match(/\:\w*\=(\'|\")\w*(\'|\")/g); //Get Bind Prop Data
let bindDataHasNameAndValue = e.match(/\:\w*\=(\'|\")\w*\s\-\s('|")\w*('|")(\'|\")/g); //Get Bind Prop Data and Value
if (bindData) {
this._states.push(bindData[0].replace(/'|"/g, "").slice(1).split("=")[1]); //Push Bind Data to States
}
if(bindDataHasNameAndValue){
let dataArray = bindDataHasNameAndValue[0].split('='); //Get Data Array
let keyValue = dataArray[1].split(' - '); //Split Key And Value
let key = keyValue[0].slice(1); //Set Key Name
let value = this._defineTypeFromString(keyValue[1].slice(0, keyValue[1].length - 1)); //Get Type of Value and Set it
this._states.push({key, value}); //Push Bind Data With Value to States
}
this._components.push(name);
})
}
}
get components() {
return this._components;
}
/**
* Get Computed Methods from the data Array
*
* @private
* @param {array} dataArray Array With All Data
*/
set computed(dataArray){
let _computedArray=[]; //Declare Empty Array
//Map Array to get computed methods
dataArray.forEach(e=>{
let _computedMatched = e.match(this._regExpToMatchComputed);
//If Match push to empty array
if (_computedMatched) {
//This must match something like: {Name - computed}
_computedArray.push(_computedMatched[0]);
}
});
//If State With Declaration, Map and Push to Component States
if (_stateArray.length > 0){
_stateArray.forEach(e=>{
let _stateName = e.match(/^\w*/g)[0]; //Get State Name
this._states.push(_stateName);
});
}
//If have matched computed push to Component Computed
if (_computedArray.length > 0) {
let computedList = ["1234"];
//If State With Value, Map and Push to Component States
if (_stateWithValueArray) {
_stateWithValueArray.forEach(e=>{
let _getKey = e.match(/^\w*\s/);
let value = this._defineTypeFromString(e.match(/(\w*|\{.*\}|\[.*\]|(\'|\")\w*(\'|\"))$/)[0]); //Set Value
let key = _getKey[0].slice(0, _getKey[0].length-1); //Set Key
this.states.push({key, value });
});
}
}
get states() {
return this._states;
}
_computedArray = _computedArray.filter(e=>{
let duplicate = false;
computedList.forEach(ev=>{
if (e.name === ev) duplicate = true;
else computedList.push(e.name);
});
if (!duplicate) return e;
});
_computedArray.forEach(e=>{
this._computed.push({
name:e.match(/^\w*/g)[0],
content:"{\n\t\t\treturn 'Hello World'\n\t\t}"
});
});
}
}
get computed() {
return this._computed;
}
/**
* Get State From Data Array
*
* @private
* @param {array} dataArray
*/
set states(dataArray){
/*
Capture State Without Value and push to Empty Array
*/
let _stateArray = []; //Declare Empty Array to State With Declaration: {name - state}
dataArray.forEach(e=>{
let _matched = e.match(this._regExpToMatchState);
if(_matched){
_stateArray.push(_matched[0]);
}
});
/*
Capture State With Value and Instance and push to Empty Array
*/
let _stateWithValueArray = []; //Declare Empty Array to State With Value: {name - state - someValue}
dataArray.forEach(e=>{
let _matched = e.match(this._regExpToMatchStateWithValue);
if (_matched) {
_stateWithValueArray.push(_matched[0]);
}
});
//If State With Declaration, Map and Push to Component States
if (_stateArray.length > 0){
_stateArray.forEach(e=>{
let _stateName = e.match(/^\w*/g)[0]; //Get State Name
this._states.push(_stateName);
});
}
//If State With Value, Map and Push to Component States
if (_stateWithValueArray) {
_stateWithValueArray.forEach(e=>{
let _getKey = e.match(/^\w*\s/);
let value = this._defineTypeFromString(e.match(/(\w*|\{.*\}|\[.*\]|(\'|\")\w*(\'|\"))$/)[0]); //Set Value
let key = _getKey[0].slice(0, _getKey[0].length-1); //Set Key
this.states.push({key, value });
});
}
}
get states() {
return this._states;
}
/**
* Get Methods from HTML String
*
* Map and get all HTML events attr like onclick, onsubmit, etc.
*
* @public
* @param {string} html HTML String
*/
set methods(html){
let events = html.match(/on\w*=(\"|\')\w*\(.*\)(\"|\')/g); //Match RegExp
if (events) {
events.forEach(e=>{
let split = e.split("=");
let name = split[1].match(/\w*(?=\()/)[0];
this._methods.push({
name,/*Get Method Name*/
content:"{\n\t\treturn\n\t}" /*Default Value If methods is not declared*/
});
});
let methodsList = ["1234"];
this._methods = this._methods.filter(e=>{
let duplicate = false;
methodsList.forEach(ev=>{
if (e.name === ev) duplicate = true;
else methodsList.push(e.name);
});
if (!duplicate) return e;
});
}
}
get methods() {
return this._methods;
}
/**
* Get Methods from HTML String
*
* Map and get all HTML events attr like onclick, onsubmit, etc.
*
* @public
* @param {string} html HTML String
*/
set methods(html){
let events = html.match(/on\w*=(\"|\')\w*\(\)(\"|\')/g); //Match RegExp
if (events) {
events.forEach(e=>{
let split = e.split("=");
this._methods.push({
name:split[1].slice(1, split[1].length - 1),/*Get Method Name*/
content:"{\n\t\treturn\n\t}" /*Default Value If methods is not declared*/
});
});
}
}
get methods() {
return this._methods;
}
/**
* Get Props From Data Array

@@ -439,3 +461,3 @@ *

this.props = _getBarsSyntax; //Get Props
}
}
}

@@ -585,5 +607,6 @@ /**

.replace(/:/g, "\":")
.replace(/\t(?=.*:)/g, "\t\"")
.replace(/\t\"(?=\t\")/g, "\t")
.replace(/,(?=\n(\t)*})/g, "");
.replace(/(\t|\s\s|\s\s\s\s)(?=.*:)/g, "\t\"")
.replace(/(\t|\s\s|\s\s\s\s)\"(?=\t\")/g, "\t")
.replace(/,(?=\n(\t)*})/g, "")
.replace(/""/g, "\"");
}

@@ -590,0 +613,0 @@ return JSON.parse(filtered);

18

Lib/core/StateManagement/VueStateManagement.js

@@ -18,3 +18,3 @@ const StateManagement = require("./StateManagement")

//Quotes Replace
let replacedQuotes = html.replace(/(")/g, "'");
let replacedQuotes = html.replace(/(')/g, "\"");

@@ -28,4 +28,4 @@ //Parse Data

.join("{{");
let replaceTypeValueData = addOpenBraces.replace(/\s\-\s(\w*|(')*\w*(')*)(?=\s|\/|\>)/g, "'");
let addEventToVue = replaceTypeValueData.replace(/on(?=\w*=\'\w*\(\)')/g, "@");
let replaceTypeValueData = addOpenBraces.replace(/\s\-\s(\w*|(")*\w*(")*)(?=\s|\/|\>)/g, "\"");
let addEventToVue = replaceTypeValueData.replace(/on(?=\w*=\"\w*\(\)")/g, "@");
let addInputHandler = addEventToVue

@@ -37,3 +37,3 @@ .split(/<(?=input|textarea|select)/g)

if (name) {
newName = `v-model='${name[0].match(/'\w*(?=')/)[0].slice(1)}'`
newName = `v-model='${name[0].match(/"\w*(?=")/)[0].slice(1)}'`
}

@@ -57,6 +57,6 @@ let replaced;

if (i !== 0) {
if (e.match(/^\w*='\w*'/))
if (e.match(/^\w*="\w*"/))
return e
else
return e.replace(/''/, "'\"").replace("'", "\"");
return e.replace(/""/, "\"'").replace("\"", "'");
}

@@ -71,3 +71,3 @@ else return e;

.replace(/else(?=>)/g, "template v-else")
.replace(/v-if='/g, "v-if=\"")
.replace(/'(?=\s*.*>)/g, "\"")
.replace(/''(?=.*>)/g, "'\"");

@@ -120,5 +120,5 @@

if (this.methods.length > 0){
let mappedMethods = this.methods.map(({content, name}, i)=>{
let mappedMethods = this.methods.map(({content, name, params}, i)=>{
let comma = i === this.methods.length -1 ? "\n":",\n";
return name + content + comma;
return `${name}(${params}) ${content}${comma}`;
})

@@ -125,0 +125,0 @@ methods = `\n\tmethods:{\n\t\t${mappedMethods.join("\t\t")}\t},`;

0

Lib/file-utils/index.js
exports.ServerFileFunctions = require("./ServerFileFunctions");
exports.TranslatorFileFunctions = require("./TranslatorFileFunctions");

0

Lib/file-utils/ServerFileFunctions.js

@@ -0,0 +0,0 @@ const {createWriteStream,

0

Lib/file-utils/TranslatorFileFunctions.js

@@ -0,0 +0,0 @@ const {

0

Lib/index.js
exports.core = require("./core");
exports.utils = require("./file-utils");

2

package.json
{
"name": "rocket-translator",
"version": "1.0.2",
"version": "1.1.0",
"description": "Translate your HTML files to React.js and Vue.js",

@@ -5,0 +5,0 @@ "keywords": [

187

README.md

@@ -1,2 +0,2 @@

# RocketJS
# RocketJS [![npm version](https://badge.fury.io/js/rocket-translator.svg)](https://badge.fury.io/js/rocket-translator)

@@ -7,4 +7,3 @@ Translate HTML code to Vue or React.

To install simply:
Clone the repository and install dependencies.
To install simply: Use npm

@@ -14,3 +13,8 @@ ```sh

```
or Yarn
```sh
yarn global add rocket-translator
```
## Getting Started

@@ -31,10 +35,12 @@

class MyComponent extends Component {
super();
this.state = {
name:"World"
};
constructor() {
super();
this.state = {
name:"World"
};
}
render(){
return(
<div>Hello {this.state.name}!</div>
)
return(
<div>Hello {this.state.name}!</div>
)
}

@@ -48,12 +54,12 @@ }

<template>
<div>Hello {{name}}!</div>
<div>Hello {{name}}!</div>
</template>
<script>
export default {
name:"MyComponent",
export default {
name:"MyComponent",
data(){
return {
name:"World"
return {
name:"World"
}
}
}
}

@@ -71,3 +77,3 @@ </script>

The **mode** may be `-v` to Vue or `-r` to React.
The **mode** may be `vue` or `react`.

@@ -120,5 +126,5 @@ The **output folder** is optional, if this is not defined will create a folder named **dist**.

data(){
return {
myState:""
}
return {
myState:""
}
}

@@ -130,3 +136,3 @@ ```

this.state = {
myState:""
myState:""
}

@@ -139,5 +145,5 @@ ```

data(){
return {
stateName:"Some Value"
}
return {
stateName:"Some Value"
}
}

@@ -150,3 +156,3 @@ ```

this.state = {
stateName:"Some Value"
stateName:"Some Value"
}

@@ -173,20 +179,15 @@ ```

props:{
parentData:{
type:String,
required:true,
default:"Hello World"
}
parentData:{
type:String,
required:true,
default:"Hello World"
}
}
```
And in React, pass the props trought the **Component Constructor** and auto declares the props.
And in React, auto declares the prop.
```js
constructor(props){
super(props);
}
render(){
return(
<div>{this.props.parentData}</div>
)
}
return(
<div>{this.props.parentData}</div>
)
```

@@ -208,6 +209,6 @@

function fullName() {
var name = "Foo";
var lastName = "Bar";
var name = "Foo";
var lastName = "Bar";
return `${name} ${lastName}`;
return name + " " + lastName;
}

@@ -226,3 +227,3 @@ </script>

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

@@ -252,7 +253,7 @@ </script>

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

@@ -273,13 +274,13 @@ ```

<template>
<input type="text" v-model="username" name="username"/>
<input type="text" v-model="username" name="username"/>
</template>
<script>
export default {
name:"MyComponent",
data() {
return {
username:""
}
}
}
export default {
name:"MyComponent",
data() {
return {
username:""
}
}
}
</script>

@@ -294,15 +295,15 @@ ```

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
})
}`
constructor() {
super();
this.state = {
username:""
}
}
inputHandler({target}){
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
[name]: value
})
}`
}

@@ -319,3 +320,3 @@ ```

<if cond="auth">
<span>Congratulations! you are Sign in this platform</span>
<span>Congratulations! you are Sign in this platform</span>
</if>

@@ -327,6 +328,6 @@ ```

<if cond="password.length < 6">
<span>Password must have more of 6 characters</span>
<span>Password must have more of 6 characters</span>
</if>
<else>
<span>Password is very strong</span>
<span>Password is very strong</span>
</else>

@@ -340,3 +341,3 @@ ```

<for val="varName in stateName">
<span>{varName}</span>
<span>{varName}</span>
</for>

@@ -374,7 +375,7 @@ ```

The keyword `watch` is used to assign a **Watcher** to a state or prop. Assigning like value the function to execute with the param that the function get.
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.
```js
watch stateOrProp = function(e) {
console.log(e);
console.log(e);
}

@@ -385,3 +386,3 @@

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

@@ -396,13 +397,13 @@ ```

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

@@ -420,7 +421,7 @@ ```

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

@@ -453,3 +454,3 @@ ```

**Note**: We like add **CSS** Support.
**Note**: We want add **CSS** Support.

@@ -466,9 +467,9 @@ #### Bind Attributes

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

@@ -491,3 +492,5 @@ ```

- [x] Conditionals
- [ ] Nested Conditionals
- [x] Loops
- [ ] Nested Loops
- [ ] Inner HTML

@@ -501,3 +504,3 @@ - [ ] Lifecycles

**Note:** if you see that some feature is missing, you can write an issue, and tell what feature is missing.
**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.

@@ -504,0 +507,0 @@ ## Contributing

yarn.lock

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc