Skip to content

Commit

Permalink
Merge branch 'master' of github.com:teleporthq/teleport-visual-repl
Browse files Browse the repository at this point in the history
  • Loading branch information
TCern committed Feb 7, 2020
2 parents cf5e28a + a850264 commit 39920f2
Show file tree
Hide file tree
Showing 7 changed files with 259 additions and 216 deletions.
39 changes: 23 additions & 16 deletions components/UIDLtoHTMLComponent.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,26 @@
import React, { useEffect } from "react";
import React, { useEffect, useRef } from "react";
import UIDLToHtml from "../utils/UIDLToHtml";
import UIDLParser from "../utils/UIDLParser";
import StateAndPropsToValues from "../utils/StateAndPropsToValues";

export default function UIDLtoHTMLComponent(props): any {
export default function UIDLtoHTMLComponent({ uidl }): any {
const htmlContainer = useRef(null);
console.log(htmlContainer);

useEffect(() => {
try{
try {
let UIDLObject: unknown;
UIDLObject = JSON.parse(props.uidl);

//console.log(UIDLParser(JSON.parse(JSON.stringify(UIDLObject))));
//console.log(StateAndPropsToValues(UIDLParser(JSON.parse(JSON.stringify(UIDLObject)))));
UIDLObject = JSON.parse(uidl);
// console.log(UIDLParser(JSON.parse(JSON.stringify(UIDLObject))));
// console.log(
// StateAndPropsToValues(UIDLParser(JSON.parse(JSON.stringify(UIDLObject))))
// );
const { html, style } = UIDLToHtml(
StateAndPropsToValues(UIDLParser(JSON.parse(JSON.stringify(UIDLObject))))
StateAndPropsToValues(
UIDLParser(JSON.parse(JSON.stringify(UIDLObject)))
)
);

document.getElementById("htmlContainer").innerHTML = html;
htmlContainer.current.innerHTML = html;

if (document.getElementById("generatedElementStyle")) {
document.getElementById("generatedElementStyle").innerHTML = style;
Expand All @@ -26,17 +31,19 @@ export default function UIDLtoHTMLComponent(props): any {
sheet.innerHTML = style;
sheet.id = "generatedElementStyle";
document.body.appendChild(sheet);

} catch (e){
document.getElementById("htmlContainer").innerHTML = e;
} catch (e) {
htmlContainer.current.innerHTML = e;
}

}, [props]);
}, [uidl]);

return (
<div className="container">
<div className="htmlWrapper">
<div id="htmlContainer" className="htmlContainer"></div>
<div
id="htmlContainer"
className="htmlContainer"
ref={htmlContainer}
></div>
</div>

<style jsx>{`
Expand Down
5 changes: 3 additions & 2 deletions pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { useState } from "react";
import SplitEditor from "../components/SplitEditor";
import UIDLtoHTMLComponent from "../components/UIDLtoHTMLComponent";


const Home: NextPage<{ userAgent: string }> = () => {
const [isHidden, setIsHidden] = useState(false);
const [uidl, setUidl] = useState("");
Expand All @@ -19,7 +18,9 @@ const Home: NextPage<{ userAgent: string }> = () => {
return (
<div className="mainContainer">
<SplitEditor onChange={handleChange} uidl={uidl} isHidden={isHidden} />
<button className="hideButton" id="hide" onClick = {() => handleClick()}>{isHidden ? <span>></span> : <span>&lt;</span>}</button>
<button className="hideButton" id="hide" onClick={() => handleClick()}>
{isHidden ? <span>></span> : <span>&lt;</span>}
</button>
<UIDLtoHTMLComponent uidl={uidl} />
<style jsx>{`
.mainContainer {
Expand Down
5 changes: 0 additions & 5 deletions pages/landing.tsx

This file was deleted.

106 changes: 55 additions & 51 deletions utils/StateAndPropsToValues.tsx
Original file line number Diff line number Diff line change
@@ -1,57 +1,61 @@
function ParseAndReplace(object: object, stateAndProps: object): object {
Object.keys(object).forEach(key => {
if (typeof object[key] === "string") {
if (/\$/g.test(object[key])) {
const parts = object[key].split(".");
if (parts[0] === "$props" || parts[0] === "$prop") {
object[key] =
stateAndProps["propDefinitions"][parts[1]]?.defaultValue || "";
} else if (parts[0] === "$state") {
console.log("Before:", object);
object[key] =
stateAndProps["stateDefinitions"][parts[1]]?.defaultValue || "";
console.log("After:", object);
} // TO-DO: else for local
}
}
if (typeof object[key] === "object") {
if (object[key].referenceType) {
if (
object[key].referenceType === "prop" ||
object[key].referenceType === "props"
) {
object[key] =
stateAndProps["propDefinitions"][object[key].id]?.defaultValue ||
"";
} else if (object[key].referenceType === "state") {
object[key] =
stateAndProps["stateDefinitions"][object[key].id]?.defaultValue ||
"";
} // TO-DO: else for local
} else {
object[key] = ParseAndReplace(object[key], stateAndProps);
}
}
});

function ParseAndReplace(object : object, stateAndProps : object) : object{

Object.keys(object).forEach(key => {
if(typeof object[key] === "string"){
if(/\$/g.test(object[key])){
const parts = object[key].split(".");
if(parts[0] === "$props" || parts[0] === "$prop"){
object[key] = stateAndProps["propDefinitions"][parts[1]]?.defaultValue || ""
} else if(parts[0] === "$state") {
console.log("Before:", object);
object[key] = stateAndProps["stateDefinitions"][parts[1]]?.defaultValue || ""
console.log("After:", object);
} // TO-DO: else for local
}
}
if(typeof object[key] === "object"){
if(object[key].referenceType){
if(object[key].referenceType === "prop" || object[key].referenceType === "props"){
object[key] = stateAndProps["propDefinitions"][object[key].id]?.defaultValue || ""
} else if (object[key].referenceType === "state") {
object[key] = stateAndProps["stateDefinitions"][object[key].id]?.defaultValue || ""
} // TO-DO: else for local
} else {
object[key] = ParseAndReplace(object[key], stateAndProps);
}
}
});

return object
return object;
}



const StateAndPropsToValues = (FlattenedUIDL : object[]) => {
const stateAndProps = FlattenedUIDL[FlattenedUIDL.length - 1]["elementInfo"];
const result = FlattenedUIDL
.map(element => {
return ParseAndReplace(element, stateAndProps)
})

for(let i =0; i<result.length; i++){
let ref = result[i]["elementInfo"]["reference"]
if(ref){
if(ref["content"] !== result[i]["elementInfo"]["value"]){
console.log(ref["content"], result[i]["elementInfo"]["value"])
result[i-1]["elementInfo"] = {filterCondition : "filter"}
}
}
const StateAndPropsToValues = (FlattenedUIDL: object[]) => {
const stateAndProps = FlattenedUIDL[FlattenedUIDL.length - 1]["elementInfo"];
const result = FlattenedUIDL.map(element => {
return ParseAndReplace(element, stateAndProps);
});

for (let i = 0; i < result.length; i++) {
let ref = result[i]["elementInfo"]["reference"];
if (ref) {
if (ref["content"] !== result[i]["elementInfo"]["value"]) {
console.log(ref["content"], result[i]["elementInfo"]["value"]);
result[i - 1]["elementInfo"] = { filterCondition: "filter" };
}
}
}

return result.filter(
element => element["elementInfo"]["filterCondition"] !== "filter"
)
}
return result.filter(
element => element["elementInfo"]["filterCondition"] !== "filter"
);
};

export default StateAndPropsToValues;
export default StateAndPropsToValues;
74 changes: 37 additions & 37 deletions utils/UIDLParser.ts
Original file line number Diff line number Diff line change
Expand Up @@ -76,44 +76,44 @@ const UILDParser = (obj: UIDLElementContent, depthLevel: number = -1) => {
};

// delete?
// const fixSpecialCases = (
// result: UIDLElementContent[],
// state,
// props: object
// ) => {
// // filter values that can't be transformed into HTML ex: reference
// const filteredResult = result.filter(
// element => element.elementInfo["filterCondition"] !== "filter"
// );
// // Treat DefaultProps Case
// if (props && Object.keys(props).length) {
// const consideringProps = filteredResult.map((element, i) => {
// let myFindById = Object.keys(props).find(
// prop => prop === element.elementInfo["id"]
// );
const fixSpecialCases = (
result: UIDLElementContent[],
state,
props: object
) => {
// filter values that can't be transformed into HTML ex: reference
const filteredResult = result.filter(
element => element.elementInfo["filterCondition"] !== "filter"
);
// Treat DefaultProps Case
if (props && Object.keys(props).length) {
const consideringProps = filteredResult.map((element, i) => {
let myFindById = Object.keys(props).find(
prop => prop === element.elementInfo["id"]
);

// if (element.elementInfo["attrs"]) {
// let myFindByAttr = Object.keys(props).find(
// prop => prop === element.elementInfo["attrs"]
// );
// // console.log(element);
// // element.elementInfo["attrs"][props[i]];
// }
// // console.log("Element: ", element.elementInfo);
// // console.log("*****************BREAK************************");
if (element.elementInfo["attrs"]) {
let myFindByAttr = Object.keys(props).find(
prop => prop === element.elementInfo["attrs"]
);
// console.log(element);
// element.elementInfo["attrs"][props[i]];
}
// console.log("Element: ", element.elementInfo);
// console.log("*****************BREAK************************");

// if (myFindById) {
// return (element = {
// elementInfo: props[myFindById].defaultValue,
// depthLevel: element.depthLevel
// });
// } else {
// return element;
// }
// });
// return consideringProps;
// }
// return filteredResult;
// };
if (myFindById) {
return (element = {
elementInfo: props[myFindById].defaultValue,
depthLevel: element.depthLevel
});
} else {
return element;
}
});
return consideringProps;
}
return filteredResult;
};

export default UILDParser;
Loading

0 comments on commit 39920f2

Please sign in to comment.