diff --git a/docs/package.json b/docs/package.json index 84cd91f..be1e59b 100644 --- a/docs/package.json +++ b/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", diff --git a/docs/src/components/App.js b/docs/src/components/App.js index a0a7ce5..8f35da3 100644 --- a/docs/src/components/App.js +++ b/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}) => (
@@ -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 (
@@ -111,8 +97,8 @@ export default class Playground extends Component {
- - + +
- - -
{' '} +
); } diff --git a/docs/src/components/Browser.js b/docs/src/components/Browser.js index ad3a3fa..1c7a703 100644 --- a/docs/src/components/Browser.js +++ b/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) => ` @@ -36,55 +33,43 @@ const buildIframeSrc = (js) => ` `; -/** - * 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 (
{ } Navbar.displayName='Navbar' -Navbar.propTypes={ - title: PropTypes.string.isRequired, -} + export default Navbar diff --git a/docs/src/components/Pane.js b/docs/src/components/Pane.js deleted file mode 100644 index 6699629..0000000 --- a/docs/src/components/Pane.js +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import styled from '@emotion/styled'; - -const Root = styled('div')({ - label: 'Editor', - boxSizing: 'border-box', - display: 'flex', - flex: '1 1 100%', - position: 'relative', - borderBottom: '1px solid #ddd', - - '@media (min-width: 800px)': { - flexBasis: '50%', - borderLeft: '1px solid #ddd', - marginLeft: '-1px', - }, - '@media (min-width: 1200px)': { - flexBasis: '25%', - }, -}); - -// const Title = styled('div')({ -// display: 'flex', -// -// position: 'relative', -// padding: '5px var(--default-padding)', -// backgroundColor: 'var(--silver)', -// color: 'var(--black)', -// fontSize: '12px', -// }) - -// const Content = styled('div')({ -// fontFamily: "'Inconsolata', monospace", -// -// overflowY: 'auto', -// }) -// < Title > { props.title } -// {props.children} -const Pane = (props) => { - return ( - - {props.children} - - ); -}; - -Pane.displayName = 'Pane'; -Pane.propTypes = { - title: PropTypes.string.isRequired, - children: PropTypes.node.isRequired, -}; - -export default Pane;