Web IDE & Codesandbox POC

[ci skip]

4 files changed, 109 insertions, 0 deletions

diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index 257a7432c20..2d2415354f9 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -9,6 +9,7 @@ import RepoEditor from './repo_editor.vue';
 import FindFile from './file_finder/index.vue';
 import RightPane from './panes/right.vue';
 import ErrorMessage from './error_message.vue';
+import Preview from './preview.vue';
 
 const originalStopCallback = Mousetrap.stopCallback;
 
@@ -22,6 +23,7 @@ export default {
     FindFile,
     RightPane,
     ErrorMessage,
+    Preview,
   },
   computed: {
     ...mapState([
@@ -33,6 +35,7 @@ export default {
       'emptyStateSvgPath',
       'currentProjectId',
       'errorMessage',
+      'entries',
     ]),
     ...mapGetters(['activeFile', 'hasChanges']),
   },
@@ -134,6 +137,9 @@ export default {
           </div>
         </template>
       </div>
+      <preview
+        v-if="Object.keys(entries).length"
+      />
       <right-pane
         v-if="currentProjectId"
       />
diff --git a/app/assets/javascripts/ide/components/preview.vue b/app/assets/javascripts/ide/components/preview.vue
new file mode 100644
index 00000000000..902dd1036c6
--- /dev/null
+++ b/app/assets/javascripts/ide/components/preview.vue
@@ -0,0 +1,50 @@
+<script>
+import { mapState } from 'vuex';
+import _ from 'underscore';
+import { Manager } from 'smooshpack';
+
+export default {
+  computed: {
+    ...mapState(['entries']),
+    normalizedEntries() {
+      return Object.keys(this.entries).reduce((acc, path) => {
+        const file = this.entries[path];
+
+        return {
+          ...acc,
+          [`/${path}`]: {
+            code: file.content,
+          },
+        };
+      }, {});
+    },
+  },
+  watch: {
+    normalizedEntries() {
+      this.update();
+    },
+  },
+  mounted() {
+    this.manager = new Manager('#js-sandpack-preview', {
+      files: this.normalizedEntries,
+      entry: '/index.js',
+      dependencies: {},
+    });
+  },
+  methods: {
+    update: _.debounce(function throttleUpdate() {
+      this.manager.updatePreview({
+        files: this.normalizedEntries,
+        entry: '/index.js',
+        dependencies: {},
+      });
+    }, 500),
+  },
+};
+</script>
+
+<template>
+  <div style="width:300px;">
+    <div id="js-sandpack-preview"></div>
+  </div>
+</template>
diff --git a/package.json b/package.json
index 256ebc1fb6e..7ac56c55fca 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
     "sanitize-html": "^1.16.1",
     "select2": "3.5.2-browserify",
     "sha1": "^1.1.1",
+    "smooshpack": "^0.0.39",
     "sortablejs": "^1.7.0",
     "sql.js": "^0.4.0",
     "stickyfilljs": "^2.0.5",
diff --git a/yarn.lock b/yarn.lock
index 85fdb150d34..1da518a7e08 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1238,6 +1238,10 @@ binary-extensions@^1.0.0:
   version "1.11.0"
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-1.11.0.tgz#46aa1751fb6a2f93ee5e689bb1087d4b14c6c205"
 
+binaryextensions@2:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/binaryextensions/-/binaryextensions-2.1.1.tgz#3209a51ca4a4ad541a3b8d3d6a6d5b83a2485935"
+
 bitsyntax@~0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/bitsyntax/-/bitsyntax-0.0.4.tgz#eb10cc6f82b8c490e3e85698f07e83d46e0cba82"
@@ -1741,6 +1745,22 @@ code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
 
+codesandbox-api@^0.0.18:
+  version "0.0.18"
+  resolved "https://registry.yarnpkg.com/codesandbox-api/-/codesandbox-api-0.0.18.tgz#56b96b37533f80d20c21861e5e477d3557e613ca"
+
+codesandbox-import-util-types@^1.2.11:
+  version "1.2.11"
+  resolved "https://registry.yarnpkg.com/codesandbox-import-util-types/-/codesandbox-import-util-types-1.2.11.tgz#68e812f21d6b309e9a52eec5cf027c3e63b4c703"
+
+codesandbox-import-utils@^1.2.3:
+  version "1.2.11"
+  resolved "https://registry.yarnpkg.com/codesandbox-import-utils/-/codesandbox-import-utils-1.2.11.tgz#b88423a4a7c785175c784c84e87f5950820280e1"
+  dependencies:
+    codesandbox-import-util-types "^1.2.11"
+    istextorbinary "^2.2.1"
+    lz-string "^1.4.4"
+
 collection-visit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/collection-visit/-/collection-visit-1.0.0.tgz#4bc0373c164bc3291b4d368c829cf1a80a59dca0"
@@ -2502,6 +2522,10 @@ ecc-jsbn@~0.1.1:
   dependencies:
     jsbn "~0.1.0"
 
+editions@^1.3.3:
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/editions/-/editions-1.3.4.tgz#3662cb592347c3168eb8e498a0ff73271d67f50b"
+
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
@@ -4317,6 +4341,14 @@ istanbul@^0.4.5:
     which "^1.1.1"
     wordwrap "^1.0.0"
 
+istextorbinary@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/istextorbinary/-/istextorbinary-2.2.1.tgz#a5231a08ef6dd22b268d0895084cf8d58b5bec53"
+  dependencies:
+    binaryextensions "2"
+    editions "^1.3.3"
+    textextensions "2"
+
 isurl@^1.0.0-alpha5:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isurl/-/isurl-1.0.0.tgz#b27f4f49f3cdaa3ea44a0a5b7f3462e6edc39d67"
@@ -4662,6 +4694,10 @@ lodash.escaperegexp@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.escaperegexp/-/lodash.escaperegexp-4.1.2.tgz#64762c48618082518ac3df4ccf5d5886dae20347"
 
+lodash.isequal@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+
 lodash.kebabcase@4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
@@ -4767,6 +4803,10 @@ lru-cache@^4.0.1, lru-cache@^4.1.1, lru-cache@^4.1.2:
     pseudomap "^1.0.2"
     yallist "^2.1.2"
 
+lz-string@^1.4.4:
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
+
 mailcomposer@4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/mailcomposer/-/mailcomposer-4.0.1.tgz#0e1c44b2a07cf740ee17dc149ba009f19cadfeb4"
@@ -6517,6 +6557,14 @@ smart-buffer@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.0.1.tgz#07ea1ca8d4db24eb4cac86537d7d18995221ace3"
 
+smooshpack@^0.0.39:
+  version "0.0.39"
+  resolved "https://registry.yarnpkg.com/smooshpack/-/smooshpack-0.0.39.tgz#46b55332df201dedb351550b1edca60652ee84cc"
+  dependencies:
+    codesandbox-api "^0.0.18"
+    codesandbox-import-utils "^1.2.3"
+    lodash.isequal "^4.5.0"
+
 smtp-connection@2.12.0:
   version "2.12.0"
   resolved "https://registry.yarnpkg.com/smtp-connection/-/smtp-connection-2.12.0.tgz#d76ef9127cb23c2259edb1e8349c2e8d5e2d74c1"
@@ -7022,6 +7070,10 @@ text-table@~0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
 
+textextensions@2:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/textextensions/-/textextensions-2.2.0.tgz#38ac676151285b658654581987a0ce1a4490d286"
+
 three-orbit-controls@^82.1.0:
   version "82.1.0"
   resolved "https://registry.yarnpkg.com/three-orbit-controls/-/three-orbit-controls-82.1.0.tgz#11a7f33d0a20ecec98f098b37780f6537374fab4"