using ink with valtio

[chrisdrackett]

I'm trying to use ink with valtio (https://github.com/pmndrs/valtio) and so far haven't had any luck. Ink just isn't rendering when state updates. Here is a minimal example:

https://replit.com/@chrisdrackett/ink-valtio-test?v=1

and the same thing in react-dom:

https://codesandbox.io/s/hardcore-shirley-3yq42m?file=/src/App.tsx

[airjp73]

I've run into the same issue, but using xstate instead.

I think the issue is actually in the use-sync-external-store shim used by both xstate and valtio. That shim has a server and client version, and since ink is running outside the browser, it uses the server version. That just returns the initial state.

Hopefully this will be fixed when ink adds React 18 support?

There are a couple workarounds I've found:

1. Subscribe directly to the external store. I haven't used valtio personally, but I'm sure theres a similar API you can use.

const { rerender } = render(<ComponentWithXstate />);
xstateService.onTransition(() => rerender(<ComponentWithXstate />);

2. Shim window.document.createElement.

// This is the entry file to your whole CLI

const noOp = () => {
  throw new Error("This is just a shim -- it shouldn't be called");
};

(globalThis as any).window = {
  // Tricks use-sync-external-store into using the client shim
  // instead of the server shim
  document: { createElement: noOp },

  // Surpresses a warning about needing to polyfill these
  requestAnimationFrame: noOp,
  cancelAnimationFrame: noOp,
};

// Might need to use require if you're using CommonJS
// I'm using ES modules in my project so this is what I'm doing.
import("./real-entry-file");

[vadimdemedes]

Great stuff debugging this, because I've other other similar issues like #539, which might be related.

I don't think I'd want to fake a global.window in Ink, since that's beyond the scope of what Ink does. I think this could be a userland package that would enable using Valtio together with Ink.