View gist:7edaa3545f8fd11a1919
// Also works for normal methods | |
class User { | |
constructor (first, last) { | |
this.firstName = first; | |
this.lastName = last; | |
} | |
} | |
Object.defineProperty(User.prototype, 'name', { | |
get: function () { |
View gist:9f9f8a98444b250f20e2164da39b4223
.menu { | |
overflow: hidden; | |
} | |
/* Enable scroll on hover */ | |
.menu:hover { | |
overflow: auto; | |
} | |
/* Enable scroll on focus */ |
View gist:2c243edd52e720c6b6641ea1a62a8264
.menu { | |
overflow: hidden; | |
} | |
/* Enable scroll on hover OR focus */ | |
.menu:hover, .menu:focus-within { | |
overflow: auto; | |
} |
View gist:1bdabf8ae3dc2d132056f1b09cd1c603
/* 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; | |
} |
View gist:ee68c4cdf76e51bec724046750427f09
/* | |
Applies to any element that has | |
mydiv as a class OR myotherdiv as an id | |
*/ | |
.mydiv, #myotherdiv { | |
background-color: red; | |
} |
View index.js
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 |
View SpaceAce-subSpaces.jsx
const handleRemove = ({ merge, space }, itemToBeRemoved) => { | |
merge({ | |
items: space.items.filter(item => item !== itemToBeRemoved) | |
}); | |
}; | |
export const ShoppingCart = ({ space }) => ( | |
<div> | |
<ul> | |
{space.items.map(item => ( |
View SpaceAce-customActions.jsx
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(); |
View SpaceAce-handler.jsx
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 |
View SpaceAce-subscribe.js
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( |
NewerOlder