David Khourshid davidkpiano

https://spectrum.chat/statecharts/general/when-to-use-react-state-and-when-to-use-xstate-context~e32d06e2-3389-4228-9fa9-e5df745871e6
https://twitter.com/mpocock1/status/1345083512173555712
https://twitter.com/tannerlinsley/status/1345085887026106368
https://css-tricks.com/using-react-and-xstate-to-build-a-sign-in-form/
In the wild! Where are you using XState
Elm: How do we feel about state machines?
[Things I wish I knew about state management when I started writing React apps](https://news.ycombinator.

Tradeoffs in value-derived types in TypeScript

Many of the more "advanced" typescript features can be used for creating "value-derived" types.

At its simplest form:

let vehicle = { name: "Van", wheels: 4 }

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

Use ESM yourself. (preferred)
Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
Stay on the existing version of the package until you can move to ESM.

Orthogonal Connectors

This algorithm returns the points that form an orthogonal path between two rectangles.

How to Use

// Define shapes
const shapeA = {left: 50,  top: 50, width: 100, height: 100};
const shapeB = {left: 200, top: 200, width: 50, height: 100};

user-package-stats

I was poking around trying to figure out all the packages I have access to publish and got curious. So I write this little script to determine the download stats for all the packages I have publish access to.

Feel free to try it yourself. Just change the username passed to getUserDownloadStats.

By default, the stats are sorted by their average daily downloads (descending). That should give you an idea of the most "popular" package of a given user relative to how long that package has been around.

You can use it with npx like so:

	import Component from '@glimmer/component';
	import { inject as service } from '@ember/service';

	export default class extends Component {
	@service('job-state') jobState;
	}

	// Simplistic (probably most common) approach.
	//
	// This approach assumes either that:
	// 1) passive effects are always run asynchronously, after paint, or
	// 2) passive effects never attach handlers for bubbling events
	//
	// If both of the above are wrong (as can be the case) then problems might occur!
	useEffect(() => {
	const handleDocumentClick = (event: MouseEvent) => {
	// It's possible that a "click" event rendered the component with this effect,

	import { shallowReactive, watchEffect } from '@vue/composition-api'
	import { Interpreter, EventObject, Typestate, Actor, State } from 'xstate'

	export function useActor<
	TContext,
	TEvent extends EventObject,
	TTypestate extends Typestate<TContext> = { value: any; context: TContext }
	>(
	service:
	\| Actor<TContext, TEvent>

	---
	to: src/lib/machines/<%= name %>/<%= name %>Events.ts
	---
	import { <%= Name %>Event } from "./<%= name %>Types";

	/**
	* Event creator for an {@link InitEvent}
	*/
	export function init(message: string): <%= Name %>Event {
	return {

	const parseStates = (states, arr) => {
	for (let index in states) {
	let statename = states[index].id;

	if (undefined == statename) {
	statename = index;
	}

	if (states[index].states) {
	arr.push(statename + " { ");