Skip to content

Commit 5b56ec2

Browse files
kchenderkchender
authored
Merge pull request #11 from oslabs-beta/Miko
render semi functional
2 parents a5f1d7b + 180848f commit 5b56ec2

File tree

3 files changed

+89
-72
lines changed

3 files changed

+89
-72
lines changed

‎app/src/components/main/DemoRender.tsx

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,26 @@ const DemoRender = (): JSX.Element => {
7979

8080
let code = '';
8181
//compone
82-
componentBuilder(state.components[0].children).forEach(element => code += ReactDOMServer.renderToString(element));
82+
83+
componentBuilder(state.components[0].children).forEach(element => {
84+
if(element.props.component === 'Link') {
85+
return;
86+
// element.props.component = 'a';
87+
// element.props.id = `rend${6}`;
88+
} else if(typeof element.type === 'function') {
89+
return;
90+
}
91+
code += ReactDOMServer.renderToString(element)
92+
});
93+
94+
// state.components[0].children?.forEach(element => {
95+
// if(element.name === 'Switch' || element.name === 'Link') {
96+
// element.name = 'a';
97+
// element.typeId = 6;
98+
// }
99+
// console.log(element)
100+
// });
101+
// console.log('code', code);
83102

84103
useEffect(() => {
85104
cssRefresher();

‎app/src/helperFunctions/generateCode.ts

Lines changed: 66 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,8 @@ const generateUnformattedCode = (
9292
).name;
9393
return child;
9494
}
95-
});
96-
return enrichedChildren;
95+
});
96+
return enrichedChildren;
9797
};
9898
// Raised formatStyles so that it is declared before it is referenced. It was backwards.
9999
// format styles stored in object to match React inline style format
@@ -102,7 +102,7 @@ const generateUnformattedCode = (
102102
const formattedStyles = [];
103103
let styleString;
104104
for (let i in styleObj) {
105-
if(i === 'style') {
105+
if (i === 'style') {
106106
styleString = i + '=' + '{' + JSON.stringify(styleObj[i]) + '}';
107107
formattedStyles.push(styleString);
108108
}
@@ -116,7 +116,7 @@ const generateUnformattedCode = (
116116
if (childElement.attributes && childElement.attributes.cssClasses) {
117117
customizationDetails += (' ' + `className="${childElement.attributes.cssClasses}"`);
118118
}
119-
if (childElement.style && Object.keys(childElement.style).length > 0) customizationDetails +=(' ' + formatStyles(childElement));
119+
if (childElement.style && Object.keys(childElement.style).length > 0) customizationDetails += (' ' + formatStyles(childElement));
120120
return customizationDetails;
121121
};
122122
// function to fix the spacing of the ace editor for new lines of added content. This was breaking on nested components, leaving everything right justified.
@@ -127,7 +127,7 @@ const generateUnformattedCode = (
127127
}
128128
// function to dynamically generate the appropriate levels for the code preview
129129
const levelSpacer = (level: number, spaces: number) => {
130-
if (level === 2 ) return `\n${tabSpacer(spaces)}`;
130+
if (level === 2) return `\n${tabSpacer(spaces)}`;
131131
else return ''
132132
}
133133
// function to dynamically generate a complete html (& also other library type) elements
@@ -145,17 +145,17 @@ const generateUnformattedCode = (
145145
if (childElement.stateUsed && childElement.stateUsed.compLink) {
146146
activeLink = '{' + childElement.stateUsed.compLink + '}';
147147
} else {
148-
activeLink = '"' +childElement.attributes.compLink + '"';
148+
activeLink = '"' + childElement.attributes.compLink + '"';
149149
}
150150
}
151151
const nestable = childElement.tag === 'div' ||
152-
childElement.tag === 'form' ||
153-
childElement.tag === 'ol' ||
154-
childElement.tag === 'ul' ||
155-
childElement.tag === 'menu' ||
156-
childElement.tag === 'li' ||
157-
childElement.tag === 'Switch' ||
158-
childElement.tag === 'Route';
152+
childElement.tag === 'form' ||
153+
childElement.tag === 'ol' ||
154+
childElement.tag === 'ul' ||
155+
childElement.tag === 'menu' ||
156+
childElement.tag === 'li' ||
157+
childElement.tag === 'Switch' ||
158+
childElement.tag === 'Route';
159159

160160
if (childElement.tag === 'img') {
161161
return `${levelSpacer(level, 5)}<${childElement.tag} src=${activeLink} ${elementTagDetails(childElement)}/>${levelSpacer(2, (3 + level))}`;
@@ -172,34 +172,34 @@ const generateUnformattedCode = (
172172
return `${levelSpacer(level, 5)}<${childElement.tag}${elementTagDetails(childElement)}${routePath}>${innerText}
173173
${tabSpacer(level)}${writeNestedElements(childElement.children, level + 1)}
174174
${tabSpacer(level - 1)}</${childElement.tag}>${levelSpacer(2, (3 + level))}`;
175-
} else if (childElement.tag !== 'separator'){
175+
} else if (childElement.tag !== 'separator') {
176176
return `${levelSpacer(level, 5)}<${childElement.tag}${elementTagDetails(childElement)}>${innerText}</${childElement.tag}>${levelSpacer(2, (3 + level))}`;
177177
}
178178
}
179179
// write all code that will be under the "return" of the component
180180
const writeNestedElements = (enrichedChildren: any, level: number = 2) => {
181181
return `${enrichedChildren
182-
.map((child: any) => {
183-
if (child.type === 'Component') {
184-
return `<${child.name} ${elementTagDetails(child)} />`;
185-
} else if (child.type === 'HTML Element') {
186-
return elementGenerator(child, level);
187-
}
188-
// route links are for gatsby.js and next.js feature. if the user creates a route link and then switches projects, generate code for a normal link instead
189-
else if (child.type === 'Route Link') {
190-
if (projectType === 'Next.js') {
191-
// if route link points to index, to go endpoint / rather than /index
192-
if (child.name === 'index') return `<div><Link href="/"><a>${child.name}</a></Link></div>`;
193-
else return `<div><Link href="/${child.name}"><a>${child.name}</a></Link></div>`;
194-
} else if (projectType === 'Gatsby.js') {
195-
if (child.name === 'index') return `<div><Link to="/">${child.name}</Link></div>`;
196-
else return `<div><Link to="/${child.name}">${child.name}</Link></div>`;
197-
} else return `<div><a>${child.name}</a></div>`
198-
}
199-
})
200-
.filter(element => !!element)
201-
.join('')
202-
}`;
182+
.map((child: any) => {
183+
if (child.type === 'Component') {
184+
return `<${child.name} ${elementTagDetails(child)} />`;
185+
} else if (child.type === 'HTML Element') {
186+
return elementGenerator(child, level);
187+
}
188+
// route links are for gatsby.js and next.js feature. if the user creates a route link and then switches projects, generate code for a normal link instead
189+
else if (child.type === 'Route Link') {
190+
if (projectType === 'Next.js') {
191+
// if route link points to index, to go endpoint / rather than /index
192+
if (child.name === 'index') return `<div><Link href="/"><a>${child.name}</a></Link></div>`;
193+
else return `<div><Link href="/${child.name}"><a>${child.name}</a></Link></div>`;
194+
} else if (projectType === 'Gatsby.js') {
195+
if (child.name === 'index') return `<div><Link to="/">${child.name}</Link></div>`;
196+
else return `<div><Link to="/${child.name}">${child.name}</Link></div>`;
197+
} else return `<div><a>${child.name}</a></div>`
198+
}
199+
})
200+
.filter(element => !!element)
201+
.join('')
202+
}`;
203203
};
204204
// function to properly incorporate the user created state that is stored in the application state
205205
const writeStateProps = (stateArray: any) => {
@@ -214,17 +214,17 @@ const generateUnformattedCode = (
214214
const importsMapped =
215215
projectType === 'Next.js' || projectType === 'Gatsby.js'
216216
? imports
217-
.map((comp: string) => {
218-
return isRoot
219-
? `import ${comp} from '../components/${comp}'`
220-
: `import ${comp} from './${comp}'`;
221-
})
222-
.join('\n')
217+
.map((comp: string) => {
218+
return isRoot
219+
? `import ${comp} from '../components/${comp}'`
220+
: `import ${comp} from './${comp}'`;
221+
})
222+
.join('\n')
223223
: imports
224-
.map((comp: string) => {
225-
return `import ${comp} from './${comp}'`;
226-
})
227-
.join('\n');
224+
.map((comp: string) => {
225+
return `import ${comp} from './${comp}'`;
226+
})
227+
.join('\n');
228228
const createState = (stateProps) => {
229229
let state = '{';
230230
stateProps.forEach((ele) => {
@@ -235,27 +235,27 @@ const generateUnformattedCode = (
235235
}
236236
// Generate import
237237
let importContext = '';
238-
if(currComponent.useContext) {
238+
if (currComponent.useContext) {
239239
for (const providerId of Object.keys(currComponent.useContext)) {
240240
const providerComponent = components[parseInt(providerId) - 1];
241-
importContext += `import ${providerComponent.name}Context from './${providerComponent.name}.tsx'\n \t\t` ;
241+
importContext += `import ${providerComponent.name}Context from './${providerComponent.name}.tsx'\n \t\t`;
242242
}
243243
}
244244
if (currComponent.useContext) {
245245
for (const providerId of Object.keys(currComponent.useContext)) {
246246
const statesFromProvider = currComponent.useContext[parseInt(providerId)].statesFromProvider; //{1: {Set, compLink, compText}, 2 : {}...}
247247
const providerComponent = components[parseInt(providerId) - 1];
248-
providers += 'const ' + providerComponent.name.toLowerCase() + 'Context = useContext(' + providerComponent.name + 'Context);\n \t\t' ;
248+
providers += 'const ' + providerComponent.name.toLowerCase() + 'Context = useContext(' + providerComponent.name + 'Context);\n \t\t';
249249
for (let i = 0; i < providerComponent.stateProps.length; i++) {
250-
if(statesFromProvider.has(providerComponent.stateProps[i].id)) {
250+
if (statesFromProvider.has(providerComponent.stateProps[i].id)) {
251251
context +=
252-
'const ' +
253-
providerComponent.stateProps[i].key +
254-
' = ' +
255-
providerComponent.name.toLowerCase() +
256-
'Context.' +
257-
providerComponent.stateProps[i].key +
258-
'; \n \t\t';
252+
'const ' +
253+
providerComponent.stateProps[i].key +
254+
' = ' +
255+
providerComponent.name.toLowerCase() +
256+
'Context.' +
257+
providerComponent.stateProps[i].key +
258+
'; \n \t\t';
259259
}
260260
}
261261
}
@@ -266,17 +266,17 @@ const generateUnformattedCode = (
266266
return `
267267
${`import React, { useState, useEffect} from 'react';`}
268268
${`import ReactDOM from 'react-dom';`}
269-
${importReactRouter ? `import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';`: ``}
269+
${importReactRouter ? `import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';` : ``}
270270
${importsMapped}
271271
${`const ${currComponent.name} = (props) => {`}
272272
${` const [value, setValue] = useState("");${writeStateProps(currComponent.useStateCodes)}`}
273273
${!importReactRouter
274-
? ` return (
274+
? ` return (
275275
<div className="${currComponent.name}" ${formatStyles(currComponent)}>
276276
\t${writeNestedElements(enrichedChildren)}
277277
</div>
278278
);`
279-
: ` return (
279+
: ` return (
280280
<Router>
281281
<div className="${currComponent.name}" ${formatStyles(currComponent)}>
282282
\t${writeNestedElements(enrichedChildren)}
@@ -298,12 +298,11 @@ const generateUnformattedCode = (
298298
const [value, setValue] = useState<any | undefined>("INITIAL VALUE");
299299
return (
300300
<>
301-
${
302-
isRoot
303-
? `<Head>
301+
${isRoot
302+
? `<Head>
304303
<title>${currComponent.name}</title>
305304
</Head>`
306-
: ``
305+
: ``
307306
}
308307
<div className="${currComponent.name}" style={props.style}>
309308
${writeNestedElements(enrichedChildren)}
@@ -324,13 +323,12 @@ const generateUnformattedCode = (
324323
const[value, setValue] = useState<any | undefined>("INITIAL VALUE");
325324
return (
326325
<>
327-
${
328-
isRoot
329-
? `<head>
326+
${isRoot
327+
? `<head>
330328
<title>${currComponent.name}</title>
331329
</head>`
332-
: ``
333-
}
330+
: ``
331+
}
334332
<div className="${currComponent.name}" style={props.style}>
335333
${writeNestedElements(enrichedChildren)}
336334
</div>

‎app/src/tree/TreeChart.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ function TreeChart({ data }) { // data is components from state - passed in from
3535
}
3636
// if element has a children array and that array has length, recursive call
3737
else if ((arr[i].name === 'div' || arr[i].name === 'form' || arr[i].type === 'Component' || arr[i].name === 'LinkTo'
38-
|| arr[i].name === 'Switch' || arr[i].name === 'Route' || arr[i].name === 'menu'
39-
|| arr[i].name === 'ul' || arr[i].name === 'ol' || arr[i].name === 'li') && arr[i].children.length) {
38+
|| arr[i].name === 'Switch' || arr[i].name === 'Route' || arr[i].name === 'menu'
39+
|| arr[i].name === 'ul' || arr[i].name === 'ol' || arr[i].name === 'li') && arr[i].children.length) {
4040
// if element is a component, replace it with deep clone of latest version (to update with new HTML elements)
4141
if (arr[i].type === 'Component') arr[i] = cloneDeep(data.find(component => component.name === arr[i].name));
4242
removeSeparators(arr[i].children);
@@ -100,7 +100,7 @@ function TreeChart({ data }) { // data is components from state - passed in from
100100
.attr('transform', `translate(${xPosition}, 0)`);
101101
if (data !== previouslyRenderedData) {
102102
enteringAndUpdatingLinks
103-
.attr('stroke-dashoffset', function() {
103+
.attr('stroke-dashoffset', function () {
104104
return this.length;
105105
})
106106
.attr('stroke-dashoffset', 0);

0 commit comments

Comments
 (0)