JonAbrams

// Also works for normal methods
class User {
  constructor (first, last) {
    this.firstName = first;
    this.lastName = last;
  }
}

Object.defineProperty(User.prototype, 'name', {
  get: function () { 

JonAbrams

.menu {
  overflow: hidden;
}

/* Enable scroll on hover */
.menu:hover {
  overflow: auto;
}

/* Enable scroll on focus */

JonAbrams

.menu {
  overflow: hidden;
}

/* Enable scroll on hover OR focus */
.menu:hover, .menu:focus-within {
  overflow: auto;
}

JonAbrams

/* Applies to all input elements that are being focused */
input:focus {
  border-color: blue;
}

/* Applies to all buttons that are hovered over */
button:hover {
  border-color: red;
}

JonAbrams

/* 
   Applies to any element that has 
   mydiv as a class OR myotherdiv as an id
 */
.mydiv, #myotherdiv {
  background-color: red;
}

JonAbrams

import { subscribe } from 'spaceace';

import { renderApp } from './renderApp';
import { rootSpace } from './rootSpace';
          
renderApp(rootSpace);

subscribe(rootSpace, ({ newSpace }) => {
  // executed whenever rootSpace is updated
  // rootSpace is immutable, newSpace is the updated version

JonAbrams

const handleRemove = ({ merge, space }, itemToBeRemoved) => {
  merge({ 
    items: space.items.filter(item => item !== itemToBeRemoved)
  });
};

export const ShoppingCart = ({ space }) => (
  <div>
    <ul>
      {space.items.map(item => (

JonAbrams

import { fetchPizza } from '../apiCalls';

/* 
  handleSubmit is a custom action.
  The first parameter is provided by SpaceAce.
  The remaining parameters are passed-through
  which in this case consists of React's event object
*/
const handleSubmit = async ({ space, merge }, event) => {
  event.preventDefault();

JonAbrams

export const PizzaForm = ({ space }) => (
  <form>
    <label>Name</label>
    <input 
      type="text" 
      value={space.name || ''} 
      onChange={space('name')} // Whenever user types, `space.name` is updated
    />
    <label>Do you like pizza?</label>
    <input

JonAbrams

import Space, { subscribe } from 'spaceace';

const space = new Space({
    appName: "SpaceAce demoe",
    user: { name: 'Jon', level: 9001 }
});

subscribe(space, ({ newSpace, causedBy }) => {
  console.log(`State updated by ${causedBy}`);
  ReactDOM.render(