Tweaks

Author: Ives van Hoorne

src/app/pages/Sandbox/Editor/Content/subviews/CodeEditor/index.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import CodeMirror from 'codemirror';
 import styled from 'styled-components';
+import { debounce } from 'lodash';
 
 import { getCodeMirror } from 'app/utils/codemirror';
 
@@ -70,6 +71,12 @@ const handleError = (cm, currentError, nextError, nextCode, nextId) => {
 export default class CodeEditor extends React.PureComponent {
   props: Props;
 
+  constructor(props) {
+    super(props);
+
+    this.handleChange = debounce(this.handleChange, 200);
+  }
+
   shouldComponentUpdate(nextProps: Props) {
     return nextProps.id !== this.props.id ||
       nextProps.error !== this.props.error ||
@@ -242,13 +249,20 @@ export default class CodeEditor extends React.PureComponent {
     }
   };
 
+  getCode = () => {
+    return this.codemirror.getValue();
+  };
+
   prettify = async () => {
-    const { id, code } = this.props;
+    const { id } = this.props;
+    const code = this.getCode();
     try {
       const prettier = await System.import('prettier');
       const newCode = prettier.format(code);
-      this.props.changeCode(id, newCode);
-      this.updateCodeMirrorCode(newCode);
+      if (newCode !== code) {
+        this.props.changeCode(id, newCode);
+        this.updateCodeMirrorCode(newCode);
+      }
     } catch (e) {}
   };
 
@@ -257,7 +271,8 @@ export default class CodeEditor extends React.PureComponent {
     if (preferences.prettifyOnSaveEnabled) {
       await this.prettify();
     }
-
+    const { id } = this.props;
+    this.props.changeCode(id, this.getCode());
     saveCode();
   };
 

src/app/pages/Sandbox/Editor/Content/subviews/Preview/index.js

@@ -3,6 +3,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 import { debounce } from 'lodash';
+
 import type { Preferences } from 'app/store/preferences/reducer';
 
 import type { Module } from 'app/store/entities/sandboxes/modules/entity';
@@ -65,7 +66,7 @@ export default class Preview extends React.PureComponent {
       url: null,
     };
 
-    this.executeCode = debounce(this.executeCode, 500);
+    this.executeCode = debounce(this.executeCode, 400);
   }
 
   fetchBundle = () => {
@@ -99,8 +100,16 @@ export default class Preview extends React.PureComponent {
       return;
     }
 
+    if (prevProps.module.isNotSynced && !this.props.module.isNotSynced) {
+      // After save
+      this.executeCodeImmediately();
+      return;
+    }
+
     if (
-      prevProps.module.code !== this.props.module.code &&
+      (prevProps.module.code !== this.props.module.code ||
+        prevProps.modules !== this.props.modules ||
+        prevProps.directories !== this.props.directories) &&
       this.state.frameInitialized
     ) {
       if (this.props.preferences.livePreviewEnabled) {
@@ -129,7 +138,6 @@ export default class Preview extends React.PureComponent {
         const { error } = e.data;
         this.setError(error);
       } else if (type === 'success') {
-        // To reset the debounce, but still quickly remove errors
         this.setError(null);
       } else if (type === 'urlchange') {
         const url = e.data.url.replace('/', '');

src/app/pages/Sandbox/Editor/Workspace/Preferences/index.js

@@ -61,7 +61,7 @@ class Preferences extends React.PureComponent {
             title="Live Preview"
             enabled={preferences.livePreviewEnabled}
             onClick={preferencesActions.setLivePreview}
-            tooltip="The alternative is to press the refresh button"
+            tooltip="Only update on save"
           />
         </PreferenceContainer>
       </Container>

src/app/store/entities/sandboxes/modules/reducer.js

@@ -23,20 +23,38 @@ function moduleReducer(module, action) {
   }
 }
 
+function shouldUpdate(module, action) {
+  switch (action.type) {
+    case SET_MODULE_ERROR:
+      return (action.error == null && module.error) ||
+        (action.error != null && module.error == null) ||
+        (action.error != null &&
+          module.error != null &&
+          (action.error.line !== module.error.line ||
+            action.error.title !== module.error.title ||
+            action.error.type !== module.error.type));
+
+    default:
+      return true;
+  }
+}
+
 export default function reducer(state: {}, action) {
   switch (action.type) {
     case RENAME_MODULE:
     case MOVE_MODULE:
     case SET_CODE:
     case SET_MODULE_SYNCED:
-    case SET_MODULE_ERROR:
-      if (state[action.id]) {
+    case SET_MODULE_ERROR: {
+      const module = state[action.id];
+      if (module && shouldUpdate(module, action)) {
         return {
           ...state,
-          [action.id]: moduleReducer(state[action.id], action),
+          [action.id]: moduleReducer(module, action),
         };
       }
       return state;
+    }
     default:
       return state;
   }

src/app/store/entities/sandboxes/modules/validator.js

@@ -4,20 +4,13 @@ import type { Directory } from '../directories/entity';
 export const validateTitle = (
   id: string,
   title: string,
-  siblings: Array<Module | Directory>,
+  siblings: Array<Module | Directory>
 ) => {
   if (title.length === 0) return 'title cannot be empty';
   if (/^[09azAZ\_.]+$/.test(title)) {
     // It has whitespaces
     return 'Title cannot have whitespaces or special characters';
   }
-  const siblingTitles: Array<string> = siblings
-    .filter(x => x != null)
-    .filter(m => m.id !== id)
-    .map(m => m.title);
-  if (siblingTitles.indexOf(title) > 1) {
-    return 'There is already a module with the same title in this scope';
-  }
 
   if (title.length > 32) {
     return "The title can't be more than 32 characters long";

src/app/utils/codemirror.js

@@ -32,7 +32,7 @@ export const getCodeMirror = (el, doc) => {
       font-size: 14px;
       font-weight: 500;
     }
-    .cm-s-oceanic div.CodeMirror-selected { background: ${theme.background()}; }
+    .cm-s-oceanic div.CodeMirror-selected { background: #374140; }
     .cm-s-oceanic .CodeMirror-line::selection, .cm-s-oceanic .CodeMirror-line > span::selection, .cm-s-oceanic .CodeMirror-line > span > span::selection { background: #65737E; }
     .cm-s-oceanic .CodeMirror-line::-moz-selection, .cm-s-oceanic .CodeMirror-line > span::-moz-selection, .cm-s-oceanic .CodeMirror-line > span > span::-moz-selection { background: #65737E; }
     .cm-s-oceanic .CodeMirror-gutters {

src/homepage/index.html

@@ -104,13 +104,13 @@ <h3>CodeSandbox is an online editor with a focus on creating, sharing and import
     <h3>Example Projects</h3>
 
     <div class="projects">
-      <a href="/s/9G30GVB4" class="project">
+      <a href="/s/r0wXp0Njw" class="project">
         React Router
       </a>
-      <a href="/s/r06mAWWWk" class="project">
+      <a href="/s/rkmNRByE4" class="project">
         Styled Components
       </a>
-      <a href="/s/R95LjzwE" class="project">
+      <a href="/s/lOmyoxQw1" class="project">
         Redux
       </a>
       <a href="/s/0R9pxQv3L" class="project">

src/sandbox/errors/dependency-not-found-error.js

@@ -7,4 +7,5 @@ export default class DependencyNotFoundError extends Error {
   }
   type = 'dependency-not-found';
   severity = 'error';
+  line = -1;
 }

src/sandbox/errors/no-dom-change-error.js

@@ -10,4 +10,5 @@ export default class NoDomChangeError extends Error {
 
   type = 'no-dom-change';
   severity = 'warning';
+  line = -1;
 }

src/sandbox/index.js

@@ -115,7 +115,7 @@ async function compile(message) {
     deleteCache(changedModule);
 
     const evalled = evalModule(module, modules, directories, manifest);
-    const domChanged = document.body.innerHTML !== '';
+    const domChanged = document.body.innerHTML !== '<div id="root"></div>';
 
     if (!domChanged) {
       const isReact = module.code.includes('react');