Greg-Hitchon

import { entity } from 'durable-functions';
import { State, interpret } from 'xstate';
import { getMachine } from './machines';
import { updateEntity, waitForMachineToResolve } from '../Shared/utilities';

export default entity(async (context) => {
  let machine = getMachine(context);

  switch (context.df.operationName) {
    case 'send':

samwightt

/**
 * This is a small library I wrote when I was doing R&D work and needed a way to communicate
 * between an iFrame on the same domain and its parent tab. The existing browser API kinda sucked
 * and had a lot of issues, and it wasn't particularly enjoyable to use. So I made this small library to solve that.
 * 
 * The library allows you to communicate using *channels*, which are just streams of events with a given name.
 * You can subscribe to events of a particular type. Each event type has its own event queue, and each subscriber
 * must subscribe to a particular event type. This keeps things simple and fast.
 *
 * Events are buffered and sent asychronously. There are two ways to send events: firing and blocking.

jbranchaud

• 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.

huyphamily

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

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

bvaughn

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

jamiebuilds

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 }

AleksejDix

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>

sindresorhus

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:

1. 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.
2. If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
3. Stay on the existing version of the package until you can move to ESM.

jbeast

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

brandonortiz

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 + " { ");