Skip to content

Commit 40d3de5

Browse files
committed
Add info about default internal transitions to the migration guide
1 parent f8ba2ce commit 40d3de5

File tree

1 file changed

+125
-0
lines changed

1 file changed

+125
-0
lines changed

versioned_docs/version-5/migration.mdx

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -649,6 +649,131 @@ const machine = createMachine({
649649
</TabItem>
650650
</Tabs>
651651

652+
### Transitions are internal by default, not external
653+
654+
:::breakingchange
655+
656+
Breaking change
657+
658+
:::
659+
660+
All transitions are implicitly internal. This change is relevant for transitions defined on compound state nodes with `entry` or `exit` actions, invoked actors or delayed transitions (`after`). If you relied on implicit re-entering of a compound state node, use `reenter: true`:
661+
662+
<Tabs>
663+
<TabItem value="v5" label="XState v5 beta">
664+
665+
```ts
666+
//
667+
const machine = createMachine(
668+
{
669+
// ...
670+
states: {
671+
compoundState: {
672+
entry: 'someAction',
673+
on: {
674+
someEvent: {
675+
target: 'compoundState.childState',
676+
reenter: true, // make it external explicitly!
677+
},
678+
},
679+
initial: 'childState',
680+
states: {
681+
childState: {},
682+
},
683+
},
684+
},
685+
},
686+
)
687+
```
688+
689+
</TabItem>
690+
691+
<TabItem value="v4" label="XState v4">
692+
693+
```ts
694+
// ❌ DEPRECATED
695+
const machine = createMachine(
696+
{
697+
// ...
698+
states: {
699+
compoundState: {
700+
entry: 'someAction',
701+
on: {
702+
someEvent: {
703+
// implicitly external
704+
target: 'compoundState.childState', // non-relative target
705+
},
706+
},
707+
initial: 'childState',
708+
states: {
709+
childState: {},
710+
},
711+
},
712+
},
713+
},
714+
)
715+
```
716+
717+
</TabItem>
718+
</Tabs>
719+
720+
<Tabs>
721+
<TabItem value="v5" label="XState v5 beta">
722+
723+
```ts
724+
//
725+
const machine = createMachine(
726+
{
727+
// ...
728+
states: {
729+
compoundState: {
730+
after: {
731+
1000: {
732+
target: 'compoundState.childState',
733+
reenter: true, // make it external explicitly!
734+
}
735+
},
736+
initial: 'childState',
737+
states: {
738+
childState: {},
739+
},
740+
},
741+
},
742+
},
743+
)
744+
```
745+
746+
</TabItem>
747+
748+
<TabItem value="v4" label="XState v4">
749+
750+
```ts
751+
// ❌ DEPRECATED
752+
const machine = createMachine(
753+
{
754+
// ...
755+
states: {
756+
compoundState: {
757+
after: {
758+
1000: {
759+
// implicitly external
760+
target: 'compoundState.childState', // non-relative target
761+
}
762+
},
763+
initial: 'childState',
764+
states: {
765+
childState: {},
766+
},
767+
},
768+
},
769+
},
770+
)
771+
```
772+
773+
</TabItem>
774+
</Tabs>
775+
776+
652777
### Use `stateIn()` to validate state transitions, not `in`
653778

654779
:::breakingchange

0 commit comments

Comments
 (0)