some tests

codeeditor-app/elements/output-frame/output-frame.ts

@@ -21,27 +21,45 @@ export class OutputFrame extends BaseElement {
     onUpdate(): void {
     }
 
-    reset(onload: ((ev: Event) => void) | null = null, resetNotificationBubbles: boolean = true) {
+    reset(onload: ((ev: Event) => void) | null = null, resetNotificationBubbles: boolean = true, source: string | null = null) {
         if (this.CurrentIframeScriptRemoveResponseListener != null) {
             this.CurrentIframeScriptRemoveResponseListener();
             this.CurrentIframeScriptRemoveResponseListener = null;
         }
 
         if (this.Iframe && this.hasChild(this.Iframe)) {
+            this.Iframe.setAttribute("sandbox", "allow-pointer-lock allow-same-origin");
+            console.log("REMOVING IFRAME!");
             this.removeChild(this.Iframe);
         }
 
+
         this.Iframe = document.createElement("iframe");
         this.Iframe.setAttribute("sandbox", "allow-pointer-lock allow-same-origin allow-scripts");
-        this.Iframe.src = GetOutputFrameUrl();
-
         if (onload) {
             this.Iframe.onload = ((ev) => {
+                console.log("IFRAME LOADED");
                 onload(ev);
+                if (this.Iframe)
+                    this.Iframe.onload = () => { };
             });
         }
+        console.log("IF SOURCE BEFORE", this.Iframe.src);
+        if (source != null) {
+            console.log("CUSOMSRC S:"+source, source);
+            this.Iframe.src = source;
+        }
+        else {
+            this.Iframe.src = GetOutputFrameUrl();
+        }
+        console.log("IF SOURCE AFTER", this.Iframe.src);
 
-        this.appendChild(this.Iframe);
+        if (source !== "") {
+            this.appendChild(this.Iframe);
+        }
+        else {
+            console.log("SPPCHD");
+        }
 
         if (resetNotificationBubbles) {
             var bubbles = GetNotificationBubbles();
@@ -52,13 +70,18 @@ export class OutputFrame extends BaseElement {
     }
 
     setError() {
+        console.log("RCALLED");
         this.reset(() => {
-            if (this.Iframe)
+            if (this.Iframe) {
-                this.Iframe.src = GetOutputFrameUrl() + "execution-time-error.html";
+                // this.Iframe.contentWindow?.location.reload();                
-        });
+                console.log("RESET AFTER", this.Iframe.src);
+            }
+        }, true, "");//GetOutputFrameUrl("execution-time-error.html"));
+
     }
 
     setContent(language: string, value: string) {
+        console.log("setting content", language, value);
         this.contents[language] = value;
         this.reset(() => {
             for (const lang in this.contents) {
@@ -72,14 +95,16 @@ export class OutputFrame extends BaseElement {
     }
 
     doPostMessage(language: string, value: string) {
-        this.CurrentIframeScriptRemoveResponseListener = postMessage(this.Iframe?.contentWindow, language, this.contents[language], language == 'javascript' ? (executeTimeInMs, exceedTimeInMs) => {
+        this.CurrentIframeScriptRemoveResponseListener = postMessage(this.Iframe?.contentWindow, language, this.contents[language], language == 'javascript' ?
-            if (executeTimeInMs === -1) {
+            (executeTimeInMs, exceedTimeInMs) => {
-                this.setError();
+                console.log("onresponse", executeTimeInMs + " " + exceedTimeInMs);
-            }
+                if (executeTimeInMs === -1) {
-            else {
+                    this.setError();
-                var bubbles = GetNotificationBubbles();
+                }
-                bubbles.add(language + " executed in: " + executeTimeInMs + "ms", "info");
+                else {
-            }
+                    var bubbles = GetNotificationBubbles();
-        } : undefined);
+                    bubbles.add(language + " executed in: " + executeTimeInMs + "ms", "info");
+                }
+            } : undefined);
     }
 }

outputframe-app/app.html

@@ -1 +1,3 @@
-<render-canvas></render-canvas>
+<render-canvas></render-canvas>
+<loading-spinner></loading-spinner>
+hi

outputframe-app/boot.ts

@@ -7,14 +7,26 @@ import { messageListener } from '../shared/message-listener';
 import { postMessage, postResponseMessage } from '../shared/post-message';
 import { RenderCanvas } from './elements/render-canvas/render-canvas';
 import { getCenter, getHeight, getRandom, getWidth, rect, box, getRandomColor } from './injects/dom-helpers';
+import { setWindowStop } from './injects/window-stop';
+import { LoadingSpinner } from './elements/loading-spinner/loading-spinner';
 
 
+window.customElements.define('loading-spinner', LoadingSpinner);
 window.customElements.define('render-canvas', RenderCanvas);
 
-document.body.innerHTML += bootHtml;
+console.log("BOOTING");
 
+document.body.innerHTML += bootHtml;
+let consoleLimit = 10;
 watchConsole((type, value) => {
-    postMessage(parent, type, value);
+    if (consoleLimit > 0) {
+        --consoleLimit;
+        postMessage(parent, type, value.toString());
+    }
+    else if (consoleLimit === 0) {
+        --consoleLimit;
+        postMessage(parent, type, "+ more");
+    }
 });
 messageListener((type, value, id) => {
     if (type == "javascript") {
@@ -45,4 +57,6 @@ window.center = getCenter;
 //@ts-ignore
 window.rand = getRandom;
 //@ts-ignore
-window.randomColor = getRandomColor;
+window.randomColor = getRandomColor;
+
+setWindowStop();

outputframe-app/elements/loading-spinner/loading-spinner.less

@@ -0,0 +1,32 @@
+loading-spinner {
+    display: block;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    opacity: 0.3;
+    height: 10px;
+}
+
+loading-spinner::before {
+  position: absolute;
+  content: "";
+  width: 10px;
+  height: 100%;
+  top: 0;
+  left: 0;
+  animation-name: loadingAnimation;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  background-color: blue;
+}
+
+@keyframes loadingAnimation {
+  0% {
+    left: 0;
+  }
+  100% {
+    left: calc(100% - 10px);
+  }
+}

outputframe-app/elements/loading-spinner/loading-spinner.ts

@@ -0,0 +1,7 @@
+import { BaseElement } from '../../../shared/_base';
+import './loading-spinner.less';
+
+export class LoadingSpinner extends BaseElement {
+    onInit(): void {
+    }
+}

outputframe-app/injects/watch-console.ts

@@ -1,24 +1,24 @@
 import { NotificationBubbles } from "../../codeeditor-app/elements/notification-bubbles/notification-bubbles";
 
-export function watchConsole(fn: (type: 'log' | 'info' | 'warn' | 'error', value: any) => void) {
+export function watchConsole(fn: (type: 'log' | 'info' | 'warn' | 'error', ...value: any[]) => void) {
     // define a new console
     var console: any = (function (oldCons) {
         return {
-            log: function (text: any) {
+            log: function (...data: any[]) {
-                oldCons.log(text);
+                oldCons.log(...data);
-                fn('log', text);
+                fn('log', data);
             },
-            info: function (text: any) {
+            info: function (...data: any[]) {
-                oldCons.info(text);
+                oldCons.info(...data);
-                fn('info', text);
+                fn('info', data);
             },
-            warn: function (text: any) {
+            warn: function (...data: any[]) {
-                oldCons.warn(text);
+                oldCons.warn(...data);
-                fn('warn', text);
+                fn('warn', data);
             },
-            error: function (text: any) {
+            error: function (...data: any[]) {
-                oldCons.error(text);
+                oldCons.error(...data);
-                fn('error', text);
+                fn('error', data);
             }
         };
     }(window.console));

outputframe-app/injects/window-stop.ts

@@ -1,4 +1,6 @@
-setTimeout(() => {
+export function setWindowStop() {
-    window.stop();
+    setTimeout(() => {
-    console.log("window stopped");
+        window.stop();
-}, 4 * 1000);
+        //throw new Error("window stopped");
+    }, 4 * 1000);
+}

outputframe-app/static/index.html

@@ -6,9 +6,39 @@
         content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <title>output</title>
     <base href="/" />
+    <style>
+        body {
+            font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
+        }
+
+        .center {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 32px;
+            text-align: center;
+            opacity: 0.04;
+            font-weight: 100;
+        }
+
+        small {
+            font-size: 0.6em;
+        }
+
+
+        @media (prefers-color-scheme: dark) {
+            .center {
+                color: white;
+            }
+        }
+    </style>
 </head>
 
 <body>
+    <div class="center">
+        codeeditor
+    </div>
     <script type="text/javascript" src="/output.frame.bundle.js?v=1"></script>
 </body>
 

shared/url-helpers.ts

@@ -6,12 +6,13 @@ export function IsLocalhost(): boolean {
     return location.href.indexOf("://localhost") != -1;
 }
 
-export function GetOutputFrameUrl(): string {
+export function GetOutputFrameUrl(path: string = ""): string {
+    var v = "?v=" + (+new Date());
     if (IsLocalhost()) {
-        return "http://localhost:8021/";
+        return "http://127.0.0.1:8021/" + path + v;
     }
     else {
-        return "https://outputframe.davidmeincke.dk/";
+        return "https://outputframe.davidmeincke.dk/" + path + v;
         //return "https://codeeditoroutput.z16.web.core.windows.net/";
     }
 }