rocket-translator - npm Package Compare versions

Comparing version 1.1.0 to 1.2.0

bin/cli.js

@@ -6,3 +6,3 @@ #!/usr/bin/env node
 //Const
-const {VueCompiler, ReactCompiler} = require("../Lib").core,
+const {VueCompiler, ReactCompiler, Components} = require("../Lib").core,
 	  FF = require("../Lib/file-utils").TranslatorFileFunctions,
@@ -78,2 +78,3 @@ {join} = require("path"),
 	functions.writeFile(compiled); //Append Files to the output folder
+	functions.writeComponents(name, mode, Components())
 	console.log(`Thanks for use html compiler.\n\nOpen "${output}" to view your files.`);
@@ -80,0 +81,0 @@ } else if(mode === "--version" || mode === "-v") {

Lib/const/Events.json

@@ -0,0 +0,0 @@ ["abort",

Lib/core/index.js

@@ -1,5 +0,6 @@
-const RSM = require("./StateManagement").ReactStateManagement,
-      VSM = require("./StateManagement").VueStateManagement,
+const {ReactStateManagement, VueStateManagement} = require("./StateManagement"),
       Parser = require("./JavascriptManagement");
 
+var Components = [];
+
 /**
@@ -18,6 +19,5 @@ * React Compiler
 exports.ReactCompiler = (name, html, css, js) =>{
-	//Initialize Classes JsParser and StateManagement
-	let ReactStateManagement = new RSM();
-	let parse = new Parser(js); //Pass JS String
 
+	let parse = new Parser(js); //JS Parser
+
 	//Get all data from HTML string
@@ -36,2 +36,4 @@ ReactStateManagement.getHTMLString(html);
 
+	Components = ReactStateManagement.componentsContent;
+
 	//Add new lines and idents to code beauty
@@ -75,6 +77,5 @@ let pretty = ReactStateManagement
 exports.VueCompiler = (name, html, css, js) =>{
-	//Initialize Classes JsParser and StateManagement
-	let VueStateManagement = new VSM();
-	let parse = new Parser(js);
 
+	let parse = new Parser(js); //JS Parser
+
 	let style; // Declare empty var to asign styles
@@ -98,2 +99,5 @@
 	
+	Components = VueStateManagement.componentsContent;
+
+	
 	//Add new lines and idents to code beauty
@@ -114,6 +118,17 @@ let pretty = VueStateManagement
 <script>
- ${VueStateManagement.getVueDataTemplate(name)}
+${VueStateManagement.getVueDataTemplate(name)}
 </script>
 ${style}`;
 	return template
-}
+}
+
+/**
+ * Components
+ *
+ * Function that return the Main Component's Components.
+ *
+ * @return {String}
+ */
+exports.Components = () => {
+	return Components;
+};

Lib/core/JavascriptManagement/index.js

@@ -0,0 +0,0 @@ class JavascriptManagement {

Lib/core/StateManagement/index.js

 exports.ReactStateManagement = require("./ReactStateManagement");
 exports.VueStateManagement = require("./VueStateManagement")

Lib/core/StateManagement/ReactStateManagement.js

@@ -27,3 +27,3 @@ const StateManagement = require("./StateManagement");
 			this.components.forEach(e=>{
-				components += `import ${e} from "~/components/${e}"\n`; //Add Import for each Component Value
+				components += `import ${e} from "./components/${e}"\n`; //Add Import for each Component Value
 			})
@@ -34,5 +34,4 @@ }
 	/**
-	 * Set React Components
+	 * Set React States Into Template
 	 * 
-	 * @description Set Components Imports to String Template
 	 * @public
@@ -340,6 +339,2 @@ * @return {string}
 							break;
-						case "fullscreenchange":
-							break;
-						case "fullscreenerror":
-							break;
 						case "hashchange":
@@ -524,2 +519,12 @@ eventName = "HashChange";
 			}).join("<input")
+			.split("<component ").map((e, i) => {
+				if (i > 0) {
+					let name = e.match(/name=('|")\w*/)[0].slice(6);
+					let splitted = e.split("</component>");
+					let tag = splitted[0].split(/\r\n|\n|\r/)[0];
+					return tag.replace(/name=('|")\w*('|")/, name).replace(">", "/>") + splitted[1];
+				} 
+				else return e
+			})
+		.join("<");
 
@@ -539,2 +544,2 @@ return html
 
-module.exports = ReactStateManagement
+module.exports = new ReactStateManagement();

Lib/core/StateManagement/StateManagement.js

@@ -24,2 +24,3 @@ /**
 
+		this.componentsContent = new Array();
 	}
@@ -45,2 +46,3 @@
 		this._loops = [];
+		this.componentsContent = [];
 		this._setDataFromHTML(html); //Call Method to Get Data from HTML String
@@ -172,2 +174,16 @@ this.methods = html; //Call Method to Get Data from HTML String
 		}
+
+		let splitComponentWithContent = html.split("<component ");
+		splitComponentWithContent.forEach((e, i)=>{
+			if (i > 0) {
+				let componentName = e.match(/name=('|")\w*/)[0].slice(6);
+				let componentContent = e.replace(/.*>(\r\n|\n|\r)/, "").split(/(\r\n|\n|\r)*\t*<\/component>/)[0];
+				this._components.push(componentName);
+				
+				this.componentsContent.push({
+					name:componentName,
+					content:componentContent
+				});
+			}
+		});
 	}
@@ -439,2 +455,12 @@ get components() {
 		this.components = html; //Get Components
+		html = html.split("<component ").map((e, i) => {
+			if (i > 0) {
+				let name = e.match(/name=('|")\w*/)[0].slice(6);
+				let splitted = e.split("</component>");
+				let tag = splitted[0].split(/\r\n|\n|\r/)[0];
+				return tag.replace(/name=('|")\w*('|")/, name).replace(">", "/>") + splitted[1];
+			} 
+			else return e
+		})
+		.join("<");
 
@@ -441,0 +467,0 @@ this.inputs = html; //Get Inputs, Textarea and Options

Lib/core/StateManagement/VueStateManagement.js

@@ -74,3 +74,14 @@ const StateManagement = require("./StateManagement")
 			
-		return loopParse;
+		let componentParse = loopParse.split("<component ").map((e, i) => {
+			if (i > 0) {
+				let name = e.match(/name=('|")\w*/)[0].slice(6);
+				let splitted = e.split("</component>");
+				let tag = splitted[0].split(/\r\n|\n|\r/)[0];
+				return tag.replace(/name=('|")\w*('|")/, name).replace(">", "/>") + splitted[1];
+			} 
+			else return e
+		})
+		.join("<");
+
+		return componentParse;
 	}
@@ -101,3 +112,3 @@
 		if (this.components.length > 0) {
-			components = `\n\tcomponents:{\n\t\t${this.components.join(', \n\t\t')}\n\t},`;
+			components = `\n\tcomponents:{\n\t\t${this.components.join(',\n\t\t')}\n\t},`;
 			this.components.forEach(e=>{
@@ -141,3 +152,4 @@ importComponents += `import ${e} from "~/components/${e}"\n`;
 		let mainTemplate = 	`${importComponents}\nexport default {\n\tname:${componentName || "MyComponent"},${components}${props}${states}${computed}${methods}${watchers}\n}`;
-		if (states ||
+		if (componentName ||
+			states ||
 			computed ||
@@ -155,2 +167,2 @@ methods ||
 }
-module.exports = VueStateManagement
+module.exports = new VueStateManagement();

Lib/file-utils/index.js

 exports.ServerFileFunctions = require("./ServerFileFunctions");
 exports.TranslatorFileFunctions = require("./TranslatorFileFunctions");

Lib/file-utils/ServerFileFunctions.js

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

Lib/file-utils/TranslatorFileFunctions.js

 const {
-    existsSync,
-    appendFileSync,
-    mkdirSync,
-    readFileSync,
-    writeFileSync,
-    realpathSync
+	existsSync,
+	appendFileSync,
+	mkdirSync,
+	readFileSync,
+	writeFileSync,
+	realpathSync
 } = require("fs"),
 { join } = require("path"),
+{VueCompiler, ReactCompiler} = require("..").core,
+
 cliDir = realpathSync(".");
@@ -17,184 +19,225 @@ /**
 class TranslatorFileFunctions {
-    contructor(){
-        //Initialize propierties
-        this._file = undefined;
-        this._entry = undefined;
-        this._out = undefined;
-        this._js = undefined;
-        this._css = undefined;
-    }
-    /**
-     * Set Params
-     * 
-     * Set Input file and output folder
-     * 
-     * @public
-     * @param {String} fileName 
-     * @param {String} output 
-     */
-    setParams(fileName, output){
-        this._entry = fileName;
-        this._out = output;
-        this._js = [];
-        this._css = [];
-        this._findFile(fileName); //Find all files
-    }
-    /**
-     * Get File
-     * 
-     * Return the HTML file
-     * 
-     * @public
-     * @return {String}
-     */
-    getFile(){
-        return this._file;
-    }
-    /**
-     * Get Js
-     * 
-     * Return the Javascript file
-     * 
-     * @public
-     * @return {String}
-     */
-    getJs(){
-        if (this._js !== undefined){
-            return this._js.join("\r\n").split(/\n|\r|\r\n/g).map(e=>{
-                if (e) return e.replace(/\t|\s\s\s\s|\s\s/, "");
-            })
-            .filter(e=>{
-                return e
-            })
-            .join("\r\n");
-        } else {
-            return ""
-        }
-    }
-    /**
-     * Get CSS
-     * 
-     * Return the Css file
-     * 
-     * @public
-     * @return {String}
-     */
-    getCSS(){
-        if (this._css !== undefined){
-            return this._css.join("\r\n").replace(/^(\n|\r|\r\n)\t*/g, "");
-        } else {
-            return ""
-        }
-    }
-    /**
-     * Write File
-     * 
-     * Append files to the output folder
-     * 
-     * @public
-     * @param {Object} param0
-     */
-    writeFile({content, type, name}){
-        if(!existsSync(this._out)){
-            mkdirSync(this._out);
-        }
-        let mime;
-        switch (type) {
-            case "vue":
-                mime = "vue"; //Set "vue" extension
-                break;
-            case "react":
-                mime = "jsx"; //Set "jsx" extension
-                break;
-            default:
-                throw new Error("Invalid Type "+type);
-        }
-        if (!existsSync(join(this._out, `${name}.${mime}`))){
-            appendFileSync(join(this._out, `${name}.${mime}`), content);
-        } else {
-            writeFileSync(join(this._out, `${name}.${mime}`), content);
-        }
-        //console.log(content); //Console Log to debug
-    }
-    /**
-     * Find File
-     * 
-     * Get the path and find if the file exist
-     * 
-     * @param {String} pathname
-     */
-    _findFile(pathname){
-        if (!existsSync(pathname)) {
-            console.error("File does not exist.");
-            process.exit(1);
+	contructor(){
+		//Initialize propierties
+		this._file = undefined;
+		this._entry = undefined;
+		this._out = undefined;
+		this._js = undefined;
+		this._css = undefined;
+	}
+	/**
+	 * Set Params
+	 * 
+	 * Set Input file and output folder
+	 * 
+	 * @public
+	 * @param {String} fileName 
+	 * @param {String} output 
+	 */
+	setParams(fileName, output){
+		this._entry = fileName;
+		this._out = output;
+		this._js = [];
+		this._css = [];
+		this._findFile(fileName); //Find all files
+	}
+	/**
+	 * Get File
+	 * 
+	 * Return the HTML file
+	 * 
+	 * @public
+	 * @return {String}
+	 */
+	getFile(){
+		return this._file;
+	}
+	/**
+	 * Get Js
+	 * 
+	 * Return the Javascript file
+	 * 
+	 * @public
+	 * @return {String}
+	 */
+	getJs(){
+		if (this._js !== undefined){
+			return this._js.join("\r\n").split(/\n|\r|\r\n/g).map(e=>{
+				if (e) return e.replace(/\t|\s\s\s\s|\s\s/, "");
+			})
+			.filter(e=>{
+				return e
+			})
+			.join("\r\n");
+		} else {
+			return ""
+		}
+	}
+	/**
+	 * Get CSS
+	 * 
+	 * Return the Css file
+	 * 
+	 * @public
+	 * @return {String}
+	 */
+	getCSS(){
+		if (this._css !== undefined){
+			return this._css.join("\r\n").replace(/^(\n|\r|\r\n)\t*/g, "");
+		} else {
+			return ""
+		}
+	}
+	/**
+	 * Write Components
+	 * 
+	 * Append components to the Main Component folder
+	 * 
+	 * @public
+	 * @param {String} MainComponentName
+	 * @param {Array} ComponentsArray
+	 */
+	writeComponents(MainComponentName, type, ComponentsArray) {
+		if (ComponentsArray.length > 0) {
+			let componentsFolder = join(this._out, MainComponentName, "components");
+			if(!existsSync(componentsFolder)){
+				mkdirSync(componentsFolder);
+			}
+			for (let i = 0; i <= ComponentsArray.length - 1; i++) {
+				let name = ComponentsArray[i].name;
+				let content = ComponentsArray[i].content;
+				let mime;
 
-        } else {
-            //If is not a HTML file
-            if (!pathname.match(/\w*.html$/)){
-                console.error("Please select a html file.");
-                process.exit(1);
-            } else {
-                let fileBuffer = readFileSync(pathname); //Read file
-                let data = Buffer.from(fileBuffer).toString(); //Decode Buffer
+				if (type === "vue") {
+					content = VueCompiler(name, content.split(/\n/).map(e => e.replace(/\t\t/, "")).join("\n"), "", "");
+					mime = "vue";
+				}
+				else if (type === "react") {
+					content = ReactCompiler(name, content.split(/\n/).map(e => e.replace(/\t\t/, "")).join("\n"), "", "");
+					mime = "jsx";
+				}
+				else throw new Error("Type must be 'react' or 'vue'");
 
-                //Remove external files routes
-                this._file = data
-                    .replace(/#js .*(\n|\r)/g, "")
-                    .replace(/#css .*(\n|\r|\r\n)/g, "")
-                    .split(/<script.*>/g)
-                    .map((e, i)=>{
-                        if (i > 0) return e.replace(/(\n|\r|\r\n)*(.*(\n|\r|\r\n)*)*<\/script>/, "");
-                        else return e
-                    })
-                    .join("");
-                this._getFileData(data, "js"); //Get Js Route and Data
-                this._getFileData(data, "css"); //Get Css Route and Data
-                this._getScriptTags(data);
-                this._getStyleTags(data);
-            }
-        }
-    }
-    _getScriptTags(html) {
-        html.split(/<script.*>/g).forEach((e, i)=>{
-            if (i > 0) {
-                this._js.push(e.replace(/<\/script>/g, ""));
-            }
-        })
-    }
-    _getStyleTags(html){
-        html.split(/<style.*>/g).forEach((e, i)=>{
-            if (i > 0) {
-                this._css.push(e.replace(/<\/style>/, ""));
-            }
-        })
-    }
-    /**
-     * Get File Data
-     * 
-     * Get Data from JS or Css, Get routes from the HTML String and get the content
-     * 
-     * @param {String} htmlString 
-     * @param {String} type
-     */
-    _getFileData(htmlString, type){
-        if (type === "css" || type === "js") {
-            let reg = new RegExp(`#${type} .*`, "g"); //RegExp to get paths
-            let path = null;
-            if (htmlString.match(reg)) {
-                path = htmlString.match(reg).map(e=>{
-                    return e.replace(`#${type} `, "");
-                });
-            }
-            if (path !== null) {
-                path.forEach(e=>{
-                    let buff = readFileSync(join(__dirname,"..","..", e)); //Read File
-                    let data = Buffer.from(buff).toString(); //Decode Buffer
-                    type === "css" ? this._css.push(data) : this._js.push(data); //Set Data                    
-                })
-            }
-        } else {
-            throw new Error("Invalid Type "+type);
-        }
-    }
+				writeFileSync(join(componentsFolder, `${name}.${mime}`), content);
+			}
+		}
+	}
+	/**
+	 * Write File
+	 * 
+	 * Append files to the output folder
+	 * 
+	 * @public
+	 * @param {Object} param0
+	 */
+	writeFile({content, type, name}){
+		if(!existsSync(this._out)){
+			mkdirSync(this._out);
+		}
+		let mime;
+		switch (type) {
+			case "vue":
+				mime = "vue"; //Set "vue" extension
+				break;
+			case "react":
+				mime = "jsx"; //Set "jsx" extension
+				break;
+			default:
+				throw new Error("Invalid Type "+type);
+		}
+
+		//Component Folder Name
+		let folderPath = join(this._out, name);
+
+		if(!existsSync(folderPath)){
+			mkdirSync(folderPath);
+		}
+
+		//Component Path
+		let filePath = join(this._out, name, `index.${mime}`);
+		writeFileSync(filePath, content);
+
+		//console.log(content); //Console Log to debug
+	}
+	/**
+	 * Find File
+	 * 
+	 * Get the path and find if the file exist
+	 * 
+	 * @param {String} pathname
+	 */
+	_findFile(pathname){
+		if (!existsSync(pathname)) {
+			console.error("File does not exist.");
+			process.exit(1);
+
+		} else {
+			//If is not a HTML file
+			if (!pathname.match(/\w*.html$/)){
+				console.error("Please select a html file.");
+				process.exit(1);
+			} else {
+				let fileBuffer = readFileSync(pathname); //Read file
+				let data = Buffer.from(fileBuffer).toString(); //Decode Buffer
+
+				//Remove external files routes
+				this._file = data
+					.replace(/#js .*(\n|\r)/g, "")
+					.replace(/#css .*(\n|\r|\r\n)/g, "")
+					.split(/<script.*>/g)
+					.map((e, i)=>{
+						if (i > 0) return e.replace(/(\n|\r|\r\n)*(.*(\n|\r|\r\n)*)*<\/script>/, "");
+						else return e
+					})
+					.join("");
+				this._getFileData(data, "js"); //Get Js Route and Data
+				this._getFileData(data, "css"); //Get Css Route and Data
+				this._getScriptTags(data);
+				this._getStyleTags(data);
+			}
+		}
+	}
+	_getScriptTags(html) {
+		html.split(/<script.*>/g).forEach((e, i)=>{
+			if (i > 0) {
+				this._js.push(e.replace(/<\/script>/g, ""));
+			}
+		})
+	}
+	_getStyleTags(html){
+		html.split(/<style.*>/g).forEach((e, i)=>{
+			if (i > 0) {
+				this._css.push(e.replace(/<\/style>/, ""));
+			}
+		})
+	}
+	/**
+	 * Get File Data
+	 * 
+	 * Get Data from JS or Css, Get routes from the HTML String and get the content
+	 * 
+	 * @param {String} htmlString 
+	 * @param {String} type
+	 */
+	_getFileData(htmlString, type){
+		if (type === "css" || type === "js") {
+			let reg = new RegExp(`#${type} .*`, "g"); //RegExp to get paths
+			let path = null;
+			if (htmlString.match(reg)) {
+				path = htmlString.match(reg).map(e=>{
+					return e.replace(`#${type} `, "");
+				});
+			}
+			if (path !== null) {
+				path.forEach(e=>{
+					let buff = readFileSync(join(__dirname,"..","..", e)); //Read File
+					let data = Buffer.from(buff).toString(); //Decode Buffer
+					type === "css" ? this._css.push(data) : this._js.push(data); //Set Data                    
+				})
+			}
+		} else {
+			throw new Error("Invalid Type "+type);
+		}
+	}
 }
 module.exports = TranslatorFileFunctions;

Lib/index.js

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

package.json

 {
   "name": "rocket-translator",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Translate your HTML files to React.js and Vue.js",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -233,4 +233,14 @@ # RocketJS [![npm version](https://badge.fury.io/js/rocket-translator.svg)](https://badge.fury.io/js/rocket-translator)
 <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.
+
+```html
+<component name="HelloWorldComponent" name="World">
+    <div>
+        <h1>Hello {name}!</h1>
+    </div>
+</component>
+```
+
 ### State Watchers <a name="watchers"></a>
@@ -454,3 +464,11 @@
 ```
+#### Component Tag
 
+We add this tag to declare a **custom** component inside the **Main Component**
+
+```html
+<component name="ComponentName">
+    <span>Component Content</span>
+</component>
+```
 ## To Do
@@ -457,0 +475,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

200510

increased by4.34%

Lines of code

1969

increased by4.51%

Number of lines in readme file

504

increased by3.7%

No dependency changes