Fix Transition events order

package.json

@@ -10,14 +10,15 @@
     "packages/*"
   ],
   "scripts": {
+    "core": "yarn workspace @headlessui/core",
     "react": "yarn workspace @headlessui/react",
     "react-playground": "yarn workspace playground-react dev",
     "playground-react": "yarn workspace playground-react dev",
     "vue": "yarn workspace @headlessui/vue",
     "playground-vue": "yarn workspace playground-vue dev",
     "vue-playground": "yarn workspace playground-vue dev",
     "clean": "yarn workspaces run clean",
-    "build": "npm-run-all -p 'react build' 'vue build'",
+    "build": "npm-run-all -p 'core build' 'react build' 'vue build'",
     "test": "./scripts/test.sh",
     "lint": "./scripts/lint.sh",
     "lint-check": "CI=true ./scripts/lint.sh"

packages/@headlessui-core/build/index.cjs

@@ -0,0 +1,7 @@
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./headlessui.prod.cjs')
+} else {
+  module.exports = require('./headlessui.dev.cjs')
+}

packages/@headlessui-core/jest.config.cjs

@@ -0,0 +1,2 @@
+let create = require('../../jest/create-jest-config.cjs')
+module.exports = create(__dirname, { displayName: ' Vue ' })

packages/@headlessui-core/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@headlessui/core",
+  "version": "1.6.4",
+  "description": "A set of internal, shared utilities used by Headless UI",
+  "main": "dist/index.cjs",
+  "typings": "dist/index.d.ts",
+  "module": "dist/headlessui.esm.js",
+  "license": "MIT",
+  "files": [
+    "README.md",
+    "dist"
+  ],
+  "exports": {
+    "import": "./dist/headlessui.esm.js",
+    "require": "./dist/index.cjs",
+    "types": "./dist/index.d.ts"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "engines": {
+    "node": ">=10"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tailwindlabs/headlessui.git",
+    "directory": "packages/@headlessui-core"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepublishOnly": "npm run build",
+    "build": "../../scripts/build.sh",
+    "watch": "../../scripts/watch.sh",
+    "test": "../../scripts/test.sh",
+    "lint": "../../scripts/lint.sh",
+    "clean": "rimraf ./dist"
+  }
+}

packages/@headlessui-core/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./utils/machine";
+export * from "./transition/state";

packages/@headlessui-core/src/transition/state.test.ts

@@ -0,0 +1,307 @@
+import { createTransitionMachine, TransitionMachine } from './state'
+
+it('entering', () => {
+  let root = createTestMachine('root')
+
+  expect(root.description).toEqual('container:idle, self:idle, children:idle')
+
+  root.send('enter')
+
+  expect(root.description).toEqual('container:entering, self:idle, children:idle')
+
+  root.send('start')
+
+  expect(root.description).toEqual('container:entering, self:running, children:idle')
+
+  root.send('stop')
+
+  expect(root.description).toEqual('container:done, self:idle, children:idle')
+
+  expect(logs).toEqual([
+    "root event: enter",
+    "root action: start",
+    "root state: idle,idle,idle -> entering,idle,idle",
+    "root event: start",
+    "root state: entering,idle,idle -> entering,running,idle",
+    "root event: stop",
+    "root action: stop",
+    "root state: entering,running,idle -> done,idle,idle",
+  ])
+})
+
+it('leaving', () => {
+  let root = createTestMachine('root')
+
+  expect(root.description).toEqual('container:idle, self:idle, children:idle')
+
+  root.send('leave')
+
+  expect(root.description).toEqual('container:leaving, self:idle, children:idle')
+
+  root.send('start')
+
+  expect(root.description).toEqual('container:leaving, self:running, children:idle')
+
+  root.send('stop')
+
+  expect(root.description).toEqual('container:done, self:idle, children:idle')
+
+  expect(logs).toEqual([
+    "root event: leave",
+    "root action: start",
+    "root state: idle,idle,idle -> leaving,idle,idle",
+    "root event: start",
+    "root state: leaving,idle,idle -> leaving,running,idle",
+    "root event: stop",
+    "root action: stop",
+    "root state: leaving,running,idle -> done,idle,idle",
+  ])
+})
+
+it('entering with children', () => {
+  let root = createTestMachine('root')
+  let child1 = createTestMachine('child-1')
+
+  root.add(child1)
+
+  expect(root.description).toEqual('container:idle, self:idle, children:idle')
+
+  root.send('enter')
+  child1.send('enter')
+
+  expect(root.description).toEqual('container:entering, self:idle, children:idle')
+
+  root.send('start')
+
+  expect(root.description).toEqual('container:entering, self:running, children:idle')
+
+  root.send('stop')
+
+  expect(root.description).toEqual('container:entering, self:waiting_for_children, children:idle')
+
+  child1.send('start')
+
+  expect(root.description).toEqual('container:entering, self:waiting_for_children, children:all_running')
+
+  child1.send('stop')
+
+  expect(root.description).toEqual('container:done, self:idle, children:idle')
+
+  expect(logs).toEqual([
+    "root event: #child.add child-1",
+    "child-1 event: #child.become root",
+    "root event: enter",
+    "root state: idle,idle,idle -> entering,idle,idle",
+    "child-1 event: enter",
+    "child-1 action: start",
+    "child-1 state: idle,idle,idle -> entering,idle,idle",
+    "root event: start",
+    "root state: entering,idle,idle -> entering,running,idle",
+    "root event: stop",
+    "root state: entering,running,idle -> entering,waiting_for_children,idle",
+    "child-1 event: start",
+    "root event: #child.start",
+    "root action: start",
+    "root state: entering,waiting_for_children,idle -> entering,waiting_for_children,all_running",
+    "child-1 state: entering,idle,idle -> entering,running,idle",
+    "child-1 event: stop",
+    "child-1 action: stop",
+    "root event: #child.stop",
+    "root action: stop",
+    "root state: entering,waiting_for_children,all_running -> done,idle,idle",
+    "root action: stop",
+    "child-1 state: entering,running,idle -> done,idle,idle",
+  ])
+})
+
+it('leaving with children', () => {
+  let root = createTestMachine('root')
+  let child1 = createTestMachine('child-1')
+
+  root.add(child1)
+
+  expect(root.description).toEqual('container:idle, self:idle, children:idle')
+
+  root.send('leave')
+  child1.send('leave')
+
+  expect(root.description).toEqual('container:leaving, self:idle, children:idle')
+
+  root.send('start')
+
+  expect(root.description).toEqual('container:leaving, self:running, children:idle')
+
+  child1.send('start')
+
+  expect(root.description).toEqual('container:leaving, self:running, children:all_running')
+
+  child1.send('stop')
+
+  expect(root.description).toEqual('container:leaving, self:running, children:waiting_for_self')
+
+  root.send('stop')
+
+  expect(root.description).toEqual('container:done, self:idle, children:idle')
+})
+
+it('leaving with children added while waiting for other children', () => {
+  let root = createTestMachine('root')
+  let child1 = createTestMachine('child-1')
+  let child2 = createTestMachine('child-2')
+
+  root.add(child1)
+
+  expect(root.description).toEqual('container:idle, self:idle, children:idle')
+
+  root.send('leave')
+  child1.send('leave')
+  child2.send('leave')
+
+  expect(root.description).toEqual('container:leaving, self:idle, children:idle')
+
+  root.send('start')
+
+  expect(root.description).toEqual('container:leaving, self:running, children:idle')
+
+  child1.send('start')
+
+  root.add(child2)
+
+  child1.send('stop')
+
+  expect(root.description).toEqual('container:leaving, self:running, children:all_running')
+
+  child2.send('start')
+  child2.send('stop')
+
+  expect(root.description).toEqual('container:leaving, self:running, children:waiting_for_self')
+
+  root.send('stop')
+
+  expect(root.description).toEqual('container:done, self:idle, children:idle')
+})
+
+it('waiting on nested children', () => {
+  let root = createTestMachine('root')
+  let child1 = createTestMachine('child-1')
+  let child11 = createTestMachine('child-1-1')
+
+  root.add(child1)
+  child1.add(child11)
+
+  expect(root.description).toEqual('container:idle, self:idle, children:idle')
+
+  root.send('leave')
+  child1.send('leave')
+  child11.send('leave')
+
+  expect(root.description).toEqual('container:leaving, self:idle, children:idle')
+
+  root.send('start')
+
+  expect(root.description).toEqual('container:leaving, self:running, children:idle')
+
+  child1.send('start')
+
+  expect(root.description).toEqual('container:leaving, self:running, children:all_running')
+
+  child11.send('start')
+  child11.send('stop')
+
+  expect(root.description).toEqual('container:leaving, self:running, children:all_running')
+
+  child1.send('stop')
+
+  expect(root.description).toEqual('container:leaving, self:running, children:waiting_for_self')
+
+  root.send('stop')
+
+  expect(root.description).toEqual('container:done, self:idle, children:idle')
+})
+
+// Really we want to delay the sending of events right?
+// Or do we want to delay when the actions run…
+
+it('start events run in parent -> child order', () => {
+  let root = createTestMachine('root')
+  let child1 = createTestMachine('child-1')
+  let child2 = createTestMachine('child-2')
+
+  root.add(child1)
+  root.add(child2)
+
+  child1.send('enter')
+  child2.send('enter')
+  root.send('enter')
+
+  child1.send('start')
+  child1.send('stop')
+
+  root.send('start')
+  root.send('stop')
+
+  child2.send('start')
+  child2.send('stop')
+
+  console.log(logs)
+
+  expect(actions).toEqual([
+    "child-1: start",
+    "child-2: start",
+    "root: start",
+    "child-1: stop",
+    "child-2: stop",
+    "root: stop",
+  ])
+})
+
+//
+// Helpers
+//
+
+let logs: string[] = []
+let actions: string[] = []
+
+beforeEach(() => {
+  logs = []
+  actions = []
+})
+
+function createTestMachine(id: string) {
+  function log(message: string) {
+    logs.push(`${id} ${message}`)
+
+    if (message.includes('action:')) {
+      actions.push(`${id} ${message}`.replace(' action:', ':'))
+    }
+  }
+
+  let machine = createTransitionMachine(id, {
+    onStart: () => log(`action: start`),
+    onStop: () => log(`action: stop`),
+    onCancel: () => log(`action: cancel`),
+
+    onChange: (previous, current) =>
+      log(`state: ${previous.toString()} -> ${current.toString()}`.trim()),
+
+    onEvent: (event, payload) =>
+      log(`event: ${event} ${payload?.id ?? payload ?? ''}`.trim()),
+  })
+
+  Object.defineProperties(machine, {
+    id: { get: () => id },
+    logs: { get: () => [...logs] },
+    description: {
+      get: () =>
+        `container:${machine.state[0]}, self:${machine.state[1]}, children:${machine.state[2]}`,
+    },
+  })
+
+  interface TestMachine extends TransitionMachine {
+    readonly id: string
+    readonly logs: readonly string[]
+    readonly description: string
+  }
+
+  return machine as TestMachine
+}