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 / 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 / fixed.js
Last active January 17, 2023 16:45
circular-deps-4
// -- app.js --
import { AbstractNode } from './internal'
/* as is */
// -- internal.js --
export * from './AbstractNode'
export * from './Node'
export * from './Leaf'
@mweststrate
mweststrate / computed-views-with-args.js
Last active May 25, 2022 00:04
React AMA - Michel Weststrate / MobX
// Parameterized computed views:
// Create computed's and store them in a cache
import { observable, computed } from "mobx"
class Todos {
@observable todos = []
private todosByUserCache = new Map()
getAllTodosByUser(userId) {
@mweststrate
mweststrate / index.html
Created March 25, 2021 11:09
electron crash v2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
<h1>Hello World!</h1>
<!-- All of the Node.js APIs are available in this renderer process. -->
@mweststrate
mweststrate / profile.jsx
Last active September 13, 2020 08:08
mobx-example
class Person {
@observable firstName = "Michel";
@observable lastName = "Weststrate";
@observable nickName;
@computed get fullName() {
return this.firstName + " " + this.lastName;
}
}
@mweststrate
mweststrate / immer.js
Last active November 28, 2019 14:59
immer-producer-4
const byId = (state, action) =>
produce(state, draft => {
switch (action.type) {
case RECEIVE_PRODUCTS:
action.products.forEach(product => {
draft[product.id] = product
})
break
}
})
@mweststrate
mweststrate / gist:2789bd206a4e055581ab
Last active October 8, 2019 08:51
pure rendering over time using MOBservable
// The state of our app
var state = mobx.observable({
nrOfSeats : 500,
reservations : [],
seatsLeft : function() { return this.nrOfSeats - this.reservations.length; }
});
// The UI; a function that is applied to the state
var ui = mobx.computed(function() {
return "\n<div>Seats left: " + state.seatsLeft +
@mweststrate
mweststrate / city.js
Last active August 7, 2019 11:05
City.js
import { decorate, observable, flow, onBecomeObserved, onBecomeUnobserved } from 'mobx'
import { log } from './log'
const APPID = '<secret>'
export class City {
location
temperature
interval
@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 / action.js
Last active February 21, 2019 13:53
Decorator usage in mobx
// case 2: manipulates the value of the descriptor, returns fresh descriptor
class MyClass {
@action someMethod() {
}
}
function action(target, key, descriptor) {
const baseValue = descriptor.value
return {