Added the ability to share workspaces

Author: lolleko

package-lock.json

@@ -28,8 +28,10 @@
     "worker-loader": "^2.0.0"
   },
   "dependencies": {
+    "@types/url-parse": "^1.4.1",
     "fengari": "^0.1.2",
     "monaco-editor": "^0.14.3",
-    "typescript-to-lua": "file:../typescript-to-lua-0.9.0.tgz"
+    "typescript-to-lua": "file:../typescript-to-lua-0.9.0.tgz",
+    "url-parse": "^1.4.3"
   }
 }

package.json

@@ -1,6 +1,6 @@
 $lua-purple: rgb(30, 40, 111);
 $ts-blue: rgb(67, 119, 194);
-$body-background: #fafafa;
+$body-background: #1e1e1e;
 
 @import 'fonts';
 
@@ -19,19 +19,20 @@ img {
 
 #header {
     width: 100%;
-    height: 100px;
+    height: 55px;
     //border-bottom-left-radius: 10%;
     //border-bottom-right-radius: 60%;
     background: linear-gradient(135deg, $ts-blue, $lua-purple);
     //-webkit-clip-path: polygon(100% 0, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0 0);
     //clip-path: polygon(100% 0, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0 0);
     color: white;
+    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
 }
 
 #logo {
     position: absolute;
-    top: 20px;
-    left: 20px;
+    top: 5px;
+    left: 5px;
 
     .logo-element {
         display: inline-block;
@@ -40,16 +41,16 @@ img {
     }
 
     #logo-ts {
-        height: 40px;
+        height: 30px;
     }
 
     #logo-spacer {
-        font-size: 40px;
+        font-size: 30px;
         vertical-align: -6px;
     }
 
     #logo-lua {
-        height: 60px;
+        height: 40px;
     }
 }
 
@@ -70,31 +71,30 @@ img {
 }
 
 #content {
-    margin-top: 40px;
 }
 
 
 #example {
-    margin-right: auto;
-    margin-left: auto;
     display: flex;
     flex-wrap: wrap;
-    width: 95%;
+    width: 100%;
 
     .example-element {
         flex: 1;
         height: 600px;
-        background-color: #1e1e1e;
+        background-color:$body-background;
         display: inline-block;
-        color: #222222;
+        color: white;
         overflow: hidden;
+        border-bottom: 1px #222222 solid;
+        border-right: 1px #222222 solid;
+        border-left: 1px #222222 solid;
     }
 
     #example-ts {
     }
 
     #example-lua {
-        margin-left: 40px;
     }
 
     #example-controls {
@@ -105,7 +105,6 @@ img {
 
     #example-output {
         height: 120px;
-        margin-top: 40px;
         flex-basis: 100%;
     }
 }

src/assets/styles/main.scss

@@ -4,33 +4,41 @@ import {editor} from 'monaco-editor/esm/vs/editor/editor.api';
 
 import TSTLWorker = require('worker-loader!./tstlWorker');
 
+import * as URL from "url-parse";
+
 document.addEventListener('DOMContentLoaded', () => {
   const container = document.getElementById('example-ts');
   const exampleLua = document.getElementById('example-lua');
 
-  if (container && exampleLua) {
-    let tsEditor = editor.create(container, {
-      value:
-`class Greeter {
-  greeting: string;
-  constructor(message: string) {
-      this.greeting = message;
+  let example = `class Greeter {
+    greeting: string;
+    constructor(message: string) {
+        this.greeting = message;
+    }
+    greet() {
+        return "Hello, " + this.greeting;
+    }
   }
-  greet() {
-      return "Hello, " + this.greeting;
+  
+  let greeter = new Greeter("world");
+  
+  let button = document.createElement('button');
+  button.textContent = "Say Hello";
+  button.onclick = function() {
+    alert(greeter.greet());
+  }
+  
+  document.body.appendChild(button);
+  `;
+  
+  let windowUrl = new URL(window.location.href, window.location, true);
+  if (windowUrl.query.src) {
+    example = decodeURIComponent(windowUrl.query.src);
   }
-}
-
-let greeter = new Greeter("world");
-
-let button = document.createElement('button');
-button.textContent = "Say Hello";
-button.onclick = function() {
-  alert(greeter.greet());
-}
 
-document.body.appendChild(button);
-`,
+  if (container && exampleLua) {
+    let tsEditor = editor.create(container, {
+      value: example,
       language: 'typescript',
       minimap: {enabled: false},
       theme: 'vs-dark',
@@ -52,12 +60,15 @@ document.body.appendChild(button);
     const tstlWorker = new (TSTLWorker as any)();
     tstlWorker.postMessage({tsStr: tsEditor.getValue()});
 
-    let timerVar: NodeJS.Timeout;
+    let timerVar: any;
 
     tsEditor.onDidChangeModelContent((e => {
       clearInterval(timerVar);
       // wait one second before submitting work
-      timerVar = setTimeout(() => tstlWorker.postMessage({tsStr: tsEditor.getValue()}), 500);      
+      timerVar = setTimeout(() => {
+        tstlWorker.postMessage({tsStr: tsEditor.getValue()});
+        history.pushState(null, "", "/?src=" + encodeURIComponent(tsEditor.getValue()));
+      }, 500);      
     }))
 
     tstlWorker.onmessage = (event: MessageEvent) => {