Create React Native Compatible Build

[technoplato]

Looks like party kit has an explicit non react native dependency (to be expected, no worries), but the author indicates the issue was closed in mid August. [1]

[1] partykit/partykit#232

[technoplato]

Didn't realize the error provided instructions. 🤦

Trying them now

First, run:
  \`\`\`
  npm install event-target-shim
  \`\`\`
  Then, add this in your code:
  \`\`\`
  import {Event, EventTarget} from 'event-target-shim';
  if(!globalThis.Event) {
    globalThis.Event = Event;
  }
  if(!globalThis.EventTarget) {
    globalThis.EventTarget = EventTarget;
  }
  \`\`\

[technoplato]

Naive approach client side in my (expo) React Native app did not work.

But the logs verify the shim appears to be setup properly client side:

 LOG  [Function Event]
 LOG  [Function EventTarget]
 LOG  [Function Event]
 LOG  [Function EventTarget]

[technoplato]

Too distracted to modify the docs but here's the code for addressing this from a mobile app:

/**
 * Ensures that the necessary event shims are loaded.
 *
 * Required to use Stately Sky on React Native.
 *
 * MUST to be called at the top level of the app BEFORE `useStatelyActor` is invoked.
 * You MUST prevent any component that uses the `useState hook from being mounted before this is called.
 *
 * Required via Stately Sky -> PartySocket
 * - https://github.com/statelyai/sky/blob/main/packages/sky-core/src/actorFromStately.ts#L1
 * - Related issue from Party Kit explaining need for event-target-shim: https://github.com/partykit/partykit/issues/232
 *
 * @return {boolean} The value indicating whether the event shims are set or not.
 */
/**
 * Install `event-target-shim`
 */
import {Event, EventTarget} from 'event-target-shim';
export const useEnsureEventShimsAreLoaded = () => {
  const [shimIsSet, setShimIsSet] = React.useState(
    [globalThis.Event, globalThis.EventTarget].every(
      requiredGlobal => requiredGlobal !== undefined,
    ),
  );

  useEffect(() => {
    if (shimIsSet) {
      return;
    }

    if (!globalThis.Event) {
      globalThis.Event = Event;
    }

    if (!globalThis.EventTarget) {
      globalThis.EventTarget = EventTarget;
    }

    if (!globalThis.EventTarget || !globalThis.Event) {
      throw new Error(
        'Event Target or Event not set properly and everything is gonna suck',
      );
    }
    setShimIsSet(true);
  }, [shimIsSet]);

  return shimIsSet;
};

NOTE that the app will crash if that hook does not return true and you attempt to invoke useStatelyActor

[technoplato]

gif or it didn't happen