How to create a custom signal?

[ptrckhjnl]

I'm trying to create a (generic) custom signal, but I'm failing to make typescript happy:

const createCustomSignal = <Value>(
  initialValue: Value,
): [Accessor<Value>, Setter<Value>] => {
  const [item, setLocalItem] = createSignal(initialValue);

  const setItem: Setter<Value> = (newValue /* Parameter 'newValue' implicitly has an 'any' type. ts(7006) */) => {
    const res = setLocalItem(newValue);
    // Do stuff...
    return res;
  };

  return [item, setItem];
};

Making it any is obviously not a great solution. I already tried overloading the setItem function (because if Value is undefined newValue is optional) and narrowing newValue to Value | ((prev?: Value) => Value | undefined) (or similar). Both without success.

I used the Setter<T> interface to stay close to the normal way of using signals. That way it feels just like using a normal signal.

What do I need to do to create a custom signal?

[atk]

Why don't you just use an effect instead of wrapping setLocalSignal?

[ryansolid]

If you don't need an effect or computed no reason to create one. Hijacking the setter or getter seems a perfectly valid approach to perform commit/access transformation.

But yeah TypeScript. Hopefully, someone can help with that.

[otonashixav]

Fortunately we can use Setter itself to get the type we need: something that extends Value or a function that accepts Value and returns something that extends Value. This isn't the clearest way to write it though.

  const setItem = <T extends Value>(newValue?: Parameters<Setter<T>>[0]) => {
    const res = setLocalItem<T>(newValue);
    // Do stuff...
    return res;
  };

On a separate note, it may be worth adding a SetterParameter type to solid to make the Setter type more accessible i.e.

export type SetterParameter<T, U extends T> =
  | (U extends Function ? never : U)
  | undefined extends T
  ? (prev?: T) => U
  : (prev: T) => U;
export type Setter<T> = undefined extends T
  ? <U extends T>(v?: SetterParameter<T, U>) => U
  : <U extends T>(v: SetterParameter<T, U>) => U;

[otonashixav]

Not sure if splitting the parameter type out makes it better or worse somehow.

[ptrckhjnl]

If I try that I get:

// ...
const res = setLocalItem<T>(newValue /* TS-Error */);
// ...

Argument of type 'Parameters<Setter<T>>[0] | undefined' is not assignable to parameter of type '((T extends Function ? never : T) | ((prev?: Value | undefined) => T) | undefined) & ((T extends Function ? never : T) | ((prev: Value) => T))'.
  Type 'undefined' is not assignable to type '((T extends Function ? never : T) | ((prev?: Value | undefined) => T) | undefined) & ((T extends Function ? never : T) | ((prev: Value) => T))'.ts(2345)

😕

[otonashixav]

My bad, forgot that I really shouldn't test types in solid's playground which has strict: false.

const createCustomSignal = <Value>(
  initialValue: Value
): [Accessor<Value>, Setter<Value>] => {
  const [item, setLocalItem] = createSignal(initialValue);

  const setItem = (<T extends Value>(
    newValue: undefined extends Value
      ? (T extends Function ? never : T) & ((prev?: Value) => T)
      : (T extends Function ? never : T) & ((prev: Value) => T)
  ) => {
    const res = setLocalItem<T>(newValue);
    // Do stuff...
    return res;
  }) as Setter<Value>; // normal setter's newValue is optional when undefined extends Value

  return [item, setItem];
};

Using overloading:

const createCustomSignal = <Value>(initialValue: Value): [Accessor<Value>, Setter<Value>] => {
  const [item, setLocalItem] = createSignal(initialValue);

  function setItem<T extends Value>(
    newValue?: (T extends Function ? never : T) & ((prev?: Value) => T)
  ): T;
  function setItem<T extends Value>(
    newValue: (T extends Function ? never : T) & ((prev: Value) => T)
  ): T;
  function setItem<T extends Value>(
    newValue: undefined extends Value
      ? (T extends Function ? never : T) & ((prev?: Value) => T)
      : (T extends Function ? never : T) & ((prev: Value) => T)
  ): T {
    const res = setLocalItem<T>(newValue);
    // Do stuff...
    return res;
  }

  return [item, setItem];
};

[ptrckhjnl]

Nice! Thanks, this works 🙂 👍

Now would be nice if we could somehow simplify the code that is necessary to create a custom setter 😄