How to nest components with client directives? | Astro Lounge | Page 1

midnight stag Sep 30, 2022, 12:18 PM

#

Hey there,

I'm having troubles wrapping my head around why my components are mounted multiple times. I'm not sure if it's an Astro-issue or a Solidjs-one (or more likely, a programmer issue :P) .

I have a structure that looks similar to this:

<Layout> // Astro comp
  <Pagination client:load> // Solid comp <- onMount called once
    <Intro > // Astro comp
      <AnimatedIntroBackground client:load /> // Solid comp <- onMount called twice
    </Intro>
    ....
  </Pagination>
</Layout>

I use the Solid children()-helper to resolve children (in Pagination I measure the size of all children) .

Any clues or pointers?

midnight stag Oct 3, 2022, 7:18 AM

#

Still haven't been able to figure this out. The duplicate Solid component isn't added to the DOM, but its script runs..

midnight stag Oct 3, 2022, 7:34 AM

#

Here's a simple repro: https://codesandbox.io/s/summer-cache-xp35rz?file=/src/pages/index.astro You can see "AnimatedBackground mounted" is logged twice.

CodeSandbox

freddy

summer-cache-xp35rz - CodeSandbox

summer-cache-xp35rz by freddy using @astrojs/solid-js, astro, solid-js

midnight stag Oct 3, 2022, 7:58 AM

#

Ok, so further investigation shows it logs once per client-directive in the parent-children hierarchy..

midnight stag Oct 3, 2022, 8:17 AM

#

How to nest components with client directives?

#How to nest components with client directives?