Merge pull request #24 from MadinventorZero/stylehotloading

Stylehotloading

Author: jonocr

app/src/components/bottom/StylesEditor.tsx

@@ -13,17 +13,17 @@ import useResizeObserver from '../../tree/useResizeObserver';
 import { string } from 'prop-types';
 import Fab from '@material-ui/core/Fab';
 import SaveIcon from '@material-ui/icons/Save';
+import cssRefresher from '../../helperFunctions/cssRefresh';
 
 const StylesEditor: React.FC<{
   theme: string | null;
   setTheme: any | null;
 }> = ({ theme, setTheme }) => {
   const wrapper = useRef();
   const [css, setCss] = useState();
-  // const [state, dispatch] = useContext(StateContext);
 
   useEffect(() => {
-    loadFile();
+    loadFile();  
   }, []);
 
   const loadFile = () => {
@@ -52,8 +52,8 @@ const StylesEditor: React.FC<{
     })
       .then(response => response.text())
       .then((data) => {
-        // setCss(data);
-        //message save!
+        // Removes old link to css and creates a new stylesheet link on demo render
+        cssRefresher();
       });
   }
   const saveCss = (e) => {

app/src/components/main/DemoRender.tsx

@@ -4,9 +4,8 @@ import React, {
 } from 'react';
 import Button from '@material-ui/core/Button';
 import Box from '@material-ui/core/Box';
-import './renderDemo.css';
 import StateContext from '../../context/context';
-
+import cssRefresher from '../../helperFunctions/cssRefresh';
 
 const DemoRender = (props): JSX.Element => {
   const [components, setComponents] = useState([]);
@@ -50,6 +49,11 @@ const DemoRender = (props): JSX.Element => {
     setComponents(renderedComponents);
   }, [state.components, state.canvasFocus]);
 
+  useEffect(() => {
+    cssRefresher();
+  }, [])
+
+
   return (
     <div id={'renderFocus'} style={demoContainerStyle}>
       {components.map((component, index) => component)}

app/src/components/main/renderDemo.css

@@ -4,7 +4,7 @@
 .btn {
   height: 20px;
   width: 100px;
-  background-color: #cc0707;
+  background-color: #ffffff
 }
 
 

app/src/helperFunctions/cssRefresh.tsx

@@ -0,0 +1,16 @@
+// 100% Caret
+// Removes old link to css and creates a new stylesheet link on demo render
+const cssRefresher = () => {
+  const oldStylesheet = document.getElementById('Render Stylesheet')
+  if (oldStylesheet !== null) oldStylesheet.remove();
+  const rando = Math.random() * 100000;
+  const newStylesheet = document.createElement("LINK");
+  newStylesheet.setAttribute("rel", "stylesheet")
+  newStylesheet.setAttribute("type", "text/css");
+  newStylesheet.setAttribute("href", `/demoRender?${rando}`);
+  newStylesheet.setAttribute("id", 'Render Stylesheet');
+  document.getElementById('renderFocus').append(newStylesheet);
+}
+
+
+export default cssRefresher;