I'm having a hard time figuring out client-side interactivity with HydrationRoot

[finestgecko]

I'm relatively new to SSR (coming from Inertia) and I noticed that client-side interactivity doesn't work right away. I understand that in order to make those components work, I need to wrap it in <HydrationRoot>. Until now, I haven't been able to figure out how to make a simple counter work.

Here is a quick example:

MyView.tsx:

<HydrationRoot component="Counter">
    <Counter />
</HydrationRoot>

Counter.tsx:

export default function Counter({ }: ICounterProps) {
  const [count, setCount] = useState<number>(0)

  return (
    <div>
      <span>{count}</span>
      <button onClick={() => setCount((prevCount) => prevCount + 1)}>increment</button>
    </div>
  )
}

When I click "increment", nothing happens.

(Also, I get a TypeScript error on the component prop in HydrationRoot: Type 'string' is not assignable to type 'never'.)

Referring to the input component example example in the docs, I can see that the useHydrated hook is being used to first check if the component has been hydrated. I tried to console.log that:

{"hydrated":false,"root":":R5a6:","component":"UserAvatarMenu","propsHash":"c48ea2b704a02405676f30bd061fc387"}

(this is from another component, not the counter)

So we can deduce that it isn't being hydrated.

I have a feeling I'm doing something wrong here - if so, would appreciate if someone could point it out.

Even though the concept of hydration isn't unique to Radonis, I think the docs could benefit from more explanation around this aspect. Perhaps even a simple demo project of Radonis in general.

---

Update: I figured it out. For anyone else wondering the same, I came across this in the docs:

Directory structure

Components must be put inside the resources/components directory, as this is the directory configured to be used for compilation by default. You can customize this directory by changing componentsDir inside the Radonis config.

I was putting components in individual folders, e.g. resources/components/Modals/UserModal.tsx, but apparently this doesn't work.

I placed the component directly in the resources directory, e.g. resources/components/Counter.tsx and now client-side interactivity works (and the TypeScript error goes away).

The question now is:

• How to configure Radonis to look for components in subfolders
• How to use HydrationRoot with a more complex component like a modal

[microeinhundert]

Putting them in subfolders should work fine, at least it does so for me. Do you mind sharing the contents of public/radonis/build-manifest.json with the components in subfolders?

[finestgecko]

Before moving the components to folders, the manifest was a lot larger and I could see references to the components.

I moved the components to folders, restarted the app and hit "refresh" in the File Explorer in Visual Studio Code.

Manifest after moving to folders:

{
  "entry.client": {
    "type": "entry",
    "path": "radonis/entry.client.js",
    "flashMessages": [],
    "messages": [],
    "routes": [
      "action",
      "formAction",
      "to",
      "auto"
    ],
    "imports": []
  }
}

Now the client-side interactivity has gone. Now, I moved just one component (UserAvatarModal) outside of the subfolder (so now it's components/UserAvatarModal.tsx) and it appears in the manifest again:

{
  "UserAvatarMenu": {
    "type": "component",
    "path": "radonis/components/UserAvatarMenu.js",
    "flashMessages": [],
    "messages": [],
    "routes": [],
    "imports": [
      {
        "type": "chunk",
        "path": "radonis/chunk-EDCU4BZ3.js",
        "flashMessages": [],
        "messages": [],
        "routes": [
          "action",
          "formAction",
          "to"
        ],
        "imports": []
      }
    ]
  },
  "entry.client": {
    "type": "entry",
    "path": "radonis/entry.client.js",
    "flashMessages": [],
    "messages": [],
    "routes": [
      "auto"
    ],
    "imports": [
      {
        "type": "chunk",
        "path": "radonis/chunk-EDCU4BZ3.js",
        "flashMessages": [],
        "messages": [],
        "routes": [
          "action",
          "formAction",
          "to"
        ],
        "imports": []
      }
    ]
  }
}

My other components (which are in subfolders) are missing from the manifest.

Also, I noticed that you started building an example app - that's really useful, thanks!

[finestgecko]

@microeinhundert The latest release has fixed this issue. Thanks so much! 🎉