live rendering working

Author: stephenkim612

app/electron/main.js

@@ -76,9 +76,9 @@ async function createWindow() {
       // enable devtools when in development mode 
       devTools: true,
       // crucial security feature - blocks rendering process from having access to node modules
-      nodeIntegration: true,
+      nodeIntegration: false,
       // web workers will not have access to node
-      nodeIntegrationInWorker: true,
+      nodeIntegrationInWorker: false,
       // disallow experimental feature to allow node.js support in sub-frames (i-frames/child windows)
       nodeIntegrationInSubFrames: true,
       // runs electron apis and preload script in a separate JS context

app/src/components/bottom/CodePreview.tsx

@@ -29,7 +29,8 @@ const CodePreview: React.FC<{
   const ref = useRef<any>();
   const iframe = useRef<any>();
   const [input, setInput] = useState('');
-  const [code, setCode] = useState('');
+
+
 
   const startService = async () => {
     ref.current = await esbuild.startService({
@@ -49,32 +50,32 @@ const CodePreview: React.FC<{
     (elem: Component) => elem.id === state.canvasFocus.componentId
   );
 
+
   const handleCodeSnipChange = (val) => {
     currentComponent.code = val;
-
   };
 
   useEffect(() => {
     startService();
   }, []);
 
-  console.log('saved code', store.getState().code)
   useEffect(() => {
     setDivHeight(height);
   }, [height])
 
-useEffect(() => 
-{
- 
+  useEffect(() => {
+    console.log('hello')
+  }, [currentComponent.code])
 
-}, [code])
 
-  const handleChange = (event) => {
-    setInput(event)
-    // iframe.current.contentWindow.postMessage(result.outputFiles[0].text, '*');
+  const handleChange = (data) => {
+   setInput(data)
+   console.log('line 69',input)
   };
 
   const handleClick = async () => {
+    // setInput(currentComponent.code)  
+    // console.log('currentComponent.code', currentComponent.code)
     if(!ref.current) {
       return;
     }
@@ -87,19 +88,15 @@ useEffect(() =>
         fetchPlugin(input)
       ],
       define: {
-        'process.env.NODE_ENV': '"production"',
+        'process.env.NODE_ENV': '"development"',
         global: 'window'
       }
     })
+    console.log('this is input',input)
     store.dispatch({type: "SAVE", payload: result.outputFiles[0].text});
-   //setCode();
- 
-
-   // dispatch({type: 'code-preview'})
   }
 
 
-
   return (
     <div
     ref={wrapper}
@@ -112,10 +109,11 @@ useEffect(() =>
       <AceEditor
         mode="javascript"
         theme="monokai"
-        width="90%"
-        height="50%"
+        width="100%"
+        height="70%"
         onChange={handleChange}
         // value={currentComponent.code}
+        value={input}
         name="Code_div"
         readOnly={false}
         fontSize={16}
@@ -129,7 +127,4 @@ useEffect(() =>
 export default CodePreview;
 
 
-// const App = () => {
-//   return <h1>hello</h1>
-// }
 

app/src/components/form/Selector.tsx

@@ -13,6 +13,7 @@ const FormSelector = (props): JSX.Element => {
   })
   return (
     <div className={props.classes.configRow}>
+        
       <div className={props.isThemeLight ? `${props.classes.configType} ${props.classes.lightThemeFontColor}` : `${props.classes.configType} ${props.classes.darkThemeFontColor}`}>
         <h3>{props.title}</h3>
       </div>

app/src/components/left/HTMLItem.tsx

@@ -122,6 +122,7 @@ const HTMLItem : React.FC<{
   // updated the id's to reflect the new element types input and label
   return ( // HTML Elements
     <Grid item xs={5} key={`html-g${name}`}>
+  
       { id <= 18 &&
       <div ref={drag} className={isThemeLight ? `${classes.HTMLPanelItem} ${classes.lightThemeFontColor}` : `${classes.HTMLPanelItem} ${classes.darkThemeFontColor}`} id="HTMLItem">
         <h3>{name}</h3>

app/src/components/main/Canvas.tsx

@@ -80,8 +80,8 @@ function Canvas() {
   const canvasStyle = combineStyles(defaultCanvasStyle, currentComponent.style);
   return (
     <div ref={drop} style={canvasStyle} onClick={onClickHandler}>
-      {/* currentComponent is the selected component on Left Panel (eg: App or Index with green dot to the left)  */}
-      {renderChildren(currentComponent.children)}
+       
+       {renderChildren(currentComponent.children)}
     </div>
   );
 }

app/src/components/main/CanvasContainer.tsx

@@ -11,6 +11,7 @@ function CanvasContainer() {
 
   return (
     <div style={canvasContainerStyle}>
+      
       <Canvas />
     </div>
   );

app/src/components/main/DemoRender.tsx

@@ -2,42 +2,47 @@
 import React, {
   useState, useCallback, useContext, useEffect, useRef
 } from 'react';
+import ReactDOM from 'react-dom';
 import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
 import Button from '@material-ui/core/Button';
 import Box from '@material-ui/core/Box';
 import StateContext from '../../context/context';
 import cssRefresher from '../../helperFunctions/cssRefresh';
 import {store} from '../../../src/index';
+import { useSelector } from 'react-redux';
 // DemoRender is the full sandbox demo of our user's custom built React components. DemoRender references the design specifications stored in state to construct
 // real react components that utilize hot module reloading to depict the user's prototype application.
 const DemoRender = (props): JSX.Element => {
-  // const ref = useRef<any>();
+
   const iframe = useRef<any>();
   const [components, setComponents] = useState([]);
   const [state, dispatch] = useContext(StateContext);
+  const [codeRender, setCodeRender] = useState('')
   const demoContainerStyle = {
     width: '100%',
     backgroundColor: '#FBFBFB',
     border: '2px Solid grey',
   };
 
+  let code = useSelector((state) => state.code);
+
   const html = `
     <html>
       <head></head>
       <body>
-        <div id='root'></div>
+        <div id='app'></div>
         <script>
           window.addEventListener('message', (e) => {
-            eval(event.data);
+            console.log(e)
+            eval(e.data);
           }, false);
         </script>
       </body>
     </html>
   `;
 
-
-  // This function is the heart of DemoRender it will take the array of components stored in state and dynamically construct the desired React component for the live demo
-  // Material UI is utilized to incorporate the apporpriate tags with specific configuration designs as necessitated by HTML standards.
+//  This function is the heart of DemoRender it will take the array of components stored in state and dynamically construct the desired React component for the live demo
+//   Material UI is utilized to incorporate the apporpriate tags with specific configuration designs as necessitated by HTML standards.
   const componentBuilder = (array: object, key: number = 0) => {
     const componentsToRender = [];
     for (const element of array) {
@@ -77,19 +82,24 @@ const DemoRender = (props): JSX.Element => {
     cssRefresher();
   }, [])
 
-  // iframe.current.contentWindow.postMessage(store.getState(), '*');
-  console.log('in store line 81',store.getState())
 
+  useEffect(() => {
+
+  console.log("code changed", code);
+  setCodeRender(code)
+  iframe.current.contentWindow.postMessage(code, '*');
+
+  }, [code])
+ 
   return (
-    <Router>
-      
       <div id={'renderFocus'} style={demoContainerStyle}>
-        <iframe ref={iframe} sandbox='allow-scripts' srcDoc={html}/>
-        {/* {components.map((component, index) => component)} */}
-      </div>
-    </Router>
+        
+     
+        <iframe ref={iframe} sandbox='allow-scripts' srcDoc={html} width='500px' height='500px'/>
+       
 
+      </div>
   );
 };
 
-export default DemoRender;
+export default DemoRender;

app/src/helperFunctions/generateCode.ts

@@ -49,7 +49,7 @@ const generateUnformattedCode = (
   let links: boolean = false;
 
   const isRoot = rootComponents.includes(componentId);
-  let importReactRouter = false;;
+  let importReactRouter = false;
 
   // returns an array of objects which may include components, html elements, and/or route links
   const getEnrichedChildren = (currentComponent: Component | ChildElement) => {
@@ -287,38 +287,31 @@ const generateUnformattedCode = (
   // classic react code
   if (projectType === 'Classic React') {
     return `
-    ${`import React, { useState, createContext, useContext } from 'react';`}
+    ${`import React, { useState, useEffect} from 'react';`}
+    ${`import ReactDOM from 'react-dom';`}
     ${importReactRouter ? `import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';`: ``}
     ${importsMapped}
     ${importContext}
     ${providers}
     ${context}
-    ${`const ${currComponent.name} = (props: any): JSX.Element => {`}
-    ${`  const [value, setValue] = useState<any | undefined>("INITIAL VALUE");${writeStateProps(currComponent.useStateCodes)}`}
-    ${
-      isRoot  && currComponent.stateProps.length !== 0
-      ? `  const ${currComponent.name}Context = createContext(${createState(currComponent.stateProps)});`
-      : ``
-    }
+    ${`const ${currComponent.name} = (props) => {`}
+    ${`  const [value, setValue] = useState("");${writeStateProps(currComponent.useStateCodes)}`}
+
     ${!importReactRouter
       ? `  return (
-        <${currComponent.name}Context.Provider value="">
           <div className="${currComponent.name}" ${formatStyles(currComponent)}>
           \t${writeNestedElements(enrichedChildren)}
           </div>
-        </${currComponent.name}Context.Provider>
       );`
       : `  return (
-        <${currComponent.name}Context.Provider value="">
           <Router>
             <div className="${currComponent.name}" ${formatStyles(currComponent)}>
             \t${writeNestedElements(enrichedChildren)}
             </div>
           </Router>
-        </${currComponent.name}Context.Provider>
       );`}
     ${`}\n`}
-    export default ${currComponent.name};
+    ReactDOM.render(<${currComponent.name} />, document.querySelector('#app'));
     `;
   }
   // next.js component code

app/src/index.js

@@ -24,7 +24,12 @@ const client = new ApolloClient({
   uri: 'https://reactype-caret.herokuapp.com/graphql',
   cache: new InMemoryCache()
 });
-const initialState = {code: "initialState"}
+const initialState = {code: `
+  import React from 'react';
+  import ReactDOM from 'react-dom';
+  const App = () => <h1>Hello World!</h1>
+
+  ReactDOM.render(<App />, document.querySelector('#app'));`}
 const rootReducer = (state = initialState, action) => {
   console.log('action', action);
   switch (action.type) {

app/src/public/index.ejs

@@ -2,6 +2,7 @@
 <html lang="en-US">
   <head>
     <meta charset="UTF-8" />
+    <!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'"> -->
     <script src="https://kit.fontawesome.com/7e1cebd082.js" crossorigin="anonymous"></script>
     <!-- This file is .ejs rather than .html so that we can dynamically add a nonce into the header -->
     <!-- the nonce is used in the Content security policy webpack plugin so that Material UI styles can be injected into the DOM -->

app/src/reducers/componentReducer.ts

@@ -266,7 +266,7 @@ const reducer = (state: State, action: Action) => {
         typeId,
         childId
       }: { type: string; typeId: number; childId: any } = action.payload;
-
+console.log("action.payload", action.payload);
       const parentComponentId: number = state.canvasFocus.componentId;
       const components = [...state.components];
 

app/src/utils/createTestSuiteClassic.util.ts

@@ -105,33 +105,6 @@ async function createComponentTests(path: string, appName: string, components: C
     return string.charAt(0).toUpperCase() + string.slice(1);
   }
 
-// //////////////////////////
-// // DELETE BELOW AFTERWARDS
-// import { shallow } from 'enzyme'
-// import React from 'react';
-
-// import * as Enzyme from 'enzyme'
-// import Adapter from 'enzyme-adapter-react-16'
-
-// Enzyme.configure({
-//   adapter: new Adapter(),
-// })
-
-// describe('Hello, Enzyme!', () => {
-//   it('renders', () => {
-//     const wrapper = shallow(<div>
-//       <h1>Hello, Enzyme!</h1>
-//     </div>)
-//     expect(wrapper.find('h1').html()).toMatch(/Hello, Enzyme/)
-//   })
-
-//   it('renders snapshots, too', () => {
-//     const wrapper = shallow(< />)
-//     expect(wrapper).toMatchSnapshot()
-//   })
-// })
-// // DELETE ABOVE AFTERWARDS
-// //////////////////////////
 async function createTestSuiteClassic({
   path,
   appName,