Replace alert() in preview with non-blocking sweetalert

README.md

@@ -113,6 +113,12 @@ This will start a local static server, and open it in your browser. The first
 pageload will be rather slow as it compiles the bundle; after you change files,
 assets are recompiled incrementally and your browser automatically reloads.
 
+When you're done, lint and make sure tests pass before opening a pull request:
+
+```bash
+$ npm test
+```
+
 ## License ##
 
 Popcode is distributed under the MIT license. See the attached LICENSE file

bower.json

@@ -35,6 +35,7 @@
     "roboto-webfont-bower": "roboto-webfont#^0.1.1",
     "fontawesome": "^4.6.3",
     "mustache.js": "mustache#^2.2.1",
-    "handlebars": "^4.0.5"
+    "handlebars": "^4.0.5",
+    "sweetalert": "^1.1.3"
   }
 }

src/components/Preview.jsx

@@ -13,7 +13,7 @@ class Preview extends React.Component {
     bindAll(this, '_handlePopOutClick');
   }
 
-  _generateDocument() {
+  _generateDocument(nonBlockingAlerts = false) {
     if (!this.props.isValid) {
       return '';
     }
@@ -26,7 +26,12 @@ class Preview extends React.Component {
 
     return generatePreview(
       project,
-      {targetBaseTop: true, propagateErrorsToParent: true, breakLoops: true}
+      {
+        targetBaseTop: true,
+        propagateErrorsToParent: true,
+        breakLoops: true,
+        nonBlockingAlerts,
+      }
     ).documentElement.outerHTML;
   }
 
@@ -56,7 +61,7 @@ class Preview extends React.Component {
           onClick={this._handlePopOutClick}
         />
         <PreviewFrame
-          src={this._generateDocument()}
+          src={this._generateDocument(true)}
           onFrameWillRefresh={this.props.onClearRuntimeErrors}
           onRuntimeError={this.props.onRuntimeError}
         />

src/config/previewFrameLibraries.js

@@ -0,0 +1,21 @@
+import fs from 'fs';
+import path from 'path';
+
+const previewFrameLibraries = {
+  sweetalert: {
+    name: 'sweetalert',
+    javascript: fs.readFileSync(
+      path.join(__dirname,
+        '../../bower_components/sweetalert/dist/sweetalert.min.js'
+        )
+    ),
+    css: fs.readFileSync(
+      path.join(__dirname,
+        '../../bower_components/sweetalert/dist/sweetalert.css'
+        )
+      ),
+  },
+
+};
+
+export default previewFrameLibraries;

src/util/generatePreview.js

@@ -3,6 +3,7 @@ import pick from 'lodash/pick';
 import base64 from 'base64-js';
 import loopProtect from 'loop-protect';
 import libraries from '../config/libraries';
+import previewFrameLibraries from '../config/previewFrameLibraries';
 
 const DOMParser = window.DOMParser;
 const parser = new DOMParser();
@@ -38,6 +39,18 @@ const errorHandlerScript = `(${(() => {
   };
 }).toString()}());`;
 
+const alertReplacementScript = `(${(() => {
+  const _swal = window.swal;
+
+  Object.defineProperty(window, // eslint-disable-line prefer-reflect
+    'alert', {
+      value: (message) => {
+        _swal(message);
+      },
+    });
+  delete window.swal; // eslint-disable-line prefer-reflect
+}).toString()}());`;
+
 class PreviewGenerator {
   constructor(project, options = {}) {
     this._project = project;
@@ -49,7 +62,7 @@ class PreviewGenerator {
     this.previewBody = this._ensureElement('body');
 
     this.previewText = (this.previewBody.innerText || '').trim();
-    this._attachLibraries();
+    this._attachLibraries(options.nonBlockingAlerts);
 
     if (options.targetBaseTop) {
       this._addBase();
@@ -58,6 +71,11 @@ class PreviewGenerator {
     if (options.propagateErrorsToParent) {
       this._addErrorHandling();
     }
+
+    if (options.nonBlockingAlerts) {
+      this._addAlertHandling();
+    }
+
     this._addJavascript(pick(options, 'breakLoops'));
   }
 
@@ -119,19 +137,36 @@ class PreviewGenerator {
     this.previewBody.appendChild(scriptTag);
   }
 
-  _attachLibraries() {
+  _addAlertHandling() {
+    const scriptTag = this.previewDocument.createElement('script');
+    scriptTag.innerHTML = alertReplacementScript;
+    this.previewBody.appendChild(scriptTag);
+  }
+
+  _attachLibraries(includePreviewFrame = false) {
     this._project.enabledLibraries.forEach((libraryKey) => {
       const library = libraries[libraryKey];
-      const css = library.css;
-      const javascript = library.javascript;
-      if (css !== undefined) {
-        castArray(css).forEach(this._attachCssLibrary.bind(this));
-      }
-      if (javascript !== undefined) {
-        castArray(javascript).
-          forEach(this._attachJavascriptLibrary.bind(this));
-      }
+      this._attachLibrary(library);
     });
+
+    if (includePreviewFrame) {
+      Object.keys(previewFrameLibraries).forEach((libraryKey) => {
+        const library = previewFrameLibraries[libraryKey];
+        this._attachLibrary(library);
+      });
+    }
+  }
+
+  _attachLibrary(library) {
+    const css = library.css;
+    const javascript = library.javascript;
+    if (css !== undefined) {
+      castArray(css).forEach(this._attachCssLibrary.bind(this));
+    }
+    if (javascript !== undefined) {
+      castArray(javascript).
+        forEach(this._attachJavascriptLibrary.bind(this));
+    }
   }
 
   _attachCssLibrary(css) {