deps

docs/package.json

@@ -9,22 +9,13 @@
     "@emotion/core": "10.0.10",
     "@emotion/styled": "10.0.10",
     "@roseys/futils": "file:../pkg",
-    "babel-standalone": "6.26.0",
-    "base-64": "0.1.0",
     "codemirror": "5.39.2",
     "history": "4.9.0",
-    "json-stringify-pretty-compact": "^1.2.0",
     "lodash.debounce": "4.0.8",
-    "prop-types": "15.6.2",
     "ramda": "0.25.0",
     "react": "16.8.6",
     "react-codemirror2": "6.0.0",
-    "react-dom": "16.8.6",
-    "react-powerplug": "1.0.0-rc.1",
-    "react-redux": "5.0.7",
-    "redux": "4.0.0",
-    "redux-logger": "3.0.6",
-    "scriptjs": "2.5.8"
+    "react-dom": "16.8.6"
   },
   "devDependencies": {
     "eslint": "5.16.0",

docs/src/components/App.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React,{Component} from 'react';
 import Editor from './Editor';
 import Browser from './Browser';
 import Console from './Console';
@@ -9,18 +9,16 @@ import * as F from '@roseys/futils'
 
 // Expose libraries for the REPL onto window
 F.keys(F).forEach(method => {
-  global[method] = F[method]
+  global[method]=F[method]
 })
 
 
-global.F = F
-global.R = R
+global.F=F
+global.R=R
 
 
-/**
- * Separating to its own component cuz divitis
- */
-const PlaygroundHeader = ({ title, runCode }) => (
+
+const PlaygroundHeader=({title,runCode}) => (
   <div className='playground-header'>
     <div className='columns'>
       <div className='column is-one-quarter'>
@@ -34,75 +32,63 @@ const PlaygroundHeader = ({ title, runCode }) => (
 );
 
 /**
- * The main playground component
- * Get a gist and only pull the first file of each .html, .css, .js
+ * playground component
  */
 export default class Playground extends Component {
-  state = {
+  state={
     history: [],
     title: '',
     js: '',
-    isProcessing: false, // tiny way to stop a user from hitting run 10000 times in a row
+    isProcessing: false,
   };
 
-  // helpers cuz lazy
-  setTitle = (title) => this.setState({ title });
-  setHistory = (history) => this.setState({ history });
-  setJs = (js) => this.setState({ js });
+  setTitle=(title) => this.setState({title});
+  setHistory=(history) => this.setState({history});
+  setJs=(js) => this.setState({js});
+
 
-  /**
-   * Grab the gist on first mount
-   * mocking a gist id for now
-   * https://gist.github.com/sevilayha/efe7fe257c9bfdc4d81aa654ddbb5bec
-   */
   componentDidMount() {
-    const gistId = this.props.gistId || '64956aea8f0f09bb97e7ee7dd2fe5c85';
+    const gistId=this.props.gistId||'64956aea8f0f09bb97e7ee7dd2fe5c85';
     this.getGist(gistId);
   }
 
-  /**
-   * Get the gist from GitHub API
-   * Parse for the .html, .css, .js files
-   * This is simple. Will only pull the first file in the gist of each extension
-   */
-  getGist = (id) => {
+  getGist=(id) => {
     fetch(`https://api.github.com/gists/${id}`)
       .then((response) => response.json())
       .then((data) => {
         console.log(data);
-        // find the first .html, .css, .js files and apply them as the content
-        const fileNames = Object.keys(data.files);
-        const gistJs = fileNames.find((file) => file.includes('.js'));
+        const fileNames=Object.keys(data.files);
+        const gistJs=fileNames.find((file) => file.includes('.js'));
 
         this.setTitle(data.files[gistJs].filename);
-        if (gistJs) this.setJs(data.files[gistJs].content);
+        if(gistJs) this.setJs(data.files[gistJs].content);
       });
   };
 
-  addHistory = (text) => {
-    const newHistory = [...this.state.history, { text }];
+  addHistory=(text) => {
+    const newHistory=[...this.state.history,{text}];
     this.setHistory(newHistory);
   };
 
-  clearHistory = () => this.setHistory([]);
+  clearHistory=() => this.setHistory([]);
 
-  runCode = () => {
-    if (this.state.isProcessing) return false;
-    this.setState({ isProcessing: true });
+  runCode=() => {
+    if(this.state.isProcessing) return false;
+    this.setState({isProcessing: true});
 
-    const { js } = this.state;
+    const {js}=this.state;
 
     this.setJs('');
 
     setTimeout(() => {
       this.setJs(js);
-      this.setState({ isProcessing: false });
-    }, 250);
+      this.setState({isProcessing: false});
+    },250);
   };
 
   render() {
-    const { history, title, js } = this.state;
-    const { playgroundId } = this.props;
+    const {history,title,js}=this.state;
+    const {playgroundId}=this.props;
 
     return (
       <div>
@@ -111,18 +97,16 @@ export default class Playground extends Component {
           <PlaygroundHeader title={title} runCode={this.runCode} />
           <div className='columns'>
 
-          <Editor language='javascript' code={js} updateCode={this.setJs} />
-          <Console history={history} clearHistory={this.clearHistory} />
+            <Editor language='javascript' code={js} updateCode={this.setJs} />
+            <Console history={history} clearHistory={this.clearHistory} />
           </div>
 
           <Browser
             playgroundId={playgroundId}
             js={js}
             addHistory={this.addHistory}
           />
-
-
-        </div>{' '}
+        </div>
       </div>
     );
   }

docs/src/components/Browser.js

@@ -1,10 +1,7 @@
-import React, { useEffect, useRef } from 'react';
+import React,{useEffect,useRef} from 'react';
 
-/**
- * Helper to build out the iframe's src
- * scotchLog is our way of sending data up to the parent through postMessage
- */
-const buildIframeSrc = (js) => `
+
+const buildIframeSrc=(js) => `
   <html>
   <head>
 
@@ -36,55 +33,43 @@ const buildIframeSrc = (js) => `
   </html>
 `;
 
-/**
- * The browser component has a nested iframe
- * Every time the html, css, js props change, destroy the iframe and create a new iframe
- */
-export default function Browser({ js, addHistory }) {
-  const iframeContainer = useRef(null);
 
-  /**
-   * Watch for postMessage coming from our iframe
-   */
+export default function Browser({js,addHistory}) {
+  const iframeContainer=useRef(null);
+
+
   useEffect(() => {
-    window.addEventListener('message', (e) => {
-      if (!e.data) return false; // only handle if theres data
-      if (typeof e.data !== 'string') return false; // data must be a string
-      if (e.data.includes('_')) return false; // dont watch for events emitted by the react library
+    window.addEventListener('message',(e) => {
+      if(!e.data) return false; // only handle if theres data
+      if(typeof e.data!=='string') return false; // data must be a string
+      if(e.data.includes('_')) return false; // dont watch for events emitted by the react library
       addHistory(e.data);
     });
-  }, [addHistory]);
+  },[addHistory]);
 
   /**
    * Run the code
    */
   useEffect(() => {
-    // remove all children
-    while (iframeContainer.current.hasChildNodes()) {
+    while(iframeContainer.current.hasChildNodes()) {
       iframeContainer.current.removeChild(iframeContainer.current.lastChild);
     }
+    let iframe=document.createElement('iframe');
+    iframe.height='100%';
+    iframe.width='100%';
+    iframe.sandbox='allow-scripts allow-same-origin';
+    iframe.style.border='none';
+    iframe.background='#fff';
 
-    // create new iframe
-    let iframe = document.createElement('iframe');
-    iframe.height = '100%';
-    iframe.width = '100%';
-    iframe.sandbox = 'allow-scripts allow-same-origin';
-    iframe.style.border = 'none';
-    iframe.background = '#fff';
-
-    // convert all console.log to use scotchLog
-    // scotchLog swill send events back up to this parent
-    // we can use that to add to history
-    // scotchLog will also run console.log()
-    const newJs = js
-      .replace(new RegExp('console.log', 'g'), 'getLog')
-      .replace(new RegExp('F.', 'g'), 'parent.F.')
-      .replace(new RegExp('R.', 'g'), 'parent.R.');
-    iframe.srcdoc = buildIframeSrc(newJs);
+    const code=js
+      .replace(new RegExp('console.log','g'),'getLog')
+      .replace(new RegExp('F.','g'),'parent.F.')
+      .replace(new RegExp('R.','g'),'parent.R.');
+    iframe.srcdoc=buildIframeSrc(code);
     iframeContainer.current.appendChild(iframe);
-  }, [js]);
+  },[js]);
 
-  const display = 'none';
+  const display='none';
 
   return (
     <div

docs/src/components/Navbar.js

@@ -21,8 +21,6 @@ const Navbar=props => {
 }
 
 Navbar.displayName='Navbar'
-Navbar.propTypes={
-  title: PropTypes.string.isRequired,
-}
+
 
 export default Navbar