Library design is incompatible with Angular's build system

[joukevandermaas]

I am struggling to see how to ever integrate this library with Angular, because Angular's build system (based on esbuild) does not allow for arbitrary build steps like Babel.

If it is your goal to eventually integrate with Angular I think this deserves some consideration; at the moment it seems not really possible to use it even if you're willing to write your own signal integration.

Details

I installed warp-drive into my angular 21 app:

pnpm add -E @warp-drive/core@latest @warp-drive/json-api@latest

Then I created a little reactivity wrapper to use angular signals

angular impl

import { computed, signal, WritableSignal } from '@angular/core';
import { type HooksOptions, setupSignals, type SignalHooks } from '@warp-drive/core/configure';

/* eslint-disable @typescript-eslint/no-unused-vars */
export function buildSignalConfig(_options: HooksOptions): SignalHooks<WritableSignal<unknown>> {
  return {
    createSignal: (obj: object, key: string | symbol) => signal(null),
    consumeSignal: (value: WritableSignal<unknown>) => void value(),
    notifySignal: (value: WritableSignal<unknown>) => value.set(null),
    createMemo: <F>(object: object, key: string | symbol, fn: () => F): (() => F) => {
      const memo = computed<F>(fn);
      return () => memo();
    },
    willSyncFlushWatchers: () => false,
  };
}
/* eslint-enable @typescript-eslint/no-unused-vars */

setupSignals(buildSignalConfig);

However it never even gets to that point, because the app never starts. The first import already fails with this error:

Uncaught Error: this method is really implemented at compile time via a babel plugin. If you're seeing this exception, something went wrong
    Oops index.js:72
    getGlobalConfig4 index.js:56
    <anonymous> -private.js:17
index.js:72:9
    Oops index.js:72
    getGlobalConfig4 index.js:56
    <anonymous> -private.js:17

The instructions on the "advanced setup" page are not really applicable as the Angular build system does not integrate with Babel. So it doesn't seem possible to execute the macros. Looking into it more, it seems that the macros are just used to substitute some prod vs dev functions and to implement an alternative deprecation syntax. Both of these seem pretty trivial at first glance. Maybe you can consider providing an option that does not depend on babel.

[runspired]

are you saying angular has zero ability to run code transforms? I haven't looked at it yet but I'd find that surprising for something as mature as it is. For vite apps the easiest thing to do is to enable it to use rollup/rolldown instead of esbuild. So far the only framework I've found will be hard to support is svelte because they have no concept of libraries providing valid ESM.

[runspired]

best I can tell from the docs: it looks like angular exposes all of esbuild's capabilities and config, so a standard esbuild plugin that runs babel should be fine.

[joukevandermaas]

I will attempt that again but I must admit I'm not so experienced with all these modern JS build systems anymore. I did look into it as well for some time before making this issue but it seems to be heavily discouraged in the Angular community so you're kind of on your own to make it work. I suppose that's fixable with good documentation.

As I mentioned in the issue I'm not sure how critical these transforms actually are in practice for this project. If it's possible to provide a fallback that does not rely on them, that would definitely make experimentation and integration easier.

[runspired]

If it's possible to provide a fallback that does not rely on them, that would definitely make experimentation and integration easier.

we do provide an unpkg version of the library - which is useful for getting started with it fresh but less useful for mature projects that are managing upgrades/deprecations etc.

I'm planning to make the babel plugin available as an esbuild plugin https://esbuild.github.io/plugins/#finding-plugins "soon™" <- we also need to do this for vue. Creating an unplugin for this purpose using the babel transforms is probably not too hard - probably claude could get it mostly right pretty quick.