implementing iframe

Author: stephenkim612

app/electron/main.js

@@ -76,11 +76,11 @@ async function createWindow() {
       // enable devtools when in development mode 
       devTools: true,
       // crucial security feature - blocks rendering process from having access to node modules
-      nodeIntegration: false,
+      nodeIntegration: true,
       // web workers will not have access to node
-      nodeIntegrationInWorker: false,
+      nodeIntegrationInWorker: true,
       // disallow experimental feature to allow node.js support in sub-frames (i-frames/child windows)
-      nodeIntegrationInSubFrames: false,
+      nodeIntegrationInSubFrames: true,
       // runs electron apis and preload script in a separate JS context
       // separate context has access to document/window but has it's own built-ins and is isolate from changes to global environment by located page
       // Electron API only available from preload, not loaded page

app/src/components/bottom/CodePreview.tsx

@@ -12,11 +12,32 @@ import 'ace-builds/src-noconflict/theme-terminal';
 import { Component } from '../../interfaces/Interfaces';
 import useResizeObserver from '../../tree/useResizeObserver';
 import { string } from 'prop-types';
+import { unpkgPathPlugin } from '../../plugins/unpkg-path-plugin';
+import { fetchPlugin } from '../../plugins/fetch-plugin';
+import * as esbuild from 'esbuild-wasm';
+import { useSelector, useDispatch } from 'react-redux';
+import { store } from './../../index';
 
 const CodePreview: React.FC<{
   theme: string | null;
   setTheme: any | null;
   }> = ({ theme, setTheme }) => {
+
+
+ 
+
+  const ref = useRef<any>();
+  const iframe = useRef<any>();
+  const [input, setInput] = useState('');
+  const [code, setCode] = useState('');
+
+  const startService = async () => {
+    ref.current = await esbuild.startService({
+      worker: true,
+      wasmURL: 'https://unpkg.com/[email protected]/esbuild.wasm',
+    })
+  }
+
   const wrapper = useRef();
   const dimensions = useResizeObserver(wrapper);
   const { width, height } =
@@ -30,11 +51,55 @@ const CodePreview: React.FC<{
 
   const handleCodeSnipChange = (val) => {
     currentComponent.code = val;
+
   };
 
+  useEffect(() => {
+    startService();
+  }, []);
+
+  console.log('saved code', store.getState().code)
   useEffect(() => {
     setDivHeight(height);
   }, [height])
+
+useEffect(() => 
+{
+ 
+
+}, [code])
+
+  const handleChange = (event) => {
+    setInput(event)
+    // iframe.current.contentWindow.postMessage(result.outputFiles[0].text, '*');
+  };
+
+  const handleClick = async () => {
+    if(!ref.current) {
+      return;
+    }
+    const result = await ref.current.build({
+      entryPoints: ['index.js'],
+      bundle: true,
+      write: false,
+      plugins: [
+        unpkgPathPlugin(),
+        fetchPlugin(input)
+      ],
+      define: {
+        'process.env.NODE_ENV': '"production"',
+        global: 'window'
+      }
+    })
+    store.dispatch({type: "SAVE", payload: result.outputFiles[0].text});
+   //setCode();
+ 
+
+   // dispatch({type: 'code-preview'})
+  }
+
+
+
   return (
     <div
     ref={wrapper}
@@ -47,17 +112,24 @@ const CodePreview: React.FC<{
       <AceEditor
         mode="javascript"
         theme="monokai"
-        width="100%"
-        height="100%"
-        onChange={handleCodeSnipChange}
-        value={currentComponent.code}
+        width="90%"
+        height="50%"
+        onChange={handleChange}
+        // value={currentComponent.code}
         name="Code_div"
         readOnly={false}
         fontSize={16}
         tabSize={2}
       />
+      <button onClick={() => handleClick()}>Fetch</button>
     </div>
   );
 };
 
 export default CodePreview;
+
+
+// const App = () => {
+//   return <h1>hello</h1>
+// }
+

app/src/components/main/DemoRender.tsx

@@ -1,16 +1,18 @@
 
 import React, {
-  useState, useCallback, useContext, useEffect,
+  useState, useCallback, useContext, useEffect, useRef
 } from 'react';
 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';
 // 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 demoContainerStyle = {
@@ -19,6 +21,21 @@ const DemoRender = (props): JSX.Element => {
     border: '2px Solid grey',
   };
 
+  const html = `
+    <html>
+      <head></head>
+      <body>
+        <div id='root'></div>
+        <script>
+          window.addEventListener('message', (e) => {
+            eval(event.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.
   const componentBuilder = (array: object, key: number = 0) => {
@@ -48,7 +65,7 @@ const DemoRender = (props): JSX.Element => {
     }
     return componentsToRender;
   };
-
+ 
   useEffect(() => {
     const focusIndex = state.canvasFocus.componentId - 1;
     const childrenArray = state.components[focusIndex].children;
@@ -60,11 +77,15 @@ const DemoRender = (props): JSX.Element => {
     cssRefresher();
   }, [])
 
+  // iframe.current.contentWindow.postMessage(store.getState(), '*');
+  console.log('in store line 81',store.getState())
 
   return (
     <Router>
+      
       <div id={'renderFocus'} style={demoContainerStyle}>
-        {components.map((component, index) => component)}
+        <iframe ref={iframe} sandbox='allow-scripts' srcDoc={html}/>
+        {/* {components.map((component, index) => component)} */}
       </div>
     </Router>
 

app/src/index.js

@@ -7,6 +7,8 @@ import {
 } from 'react-router-dom';
 import 'babel-polyfill';
 import React from 'react';
+import { createStore } from 'redux';
+import { Provider } from 'react-redux';
 import ReactDOM from 'react-dom';
 import Cookies from 'js-cookie';
 import App from './components/App.tsx';
@@ -22,6 +24,19 @@ const client = new ApolloClient({
   uri: 'https://reactype-caret.herokuapp.com/graphql',
   cache: new InMemoryCache()
 });
+const initialState = {code: "initialState"}
+const rootReducer = (state = initialState, action) => {
+  console.log('action', action);
+  switch (action.type) {
+    case 'SAVE':
+      return {...state, code:action.payload};
+    default:
+        return state;
+  }
+ 
+}
+
+export const store = createStore(rootReducer)
 
 const PrivateRoute = ({ component: Component, ...rest }) => (
   <Route
@@ -38,17 +53,19 @@ const PrivateRoute = ({ component: Component, ...rest }) => (
 
 ReactDOM.render(
   <ApolloProvider client={client}>
-    <Router>
-      <Switch>
-        <Route exact path="/login" component={SignIn} />
-        <Route exact path="/signup" component={SignUp} />
-        <Route exact path="/password" component={FBPassWord} />
-        <PrivateRoute exact path="/" component={App} />
-        <Route exact path="/dashboard" component={ProjectDashboard} />
-        <Route exact path="/tutorial" component={Tutorial} />
-        <Route exact path="/tutorialPage/:learn" component={TutorialPage} />
-      </Switch>
-    </Router>
+    <Provider store={store}>
+      <Router>
+        <Switch>
+          <Route exact path="/login" component={SignIn} />
+          <Route exact path="/signup" component={SignUp} />
+          <Route exact path="/password" component={FBPassWord} />
+          <PrivateRoute exact path="/" component={App} />
+          <Route exact path="/dashboard" component={ProjectDashboard} />
+          <Route exact path="/tutorial" component={Tutorial} />
+          <Route exact path="/tutorialPage/:learn" component={TutorialPage} />
+        </Switch>
+      </Router>
+    </Provider>
   </ ApolloProvider>,
   document.getElementById('app'),
 );

app/src/plugins/fetch-plugin.ts

@@ -0,0 +1,69 @@
+import * as esbuild from 'esbuild-wasm';
+import axios from 'axios';
+import localForage from 'localforage';
+
+const fileCache = localForage.createInstance({
+  name: 'filecache'
+});
+
+export const fetchPlugin = (inputCode: string) => {
+  return {
+    name: 'fetch-plugin',
+    setup(build: esbuild.PluginBuild) {
+      build.onLoad({ filter: /(^index\.js$)/ }, () => {
+        return {
+          loader: 'jsx',
+          contents: inputCode,
+        };
+      });
+
+      build.onLoad({ filter: /.*/}, async (args: any) => {
+        const cachedResult = await fileCache.getItem<esbuild.OnLoadResult>(args.path);
+        if(cachedResult) {
+          return cachedResult;
+        }
+      });
+
+      build.onLoad({ filter: /.css$/ }, async (args: any) => {
+        const { data, request } = await axios.get(args.path);
+
+        const escaped = data
+          .replace(/\n/g, '')
+          .replace(/"/g, '\\"')
+          .replace(/'/g, "\\'")
+        const contents =
+          `
+          const style = document.createElement('style');
+          style.innerText = '${escaped}';
+          document.head.appendChild(style)
+          `;
+
+        const result: esbuild.OnLoadResult = {
+          loader: 'jsx',
+          contents,
+          resolveDir: new URL('./', request.responseURL).pathname
+        }
+        await fileCache.setItem(args.path, result);
+        return result;
+      });
+
+
+      build.onLoad({ filter: /.*/ }, async (args: any) => {
+        console.log('line 55 of fetch', args)
+        const cachedResult = await fileCache.getItem<esbuild.OnLoadResult>(args.path);
+        if(cachedResult) {
+          return cachedResult;
+        }
+        const { data, request } = await axios.get(args.path);
+
+        const result: esbuild.OnLoadResult = {
+          loader: 'jsx',
+          contents: data,
+          resolveDir: new URL('./', request.responseURL).pathname
+        }
+        await fileCache.setItem(args.path, result);
+        return result;
+      });
+    }
+  }
+}

app/src/plugins/unpkg-path-plugin.ts

@@ -0,0 +1,28 @@
+import * as esbuild from 'esbuild-wasm';
+ 
+export const unpkgPathPlugin = () => {
+  return {
+    name: 'unpkg-path-plugin',
+    setup(build: esbuild.PluginBuild) {
+      // Handle root entry file of index.js
+      build.onResolve({ filter: /(^index\.js$)/ }, () => {
+        return { path: 'index.js', namespace: 'a' };
+      });
+      // Handle relative paths in a module
+      build.onResolve({ filter: /^\.+\// }, (args: any) => {
+        const seeURL = new URL(args.path, 'https://unpkg.com' + args.resolveDir + '/').href;
+        return {
+          namespace: 'a',
+          path: new URL(args.path, 'https://unpkg.com' + args.resolveDir + '/').href
+        };
+      });
+      // Handle main file of a module
+      build.onResolve({ filter: /.*/ }, async (args: any) => {
+        return {
+          namespace: 'a',
+          path: `https://unpkg.com/${args.path}`
+        }
+      });
+    },
+  };
+};

app/src/store.js

@@ -133,6 +133,7 @@
     "electron-debug": "^3.2.0",
     "electron-devtools-installer": "^3.2.0",
     "electron-window-manager": "^1.0.6",
+    "esbuild-wasm": "^0.8.27",
     "eslint-plugin-react-hooks": "^4.2.0",
     "express-graphql": "^0.12.0",
     "graphql": "^15.5.0",
@@ -176,6 +177,7 @@
     "@types/chai": "^4.2.11",
     "@types/jest": "^25.2.3",
     "apollo": "^2.32.5",
+    "axios": "^0.24.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^27.3.1",
     "babel-loader": "^8.2.3",
@@ -208,6 +210,8 @@
     "react": "^17.0.2",
     "react-ace": "^9.5.0",
     "react-dom": "^17.0.2",
+    "react-redux": "^7.2.6",
+    "redux": "^4.1.2",
     "style-loader": "^0.20.3",
     "styled-components": "^5.3.3",
     "supertest": "^4.0.2",