add to git

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+prod_dist
+dev_dist
+prod-dist
+dev-dist

.vscode/launch.json

@@ -0,0 +1,26 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [        
+        {
+            "command": "npm install",
+            "name": "1. Install NPM packages (first time only)",
+            "request": "launch",
+            "type": "node-terminal"
+        },
+        {
+            "command": "npm run server",
+            "name": "2. Start server (w. hot)",
+            "request": "launch",
+            "type": "node-terminal"
+        },
+        {
+            "command": "npm run production",
+            "name": "3. Build for production",
+            "request": "launch",
+            "type": "node-terminal"
+        },
+    ]
+}

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);
+    }
+}

package.json

@@ -0,0 +1,46 @@
+{
+  "version": "0.0.3",
+  "name": "webpackapp",
+  "description": "webpack app",
+  "license": "0BSD",
+  "repository": {},
+  "scripts": {
+    "webpack": "webpack --config webpack.dev.js",
+    "dev": "webpack --config webpack.dev.js",
+    "server": "webpack-dev-server --port 8020 --open --config webpack.dev.js",
+    "production": "webpack --config webpack.prod.js"
+  },
+  "dependencies": {
+  },
+  "devDependencies": {
+		"monaco-editor-core": "0.33.0",
+    "monaco-editor": "^0.33.0",
+    "@types/node": "17.0.21",
+    "@babel/core": "7.17.8",
+    "@webcomponents/custom-elements": "1.5.0",
+    "babel-loader": "8.2.3",
+    "babel-plugin-transform-custom-element-classes": "0.1.0",
+    "babel-preset-env": "1.7.0",
+    "copy-webpack-plugin": "^10.2.4",
+    "css-loader": "6.7.1",
+    "extract-text-webpack-plugin": "3.0.2",
+    "file-loader": "6.2.0",
+    "gulp": "4.0.2",
+    "html-loader": "3.1.0",
+    "less": "4.1.2",
+    "less-loader": "10.2.0",
+    "npm": "8.5.5",
+    "open": "8.4.0",
+    "path": "0.12.7",
+    "replace-in-file-webpack-plugin": "1.0.6",
+    "style-loader": "3.3.1",
+    "ts-loader": "9.2.8",
+    "typescript": "4.6.2",
+    "webpack": "5.70.0",
+    "webpack-cli": "4.9.2",
+    "webpack-dev-server": "4.7.4",
+    "webpack-merge": "5.8.0",
+    "raw-loader": "4.0.2",
+    "monaco-editor-webpack-plugin": "7.0.1"
+  }
+}

static/Web.config

@@ -0,0 +1,24 @@
+<!--web.config url rewrite-->
+<configuration> 
+  <system.webServer>
+      <rewrite>
+          <rules>
+              <rule name="Redirect to https" stopProcessing="true">
+                    <match url=".*" />
+                    <conditions>
+                        <add input="{HTTPS}" pattern="off" ignoreCase="true" />
+                    </conditions>
+                    <action type="Redirect" url="https://{HTTP_HOST}{REQUEST_URI}" redirectType="Permanent" appendQueryString="false" />
+              </rule>
+              <rule name="Redirect To Index" stopProcessing="true">
+                  <match url=".*" />
+                  <conditions>
+                      <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
+                      <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
+                  </conditions>
+                  <action type="Rewrite" url="/index.html" />
+              </rule>
+          </rules>
+      </rewrite>
+  </system.webServer>
+</configuration>

static/index.html

@@ -0,0 +1,19 @@
+<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" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-title" content="Title">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <title>code editor</title>
+
+    <link rel="manifest" href="manifest.json?v=1">
+    <base href="/" />
+</head>
+
+<body>
+    <script type="text/javascript" src="/main.bundle.js?v=1"></script>
+</body>
+
+</html>

static/manifest.json

@@ -0,0 +1,16 @@
+{
+  "short_name": "ShortName",
+  "name": "AppName",
+  "icons": [
+    {
+      "src": "logo.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    }
+  ],
+  "display": "fullscreen",
+  "orientation": "portrait",
+  "background_color": "#252831",
+  "theme_color": "#0094ff",
+  "start_url": "/?webapp=true"
+}

tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {    
+    "target": "es6",
+    "sourceMap": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "skipDefaultLibCheck": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "lib": [ "es6", "dom" ],
+    "baseUrl": "./node_modules",
+    "types": [ ],
+    "allowJs": false,
+    "typeRoots": ["node_modules/@types"]
+  },
+  "exclude": [ 
+    "dev-dist", 
+    "prod-dist", 
+    "bin", 
+    "BuildScripts", 
+    "node_modules", 
+    "webpack.common.js", 
+    "webpack.dev.js", 
+    "webpack.prod.js"
+  ],
+  "atom": { "rewriteTsconfig": false }
+}

typings.d.ts

@@ -0,0 +1,15 @@
+declare module '*.html' {
+    const content: string;
+    export default content;
+}
+declare module '*.txt' {
+    const content: string;
+    export default content;
+}
+declare module '*inject.js' {
+    const content: string;
+    export default content;
+}
+
+declare module '*.png';
+declare module '*.jpg';

webpack.common.js

@@ -0,0 +1,42 @@
+const path = require('path');
+module.exports = {
+    entry: {
+        'main': path.resolve(__dirname, 'App', 'boot.ts'),
+        'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js',
+		'json.worker': 'monaco-editor/esm/vs/language/json/json.worker',
+		'css.worker': 'monaco-editor/esm/vs/language/css/css.worker',
+		'html.worker': 'monaco-editor/esm/vs/language/html/html.worker',
+		'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker'
+    },
+    resolve: {
+        extensions: [".ts", ".js", ".json"]
+    },
+    module: {
+        rules: [
+            {
+                test: /\.txt$/,
+                use: 'raw-loader'
+            },
+            {
+                //ts to js
+                test: /\.ts$/,
+                use: 'ts-loader'
+            },
+            {
+                //html to js
+                test: /\.html$/,
+                use: 'html-loader'
+            },
+            {
+                //css to js to inline style append
+                test: /\.css$/,
+                use: ['style-loader', 'css-loader']
+            },
+            {
+                //less to css to js to inline style append
+                test: /\.less$/,
+                use: ['style-loader', 'css-loader', 'less-loader']
+            }
+        ]
+    }
+};

webpack.dev.js

@@ -0,0 +1,35 @@
+const path = require('path');
+const { merge } = require('webpack-merge');
+const copyPlugin = require('copy-webpack-plugin');
+const common = require('./webpack.common.js');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+
+const devFolderName = "dev-dist";
+
+module.exports = merge(common, {
+    mode: 'development',
+    output: {
+        globalObject: 'self',
+		filename: '[name].bundle.js',
+        path: path.resolve(__dirname, devFolderName),
+        publicPath: "/"
+    },
+    devServer: {
+        static: {
+            directory: path.join(__dirname, devFolderName),
+        },
+        historyApiFallback: true
+    },
+    plugins: [
+        new copyPlugin(
+            {
+                patterns: [
+                    {
+                        from: path.resolve(__dirname, 'static'),
+                        to: path.resolve(__dirname, devFolderName, '[name][ext]')
+                    }
+                ]
+            }
+        )
+    ]
+});

webpack.prod.js

@@ -0,0 +1,53 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.common.js');
+const path = require('path');
+const ReplaceInFileWebpackPlugin = require('replace-in-file-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+
+const prodFolderName = "prod-dist";
+
+const replaceVersionInHtmlOption = {
+    //set ?v= with new date in html files for production
+    dir: path.join(__dirname, prodFolderName),
+    test: /\.html$/,
+    rules: [
+        {
+            search: /((\?|\&)v\=)(.+?)(?=\"|\'|\&)/ig,
+            replace: (match) => {
+                return match.toString().substr(0, 3) +
+                    +new Date();
+            }
+        }
+    ]
+};
+
+module.exports = merge(common, {
+    mode: "production",
+    output: {
+        path: path.resolve(__dirname, prodFolderName),
+        publicPath: "/",
+        filename: 'main.js'
+    },
+    plugins: [
+        new CopyWebpackPlugin(
+            {
+                patterns: [
+                    {
+                        from: path.resolve(__dirname, 'index.html'),
+                        to: path.resolve(__dirname, prodFolderName, '[name][ext]')
+                    },
+                    {
+                        from: path.resolve(__dirname, 'manifest.json'),
+                        to: path.resolve(__dirname, devFolderName, '[name][ext]')
+                    }
+                ]
+            }
+        ),
+        new ReplaceInFileWebpackPlugin(
+            [
+                replaceVersionInHtmlOption
+            ]
+        )
+    ]
+});