statelyai · Andarist · Feb 24, 2022 · Feb 24, 2022
diff --git a/.changeset/short-eels-cough.md b/.changeset/short-eels-cough.md
@@ -0,0 +1,10 @@
+---
+'xstate': patch
+'@xstate/graph': patch
+'@xstate/inspect': patch
+'@xstate/react': patch
+'@xstate/scxml': patch
+'@xstate/vue': patch
+---
+
+Fixed compatibility with Skypack by exporting some shared utilities from root entry of XState and consuming them directly in other packages (this avoids accessing those things using deep imports and thus it avoids creating those compatibility problems).
diff --git a/packages/core/src/State.ts b/packages/core/src/State.ts
@@ -16,7 +16,7 @@ import {
   SimpleEventsOf
 } from './types';
 import { EMPTY_ACTIVITY_MAP } from './constants';
-import { matchesState, keys, isString, warn } from './utils';
+import { matchesState, isString, warn } from './utils';
 import { StateNode } from './StateNode';
 import { getMeta, nextEvents } from './stateUtils';
 import { initEvent } from './actions';
@@ -40,8 +40,8 @@ export function stateValuesEqual(
     return a === b;
   }
 
-  const aKeys = keys(a as StateValueMap);
-  const bKeys = keys(b as StateValueMap);
+  const aKeys = Object.keys(a as StateValueMap);
+  const bKeys = Object.keys(b as StateValueMap);
 
   return (
     aKeys.length === bKeys.length &&
@@ -295,7 +295,7 @@ export class State<
     if (isString(stateValue)) {
       return [stateValue];
     }
-    const valueKeys = keys(stateValue);
+    const valueKeys = Object.keys(stateValue);
 
     return valueKeys.concat(
       ...valueKeys.map((key) =>

diff --git a/packages/core/src/StateNode.ts b/packages/core/src/StateNode.ts
@@ -10,7 +10,6 @@ import {
   mapFilterValues,
   nestedPath,
   toArray,
-  keys,
   isBuiltInEvent,
   partition,
   updateHistoryValue,
@@ -331,7 +330,7 @@ class StateNode<
       this.config.type ||
       (this.config.parallel
         ? 'parallel'
-        : this.config.states && keys(this.config.states).length
+        : this.config.states && Object.keys(this.config.states).length
         ? 'compound'
         : this.config.history
         ? 'history'
@@ -643,7 +642,7 @@ class StateNode<
           return { ...transition, event: eventType };
         })
       : flatten(
-          keys(afterConfig).map((delay, i) => {
+          Object.keys(afterConfig).map((delay, i) => {
             const configTransition = afterConfig[delay];
             const resolvedTransition = isString(configTransition)
               ? { target: configTransition }
@@ -707,7 +706,7 @@ class StateNode<
         : [this, this.states[stateValue]];
     }
 
-    const subStateKeys = keys(stateValue);
+    const subStateKeys = Object.keys(stateValue);
     const subStateNodes: Array<
       StateNode<
         TContext,
@@ -785,7 +784,7 @@ class StateNode<
     state: State<TContext, TEvent>,
     _event: SCXML.Event<TEvent>
   ): StateTransition<TContext, TEvent> | undefined {
-    const subStateKeys = keys(stateValue);
+    const subStateKeys = Object.keys(stateValue);
 
     const stateNode = this.getStateNode(subStateKeys[0]);
     const next = stateNode._transition(
@@ -807,7 +806,7 @@ class StateNode<
   ): StateTransition<TContext, TEvent> | undefined {
     const transitionMap: Record<string, StateTransition<TContext, TEvent>> = {};
 
-    for (const subStateKey of keys(stateValue)) {
+    for (const subStateKey of Object.keys(stateValue)) {
       const subStateValue = stateValue[subStateKey];
 
       if (!subStateValue) {
@@ -821,7 +820,7 @@ class StateNode<
       }
     }
 
-    const stateTransitions = keys(transitionMap).map(
+    const stateTransitions = Object.keys(transitionMap).map(
       (key) => transitionMap[key]
     );
     const enabledTransitions = flatten(
@@ -838,7 +837,7 @@ class StateNode<
     const entryNodes = flatten(stateTransitions.map((t) => t.entrySet));
 
     const configuration = flatten(
-      keys(transitionMap).map((key) => transitionMap[key].configuration)
+      Object.keys(transitionMap).map((key) => transitionMap[key].configuration)
     );
 
     return {
@@ -848,7 +847,7 @@ class StateNode<
       configuration,
       source: state,
       actions: flatten(
-        keys(transitionMap).map((key) => {
+        Object.keys(transitionMap).map((key) => {
           return transitionMap[key].actions;
         })
       )
@@ -865,7 +864,7 @@ class StateNode<
     }
 
     // hierarchical node
-    if (keys(stateValue).length === 1) {
+    if (Object.keys(stateValue).length === 1) {
       return this.transitionCompoundNode(stateValue, state, _event);
     }
 
@@ -976,7 +975,7 @@ class StateNode<
 
     const nodes: Array<StateNode<TContext, any, TEvent, any, any, any>> = [];
     let marker:
-      | StateNode<TContext, any, TEvent, any, any>
+      | StateNode<TContext, any, TEvent, any, any, any>
       | undefined = childStateNode;
 
     while (marker && marker !== this) {
@@ -1556,7 +1555,7 @@ class StateNode<
 
           return stateValue;
         }
-        if (!keys(stateValue).length) {
+        if (!Object.keys(stateValue).length) {
           return this.initialStateValue || {};
         }
 
@@ -1771,7 +1770,7 @@ class StateNode<
   private historyValue(
     relativeStateValue?: StateValue | undefined
   ): HistoryValue | undefined {
-    if (!keys(this.states).length) {
+    if (!Object.keys(this.states).length) {
       return undefined;
     }
 
@@ -1848,7 +1847,7 @@ class StateNode<
    */
   public get stateIds(): string[] {
     const childStateIds = flatten(
-      keys(this.states).map((stateKey) => {
+      Object.keys(this.states).map((stateKey) => {
         return this.states[stateKey].stateIds;
       })
     );
@@ -1866,7 +1865,7 @@ class StateNode<
     const events = new Set(this.ownEvents);
 
     if (states) {
-      for (const stateId of keys(states)) {
+      for (const stateId of Object.keys(states)) {
         const state = states[stateId];
         if (state.states) {
           for (const event of state.events) {
@@ -1994,7 +1993,7 @@ class StateNode<
       } = this.config.on;
 
       onConfig = flatten(
-        keys(strictTransitionConfigs)
+        Object.keys(strictTransitionConfigs)
           .map((key) => {
             if (!IS_PRODUCTION && key === NULL_EVENT) {
               warn(

diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -1,28 +1,28 @@
-import { matchesState } from './utils';
-import { mapState } from './mapState';
-import { StateNode } from './StateNode';
-import { State } from './State';
-import { Machine, createMachine } from './Machine';
-import { Actor, toActorRef } from './Actor';
 import * as actions from './actions';
+import { Actor, toActorRef } from './Actor';
 import {
   interpret,
   Interpreter,
-  spawn,
-  InterpreterStatus
+  InterpreterStatus,
+  spawn
 } from './interpreter';
+import { createMachine, Machine } from './Machine';
+import { mapState } from './mapState';
 import { matchState } from './match';
 import { createSchema, t } from './schema';
-
-const { assign, send, sendParent, sendUpdate, forwardTo, doneInvoke } = actions;
-
+import { State } from './State';
+import { StateNode } from './StateNode';
+export { spawnBehavior } from './behaviors';
+export { XStateDevInterface } from './devTools';
+export * from './typegenTypes';
+export * from './types';
+export { matchesState, toEventObject, toObserver, toSCXMLEvent } from './utils';
 export {
   Actor,
   toActorRef,
   Machine,
   StateNode,
   State,
-  matchesState,
   mapState,
   actions,
   assign,
@@ -41,8 +41,7 @@ export {
   t
 };
 
-export * from './types';
-export * from './typegenTypes';
+const { assign, send, sendParent, sendUpdate, forwardTo, doneInvoke } = actions;
 
 declare global {
   interface SymbolConstructor {

diff --git a/packages/core/src/interpreter.ts b/packages/core/src/interpreter.ts
@@ -44,7 +44,6 @@ import {
   isPromiseLike,
   mapContext,
   warn,
-  keys,
   isArray,
   isFunction,
   isString,
@@ -350,7 +349,7 @@ export class Interpreter<
     if (this.state.configuration && isDone) {
       // get final child state node
       const finalChildStateNode = state.configuration.find(
-        (sn) => sn.type === 'final' && sn.parent === this.machine
+        (sn) => sn.type === 'final' && sn.parent === (this.machine as any)
       );
 
       const doneData =
@@ -584,7 +583,7 @@ export class Interpreter<
     });
 
     // Cancel all delayed events
-    for (const key of keys(this.delayedEventsMap)) {
+    for (const key of Object.keys(this.delayedEventsMap)) {
       this.clock.clearTimeout(this.delayedEventsMap[key]);
     }
 

diff --git a/packages/core/src/mapState.ts b/packages/core/src/mapState.ts
@@ -1,12 +1,12 @@
-import { matchesState, keys } from './utils';
+import { matchesState } from './utils';
 
 export function mapState(
   stateMap: { [stateId: string]: any },
   stateId: string
 ) {
   let foundStateId;
 
-  for (const mappedStateId of keys(stateMap)) {
+  for (const mappedStateId of Object.keys(stateMap)) {
     if (
       matchesState(mappedStateId, stateId) &&
       (!foundStateId || stateId.length > foundStateId.length)

diff --git a/packages/core/src/scxml.ts b/packages/core/src/scxml.ts
@@ -8,7 +8,7 @@ import {
   ChooseCondition
 } from './types';
 import { AnyStateMachine, Machine } from './index';
-import { mapValues, keys, isString } from './utils';
+import { mapValues, isString } from './utils';
 import * as actions from './actions';
 
 function getAttribute(
@@ -102,7 +102,7 @@ const evaluateExecutableContent = <
   body: string
 ) => {
   const datamodel = context
-    ? keys(context)
+    ? Object.keys(context)
         .map((key) => `const ${key} = context['${key}'];`)
         .join('\n')
     : '';

diff --git a/packages/core/src/stateUtils.ts b/packages/core/src/stateUtils.ts
@@ -1,6 +1,6 @@
 import { EventObject, StateValue } from './types';
 import { StateNode } from './StateNode';
-import { keys, flatten } from './utils';
+import { flatten } from './utils';
 
 type Configuration<TC, TE extends EventObject> = Iterable<
   StateNode<TC, any, TE>
@@ -18,7 +18,7 @@ export const isLeafNode = (
 export function getChildren<TC, TE extends EventObject>(
   stateNode: StateNode<TC, any, TE>
 ): Array<StateNode<TC, any, TE>> {
-  return keys(stateNode.states).map((key) => stateNode.states[key]);
+  return Object.keys(stateNode.states).map((key) => stateNode.states[key]);
 }
 
 export function getAllStateNodes<TC, TE extends EventObject>(