added two apps, and better implementation

shared/create-script.ts

@@ -0,0 +1,7 @@
+export function createScript(value: string) {
+    var script: HTMLScriptElement = document.createElement("script");
+    script.setAttribute("async", "");
+    script.innerHTML = value;
+
+    document.body.appendChild(script);
+}

shared/getdom.ts

@@ -0,0 +1,10 @@
+import { NotificationBubbles } from "../codeeditor-app/elements/notification-bubbles/notification-bubbles";
+import { OutputFrame } from "../codeeditor-app/elements/output-frame/output-frame";
+
+export function GetNotificationBubbles(): NotificationBubbles {
+    return <NotificationBubbles>document.getElementsByTagName("notification-bubbles")[0];
+}
+
+export function GetOutputFrame(): OutputFrame {
+    return <OutputFrame>document.getElementsByTagName("output-frame")[0];
+}

shared/message-listener.ts

@@ -0,0 +1,16 @@
+export function messageListener(fn: (type: 'script' | 'log' | 'info' | 'warn' | 'error' | 'syntax-error' | 'time' | 'response', value: string, id: number) => void): Function {
+    
+    var evt = function(e: any) {
+        if (!e.data || e.data === '' || e.data.type === 'webpackOk') {
+            return;
+        }
+
+        fn(e.data.type, e.data.value, e.data.id);
+    };
+
+    window.addEventListener('message', evt);
+
+    return () => {
+        window.removeEventListener('message', evt);
+    }
+}

shared/post-message.ts

@@ -0,0 +1,48 @@
+import { messageListener } from "./message-listener";
+
+export function postMessage(window: Window | null | undefined, type: string, value: any, onResponse?: (executeTimeInMs: number, exceedTimeInMs: number) => void): Function {
+    var postId = +new Date();
+    var responseTimeout = 5000;
+    var execResponse = true;
+
+    if (window && type && value) {
+        if (onResponse) {
+            var timeoutHandle: number | null = null;
+
+            var remListener = messageListener((type, value, id) => {
+                if (type == "response" && id == postId) {
+                    if (timeoutHandle != null)
+                        clearTimeout(timeoutHandle);
+
+                    remListener();
+                    if (execResponse)
+                        onResponse(+new Date() - id, responseTimeout);
+                }
+            });
+
+            timeoutHandle = setTimeout(() => {
+                remListener();
+                if (timeoutHandle != null) {
+                    clearTimeout(timeoutHandle);
+                    if (execResponse)
+                        onResponse(-1, responseTimeout);
+                }
+            }, responseTimeout);
+        }
+
+        window.postMessage({ type: type, value: (typeof value === 'string' || value instanceof String) ? value : JSON.stringify(value), id: postId }, "*");
+    }
+
+    return () => {
+        if (onResponse) {
+            execResponse = false;
+        }
+    };
+
+}
+
+export function postResponseMessage(window: Window | null | undefined, id: number, value: any) {
+    if (window && value) {
+        window.postMessage({ type: "response", value: JSON.stringify(value), id: id }, "*");
+    }
+}

shared/url-helpers.ts

@@ -0,0 +1,16 @@
+export function GetUrl(): string {
+    return location.protocol + "//" + location.host + "/";
+}
+
+export function IsLocalhost(): boolean {
+    return location.href.indexOf("://localhost") != -1;
+}
+
+export function GetOutputFrameUrl(): string {
+    if (IsLocalhost()) {
+        return "http://127.0.0.1:8021/";
+    }
+    else {
+        return "https://outputframe.davidmeincke.dk/";
+    }
+}