How do I get rux-* to hydrate in React?

[mrclean-oa]

We've got a section component that we've styled, and we're trying to get it closer to Astro. It's my task to figure out which components we can move over to Astro, and which ones need to be home-grown. The section component looks like this screenshot below:

The Astro version of "Container" looks like this in the storybook:

Seemed simple enough.

First hurdle

There is no React-specific documentation on how to use slot as defined in web components. I spent about 20-30 minutes looking around for it, then finally decided to try adding the attribute like one normally would:

<RuxContainer>
  <h3
    className="monospace fw7 oa-text-center"
    slot="header"
  >
    Intensity and Coverage
  </h3>
</RuxContainer>

This worked, but it was kind of irritating that there are no docs on it. How are folks new to web components supposed to figure that out on their own?

Probably like I did, but it'd be nicer to have this information in the docs, most React developers aren't going to be familiar with the slot attribute, and will think a component is missing. Especially since RuxTable has many sub-components. Looking at that made me think there's got to be a ContainerHeader, ContainerTabBar, ContainerToolbar, and ContainerFooter but there is not. Why? I think it's because implementers are supposed to use slot for Container, like I did, but for some reason the same decision was not made for RuxTable* components. That inconsistency is confusing, and not clarified anywhere, so as an implementer leaves me wondering if I did it right.

But, I'm getting off-track, I was able to get it to compile this way and I think this is the intended way to use it, but not 100% sure.

Blocking issue

I made sure to include the CSS as mentioned in the documentation, in the index.tsx file for my project:

import '@astrouxds/astro-web-components/dist/astro-web-components/astro-web-components.css';
//...

Then I had remembered some kind of initialization script from when we tried Astro last time. I looked and looked and finally found it in @astrouxds/react/src/components.tsx, since this is also not mentioned in the docs for the React Component Library. Since it's called in the barrel file, I assume that when that file loads, it will apply the polyfills and define all the custom elements. So I assumed that since the docs didn't mention it, and it was called like it was, I didn't have to do it.

I spun up the React application, clicked an element to show the graphs, and this is what I saw:

I investigated a little bit, and discovered that the class="hydrated" was not getting applied to the rux component.

Does that mean that I did need to run that code:

applyPolyfills().then(() => defineCustomElements());

Even though the documentation makes no mention of it? Could it be React is re-rendering faster (this is real-time data and a lot of it) than the .hydrated class can be added? I have no idea why it's not rendering. So much confusion.

[markacianfrani]

First off, thank you so much for all of this feedback. It is incredibly valuable to us. I want to hear about every papercut you've run into so we can make Astro better. I've created a new RFC for improving our React DX here #1113 that you're welcome to contribute to or keep tabs on.

We're currently focusing on a large documentation revamp, where we're moving everything under one roof so to speak--astrouxds.com.

Now, on to your issue.

So I assumed that since the docs didn't mention it, and it was called like it was, I didn't have to do it.

You're completely right here. The React package should do all of this for you. It looks like there's a bug somewhere, but I'll need some more details if you don't mind to troubleshoot.

You can see a basic working repo on CodeSandbox https://codesandbox.io/s/elastic-tdd-vzkk80?file=/src/App.js for example.

Can you tell me a little more about your environment? What version of React are you using? What version of typescript? What bundler (webpack/vite)? Are there any other third party dependencies (next for example)?

And lastly, if you're able to, could you quickly test just rolling back to @astrouxds/[email protected] and let me know if that changes anything?

Thanks again and I appreciate your patience

[mrclean-oa]

Hi @markacianfrani,

Thanks for the great attitude towards feedback, it's refreshing. I will begin work on using that Codesandbox baseline to set up a project. A problem we may encounter, is due to not being able to divulge the entire project in the Codesandbox, we may have to take this offline. I believe I have your Email from last time, we could set up a time to do a screenshare if it comes to that, then I can go into more detail. But let's see if Code Sandbox can replicate what I'm experiencing first.

[markacianfrani]

would be happy to. feel free to reach out - [email protected]. ill standby. also, keep in mind codesandbox also sometimes has its own quirks so instead try and see what the differences are between your environment and whats shown in codesandbox

[mrclean-oa]

Okay, so after all that work of cherry-picking for a demo: the sandbox worked successfully. https://codesandbox.io/s/stoic-murdock-c1vsy5?file=/src/index.tsx which means we should probably jump on a call. I'll shoot you an Email.