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 / 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 / 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 / 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 / tracked-mobx.js
Created March 30, 2017 06:32
tracked-mobx.js
/**
Shitty implementation of tracked compatible local component state library powered by MobX
Demo: https://jsfiddle.net/mweststrate/Ltmhe3rh/
@example
class Example extends Component {
// initialize state.count with a value:
@tracked count = 1000;
@mweststrate
mweststrate / mst1.js
Last active July 27, 2017 09:46
import { types } from 'mobx-state-tree'
export const Todo = types.model(
'Todo',
{
title: types.string,
finished: false,
},
{
toggle() {
@mweststrate
mweststrate / mst2.js
Created July 27, 2017 09:47
import { getSnapshot } from 'mobx-state-tree'
const task1 = Todo.create({ title: "Try MST!" })
task1.toggle()
console.dir(getSnapshot(task1))
// prints { title: "Try MST!" , finished: true }
@mweststrate
mweststrate / middleware.js
Last active September 25, 2017 15:07
Patch based middleware for atomic actions
import { recordPatches } from "mobx-state-tree"
const runningActions = new Map()
export function atomicAsyncPatch(call, next) {
switch (call.type) {
case "action":
return atomic(call, next)
case "process_spawn": {
const recorder = recordPatches(call.tree)
@mweststrate
mweststrate / producer.js
Created January 9, 2018 08:09
immer-producer-1
import produce from "immer"
const nextState = produce(currentState, draft => {
// empty function
})
console.log(nextState === currentState) // true
@mweststrate
mweststrate / producer.js
Created January 9, 2018 08:19
immer-producer-2
import produce from "immer"
const todos = [ /* 2 todo objects in here */ ]
const nextTodos = produce(todos, draft => {
draft.push({ text: "learn immer", done: true })
draft[1].done = true
})
// old state is unmodified
@mweststrate
mweststrate / redux.js
Created January 9, 2018 08:28
immer-producer-3
// Shortened, based on: https://github.com/reactjs/redux/blob/master/examples/shopping-cart/src/reducers/products.js
const byId = (state, action) => {
switch (action.type) {
case RECEIVE_PRODUCTS:
return {
...state,
...action.products.reduce((obj, product) => {
obj[product.id] = product
return obj
}, {})