JSFiddle - React, Tailwind, and code Playground

by jlgrall

HTML

<script src="https://raw.githubusercontent.com/domvm/domvm/master/dist/dev/domvm.dev.min.js"></script>
<script src="https://raw.githubusercontent.com/jlgrall/domvm-mobx/master/domvm-mobx.js"></script>

JavaScript

var el = domvm.defineElement,
    vw = domvm.defineView,
    observer = domvm.mobxObserver,  // The observer() function.
    observable = mobx.observable,
    action = mobx.action;

// Use synchronous redraws to follow changes in realtime:
domvm.config({ syncRedraw: true });

var appState = observable({
    users: [
        {name: "Dave", car: "BMW"},
        {name: "Johnny", car: false},
        {name: "Sarah", car: "Toyota"},
        {name: "Peter", car: "Volkswagen"},
    ],
    // A mobx computed value (automatically caches and recomputes its result):
    get usersWithCar() {
        return this.users.filter(user => user.car !== false);
    },
    // Set to true to display only users with a car in the user interface:
    filterCar: false,
});


var App = observer({
    init: function(vm) {
        // To limit the number of displayed users in the user interface.
        // We create a new boxed observable so that render() can react to its changes.
        // The boxed observable is initialized with the value 0:
        vm.limitResults = observable.box(0);
    },
    onToggleLimit: action(function(e, node, vm) {
        console.log("Toggle list limit:", vm.limitResults.get() === 0);
        vm.limitResults.set(vm.limitResults.get() > 0 ? 0 : 2);
    }),
    toggleFilterUnavailable: action(function() {
        console.log("Set filter users with car:", appState.filterCar);
        appState.filterCar = !appState.filterCar;
    }),
    setName: action(function(name) {
        console.log("Set name of first user to:", name);
        appState.users[0].name = name;
    }),
    setCar: action(function(car) {
        console.log("Set car of first user to:", car);
        appState.users[0].car = car;
    }),
    render: function(vm, state) {
        console.log("Render: App");
        return el("div", [
            el("span", "Toggle: "),
            el("button", {onclick: [App.toggleFilterUnavailable]}, "Filter users with car"),
            el("button", {onclick:...