added two apps, and better implementation

2022-03-22 18:20:26 +01:00
parent bb44e0e92d
commit 33b3f2e5cc
47 changed files with 486 additions and 151 deletions
@@ -0,0 +1,11 @@
+html, body {
+    margin: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+body {
+    font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
+    padding: 10px;
+}
@@ -0,0 +1,22 @@
+import './app.less';
+import bootHtml from './app.html';
+import { watchConsole } from './injects/watch-console';
+import { setOnErrorListener } from './injects/on-error';
+import { createScript } from '../shared/create-script';
+import { messageListener } from '../shared/message-listener';
+import { postMessage, postResponseMessage } from '../shared/post-message';
+
+
+document.body.innerHTML += bootHtml;
+watchConsole((type, value) => {
+    postMessage(parent, type, value);
+});
+messageListener((type, value, id) => {
+    if (type == "script") {
+        createScript(value);
+        postResponseMessage(parent, id, value);
+    }
+});
+setOnErrorListener((type, value) => {
+    postMessage(parent, type, value);
+});
@@ -0,0 +1,7 @@
+import { NotificationBubbles } from "../../codeeditor-app/elements/notification-bubbles/notification-bubbles";
+
+export function setOnErrorListener(fn: (type: 'syntax-error', value: any) => void) {
+    window.onerror = function (error) {
+        fn('syntax-error', error);
+    }
+}
@@ -0,0 +1,12 @@
+import { NotificationBubbles } from "../../codeeditor-app/elements/notification-bubbles/notification-bubbles";
+
+export function tryCatch(fn: Function) {
+    try {
+        fn();
+    }
+    catch (err) {
+        var bubbles = <NotificationBubbles>parent.document.body.getElementsByTagName("notification-bubbles")[0];
+        //@ts-ignore
+        bubbles.add(err, 'syntax-error');
+    }
+}
@@ -0,0 +1,28 @@
+import { NotificationBubbles } from "../../codeeditor-app/elements/notification-bubbles/notification-bubbles";
+
+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) {
+                oldCons.log(text);
+                fn('log', text);
+            },
+            info: function (text: any) {
+                oldCons.info(text);
+                fn('info', text);
+            },
+            warn: function (text: any) {
+                oldCons.warn(text);
+                fn('warn', text);
+            },
+            error: function (text: any) {
+                oldCons.error(text);
+                fn('error', text);
+            }
+        };
+    }(window.console));
+
+    //Then redefine the old console
+    window.console = console;
+}
@@ -0,0 +1,4 @@
+setTimeout(() => {
+    window.stop();
+    console.log("window stopped");
+}, 4 * 1000);
@@ -0,0 +1,36 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" id="master-viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <title>output error</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: 22px;
+            text-align: center;
+        }
+
+        small {
+            font-size: 0.6em;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="center">
+        took too long to run?<br />
+        <small>why you infinite loopin?</small>
+    </div>
+</body>
+
+</html>
@@ -0,0 +1,16 @@
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" id="master-viewport"
+        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <title>output</title>
+    <base href="/" />
+    
+</head>
+
+<body>
+    <script type="text/javascript" src="/output.frame.bundle.js?v=1"></script>
+</body>
+
+</html>