JSFiddle - React, Tailwind, and code Playground

by Graham Dixon

Babel + JSX

/**
 * Copyright (c) 2018 Graham Dixon
 * All rights reserved. (MIT Licensed)
 *
 * Explicit/Mutablejs - Mutate objects naturally and watch for changes in outside context using ES6 Proxy(s) (see webpack.config.js for polyfill)
 *
 * @package      Explicit/MutableHistroyHandler [mutablejs/src/mutableHistoryHandler]
 * @author       Graham Dixon <[email protected]>
 * @copyright    Copyright (c) 2018, GDixon
 * @license      MIT
 */

'use strict';

// box primitve values inside a class
class Primitive {

    constructor(value) {
        this.set(value);
    }

    set(value) {
        // dumb object to hold the typw and value
        this.type = typeof value;
        this.value = value;

        return this.value;
    }

    toString() {

        return this.value;
    }

    toJSON() {

        return this.value;
    }
};

// attempting to use primitive class to box primitives allowing for call-by-ref at all levels
class TestHandler {

    constructor(value, key) {
        this.target = value;
        this.key = key;
        // associate handler counter against top level proto
        this.target.__proto__.handlers = (typeof this.target.__proto__.handlers == "undefined" ? 0 : this.target.__proto__.handlers + 1);
    }

    declarePrimitves(obj) {
        // ensure the object isnt already a primitive
        const objIsPrimitive = (obj instanceof Primitive);
        // if the obj is an object
        if (typeof obj == "object" && !objIsPrimitive) {
            // itterate as keys (obj/array)
            Object.keys(obj).forEach((k) => {
                // check if obj[key] is a primitive
                const objKIsPrimitive = (obj instanceof Primitive);
                // if obj[key] isnt a primitive but is an object
                if (typeof obj[k] === "object" && !objKIsPrimitive) {
                    // check the next layer
                    obj[k] = this.declarePrimitves(obj[k]);
                } else if (obj[k] && !objKIsPrimitive) {
               ...