SolidJS•5mo ago

Review Show wrapper for multiple signals in TypeScript

Hello! I need your help reviewing a solution I created. I initially encountered a problem when using Solid + TypeScript to conditionally render multiple signals. I want to pass several signals to a Show component that may contain undefined values and, within the children function, access all the passed signals separately. https://playground.solidjs.com/anonymous/cd0b9dce-db4a-400f-88b9-8a23ea88e05e Here is an example of the Show wrapper I created. It works as expected, but I’d appreciate your help identifying any potential pitfalls or edge cases. Thanks for your help!

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

5 Replies

zulu•5mo ago

zulu•5mo ago

might be simpler https://playground.solidjs.com/anonymous/94e0e469-b43c-4420-b2e5-0fdf76f5a29d

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

zulu•5mo ago

or (with all helper) https://playground.solidjs.com/anonymous/5e50028e-d100-41a2-9334-f8f5dc0d26e8 edit: this version narrow to truthy values not strictly undefined value as in the playground

  function all<T extends any[]>(accessors: {
    [K in keyof T]: Accessor<T[K] | undefined>;
  }): { [K in keyof T]: Accessor<T[K]> } | undefined {
    // Check if all accessors return defined values
    const allDefined = accessors.every((accessor) =>  accessor() );
    if (allDefined) {
      // Type assertion is safe because we checked all values are defined
      return accessors as { [K in keyof T]: Accessor<T[K]> };
    }
    return undefined;
  }

  function all<T extends any[]>(accessors: {
    [K in keyof T]: Accessor<T[K] | undefined>;
  }): { [K in keyof T]: Accessor<T[K]> } | undefined {
    // Check if all accessors return defined values
    const allDefined = accessors.every((accessor) =>  accessor() );
    if (allDefined) {
      // Type assertion is safe because we checked all values are defined
      return accessors as { [K in keyof T]: Accessor<T[K]> };
    }
    return undefined;
  }

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

Madaxen86•5mo ago

I'll copy this here in case anyone searche for it. Type narrow for multiple signals

function all<T extends unknown[]>(accessors: {
    [K in keyof T]: Accessor<T[K] | undefined>;
  }): { [K in keyof T]: Accessor<T[K]> } | undefined {
    if (accessors.every((accessor) => accessor() !== undefined)) {
      return accessors as { [K in keyof T]: Accessor<T[K]> };
    }
    return undefined;
  }

function all<T extends unknown[]>(accessors: {
    [K in keyof T]: Accessor<T[K] | undefined>;
  }): { [K in keyof T]: Accessor<T[K]> } | undefined {
    if (accessors.every((accessor) => accessor() !== undefined)) {
      return accessors as { [K in keyof T]: Accessor<T[K]> };
    }
    return undefined;
  }

VictoriaOP•5mo ago

Both options look really good 🚀 Thank you!

Gaming

Programming

Review Show wrapper for multiple signals in TypeScript

Did you find this page helpful?