erikras

Prompt

Write a sit-com pilot where a React developer, a Vue developer, and a Svelte developer live together in tiny Parisian apartment.

Result

Title: Code Roommates

Scene: A tiny Parisian apartment with three developers - Pierre (React), Jacques (Vue), and Marcel (Svelte) - sharing the space. They are all sitting on the couch, surrounded by computers and other tech gear.

erikras

import { assign, createMachine } from 'xstate'

export default /** @xstate-layout N4IgpgJg5mDOIC5QCUwEMDGAXABAYQHsBbABwIDsxzdBkAhwAkCCBrWHAMQBsCB3AOgCyBAK7VIfVOQhgATpADEABRkESbPAAs05GIlBlYASyyGKekAA9EAWgAsAdgAMfewGYAnK9e3XARgBs7v6OrgA0IACeNvYATPZ8tgAcMX7BjgH+9r4AvtnhqJi4hKQUVLQMTKwc3PxColjiktJyEPIAylhoDfhaOmDmBsam5OZWCHb+iXzuvgCsvr6J7rY+7u724VHj-r7u0zGJib5uwa7+B7n56Nj4xGSU1Dh0jCxsXLyCImIQElTNCoQxBYir1dEgQIMTGZwWM7PYpnEVolzjFbLNXEdNjZ5lMfPYso5-LZHGtZjFLiACjdivcyk8Kq9qh86t95ABVchEL5YAYEIxQkYwxD2WZ8SaxWKuRwxYJJXxY7Zk6azFU7HZJFX2XJ5EDkAjSeDgqlFO6lR7PSpvGqfeqNP6ySC8-nDUY2A6uaZHEW+Ry+1zo1wbSLRGIxBIHI7pUNrGUU423EoPcovKrvWrcx3gyEuoXjWbSviIpIotEY+XB8aJeYJZKpX0ZLJx64mxN0i2MtN8Dlc20QJ1DaGgMa2fx8ZFSvy+Ym+QOzWwK6yzI58RxkxyJJKuGJT3ZNwoJ2nmhmpmr9gWuvMywv2JEl9GYivWIK+GspUMi-xz-za7JAA */
createMachine(
  {
    description: 'made by @erikras',
    initial: 'Mounted',
    context: {
      props: {},
      state: {},

erikras

import { createMachine } from 'xstate'

export default /** @xstate-layout N4IgpgJg5mDOIC5QCUwEMDGAXABAYQHsBbABwIDsxysA6AWQIFdrIBiAVXKKesVDNgBLLIIp8QAD0QBaAIwAGAGw0ALAE4AHPICsigMxrFi+RqMAaEAE8ZAJhsaaAdm0qVsmyb12bamwF8-C1RMXEJSCipaBmYsNgA5MAB3HAAFACcCEngkEAFhUXJxKQRpNxsaeVk9FUc1Xz09DTttC2sS-WUG9wbtbUdXWUcAoPRsfGIySmp6HliIVgBlMFwFrDRY8TyRMRzi2SqaRTVHE3t+tS7HVplFDxofBUUVDQ1ZC5tZYZBgsbDJyJmMTYADECGkMGAcOwSBB1mBNgQhNtCrsZAp5DRZC4zvI9I4DPtriVtC8aGoVDZtLImoZHI4ngFAiByAQIHBxD9QhMItNoiwIDRUOQ2WlIAikQUijJapj8U19iSVLpZCoidI9L0KvJ5EqdQTNEovpzxuEplFZmKcltJaiSio9MpKtVavVGs01S8MV07I4fJoLiojaMuaaAZxuECIOL8jtQHs8WT5fI7KY3eYrLYsU4XColIZFNofP4mca-jysNHkVK7cYKlUanUbA0mpS1XUvXp3DZatVc7JFIy-EA */
createMachine({
  description: 'made by @erikras',
  initial: 'Mounted',
  states: {
    Mounted: {
      entry: [
        'constructor',

erikras

function selectTask(taskId: string) {
  // This is okay, but it might require refactoring if the taskId type ever changes
}

function selectTask(taskId: Task['id']) {
  // Much better. We don't care what type the taskId is.
}

erikras

  // Available variables:
  // - Machine
  // - interpret
  // - assign
  // - send
  // - sendParent
  // - spawn
  // - raise
  // - actions

erikras

ReScript

type event = Increment | Decrement

export type transition = (. event) => unit

export createTestMachine = (. transition: transition) => {
  // Return a function that calls the transition (contrived, I know)
  let doTransition = (event:event) => transition(. event)

erikras

  const memeMachine = Machine({
    id: 'meme',
    initial: 'stateMachines',
    states: {
      stateMachines: {
        on: {
          NO_IDEA_WHAT_THEY_ARE: 'stateMachines',
          OMG_THEYRE_EVERYWHERE: 'howDoesThisMemeWork'
        }
      },

erikras

const jobsMachine = Machine({
  id: 'jobs',
  initial: 'loading',
  context: {},
  states: {
    loading: {
      invoke: {
        id: 'loadJobs',
        onDone: { target: 'idle', actions: 'writeDataToContext' },
      },

erikras

  const government = Machine({
    id: 'USA 🇺🇸',
    initial: 'Trump',
    states: {
      Trump: {
        on: {
          INAUGURATION: 'Biden'
        }
      },
      Biden: {

erikras

const machine = Machine({
  id: 'labelEditing',
  initial: 'idle',
  context: {x:400,y:400},
  states: {
    idle: {
      on: {
        ADD_LAYER: {
          target: 'selection',
          actions: 'addLayer',