Conditional `client:load`?

[nocturne grail]

If I'm dynamically rendering components and it could be either Astro or Vue, is there some way to dynamically add client:load to the component?

<div>
  {
    visibleBlocks.map((block) => {
      let blockComponent;

      if (allBlocks[block.type]) {
        const Component = allBlocks[block.type];

        blockComponent = <Component {...block.data} reel={reel} />;
      } else {
        return null;
      }

      return blockComponent;
    })
  }
</div>

[modern mantle]

You could have 2 components one with and one without and swap between them

[nocturne grail]

not quite sure what you mean. but I wound up doing this:

visibleBlocks.map((block) => {
  let blockComponent;

  if (isVueComponent(block)) {
    switch (block.type) {
      case 'BIOGRAPHY':
        return <BiographyBlock client:load {...block.data} reel={reel} />;
      case 'BUTTON':
        return <ButtonBlock {...block.data} />;
      default:
        console.log(`No component found for block type: ${block.type}`);
        return null;
    }
  } else if (astroBlocks[block.type]) {
    const Component = astroBlocks[block.type];

    blockComponent = <Component {...block.data} reel={reel} />;
  } else {
    return null;
  }

  return blockComponent;
})