I like <Dynamic/>, but...

[xobjects]

Hello everyone,

I've been developing software since the earth has cooled and have seen a little bit of everything over the years. When I drifted from C/C++/C# to Javascript, I found myself in a very different world, but welcome none the less. I've been writing webapps for a number of years now and, for whatever reason, completely stayed away from frameworks - not wanting to be lockced in to any particular way of doing things. Whether you consider any particular library a framework, or just that, a library. I still tended to stay away from them unless they were small and well tested. However, about 4 months ago, on a whim, I stopped the work in a new web app I'm working on and re-wrote it using React. I was completely new to this way of thinking and it was a bit confusing at first, but quickly made more sense. After it was working, and working just fine, I "found" Svelte and thought it was amazing. I was just getting familiar, and comfortable with the idea of a virtual dom and then Rich Harris comes along and says there's a better way. So, I started the project over again in Svelte, and it work nice. Really nice actually and I was going to stay with Svelte until I found out about SolidJS. To be honest, I had heard about SolidJS, but didn't give it much thought. I did some tests and was convinced that it would be a good idea to switch from Svelte, sorry Rich, to SolidJS, hello Ryan. If you made it this far, thank you, I can be a bit long winded.

This webapp I'm writing is a mapping, OpenLayers, application with some control panels that 'float' above the map. The upper control panel is a matrix of buttons with a layout similar to an iPad. The Lower control panel can display specialized control panels that are shown depending on the operation you are currently doing. There are other panels that are shown but to keep things simple, just think of these two. So, this lower panel, component will need to have a child component that can be swapped out with another component. This turned out to be really easy to do in React and Svelte. But, I am having nothing but problems with SolidJS to get this working right. The issue isnt so much getting the component to display, it is getting the onCleanup to be called when swapping out the component for another. I have tried several variations and some work better than others but still I haven't found a method that is uhhh solid.

The example that Ryan gave on codesandbox is nice, and when I added the two life cycle functions, they were called. However this is not exactly the way I want to do it.

I have a example code on on codesandbox

You may need to click the refresh button on the codesandbox internal browser window.

If you look at the console log, you noticed the mount messages, but not the cleanup messages, except at first

You will also see a warning about computations created outside of a createroot or rdner will never be disposed.

I will need to move the set_component function outside of the component because it will need to be exported to allow another module to set the component.

Anyway, if anyone has any insight on how to get this working, please respond.

[Brendan-csel]

How about not putting the components themselves into Signals. Instead perhaps just use one of Solid's built-in control flow components to swap based purely on just the toggle signal.

• Either Show with fallback.
• Or Switch/Match if there are multiple cases.

        <Switch>
          <Match when={!toggle()}>
            <ComponentA method="5"/>
          </Match>
          <Match when={toggle()}>
            <ComponentB method="5"/>
          </Match>
        </Switch>

Codesandbox link

[xobjects]

why not? because I don't know what component may go there. This is greneric. the LowerPanel needs to be agnostic. Thanks for input though.

[mosheduminer]

Hi @xobjects, you've hit a gotcha of the setter for createSignal. Your hint here is the warning about computations outside of roots, and if you were using typescript you would no doubt be warned about this by TS as well.

The tutorial says

Components are just functions

And the docs say elsewhere:

If you want to store a function in a Signal you must use the function form:

setValue(() => myFunction);

When a function is passed to the signal setter, it is assumed that the intention is to set the signal with the result of the function, and hence the function is called immediately. So if you write setValue(myFunction) instead, you'll get rather unexpected behavior.

Now to your example. Your setter code looks like this:

      set_method_1_component(toggle() ? ComponentA : ComponentB);
      set_method_2_component(
        toggle() ? <ComponentA method="2" /> : <ComponentB method="2" />
      );
      set_method_3_component(toggle() ? ComponentA : ComponentB);
      set_method_4_component(
        toggle() ? <ComponentA method="4" /> : <ComponentB method="4" />
      );

Examples 2 and 4 are problematic because they directly create the component, which means that their "lifecycle" methods will behave unexpectedly. You can do this synchronously when the parent component is first run, but it is usually a bad idea to do so in an event listener.
On the other hand, examples 1 and 3 are bad for the reason given above - they pass a function (the component) directly to the setter. If you write

set_method_3_component(() => toggle() ? ComponentA : ComponentB);

I think you'll find that it suddenly starts working as expected.

Playground link: https://playground.solidjs.com/?hash=-1470272557&version=1.3.13

[xobjects]

very nice. thank you. This was a deal breaker for me. But, with your answer, the game is back on. I appreciate it.

[xobjects]

Here is the final code that is working great, thanks to the help.

I mentioned the LowerPanel control, here it is along with how it's being used.

import { Dynamic } from 'solid-js/web';
import './lower-panel.scss';

const [control_props, set_control_props] = createSignal<any>();

export const set_lower_panel_control = (p_control: any, p_props?: {}) => 
    set_control_props(x => ({ control: p_control, props: p_props }));

export const LowerPanel = () => {
    const v_dynamic = createMemo(() => {
        const cp = control_props();
        return cp && cp.control && <Dynamic component={cp.control} {...(cp.props ?? {})} />;
    });

    return <div class="lower-panel"> {v_dynamic()} </div>
}

and an example of how to load a control into the panel is ...

set_lower_panel_control(LayerControl);