Skip to content

Instantly share code, notes, and snippets.

View davidkpiano's full-sized avatar
🎹
Working on XState Dev Tools

David Khourshid davidkpiano

🎹
Working on XState Dev Tools
View GitHub Profile
@chris-sev
chris-sev / setup.sh
Last active February 13, 2025 23:49
Mac Setup
# how to run this thingy
# create a file on your mac called setup.sh
# run it from terminal with: sh setup.sh
# heavily inspired by https://twitter.com/damcclean
# https://github.com/damcclean/dotfiles/blob/master/install.sh
# faster dock hiding/showing (run in terminal)
# defaults write com.apple.dock autohide-delay -float 0; defaults write com.apple.dock autohide-time-modifier -int 0;killall Dock
@Spiralis
Spiralis / XState Handball Match Machine.js
Last active April 10, 2019 20:39
A simplified XState statecharts state-machine for running a handball game. Typically used with a control app for the match officials. Note: There are still parts missing in this sample, like disciplinary actions (2 min, yellow and red cards), as well as who made the goals, and adjusting the match-clock (adjusting the data on the fly). But, it is…
// Available variables:
// Machine (machine factory function)
// XState (all XState exports)
function pad(n, width) {
var n = n + "";
return n.length >= width ? n : new Array(width - n.length + 1).join("0") + n;
}
function displayTime(ticksInSecs) {
@tomraithel
tomraithel / munchkin-statechart.js
Last active April 10, 2019 20:40
Statechart for munchkin rules
// Copy-Paste this Chart into the visualizer: https://statecharts.github.io/xstate-viz/
// Available variables:
// Machine (machine factory function)
// XState (all XState exports)
const { assign } = XState.actions;
const fightStates = {
initial: "fightOrRun",
@GoNZooo
GoNZooo / text.ts
Created December 24, 2018 21:48
Phantom type variant in TypeScript
interface PlainText extends String {
__plaintext__: never
}
interface Base64Encoded extends String {
__base64Encoded__: never
}
interface Encrypted extends String {
__encrypted__: never
}
// Available variables:
// Machine (machine factory function)
// XState (all XState exports)
const {sendParent} = XState.actions
const geoMachine = Machine({
id: "geolocation",
initial: "check_geolocation_api",

Strings

String.prototype.*

None of the string methods modify this – they always return fresh strings.

  • charAt(pos: number): string ES1

    Returns the character at index pos, as a string (JavaScript does not have a datatype for characters). str[i] is equivalent to str.charAt(i) and more concise (caveat: may not work on old engines).

@notoriousb1t
notoriousb1t / 1. simple.js
Last active March 15, 2018 13:40
Just Animate 3 (API ideas)
/**
* This shortcut function returns a timeline that you could build upon.
* a single value is assumed to be the end value
* this autoplays as it is intended to be fire and forget
*/
JA.to('.target', 800, { opacity: 0 })
@SaraVieira
SaraVieira / gist file.md
Last active December 5, 2023 11:59
The Origin of Furries

In this talk we will be all discussing the origin of the furry fandom. How we will thogheter create a new furry-in-js framework. We will going over how they have changed the current fandom world, our hearts and the js world in 5 very awesome minutes! This talk is to prove a point that stars mean nothing in this case.

https://reactiveconf.com/

@appsforartists
appsforartists / MyComponent.tsx
Last active July 19, 2018 20:16
Snippets showing how to use -webkit-canvas to make a paint worklet work in Safari
/** @license
* Copyright 2016 - 2017 Google LLC. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License"); you may not
* use this file except in compliance with the License. You may obtain a copy
* of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software

I'm wondering if it would be useful to provide a way to have guards be kept out of the state machine, to keep it all "pure function".

The way I thought it might work would be to add a parameter to the transition to specify the value of any guards. The guards would always be optional, but would of course influence the outcome. Here's a machine with a named guard (I use 'guard' instead of 'cond' because I like statechart terminology better than scxml):

m = Machine({
  foo: {
    on: {
      A: bar,
      B: {