Michel Weststrate mweststrate

💭

I may be slow to respond.

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 / 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 / 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 {

mweststrate / onStopDrag.ts

Created August 31, 2018 17:56

No concurrency

	onStopDrag = (id, { dx, dy }) => {
	// we capture this outside the propose closure!
	const baseBox = this.client.currentState.boxes.find(b => b.id === id);
	this.client.propose(draft => {
	const box = draft.boxes.find(b => b.id === id);
	if (box.x !== baseBox.x \|\| box.y !== baseBox.y)
	throw "Somebody else already dragged this box!";
	box.x += dx;
	box.y += dy;
	});

mweststrate / server.ts

Last active August 31, 2018 16:06

Server

mweststrate / onReceive.ts

Last active August 31, 2018 17:44

Rebase actions after receiving changes by the server

	onReceive(change: Change) {
	this.confirmedState = {
	id: change.changeId,
	state: applyPatches(this.confirmedState.state, change.patches)
	};
	// reapply all the pending actions, filter out the ones that can't be applied anymore
	const { pendingActions } = this;
	// reset the pending changes collection. We will fill it again by replaying all actions.
	this.pendingActions = [];
	this.currentState = this.confirmedState.state;

mweststrate / distributeFirstChange.ts

Created August 31, 2018 12:56

Sending changes to the server

	async distributeFirstChange() {
	const p = this.pendingActions[0];
	const response = await this.server.propose(this, {
	base: this.confirmedState.id,
	patches: p.patches,
	changeId: p.id
	});
	if (response === "NOPE") {
	console.warn(this.name + ": Change rejected; outdated");
	// we keep the actions for now, and we will try to replay them after receiving the next change

mweststrate / Client-state.ts

Last active August 31, 2018 12:50

Client state

	interface PendingAction {
	id: string;
	fn: (draft: any) => void;
	patches: Patch[];
	}

	export class Client {
	pendingActions: PendingAction[] = [];
	confirmedState!: {
	id: string;

mweststrate / onStopDrag.js

Last active August 31, 2018 15:54

	onStopDrag = (id, { dx, dy }) => {
	// dx and dy are captured in the closure!
	this.client.propose(draft => {
	const box = draft.boxes.find(b => b.id === id);
	box.x += dx;
	box.y += dy;
	if (box.x < 0 \|\| box.x > 400 \|\| box.y < 0 \|\| box.y > 400)
	// throwing here is safe; as original state will be untouched.
	// This can happen when actions are being replayed
	throw "Invalid drop coordinates: " + JSON.stringify(box);

mweststrate / a_old-react-api.js

Last active July 21, 2018 13:33

React api difference

	// Example component: render the current value of a stream. Support switching streams during the lifecycle of the component
	// N.B. code is untested

	// Old:
	class RenderStream extends Component {
	subscription

	componentWillMount() {
	this.subscribeToStream(this.props.stream)
	}