console

[shiffman]

This github issue is for tracking discussion around how to implement a console for sketches. Users may ultimately still use developer consoles for advanced features, but something simple and basic that provides useful error messages and is interactive. @catarak pointed out that jsbin (http://jsbin.com/) has a console with features almost identical to what we are looking for. The code for that is open source and found here:

https://github.com/jsbin/jsbin

cc @toolness as I know we have had discussions about this as well as it relates to p5.js-widget.

[catarak]

I found this project the other day (https://github.com/openexchangerates/javascript-sandbox-console), which looks a lot cleaner than the jsbin console, but it hasn't been updated in two years. It works pretty well, except if you define a JS class.

[catarak]

Also going to link to the discussion about a JS console on the p5.js widget.

[therewasaguy]

I was talking with @catarak about this and I'd like to work on it. I can at least get the non-interactive console up and running.

I've forked the development branch and can hijack console messages from the iframe contentWindow like this: therewasaguy@229c44b

I am studying up on Redux so let me know if I'm missing something but I think these are the next steps:

• Send the hijacked console message as an Action
• Create a Reducer that can turn the original console message into something useful, and update the app's state via the Store
• Create a Console component that can display the reduced message

[toolness]

Go for it @therewasaguy! Unfortunately I'm only familiar with React, not Redux, so can't offer any advice on that, but let me know if you need help with anything else!

[therewasaguy]

Just an update:

I pulled in the upstream changes, which update the iframe content via srcdoc. I played around with it a bit and it seems like the hijackConsole approach I started is not going to work with srcdoc. The iframe restores the console each time srcdoc changes, so we need to override it each time to hijack the console messages. I can still override it, but I can't get the event timing right. Here's what I've tried so far:

• add a load event listener to iframe, and hijackConsole at that point. This works, but it doesn't catch any console messages that take place before the iframe has finished loading, including during setup().
• other event listeners like loadstart readystatechange, domcontentloaded don't seem to fire when changing the iframe's srcdoc.
• Mutation Observer on srcdoc, that was fun and pointless.

I will be able to get this to work by injecting a script directly into the srcdoc that would send console messages to the parent window via postMessage. Hopefully that sounds like a good approach?

[catarak]

I can also not use srcdoc. I decided to do that rather than add all of the scripts and css files using document.write because @MathuraMG was trying to add a p5 interceptor to add a shadow dom, and couldn't get it to work that way. Though I'm not sure it works with srcdoc. @MathuraMG could you test this?

CodePen actually uses that approach for their console. Here's the script that they inject into each page, which might be helpful, but it's minified:

! function() {
    function n() {
        l(), t()
    }
    function t() {
        window.addEventListener("message", a, !0)
    }
    function e(n) {
        var t;
        try {
            t = {}.toString.call(n)
        } catch (e) {
            t = "[object Object]"
        }
        return t
    }
    function o(n, t) {
        for (var e = n.length; e--;) if (n[e] === t) return !0;
        return !1
    }
    function r(n) {
        return !!(n && "object" == typeof n && "nodeType" in n && 1 === n.nodeType && n.outerHTML)
    }
    function c(n, t) {
        return n.toLowerCase() < t.toLowerCase() ? -1 : 1
    }
    function i(n) {
        if (null === n || "undefined" == typeof n) return 1;
        var t, o = e(n);
        if ("[object Number]" === o || "[object Boolean]" === o || "[object String]" === o) return 1;
        if ("[object Function]" === o || "[object global]" === o) return 2;
        if ("[object Object]" === o) {
            var r = Object.keys(n);
            for (t = 0; t < r.length; t++) {
                var c = n[r[t]];
                if (i = {}.toString.call(c), "[object Function]" === i || "[object Object]" === i || "[object Array]" === i) return 2
            }
            return 1
        }
        if ("[object Array]" === o) {
            for (t = 0; t < n.length; t++) {
                var c = n[t],
                    i = {}.toString.call(c);
                if ("[object Function]" === i || "[object Object]" === i || "[object Array]" === i) return 2
            }
            return 1
        }
        return 2
    }
    function u(n, t, o) {
        var r, i, l = "",
            a = [];
        if (o = o || "", t = t || [], null === n) return "null";
        if ("undefined" == typeof n) return "undefined";
        if (l = e(n), "[object Object]" == l && (l = "Object"), "[object Number]" == l) return "" + n;
        if ("[object Boolean]" == l) return n ? "true" : "false";
        if ("[object Function]" == l) return n.toString().split("\n  ").join("\n" + o);
        if ("[object String]" == l) return '"' + n.replace(/"/g, "'") + '"';
        for (i = 0; i < t.length; i++) if (n === t[i]) return "[circular " + l.slice(1) + ("outerHTML" in n ? " :\n" + n.outerHTML.split("\n").join("\n" + o) : "");
        if (t.push(n), "[object Array]" == l) {
            for (r = 0; r < n.length; r++) a.push(u(n[r], t));
            return "[" + a.join(", ") + "]"
        }
        if (l.match(/Array/)) return l;
        var f = l + " ",
            s = o + "  ";
        if (o.length / 2 < 2) {
            var b = [];
            try {
                for (r in n) b.push(r)
            } catch (j) {}
            for (b.sort(c), r = 0; r < b.length; r++) try {
                a.push(s + b[r] + ": " + u(n[b[r]], t, s))
            } catch (j) {}
        }
        return a.length ? f + "{\n" + a.join(",\n") + "\n" + o + "}" : f + "{}"
    }
    function l() {
        if (window.console) for (var n = 0; n < f.length; n++)! function() {
            var t = f[n];
            window.console[t] && (window.console[t] = function() {
                for (var n = [].slice.call(arguments), e = [], o = [], c = 0; c < n.length; c++) r(n[c]) ? (o.push(u(n[c].outerHTML)), e.push(1)) : (o.push(u(n[c])), e.push(i(n[c])));
                b.postMessage(["console", {
                    "function": t,
                    arguments: o,
                    complexity: Math.max.apply(null, e)
                }], "*"), this.apply(console, n)
            }.bind(console[t]))
        }()
    }
    function a(n) {
        var t = n.data;
        if ("object" == typeof t && "command" === t.type) {
            try {
                var e = window.eval(t.command)
            } catch (r) {
                return void console.error(r.message)
            }
            if (.30000000000000004 === e) return void console.log("I love JavaScript too.");
            if (o(s, t.command)) return void console.log("Plz no WATS.");
            console.log(e)
        }
    }
    var f = ["log", "error", "warn", "info", "debug", "table", "time", "timeEnd", "count", "clear"],
        s = ["({} + [])", "({} + []);", "({} + [])", "({} + []);", "{} + {}", "{} + {};", "({} + {})", "({} + {});", "[] == []", "[] == [];", "[] == ![]", "[] == ![];", "[] + []", "[] + [];"],
        b = window.parent;
    n()
}();

[catarak]

Also, getting the postMessage communication would be nice if eventually we want the iframe to render from another domain, i.e. S3. This might be sooner rather than later given that I'm going to add media uploads pretty soon, and with cross origin stuff that will only work if everything is on S3 unless I can come up with some workaround.

[therewasaguy]

awesome, glad postMessage sounds like the right approach! I'll keep goin with it

[MathuraMG]

@catarak I tried including the p5Interceptor using srcdoc - it works perfectly!
Code here

[catarak]

Awesome! As for srcdoc incompatibilities, I'm using srcdoc-polyfill to get it to work on Edge and IE.

[lmccart]

hey @therewasaguy are you still working on this? if not I will take a crack at it..

[therewasaguy]

@lmccart feel free, thanks for checking but I'm sorry to say I haven't made any updates since July