SolidJS•2mo ago

how to wrap one of the control components

preface: this is probably a silly idea to begin with, but i started trying to implement this and now just want to see it through basically, between actual conditions, and just guarding against async values, i've ended up with a lot of <Show/> on my page. i had an idea to basically wrap <Show /> to create a new component <Suspending />, and instead of taking fallback it takes skeleton as i'm using loading skeletons for fallback on async values. (like i said, i know this is kind of silly as im basically trying to just rename the component). would marginally help me figure out what i'm using as async guard, and what i'm using for other state like mapping a list vs showing empty array state. i tried to implement it as follows by just taking the prop type defs from the Show component (and then i would handle renaming to my liking once i have it working), but the types are not making it through and often becoming any or {}

type SuspendingProps<T> = {
  when: Parameters<typeof Show>[0]["when"];
  fallback: Parameters<typeof Show>[0]["fallback"];
  children: Parameters<typeof Show>[0]["children"];
};

function Suspending<T>(props: SuspendingProps<T>) {
  return <Show {...props} />;
}

type SuspendingProps<T> = {
  when: Parameters<typeof Show>[0]["when"];
  fallback: Parameters<typeof Show>[0]["fallback"];
  children: Parameters<typeof Show>[0]["children"];
};

function Suspending<T>(props: SuspendingProps<T>) {
  return <Show {...props} />;
}

when i use it like this, the type of user doesn't really make it through and i get type errors

      <Suspending
        when={user}
        fallback={<HeaderSkeleton username={params.username} />}
      >
        {(user) => <Header user={user()} view={view()} />}
      </Suspending>

      <Suspending
        when={user}
        fallback={<HeaderSkeleton username={params.username} />}
      >
        {(user) => <Header user={user()} view={view()} />}
      </Suspending>

anyone got ideas? I was thinking maybe generics could help which is why I set up the T type param on the fn, but i couldn't figure out how to wire that up properly

4 Replies

bigmistqke•2mo ago

1. the friction with using resources and types is definitely a thing. it's one of the main focus points of solid 2.0, trying to smooth out that experience so we don't have to type guard everywhere. 2. Parameters<typeof Show>... will not work because of the function overloading see the source, you will have to define the types yourself instead with a generic.

GitHub

solid/packages/solid/src/render/flow.ts at 8103fe01dc02147bf2eecc1a...

A declarative, efficient, and flexible JavaScript library for building user interfaces. - solidjs/solid

bigmistqke•2mo ago

for example something like this

Solid Playground

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

jackOP•2mo ago

cool, yea this honestly makes the markup far easier to reason about imo when you say this is being smoothed out- is that on the level of implementation details, or is a new api to be surfaced that will make this easier (in the case of the latter, anything i can try to mimic in the interim to make things easy to migrate in the futuer)

Brendonovich•2mo ago

Instead of Parameters you can use ComponentProps

Gaming

Programming

how to wrap one of the control components