Skip to content

Commit f4dbc82

Browse files
JesseWowczukJesseWowczuk
committed
debugged MUItypes mismatch
2 parents f19643c + 61a16b4 commit f4dbc82

File tree

5 files changed

+2598
-757
lines changed

5 files changed

+2598
-757
lines changed

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

Lines changed: 13 additions & 199 deletions
Original file line numberDiff line numberDiff line change
@@ -35,161 +35,6 @@ const DemoRender = (): JSX.Element => {
3535
overflow: 'auto'
3636
};
3737

38-
// const html = `
39-
// <html>
40-
// <head>
41-
// <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
42-
// <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
43-
// <script defer src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
44-
// <script defer src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
45-
// <script defer src="https://unpkg.com/react-router-dom@5/umd/react-router-dom.min.js"></script>
46-
// <script defer src="https://unpkg.com/@mui/[email protected]/umd/material-ui.production.min.js"></script>
47-
// </script>
48-
// <style id="mui-styles"></style>
49-
// </head>
50-
// <body>
51-
// <div id="app"></div>
52-
// <script>
53-
// document.addEventListener('DOMContentLoaded', function() {
54-
55-
// function logToParentConsole(...args) {
56-
// const cache = new Set(); // Set to keep track of all objects being stringified
57-
58-
// const payload = args.map(arg => {
59-
// if (typeof arg === 'object' && arg !== null) {
60-
// return JSON.stringify(arg, (key, value) => {
61-
// if (typeof value === 'object' && value !== null) {
62-
// if (cache.has(value)) {
63-
// // Duplicate reference found, discard key
64-
// return;
65-
// }
66-
// // Store value in our collection
67-
// cache.add(value);
68-
// }
69-
// return value;
70-
// });
71-
// }
72-
// return arg;
73-
// });
74-
75-
// window.parent.postMessage({ type: 'log', data: payload }, '*');
76-
// cache.clear(); // Clear cache after serialization
77-
// }
78-
// console.log = logToParentConsole;
79-
80-
// const MaterialUI = window.MaterialUI;
81-
// const ReactRouterDOM = window.ReactRouterDOM;
82-
// const React = window.React;
83-
// const ReactDOM = window.ReactDOM;
84-
85-
// console.log('MaterialUI.ButtonGroup:', MaterialUI.ButtonGroup); // Check if the Autocomplete component is properly referenced
86-
87-
// if (!MaterialUI || !ReactRouterDOM || !React || !ReactDOM) {
88-
// console.log('Dependency loading failed: MaterialUI, React, or ReactDOM is undefined.');
89-
// return;
90-
// }
91-
92-
// console.log('MaterialUI:', MaterialUI);
93-
// console.log('ReactRouterDOM:', ReactRouterDOM);
94-
// const componentMap = {
95-
// Box: MaterialUI?.Box,
96-
// Button: MaterialUI?.Button,
97-
// Link: ReactRouterDOM?.Link,
98-
// TextField: MaterialUI?.TextField,
99-
// Card: MaterialUI?.Card,
100-
// CardContent: MaterialUI?.CardContent,
101-
// Typography: MaterialUI?.Typography,
102-
// CardActions: MaterialUI?.CardActions,
103-
// ButtonGroup: MaterialUI?.ButtonGroup,
104-
// Autocomplete: MaterialUI?.AutoComplete
105-
106-
// };
107-
// const specialComponents = {
108-
// 'br': React.createElement('br', {})
109-
// };
110-
// const createComponentFromData = (data) => {
111-
// console.log('data', data);
112-
// const { type, props, children } = data;
113-
// const Component = componentMap[type] || 'div';
114-
// const processChildren = (child) => {
115-
// if (typeof child === 'string') {
116-
// if (specialComponents[child]) {
117-
// return specialComponents[child];
118-
// } else {
119-
// return child;
120-
// }
121-
// } else if (typeof child === 'object' && child !== null) {
122-
// return createComponentFromData(child);
123-
// } else {
124-
// return null;
125-
// }
126-
// };
127-
128-
// if (typeof children === 'string' || children === null) {
129-
// return React.createElement(Component, props, children);
130-
// } else if (Array.isArray(children)) {
131-
// const processedChildren = children.map(processChildren);
132-
// return React.createElement(Component, props, ...processedChildren);
133-
// } else if (typeof children === 'object') {
134-
// return React.createElement(Component, props, createComponentFromData(children));
135-
// }
136-
// return React.createElement(Component, props);
137-
// };
138-
// window.addEventListener('message', (event) => {
139-
// console.log('event', event);
140-
// const dataArr = event.data.replace(/}{/g, '},,{').replace(/}</g, '},,<').replace(/>{/g, '>,,{').split(',,');
141-
// console.log('dataArr', dataArr);
142-
// const container = document.getElementById('app');
143-
// container.innerHTML = '';
144-
// dataArr.forEach(segment => {
145-
// if(segment.trim().startsWith('{') && segment.trim().endsWith('}')) {
146-
// try {
147-
// const jsonData = JSON.parse(segment);
148-
// console.log('jsonData', jsonData);
149-
// const componentContainer = document.createElement('div');
150-
// container.appendChild(componentContainer);
151-
// const component = createComponentFromData(jsonData);
152-
// console.log('component', component);
153-
// ReactDOM.render(component, componentContainer);
154-
// } catch (err) {
155-
// console.error("Error parsing JSON:", err);
156-
// }
157-
// } else {
158-
// container.insertAdjacentHTML('beforeend', segment);
159-
// container.querySelectorAll('a').forEach(element => {
160-
// element.addEventListener('click', (event) => {
161-
// event.preventDefault();
162-
// window.top.postMessage(event.currentTarget.href, '*');
163-
// });
164-
// });
165-
// }
166-
// });
167-
// });
168-
169-
// const handleClickInsideIframe = () => {
170-
// window.parent.postMessage('iframeClicked', '*');
171-
// };
172-
// const handleMouseUpInsideIframe = () => {
173-
// window.parent.postMessage('iframeMouseUp', '*');
174-
// };
175-
// const handleMouseMoveInsideIframe = (e) => {
176-
// const msgData = {
177-
// type: 'iframeMouseMove',
178-
// clientY: e.clientY + 70 // Adjust according to your needs
179-
// };
180-
// window.parent.postMessage(msgData, '*');
181-
// };
182-
183-
// window.addEventListener('click', handleClickInsideIframe);
184-
// window.addEventListener('mouseup', handleMouseUpInsideIframe);
185-
// window.addEventListener('mousemove', handleMouseMoveInsideIframe);
186-
// });
187-
188-
// </script>
189-
// </body>
190-
// </html>
191-
// `;
192-
19338
const html = `
19439
<html>
19540
<head>
@@ -204,13 +49,6 @@ const DemoRender = (): JSX.Element => {
20449
<body>
20550
<div id="app";"></div>
20651
<script>
207-
const top100Films = [
208-
{ label: 'The Shawshank Redemption', year: 1994 },
209-
{ label: 'The Godfather', year: 1972 },
210-
{ label: 'The Godfather: Part II', year: 1974 },
211-
{ label: 'The Dark Knight', year: 2008 },
212-
{ label: '12 Angry Men', year: 1957 },
213-
];
21452
21553
document.addEventListener('DOMContentLoaded', function() {
21654
function logToParentConsole(...args) {
@@ -241,38 +79,13 @@ const DemoRender = (): JSX.Element => {
24179
const React = window.React;
24280
const ReactDOM = window.ReactDOM;
24381
244-
console.log('MaterialUI:', MaterialUI); // Check if the Autocomplete component is properly referenced
82+
console.log('MaterialUI:', MaterialUI);
24583
24684
if (!MaterialUI || !ReactRouterDOM || !React || !ReactDOM) {
24785
console.log('Dependency loading failed: MaterialUI, React, or ReactDOM is undefined.');
24886
return;
24987
}
25088
251-
const componentMap = {
252-
Box: MaterialUI?.Box,
253-
Button: MaterialUI?.Button,
254-
Link: ReactRouterDOM?.Link,
255-
TextField: MaterialUI?.TextField,
256-
Card: MaterialUI?.Card,
257-
CardContent: MaterialUI?.CardContent,
258-
Typography: MaterialUI?.Typography,
259-
CardActions: MaterialUI?.CardActions,
260-
ButtonGroup: MaterialUI?.ButtonGroup,
261-
Autocomplete: MaterialUI?.AutoComplete,
262-
Checkbox: MaterialUI?.Checkbox,
263-
Fab: MaterialUI?.Fab,
264-
Radio: MaterialUI?.Radio,
265-
RadioGroup: MaterialUI?.RadioGroup,
266-
FormControlLabel: MaterialUI?.FormControlLabel,
267-
FormControl: MaterialUI?.FormControl,
268-
FormLabel: MaterialUI?.FormLabel,
269-
Rating: MaterialUI?.Rating,
270-
MenuItem: MaterialUI?.MenuItem,
271-
Select: MaterialUI?.Select,
272-
InputLabel: MaterialUI?.InputLabel,
273-
Slider: MaterialUI?.Slider,
274-
};
275-
27689
const specialComponents = {
27790
'br': () => React.createElement('br', {})
27891
};
@@ -288,7 +101,7 @@ const DemoRender = (): JSX.Element => {
288101
289102
const createComponentFromData = (data) => {
290103
const { type, props, children } = data;
291-
const Component = componentMap[type] || 'div'; // Default to div if component is not found
104+
const Component = MaterialUI[type] || 'div'; // Default to div if component is not found
292105
293106
const processChildren = (child) => {
294107
if (typeof child === 'string') {
@@ -312,19 +125,20 @@ const DemoRender = (): JSX.Element => {
312125
};
313126
314127
window.addEventListener('message', (event) => {
315-
console.log('event', event);
316-
const dataArr = event.data.replace(/}{/g, '},,{').replace(/}</g, '},,<').replace(/>{/g, '>,,{').split(',,');
317-
console.log('dataArr', dataArr);
128+
// console.log('event', event);
129+
const dataArr = event.data.replace(/}{/g, '}|||{').replace(/}</g, '}|||<').replace(/>{/g, '>|||{').split('|||');
130+
// console.log('dataArr', dataArr);
318131
const container = document.getElementById('app');
319132
container.innerHTML = '';
320133
dataArr.forEach(segment => {
321-
console.log('segment', segment)
134+
// console.log('segment', segment)
322135
if(segment.trim().startsWith('{') && segment.trim().endsWith('}')) {
323136
try {
324137
const jsonData = JSON.parse(segment);
325-
console.log('jsonData', jsonData);
326-
if (jsonData.props.children) {
327-
console.log('jsonData.props.children', jsonData.props.children);
138+
// console.log('jsonData', jsonData);
139+
if (jsonData.props && jsonData.props.children) {
140+
jsonData.children = jsonData.children || [];
141+
// console.log('jsonData.props.children', jsonData.props.children);
328142
jsonData.children = [...jsonData.children, ...jsonData.props.children];
329143
}
330144
@@ -435,7 +249,7 @@ const DemoRender = (): JSX.Element => {
435249
const baseData = MUITypes.find(
436250
(m) => m.tag === elementType
437251
).componentData;
438-
console.log('baseData', baseData);
252+
// console.log('baseData', baseData);
439253
if (!baseData) return null;
440254
const componentData = {
441255
...baseData,
@@ -500,7 +314,7 @@ const DemoRender = (): JSX.Element => {
500314
}
501315
key++;
502316
}
503-
console.log('componentsToRender', componentsToRender);
317+
// console.log('componentsToRender', componentsToRender);
504318
return componentsToRender;
505319
};
506320
//initializes our 'code' which will be whats actually in the iframe in the demo render
@@ -510,7 +324,7 @@ const DemoRender = (): JSX.Element => {
510324
const currComponent = state.components.find(
511325
(element) => element.id === state.canvasFocus.componentId
512326
);
513-
console.log('currComponent', currComponent);
327+
// console.log('currComponent', currComponent);
514328

515329
componentBuilder2(currComponent.children).forEach((element) => {
516330
if (typeof element === 'string') {

0 commit comments

Comments
 (0)