Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Signal update not causing re-render #2375

Open
Daethos opened this issue Dec 4, 2024 · 3 comments
Open

Signal update not causing re-render #2375

Daethos opened this issue Dec 4, 2024 · 3 comments

Comments

@Daethos
Copy link

Daethos commented Dec 4, 2024

Describe the bug

This may be a me problem, but I am confused and imagine this is well above my understanding. I'm having trouble with a simple re-render when an onMount function changes a signal from false to true--in this case, used to signify that loading has finished. I have tinkered with a few things trying to get this app to work. It's a template using Colyseus + Phaser for a multiplayer server. I've added Solid JS to the front-end as per a previous, functioning app, and that's where all the trouble began!

This template is using parcel to bundle, and I've tried to maintain that, but it has been tricky integrating Solid. I've had to create
.babelrc file,
parcel.config.js file,
and update the tsconfig to
"jsx": "preserve",
"jsxImportSource": "solid-js/h" (in order to get it to stop screaming at me about a jsx-dev-runtime error)

In doing so, I've finally been able to get it to accept using Solid js, but now it's simply not rendering a signal change in the return's body.

Your Example Website or App

https://achreo.vercel.app

Steps to Reproduce the Bug or Issue

export default function App() {
    const [menu, setMenu] = createSignal<boolean>(false);
    onMount(() => {
        console.log(menu(), 'Current Menu');
        setMenu(true);
        console.log(menu(), 'Current Menu');
    });
    return (
        <div id="app">
            <Show when={menu()} fallback={<Puff color="gold"/>}>
                <div class='superCenter'>
                    <div>The Ascean</div>
                    <button>Enter Game</button>
                </div>
            </Show>
        </div>
    );
};

This is the smallest version of getting at what I'm talking about, it's simply not updating its render of the signal and reflecting that in the return.

the app above shows how it functions when it does work (this is a front-end only, single player version of the same concept I'm redesigning to incorporate a server for multiplayer)

Expected behavior

I expected it to update the rendering, but instead it remains stuck with it seeing the fallback of the Show component, a Puff from solid-spinner

Screenshots or Videos

Video_241203190042.mp4

Platform

  • OS: [e.g. macOS, Windows, Linux]
  • Browser: [e.g. Chrome, Safari, Firefox]
  • Version: [e.g. 91.1]

Additional context

Apologies if this is a known issue, I've been trying to get this to work for a couple days now and after running into multiple, fixable errors, this seems like one that's just above my head.

@atk
Copy link
Contributor

atk commented Dec 4, 2024

You are omitting dom-expressions in your setup that are usually introduced through the vite-plugin-solid, which adds a babel.js transformation that converts props to reactive expressions. Using solid/h used the same compilation that react uses, which does not make props reactive.

@Daethos
Copy link
Author

Daethos commented Dec 4, 2024

That about completely solved it, and was much easier than expected to integrate. I really appreciate the quick and concise reply!

@atk
Copy link
Contributor

atk commented Dec 5, 2024

@ryansolid since this is undocumented, we should probably move this issue to docs.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants