Any reason not to proxy signals?

[brian-c]

I've just started really playing with this library this morning, so I'd appreciate someone telling me if I'm going about this in a goofy way: Is there any reason not to wrap signals up in a Proxy to avoid having to read and write them by accessing their .value property?

For example, with this function:

import { Signal } from '@preact/signals-react';

function bundleSignals<
  SignalBundle extends Record<string, unknown>
>(
  bundle: SignalBundle
) {
  // Leave a way to access the original Signals, in case you need to `peek`, etc.
  const originalObjectKey = 'original';

  return new Proxy(bundle, {
    get(target, property) {
      if (property === originalObjectKey) {
        return target;
      } else if (property in target) {
        const targetProperty = property as keyof typeof target;
        if (target[targetProperty] instanceof Signal) {
          return (target[targetProperty] as Signal).value;
        } else {
          return target[targetProperty];
        }
      }
    },

    set(target, property, value) {
      if (property in target) {
        const targetProperty = property as keyof typeof target;
        if (target[targetProperty] instanceof Signal) {
          (target[targetProperty] as Signal).value = value;
        } else {
          target[targetProperty] = value;
        }
        return true;
      }
      return false;
    },
  }) as {
    [key in keyof SignalBundle]:
      SignalBundle[key] extends Signal
        ? SignalBundle[key]['value']
        : SignalBundle[key];
  } & {
    [originalObjectKey in typeof originalObjectKey]: SignalBundle;
  };
}

I can set up a nice little self-contained module:

const auth = bundleSignals({
  pending: signal(false),
  user: signal<{ name: string } | null>(null),

  async check() {
    if (auth.pending) return;
    try {
      auth.pending = true;
      const check = await api('GET', '/me');
      auth.user = check.response;
    } catch (error) {
      auth.user = null;
      alert(error);
    } finally {
      auth.pending = false;
    }
  },
});

And use it like this:

<button disabled={auth.pending} onClick={auth.check}>
  {auth.user ? `Hello ${auth.user.name}` : 'Check for auth'}
</button>

Am I likely to regret this for some reason? Having .value all over the place isn't the end of the world, but it'd be real nice if my templates didn't need to know specifically how my data stores are implemented, and could think of them as just regular objects that happen to have be reactive.

Thanks in advance!

[XantreDev]

I like this approach. Maybe we can create @preact/signals-utils or something similar. I think this package can contain, custom Solid js like components, for example, Show, For, Switch

[XantreDev]

Are someone interested in such components?

[prust]

@brian-c: see https://github.com/luisherranz/deepsignal