Add function syncFileContent, load previewScripts in EmbedFrame

Author: catarak

client/modules/IDE/actions/ide.js

@@ -263,21 +263,7 @@ export function showRuntimeErrorWarning() {
 export function startSketch() {
   return (dispatch, getState) => {
     dispatch(clearConsole());
-    // instead, need to dispatch message event
-    // dispatch(startSketchAndRefresh());
     dispatch(startVisualSketch());
-    // need to update file to latest before playing? but when?
-    // right before? there's no guarantee it'll be done before
-    // making the srcdoc
-    // maybe send it together? idk man
-    // oh but it's reactive to file changes so it's okay?
-    // maybe only send over files if autorefresh is off?
-    // need to trigger like, a re-render event, you know?
-    // like a refreshing state or something
-    // whenever sketches get updated
-    // cases:
-    // hit play, refresh sketch
-    // need to make sure the latest is in embed frame
     const state = getState();
     dispatchMessage({
       type: MessageTypes.FILES,

client/modules/IDE/components/Toolbar.jsx

@@ -87,6 +87,7 @@ class Toolbar extends React.Component {
         <button
           className="toolbar__play-sketch-button"
           onClick={() => {
+            this.props.syncFileContent();
             this.props.startAccessibleSketch();
             this.props.setTextOutput(true);
             this.props.setGridOutput(true);
@@ -98,7 +99,10 @@ class Toolbar extends React.Component {
         </button>
         <button
           className={playButtonClass}
-          onClick={this.props.startSketch}
+          onClick={() => {
+            this.props.syncFileContent();
+            this.props.startSketch();
+          }}
           aria-label={this.props.t('Toolbar.PlayOnlyVisualSketchARIA')}
           disabled={this.props.infiniteLoop}
         >
@@ -159,7 +163,7 @@ class Toolbar extends React.Component {
             onBlur={this.handleProjectNameSave}
             onKeyPress={this.handleKeyPress}
           />
-          {(() => { // eslint-disable-line
+          {(() => {
             if (this.props.owner) {
               return (
                 <p className="toolbar__project-owner">
@@ -170,6 +174,7 @@ class Toolbar extends React.Component {
                 </p>
               );
             }
+            return null;
           })()}
         </div>
         <button
@@ -209,7 +214,8 @@ Toolbar.propTypes = {
   startAccessibleSketch: PropTypes.func.isRequired,
   saveProject: PropTypes.func.isRequired,
   currentUser: PropTypes.string,
-  t: PropTypes.func.isRequired
+  t: PropTypes.func.isRequired,
+  syncFileContent: PropTypes.func.isRequired
 };
 
 Toolbar.defaultProps = {

client/modules/IDE/pages/IDEView.jsx

@@ -185,6 +185,7 @@ class IDEView extends React.Component {
     ) {
       e.preventDefault();
       e.stopPropagation();
+      this.syncFileContent();
       this.props.startSketch();
       // 50 === 2
     } else if (
@@ -242,6 +243,11 @@ class IDEView extends React.Component {
     return null;
   };
 
+  syncFileContent = () => {
+    const file = this.cmController.getContent();
+    this.props.updateFileContent(file.id, file.content);
+  };
+
   render() {
     return (
       <div className="ide">
@@ -253,7 +259,10 @@ class IDEView extends React.Component {
           warnIfUnsavedChanges={this.handleUnsavedChanges}
           cmController={this.cmController}
         />
-        <Toolbar key={this.props.project.id} />
+        <Toolbar
+          syncFileContent={this.syncFileContent}
+          key={this.props.project.id}
+        />
         {this.props.ide.preferencesIsVisible && (
           <Overlay
             title={this.props.t('Preferences.Settings')}
@@ -548,6 +557,7 @@ IDEView.propTypes = {
   collapseConsole: PropTypes.func.isRequired,
   deleteFile: PropTypes.func.isRequired,
   updateFileName: PropTypes.func.isRequired,
+  updateFileContent: PropTypes.func.isRequired,
   openProjectOptions: PropTypes.func.isRequired,
   closeProjectOptions: PropTypes.func.isRequired,
   newFolder: PropTypes.func.isRequired,

client/modules/Preview/EmbedFrame.jsx

@@ -86,6 +86,7 @@ function resolvePathsForElementsWithAttribute(attr, sketchDoc, files) {
 
 function resolveCSSLinksInString(content, files) {
   let newContent = content;
+  console.log(content);
   let cssFileStrings = content.match(STRING_REGEX);
   cssFileStrings = cssFileStrings || [];
   cssFileStrings.forEach((cssFileString) => {
@@ -285,9 +286,9 @@ function injectLocalFiles(files, htmlFile) {
   // }
 
   // TODO extra stuff to inject
-  // const previewScripts = sketchDoc.createElement('script');
-  // previewScripts.src = '/previewScripts.js';
-  // sketchDoc.head.appendChild(previewScripts);
+  const previewScripts = sketchDoc.createElement('script');
+  previewScripts.src = getConfig('PREVIEW_SCRIPTS_URL');
+  sketchDoc.head.appendChild(previewScripts);
 
   const sketchDocString = `<!DOCTYPE HTML>\n${sketchDoc.documentElement.outerHTML}`;
   scriptOffs = getAllScriptOffsets(sketchDocString);
@@ -322,9 +323,7 @@ function EmbedFrame({ files, isPlaying }) {
   function renderSketch() {
     const doc = iframe.current;
     if (isPlaying) {
-      console.log('calling inject local files');
       const htmlDoc = injectLocalFiles(files, htmlFile);
-      console.log('setting srcdoc');
       srcDoc.set(doc, htmlDoc);
     } else {
       doc.srcdoc = '';

server/views/previewIndex.js

@@ -1,11 +1,26 @@
 function renderPreviewIndex() {
+  const assetsManifest =
+    process.env.webpackAssets && JSON.parse(process.env.webpackAssets);
   return `
     <!DOCTYPE html>
     <html lang="en">
       <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      </head>
+        <script>
+          if (!window.process) {
+            window.process = {};
+          }
+          if (!window.process.env) {
+            window.process.env = {};
+          }
+          window.process.env.PREVIEW_SCRIPTS_URL = '${
+            process.env.NODE_ENV === 'production'
+              ? `${assetsManifest['/previewScripts.js']}`
+              : '/previewScripts.js'
+          }';
+        </script>
+        </head>
       <body>
         <div id="root" class="root-app">
           <script src="/preview-app.js"></script>