add to git

app/app.html

@@ -0,0 +1,11 @@
+<div class="flex-vert">
+    <div class="flex-shrink section top">
+        code editor
+    </div>
+    <div class="flex-horiz">
+        <code-editor></code-editor>
+        <output-frame></output-frame>
+    </div>
+    <div class="flex-shrink section bottom">methods: rect, box, center, width, height</div>
+</div>
+<notification-bubbles></notification-bubbles>

app/app.less

@@ -0,0 +1,56 @@
+html, body, body > * {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.flex-horiz {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+}
+
+.flex-vert {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+
+.flex-horiz > *, .flex-vert > * {
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 1px;
+}
+
+.flex-horiz .flex-shrink, .flex-vert .flex-shrink {
+    flex-grow: 0;
+    flex-shrink: 1;
+}
+
+.flex-horiz .flex-grow, .flex-vert .flex-grow {
+    flex-grow: 1;
+    flex-shrink: 0;
+}
+
+
+body {
+    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
+}
+
+.section {
+    background: #e3e3e3; 
+    padding: 20px; 
+    font-size: 22px;
+}
+
+.section.top {
+    border-bottom: 1px solid #c2c2c2;
+}
+
+.section.bottom {
+    border-top: 1px solid #c2c2c2;
+    font-size: 16px;
+    text-align: right;
+}

app/boot.ts

@@ -0,0 +1,19 @@
+import './app.less';
+import bootHtml from './app.html';
+import { AppRoot } from './elements/app-root/app-root';
+import { CodeEditor } from './elements/code-editor/code-editor';
+import { OutputFrame } from './elements/output-frame/output-frame';
+import { NotificationBubbles } from './elements/notification-bubbles/notification-bubbles';
+import { NotificationBubble } from './elements/notification-bubbles/notification-bubble';
+
+window.customElements.define('app-root', AppRoot);
+window.customElements.define('code-editor', CodeEditor);
+window.customElements.define('output-frame', OutputFrame);
+window.customElements.define('notification-bubbles', NotificationBubbles);
+window.customElements.define('notification-bubble', NotificationBubble);
+
+
+var appEle = document.createElement("div");
+appEle.innerHTML = bootHtml;
+
+document.body.appendChild(appEle);

app/elements/_base.ts

@@ -0,0 +1,103 @@
+export class BaseElement extends HTMLElement {
+    private _hasConnectedCallback: boolean = false;
+    connectedCallback() {
+
+        if (!this._hasConnectedCallback) {
+            this.onInit();
+        }
+        else {
+            this.onUpdate();
+        }
+
+        this._hasConnectedCallback = true;
+
+    }
+
+    onInit() { }
+    onUpdate() { }
+
+    find(tagName: string): HTMLElement | null {
+        
+        var found = document.getElementsByTagName(tagName);
+        if (found[0]) {
+            return <HTMLElement>found[0];
+        }
+        else {
+            return null;
+        }
+    }
+
+    findAncestor(tagName: string, startsWidth: boolean = false): Element | null {
+        var element = <any>this;
+
+        while (element.parentElement !== null) {
+            var parentEle = element.parentElement;
+
+            if (tagName.toUpperCase() === parentEle.tagName.toUpperCase()) {
+                return parentEle;
+            }
+            else if (startsWidth && parentEle.tagName.toUpperCase().indexOf(tagName.toUpperCase()) === 0) {
+                return parentEle;
+            }
+
+            element = parentEle;
+        }
+
+        return null;
+    }
+
+    findSibling(tagName: string, startsWidth: boolean = false): Element | null {
+        var parentEle = this.parentElement;
+
+        if (parentEle != null) {
+
+            for (let i = 0; i < parentEle.children.length; i++) {
+                const child = parentEle.children[i];
+
+                if (child != this) {
+                    if (tagName.toUpperCase() === child.tagName.toUpperCase()) {
+                        return child;
+                    }
+                    else if (startsWidth && child.tagName.toUpperCase().indexOf(tagName.toUpperCase()) === 0) {
+                        return child;
+                    }
+                }
+            }
+        }
+
+        return null;
+    }
+
+    hasChild(element: Element, startsWidth: boolean = false): boolean {
+        var ele = this;
+
+        if (ele != null) {
+            for (let i = 0; i < ele.children.length; i++) {
+                const child = ele.children[i];
+
+                if (child == element) {
+                    return true;
+                }
+            }
+        }
+
+        return false;
+    }
+
+    map(tagName: string): any {
+        return this.getElementsByTagName(tagName)[0];
+    }
+
+    mapGlobal(tagName: string): any {
+        return document.getElementsByTagName(tagName)[0];
+    }
+
+    waitFor(value: any, fn: Function) {
+        var interv = setInterval(() => {
+            if (value) {
+                clearInterval(interv);
+                fn();
+            }
+        }, 100);
+    }
+}

app/elements/app-root/app-root.less

@@ -0,0 +1,5 @@
+app-root {
+    width: 100%;
+    height: 100%;
+    display: block;
+}

app/elements/app-root/app-root.ts

@@ -0,0 +1,12 @@
+import { BaseElement } from "../_base";
+import './app-root.less';
+
+export class AppRoot extends BaseElement {
+    onInit(): void {
+        console.log("APP ROOT INIT");
+    }
+
+    onUpdate(): void {
+        console.log("APP ROOT UPDATE");
+    }
+}

app/elements/code-editor/code-editor.less

@@ -0,0 +1,5 @@
+monaco-editor {
+    width: 100%;
+    height: 100%;
+    display: block;
+}

app/elements/code-editor/code-editor.ts

@@ -0,0 +1,65 @@
+import { BaseElement } from "../_base";
+import './code-editor.less';
+import * as monaco from 'monaco-editor';
+import { OutputFrame } from "../output-frame/output-frame";
+import initScript from './injects/editor-init.txt';
+
+export class CodeEditor extends BaseElement {
+
+    public input: string = initScript;
+
+    onInit(): void {
+
+        
+        this.initWorkers();
+
+        var editor = monaco.editor.create(this, {
+            value: this.input,
+            language: 'javascript',
+            automaticLayout: true,
+            contextmenu: false,
+            minimap: {
+                enabled: false
+            }
+        });
+
+        editor.onDidChangeModelContent((e) => {
+            this.input = editor.getValue();
+            this.outputFrame.setScript(this.input);
+        });
+
+        this.waitFor(this.outputFrame, () => {
+            this.outputFrame.setScript(this.input);
+        });
+
+    }
+
+    initWorkers() {
+        // @ts-ignore
+        self.MonacoEnvironment = {
+            getWorkerUrl: function (moduleId: any, label: string) {
+                if (label === 'json') {
+                    return './json.worker.bundle.js';
+                }
+                if (label === 'css' || label === 'scss' || label === 'less') {
+                    return './css.worker.bundle.js';
+                }
+                if (label === 'html' || label === 'handlebars' || label === 'razor') {
+                    return './html.worker.bundle.js';
+                }
+                if (label === 'typescript' || label === 'javascript') {
+                    return './ts.worker.bundle.js';
+                }
+                return './editor.worker.bundle.js';
+            }
+        };
+    }
+
+    onUpdate(): void {
+        console.log("APP ROOT UPDATE");
+    }
+
+    get outputFrame(): OutputFrame {
+        return <OutputFrame>this.findSibling("output-frame");
+    }
+}

app/elements/code-editor/injects/editor-init.txt

@@ -0,0 +1 @@
+console.log("hello");

app/elements/notification-bubbles/notification-bubble.less

@@ -0,0 +1,32 @@
+notification-bubble {
+    margin: 10px;
+    padding: 10px;
+    color: black;
+    background-color: #a0ffa7;
+    display: block;
+    position: relative;
+    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.19);
+    border-radius: 4px;
+}
+
+notification-bubble.log {
+    background-color: #ffffff;
+}
+
+notification-bubble.info {
+    background-color: #e7e7b3;
+}
+
+notification-bubble.warn {
+    background-color: #fff9a0;
+}
+
+notification-bubble.error {
+    background-color: #ffa0a0;
+}
+
+notification-bubble.syntax-error {
+    background-color: #ff6262;
+    font-size: 22px;
+    padding: 30px;
+}

app/elements/notification-bubbles/notification-bubble.ts

@@ -0,0 +1,13 @@
+import { BaseElement } from "../_base";
+import './notification-bubble.less';
+
+export class NotificationBubble extends BaseElement {
+    onInit(): void {
+
+        if (!this.classList.contains("syntax-error")) {
+            setTimeout(() => {
+                this.parentElement?.removeChild(this);
+            }, 4000);
+        }
+    }
+}

app/elements/notification-bubbles/notification-bubbles.less

@@ -0,0 +1,8 @@
+notification-bubbles {
+    display: block;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    z-index: 9999;
+    width: 380px;
+}

app/elements/notification-bubbles/notification-bubbles.ts

@@ -0,0 +1,16 @@
+import { BaseElement } from "../_base";
+import { NotificationBubble } from "./notification-bubble";
+import './notification-bubbles.less';
+
+export class NotificationBubbles extends BaseElement {
+    add(text: string, type: 'log' | 'info' | 'warn' | 'error' | 'syntax-error') {
+        var bubble = <NotificationBubble>document.createElement("notification-bubble");
+        bubble.innerText = text;
+        bubble.classList.add(type);
+        this.appendChild(bubble);
+    }
+
+    reset() {
+        this.innerHTML = "";
+    }
+}

app/elements/output-frame/file.ts

@@ -0,0 +1,3 @@
+export function hello() {
+    
+}

app/elements/output-frame/injects/on-error.txt

@@ -0,0 +1,3 @@
+ window.onerror = function (error) {
+    parent.document.body.getElementsByTagName("notification-bubbles")[0].add(error, 'syntax-error');
+}

app/elements/output-frame/injects/try-catch.txt

@@ -0,0 +1,9 @@
+try {
+    setTimeout(() => {
+        [replace]
+    });
+    
+}
+catch (ex) {
+    parent.document.body.getElementsByTagName("notification-bubbles")[0].add(ex, 'syntax-error');
+}

app/elements/output-frame/injects/watch-console.txt

@@ -0,0 +1,24 @@
+// define a new console
+var console=(function(oldCons){
+    return {
+        log: function(text){
+            oldCons.log(text);
+            parent.document.body.getElementsByTagName("notification-bubbles")[0].add(text, 'log');
+        },
+        info: function (text) {
+            oldCons.info(text);
+            parent.document.body.getElementsByTagName("notification-bubbles")[0].add(text, 'info');
+        },
+        warn: function (text) {
+            oldCons.warn(text);
+            parent.document.body.getElementsByTagName("notification-bubbles")[0].add(text, 'warn');
+        },
+        error: function (text) {
+            oldCons.error(text);
+            parent.document.body.getElementsByTagName("notification-bubbles")[0].add(text, 'error');
+        }
+    };
+}(window.console));
+
+//Then redefine the old console
+window.console = console;

app/elements/output-frame/injects/window-stop.txt

@@ -0,0 +1,4 @@
+setTimeout(() => {
+    window.stop();
+    console.log("window stopped");
+}, 4 * 1000);

app/elements/output-frame/output-frame.less

@@ -0,0 +1,12 @@
+output-frame {
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+
+output-frame > iframe {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border: none;
+}

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

@@ -0,0 +1,68 @@
+import { BaseElement } from "../_base";
+import './output-frame.less';
+import watchConsole from './injects/watch-console.txt';
+import tryCatch from './injects/try-catch.txt';
+import onError from './injects/on-error.txt';
+import windowStopScript from './injects/window-stop.txt';
+import { NotificationBubbles } from "../notification-bubbles/notification-bubbles";
+
+export class OutputFrame extends BaseElement {
+    public Iframe: HTMLIFrameElement | null = null;
+    private watchConsoleScript: string;
+
+    constructor() {
+        super();
+        this.watchConsoleScript = watchConsole;
+    }
+
+    onInit(): void {
+        this.reset();
+    }
+
+    onUpdate(): void {
+    }
+
+    reset() {
+        if (this.Iframe && this.hasChild(this.Iframe)) {
+            this.removeChild(this.Iframe);
+        }
+
+        this.Iframe = document.createElement("iframe");
+        this.Iframe.setAttribute("sandbox", "allow-pointer-lock allow-same-origin allow-scripts");
+
+        this.appendChild(this.Iframe);
+
+        var bubbles = <NotificationBubbles>this.find("notification-bubbles");
+        bubbles.reset();
+        
+        this.setInitScript(windowStopScript);
+        this.setInitScript(onError);
+        this.setInitScript(watchConsole);
+    }
+
+    preventInfiniteLoop(value: string) {
+        return value.replace("while (true)", "while (false)");
+    }
+
+    private setInitScript(value: string) {
+        var script: HTMLScriptElement = document.createElement("script");
+        script.setAttribute("async", "");
+        script.innerHTML = this.preventInfiniteLoop(value);
+
+        this.Iframe?.contentWindow?.document.body.appendChild(script);
+    }
+
+    setScript(value: string) {
+        this.reset();
+
+        var script: HTMLScriptElement = document.createElement("script");
+        script.setAttribute("async", "");
+        script.innerHTML = this.preventInfiniteLoop(value);
+
+        this.Iframe?.contentWindow?.document.body.appendChild(script);
+    }
+
+    surroundTryCatch(value: string) {
+        return tryCatch.replace("[replace]", value);
+    }
+}