Skip to content

Instantly share code, notes, and snippets.

View mweststrate's full-sized avatar
💭
I may be slow to respond.

Michel Weststrate mweststrate

💭
I may be slow to respond.
3.1k followers · 8 following
View GitHub Profile
@mweststrate
mweststrate / create-observables.ts
Last active November 18, 2016 20:28
MobX 3: creating observables
// Pseudo code proposal to give more fine grained control and cleaning up the way in which observables are constructed in MobX
// Strategies
Strategy.Reference = "Reference"
Strategy.Deep = "Deep"
Strategy.Shallow = "Shallow"
Strategy.Structure = "AsStructure"
// The essen of MobX: trackable boxed values:
@mweststrate
mweststrate / mobx-webcomponent.html
Last active January 22, 2024 08:25
MobX + webcomponents
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/mobx@2.6.0/lib/mobx.umd.js"></script>
<script>
var MobxDemo = Object.create(HTMLElement.prototype);
MobxDemo.attachedCallback = function() {
var state = mobx.observable({
counter : parseInt(this.getAttribute("counter"))
})
@mweststrate
mweststrate / di.js
Created September 24, 2016 09:11
Using context as dependency injection
// Theme stores the state of the current theme, and allows components to subscribe to future changes
class Theme {
constructor(color) {
this.color = color
this.subscriptions = []
}
setColor(color) {
this.color = color
this.subscriptions.forEach(f => f())
@mweststrate
mweststrate / perform-login.js
Created August 21, 2016 19:34
@action performLogin(username, password, callback) {
this.fetch(`/json/${username}-${password}.json`)
.then(user => {
this.currentUser = user
callback(true)
})
.catch(err => {
callback(false)
})
}
@mweststrate
mweststrate / document-shim.js
Created July 4, 2016 19:36 — forked from developit/document-shim.js
Minimal stand-in for a full DOM. Mocks out basic DOM 1 node and attribute manipulation.
var document = global.document = createDocument();
export default document;
function createDocument() {
const NODE_TYPES = {
ELEMENT_NODE: 1,
ATTRIBUTE_NODE: 2,
TEXT_NODE: 3,
CDATA_SECTION_NODE: 4,
ENTITY_REFERENCE_NODE: 5,
@mweststrate
mweststrate / mobx.js
Created June 15, 2016 19:20
Local component state with MobX
import {observable} from "mobx"
import {observer} from "mobx-react"
@observer class Select extends React.Component {
@observable selection = null; /* MobX managed instance state */
constructor(props, context) {
super(props, context)
this.selection = props.values[0]
}
@mweststrate
mweststrate / setstate.js
Last active June 15, 2016 19:20
Example where React.setState causes issues
class Select extends React.Component {
constructor(props, context) {
super(props, context)
this.state = {
selection: props.values[0]
};
}
render() {
return (
@mweststrate
mweststrate / intercept.js
Last active May 25, 2016 19:36
Intercept example
const theme = observable({
backgroundColor: "#ffffff"
})
intercept(theme, "backgroundColor", change => {
if (!change.newValue) {
// ignore attempts to unset the background color
return null;
}
if (change.newValue.length === 6) {
@mweststrate
mweststrate / action.js
Last active May 24, 2016 20:28
MobX store with actions
export class ContactStore {
@observable contacts = [];
@observable pendingRequestCount = 0;
@computed get isLoading() {
return this.pendingRequestCount > 0;
}
@action createRandomContact() {
this.pendingRequestCount++;
@mweststrate
mweststrate / typeswitcher.ts
Created April 14, 2016 14:01
(TypeScript) typeswitcher, like switch, but with constructor based cases and expressions with inferred types
/**
* Usage:
typeSwitch(someInstance, defaultvalue)
.when(MyClass, i => result)
.when(OtherClass, i => otherResult)
.get()
In the expressions, the type of the 'i' param should be inferred correctly, see the attribute default value checks
*/
export function typeSwitch<T, R>(instance: T, defaultValue?: R): TypeSwitcher<T, R> {