Max Posts - Answer Overflow

Topics

Max

•Created by Max on 9/19/2024 in #support

Force rerender of entire component on prop change

I have a component that takes some data that is derived by keying into a large data object and the key is from useParams. When this data is passed into the component, some derived signals are created etc .. and I think some not neceassarily reactive objects are created. But I think details dont matter much, I can often work around with some effects to reset certain things on prop changes. But in cases like these, just wondering if there is a way to instruct a rerender of that branch, I tried using dynamic but since it still renders the same component with different props it maintains whatever was there. Only solution I found was to create 3 distinct components with the props prepared and using that in dynamic, which works but is inconvenient. I could probably redesign this in particular to just work better with the reactive system but also out of curiosity wondering if this would be possible, something like trigger "rerender" of some part maybe based on some key. Thanks

3 replies

•Created by Max on 9/6/2024 in #support

Possible to define more specific predicated for when prop on Match or Show

Hi, this is kind of a follow up to a previous question I posted that was about Show at https://discord.com/channels/722131463138705510/1280469354387079250, but I thought I would take some time to make more clear what I might be looking for. Basically it seams to me that the api in charge of resolving the outcome of show or switch based on when prop is always using truthy and falsy implicitly so its not possible to specify certain conditions to use for when prop. I think a simple example can explain better. Let's say I had some value and it could be a string or number or boolean.. And I want to render it in a component by looking at its type. I have this kind of utility function to look at the type of a variable and return the variable as that type if it is that type and return undefined if it is not. This is just for boolean for simplicity, I also don't think this function matters much for this issue but it gives some context to what i was trying.

28 replies

•Created by Max on 9/3/2024 in #support

Show Callback with explicit condition

Hi, wondering if possible to use Show with callback and have condition explicity, for example false or undefined, not just any falsy value. imagine for example ts

type T = number | undefined

const items: readonly [] = ...
<For each={items} fallback="...">
  {item=><Show when={item===undefined ? false : item}>
    {value=> value}
  </Show>
</For>

type T = number | undefined

const items: readonly [] = ...
<For each={items} fallback="...">
  {item=><Show when={item===undefined ? false : item}>
    {value=> value}
  </Show>
</For>

For all numbers, including zero, I would like for value to be rendered. For now I am using Show with no callback and passing boolean to when prop and then a ! non null assertion when using value. But wondering if maybe there's a smoother way? Cheers

14 replies

•Created by Max on 6/20/2024 in #support

Implications of using multiple routers across app

Hi, I was wondering, given certain patterns, where for example you may have a webapp with lots of view/kind of like windows. And without really digging into how routers specifically works in detail. Whether it would be possible to have just multiple routers across the app, kind of spread on the app or index component. Like a way to kind of organize the views in a decoupled way. I tried it, and seems to work, but wonder if anyone has any ideas or knowledge about anything to look out for, or any opinion about it. Thanks

8 replies

•Created by Max on 5/16/2024 in #support

should you manually remove event listeners from onMount with onCleanup

Title pretty much sums it up. I see the primitives package says its done automatically, but I'm wondering if any cleanup is automatically for listeners set up on components in onMount, I know (or think) solid does some processing of event listeners in terms of event propagation for certain kinds of events, so wondering if it were to do something like this for disposal of listeners on component. thanks

8 replies

•Created by Max on 9/22/2023 in #support

Is it possible to use Outlet inside conditional render like Show?

Hi, is doing the above okay or not recommended ? Trying it seems to have strange results with route data on routes and eventually nothing renders,. Moving the outlet to outside Show it works fine. I can try make some reproducible example somewhere but meantime wondering if there's a clear guideline like Outlet should not be rendered conditionally Thanks

6 replies

•Created by Max on 9/18/2023 in #support

Are there any important considerations to creating signals in control component callbacks like For

Hi, wondering if there's anything to consider in terms of tracking etc in having something like this

      <For each={props.data}>
        {(data) => {
          const [isOpen, setOpen] = createSignal(false);
          return <Component data={data} isOpen={isOpen} onClick={()=>setOpen(x=>!x)}/>;
        }}
      </For>

      <For each={props.data}>
        {(data) => {
          const [isOpen, setOpen] = createSignal(false);
          return <Component data={data} isOpen={isOpen} onClick={()=>setOpen(x=>!x)}/>;
        }}
      </For>

Or if it's actually better to have some intermediary component where the signal to track state is declared in jsx. Thanks

4 replies

•Created by Max on 8/18/2023 in #support

file routes callbacks on parameter change or top level useParams

Wondering if there's a good way to get and use route parameters either outside of the render process or on a level where it is called every route change, regardless of matches route. I don't think that's explained so well but cant really find the words for that right now. But the situation is basically that I would like to run some effect or even regular function whenever a parameter may change. But there are multiple routes and route files that may be matches (e.g. just /a, /a/b ..etc ). And I would like to avoid putting the same useParams call on each route component. A callback on the router or similar would maybe be close to what I'm looking for, just any information would be great, thanks.

4 replies

•Created by Max on 8/16/2023 in #support

SolidStart unknown number of optional nested route parameters

Hi, looking if there's a way to set up file based routes where there's an unknown number of optional nested routes. So could be /:a?/:b?/:c?/.../:f?... But seems might have to then be array of args cause we don't have names. So for now just going 3-4 levels explicitly like

[a]/
├─ [[b]]/
│  ├─ [[c]].tsx

[a]/
├─ [[b]]/
│  ├─ [[c]].tsx

which is anyway all I likely need so may be fine, but wondering if there was a way. Thanks

11 replies

•Created by Max on 5/15/2023 in #support

Updating only one property on an object

Hi, as I understand if one property of an object that is a signal updates, then all other properties will also rerun. It that correct? If yea is it because the object itself is dependent on its own properties so if one change the rest do. I have this as a simple example with style

function Main() {
  const [counter, setCounter] = createSignal(0);

  const getColor = () => {
    console.log("getting color");
    return "blue";
  };

  const getWidth = () => {
    return `${counter() * 40}px`;
  };

  return (
    <>
      <button
        onClick={() => setCounter((x) => x + 1)}
        style={{
          background: getColor(),
          width: getWidth(),
        }}
      >
        add
      </button>
    </>
  );
}

function Main() {
  const [counter, setCounter] = createSignal(0);

  const getColor = () => {
    console.log("getting color");
    return "blue";
  };

  const getWidth = () => {
    return `${counter() * 40}px`;
  };

  return (
    <>
      <button
        onClick={() => setCounter((x) => x + 1)}
        style={{
          background: getColor(),
          width: getWidth(),
        }}
      >
        add
      </button>
    </>
  );
}

Here any time width will change, color also runs. In some cases it may be an expensive calculation. Is there a recommended to only have the property we that changes to run? I can think of making store instead and passing its values or just using createMemo on any property where it makes sense and then let it rerun? Any advice would be great thanks Here's a link for that example https://playground.solidjs.com/anonymous/03e44b2b-0575-49c0-85a9-8eac7963f727

17 replies

•Created by Max on 4/22/2023 in #support

how come solid-js is devdependency for Solidstart

Hi just creating a new solid start project and noticed solid-js lists under dev dependencies and not dependencies, is it only needed during development ? And is this specific to solid start or a depends on how bundler is setup?

8 replies

•Created by Max on 4/17/2023 in #support

Effector Solid binding reactivity

I wonder if anybody knows about https://www.solidjs.com/ecosystem?search=effector. Effector is a state management system that uses event and immutable stores to handle data. In the ecosystem it mentions the binding are good performance for Solid. I've had a look on https://www.solidjs.com/docs/latest#reconcile that reconcile is the suggested way to diff immutable data into react to maintain granular reactivity. Looking at https://github.com/effector/effector/tree/master/src/solid the code I don't think it uses reconcile but It may well doing something else. I think at some point I found a discussion or something where there was a mention that the bindings are mostly good there is just maybe something not ideal at first creation or something like that but I cant remember where that was. Anyone have any knowledge of this? Thanks

3 replies

•Created by Max on 4/17/2023 in #support

Is it safe to spread props

Just wanna double check if its okay to spread props from a reactivity standpoint. I understand the possible issues with destructuring, I'm wondering if the same applies for spreading props onto child component ie

type Props = {
  readonly whatever:Record<string, number>
}

const Comp = (props:Props) => {

  return <AnotherComp {...props}/>
}

type Props = {
  readonly whatever:Record<string, number>
}

const Comp = (props:Props) => {

  return <AnotherComp {...props}/>
}

4 replies

•Created by Max on 4/6/2023 in #support

solid start typescript 4.9/5 satisfies operator

Hi, wondering is there anything that should be done to use satisfies operator on solid start, update some vite plugins or something? End up with Expected ";" but found "satisfies"' on build Just did on fresh npm init solid@latest ty

12 replies

•Created by Max on 4/5/2023 in #support

Explicit Routing (opt out of file based)

Hi, wondering what the options for routing in solid-start are? I've seen around (for example https://start.solidjs.com/api/Outlet#rendering-the-matched-child-route-component-inside-a-layout-route-component) you can have a routes files, is this complimentary to file based routing, should they match somehow? Can routes be explicitly set (route=>component)? For some context, say for example I have many files that each export a Record of string and component, then I would like to create a route for each member of this record from each file Thanks

5 replies

•Created by Max on 3/27/2023 in #support

function prop destructure

Just wondering if there are any implications of passing only accessors or functions as props and then destructuring them vs passing values directly and accessing from props object. I know the reactivity linting is limited in what it can detect but besides that are there some things that should be thought about. More generally are there any good resources to really understand the reactivity system in solid, I've seen some of the older discussion and issues on solid's github has interesting stuff to read but looking for a somewhat structured explanation that goes into some detail.

21 replies

•Created by Max on 3/24/2023 in #support

Nested Routes for index and route debugging

Is there any way to view the file based routes as they are generated or similar. I'm having difficulties with creating a shared layout at the index level. The closes I've gotten is by doing what's shown in https://discord.com/channels/722131463138705510/1057754962110730381/1057782711919579326. Struggling to see what's happening behind the scenes as it seems inconsistent between refresh, udpate.. etc. The expected outlet content seems to flash initially but then disappears.

6 replies

•Created by Max on 3/18/2023 in #support

Solid-Primitives Key compatible with 1.7 beta (types)?

Hi, wondering if anyone has tried using https://github.com/solidjs-community/solid-primitives/tree/main/packages/keyed#Key together with [email protected]. After updating getting

'Key' cannot be used as a JSX component.
  Its return type 'Accessor<Element[]>' is not a valid JSX element.

'Key' cannot be used as a JSX component.
  Its return type 'Accessor<Element[]>' is not a valid JSX element.

when using Key.

7 replies

•Created by Max on 2/27/2023 in #support

Store creation and location in effector-solid and Solid Start

This may be part solid part effector question but would like to ask here because of Solid Start and the SSR setup it provides. This may be actually more generally applicable to any store or data kept outside of the tree. Is there some constraints to where/when external data should be kept or initialized when using Solid Start with SSR. I guess this is relevant also to any SSR and have found Effector specific solutions to that (https://effector.dev/docs/api/effector/fork/) but wondering if anyone knows of any specific considerations that should be taken into account for Solid. Currently just have the separate ts files next to component just for stores and events to be used by components.

5 replies