diff --git a/shared/components/Preview/Preview.jsx b/shared/components/Preview/Preview.jsx
index d0a2ded0..12f98e0b 100644
--- a/shared/components/Preview/Preview.jsx
+++ b/shared/components/Preview/Preview.jsx
@@ -2,31 +2,20 @@ import React from 'react';
import ReactDOM from 'react-dom';
class Preview extends React.Component {
-
componentDidMount() {
- this.renderFrameContents();
- }
-
- renderFrameContents() {
- let doc = ReactDOM.findDOMNode(this).contentDocument;
- if(doc.readyState === 'complete') {
- ReactDOM.render(this.props.children, doc.body);
- } else {
- setTimeout(this.renderFrameContents, 0);
- }
- }
-
- componentDidUpdate() {
- this.renderFrameContents();
- }
-
- componentWillUnmount() {
- React.unmountComponentAtNode(this.getDOMNode().contentDocument.body);
+ console.log(ReactDOM.findDOMNode(this));
}
render() {
- return ;
- }
+ return (
+
+
+
+
+ );
+ }
}
export default Preview;
\ No newline at end of file
diff --git a/shared/components/Preview/PreviewFrame.jsx b/shared/components/Preview/PreviewFrame.jsx
new file mode 100644
index 00000000..dfa5c6ec
--- /dev/null
+++ b/shared/components/Preview/PreviewFrame.jsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+class PreviewFrame extends React.Component {
+
+ componentDidMount() {
+ this.renderFrameContents();
+ }
+
+ renderFrameContents() {
+ let doc = ReactDOM.findDOMNode(this).contentDocument;
+ if(doc.readyState === 'complete') {
+ // ReactDOM.render(this.props.children, doc.body);
+ this.renderSketch();
+ } else {
+ setTimeout(this.renderFrameContents, 0);
+ }
+ }
+
+ renderSketch() {
+ let doc = ReactDOM.findDOMNode(this).contentDocument;
+ doc.write('');
+ doc.close();
+ let p5Script = doc.createElement('script');
+ p5Script.setAttribute('src', 'https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.min.js');
+ doc.body.appendChild(p5Script);
+
+ let sketchScript = doc.createElement('script');
+ sketchScript.textContent = this.props.content;
+ doc.body.appendChild(sketchScript);
+ }
+
+ componentDidUpdate() {
+ this.renderFrameContents();
+ }
+
+ componentWillUnmount() {
+ React.unmountComponentAtNode(this.getDOMNode().contentDocument.body);
+ }
+
+ render() {
+ return ;
+ }
+}
+
+export default PreviewFrame;
\ No newline at end of file
diff --git a/shared/containers/App/App.jsx b/shared/containers/App/App.jsx
index 645d9242..b5ae2aaa 100644
--- a/shared/containers/App/App.jsx
+++ b/shared/containers/App/App.jsx
@@ -1,5 +1,6 @@
import React from 'react';
import Editor from '../../components/Editor/Editor'
+import PreviewFrame from '../../components/Preview/PreviewFrame'
import Preview from '../../components/Preview/Preview'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
@@ -12,9 +13,7 @@ class App extends React.Component {
-
- Hello world!
-
+
);
}
diff --git a/shared/redux/reducers/files.js b/shared/redux/reducers/files.js
index 63f2fe3f..59656233 100644
--- a/shared/redux/reducers/files.js
+++ b/shared/redux/reducers/files.js
@@ -2,7 +2,13 @@ import * as ActionTypes from '../constants/constants';
const initialState = {
name: "sketch.js",
- content: "setup() { } draw() { }"
+ content: `function setup() {
+ createCanvas(400, 400);
+}
+
+function draw() {
+ background(220);
+}`
}
const file = (state = initialState, action) => {