Clarification for "It is also not supported to nest islands within other islands."

[abdallahmz]

Hello,

Reading the documentation I was surprised to read

It is also not supported to nest islands within other islands.

What I understood was "it is not possible to call other islands within an island" (which might be my misunderstanding of what nesting is).
The framework does seem to allow us to do so, not through passing the properties, but we can call an island in another (just like we call an island in the first place). I tested it and it seems to work, but reading the quote I wonder if it is a good idea.

TLDR:

• is calling an island from another one supported or not ?
• if it is, what is the meaning of "nesting island" in the quote ?

Thanks

[lucacasonato]

It is not supported to do this:

// islands/A.tsx

import B from "./B.tsx";

export default function A() {
  return <div><B /></div>;
}

// islands/B.tsx

export default function B() {
  return <h1>Hello from B</h1>;
}

Even if this works right now, it likely will stop working in the future. Do not rely on this behavior.

[xavivars]

Does that mean that if you plan to have complex interactive components, they need to be all in the same file?

[PhoneDroid]

Should be closed?
Information seems to be outdated?
( https://fresh.deno.dev/docs/concepts/islands#nesting-islands )
( Docs describe nesting as a non-problematic thing to do )

[cdcarson]

Reading the docs and this conversation the first time, I couldn't figure out how to create & share templates across routes. I finally figured it out by looking at www/components in this repo. The difference between "islands" (interactive) and non-interactive templates will probably be a stumbling block for other folks coming, as I do, from SvelteKit, Next, etc., where every component is possibly interactive.

Couple of suggestions:

• Add something to the docs like "You can still share non-interactive tsx templates between routes. These will be rendered on the server only... Just don't put them in the islands directory."
• Add the components directory and a sample navbar to the starter project created by deno run -A -r https://fresh.deno.dev my-project

[lucacasonato]

This is a good idea.