Vite plugin for transforming async methods into MobX flows

[khokm]

Is there an existing Vite plugin or an officially recommended approach for transforming regular async methods using await into MobX flow generators at build time?

I'd like to write MobX stores using standard async/await syntax while retaining the automatic action handling provided by flow, without manually using runInAction after each await.

For example, I'd like to write:

class UserStore {
  user = null;

  constructor() {
    makeAutoObservable(this);
  }

  async loadUser(id: string) {
    this.user = await api.getUser(id);
  }
}

And have it transformed at build time into an equivalent MobX flow, so that state modifications after asynchronous operations are properly handled as actions.

I'm aware of Babel-based approaches, such as mobx-deep-action, and TypeScript transformers such as ts-transform-async-to-mobx-flow. However, I'm specifically interested in a solution that integrates with Vite and works with TypeScript in both development and production builds.

I'd prefer a compile-time transformation over manually wrapping asynchronous updates in runInAction, as the latter adds boilerplate and degrades the developer experience.

Thanks!

[kubk]

Hi @khokm that's an interesting idea! We're building an official plugin to convert all the React components into observers that also allows MobX to co-exist with the React Compiler: #3874 (comment)

Sounds like there might be even more use-cases for the plugin

[dgesteves]

Nothing official yet, but this works today with a small Babel plugin. makeAutoObservable already infers generator methods as flow, so the transform only has to rewrite async/await to */yield. Note that @vitejs/plugin-react 6 removed its babel option, so in Vite 8 Babel plugins go through @rolldown/plugin-babel.

npm i -D @rolldown/plugin-babel @babel/core

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import babel from '@rolldown/plugin-babel'
import mobxAsyncFlow from './mobx-async-flow.js'

export default defineConfig({
  plugins: [
    react(),
    babel({
      presets: [{
        preset: () => ({ plugins: [mobxAsyncFlow] }),
        // only files that mention MobX go through Babel
        rolldown: { filter: { code: /makeAutoObservable|@flow\b/ } },
      }],
    }),
  ],
})

// mobx-async-flow.js
// Turns `async m() { await x }` into `*m() { yield x }`, which MobX runs as a flow.
// Only for classes calling makeAutoObservable(this) (minus keys in its overrides) and @flow methods.
export default function mobxAsyncFlow({ types: t }) {
  const skipFns = { Function(p) { p.skip() } }
  return {
    name: 'mobx-async-flow',
    manipulateOptions(_, parserOpts) { parserOpts.plugins.push('decorators', 'decoratorAutoAccessors') },
    visitor: {
      Class(cls) {
        let auto = false
        const overridden = new Set()
        cls.traverse({ CallExpression({ node }) {
          const [self, overrides] = node.arguments
          if (!t.isIdentifier(node.callee, { name: 'makeAutoObservable' }) || !t.isThisExpression(self)) return
          auto = true
          for (const p of overrides?.properties ?? []) overridden.add(p.key?.name ?? p.key?.value)
        } })
        for (const m of cls.get('body.body')) {
          if (!m.isClassMethod({ kind: 'method', async: true }) || overridden.has(m.node.key.name)) continue
          if (!auto && !m.node.decorators?.some((d) => t.isIdentifier(d.expression, { name: 'flow' }))) continue
          let forAwait = false
          m.traverse({ ...skipFns, ForOfStatement(p) { forAwait ||= p.node.await } })
          if (forAwait) continue
          m.node.async = false
          m.node.generator = true
          m.traverse({ ...skipFns, AwaitExpression(p) { p.replaceWith(t.yieldExpression(p.node.argument)) } })
        }
      },
    },
  }
}

I tested it with your UserStore unchanged plus configure({ enforceActions: "always" }), on Vite 8.3.4, Vitest 5.0.4, @babel/core 8.0.7 and MobX 7.0.6 (Vitest and builds also on 6.16.1). Without the plugin, the strict-mode warning fires after the await in Vitest, on the dev server and in a NODE_ENV=development vite build. With it there's no warning in any of them, isFlow(store.loadUser) is true (also in the minified prod build), return values and thrown errors behave as before, and dev source maps still point at the await line.

Caveats:

• It's my code, not a maintained package. Nothing existing covers your case: mobx-deep-action points to babel-plugin-mobx-async-action, which crashes on Babel 8 (its 2019 fork only handles action()/@action-wrapped functions). ts-transform-async-to-mobx-flow needs a marker decorator and typescript <= 6, because the TS 7 package doesn't expose the compiler API it uses.
• It only touches methods of classes that call makeAutoObservable(this), and skips any listed in its overrides. Async arrow fields, await inside nested callbacks and for await loops are left alone.
• Keep the code filter. In a synthetic 600-module build, running Babel on every .ts file took it from ~0.5 s to ~1.8 s.
• With decorators: Vite 8 needs @babel/plugin-proposal-decorators for Stage 3 decorators anyway (migration guide). List it after mobxAsyncFlow, widen the filter to match your decorated files, and write @flow async loadUser(). That type-checks on MobX 7 but not with the 6.x typings.

Without any tooling: write loadUser as a generator (*loadUser), which is inferred as flow (wrap calls in flowResult for types), or use runInAction after the await. autoBind: true doesn't help, since post-await writes still warn.

[kubk]

@dgesteves Thanks for sharing this. yes, it should basically work. MobX will ship an official plugin that covers more than makeAutoObservable - it also handles makeObservable and stage 3 decorators. We also plan to support other build tools, including React Native, so it won't be Vite-only