What are the best possible ways to create islands in Fresh?
We are developing a SaaS product using Fresh and are exploring the best ways to structure our islands for optimal organization and maintainability. We've come across two primary methods for defining islands and would appreciate your insights.
Our Current Understanding:
Option 1: Root-Level Islands:
As per the official Fresh documentation (https://fresh.deno.dev/docs/canary/concepts/islands), we can create island components at the root level within the islands folder.
Option 2: Colocated Islands:
According to the Fresh 1.4 release blog (https://deno.com/blog/fresh-1.4#colocated-islands-components-and-more), we can create an (_islands) folder within a route directory, signaling to Fresh that all files within that folder should be treated as islands.
Our Questions:
1. Are there any other recommended or supported methods for defining island components in Fresh, beyond the two options mentioned above? We are looking for the most scalable and maintainable solution for our SaaS product.
2. Is it possible to use a naming convention, such as .island.tsx or .islands.tsx, to designate a component as an island? We are curious if this type of implicit declaration is supported or planned for future releases.
We are aiming to establish a clear and consistent pattern for managing our islands as our project grows. Any advice or best practices you can share would be greatly appreciated.
Deno Blog
Fresh 1.4 – Faster Page Loads, Layouts and More
Discover new improvements in Fresh 1.4 that makes your site quicker to load and comes with several improvements to make authoring complex projects easier.
5 Replies
@marvinh. can you please help here?
1. No, islands must be declared in the root level
/islands folder or a co-located (_islands) folder. Other patterns are not supported.
2. Not supported at the moment, but could be added in the future.ok..thanks for the response.. in case of following approach 2,
how should we create islands for using same web component multiple times in one route? example: If we have 2 buttons in one /about page, then should we create two different islands for those buttons?
That depends entirely on your needs in your project. If both buttons do the same thing, reuse the same island. If they are not the same thing and have different code, use two different islands.
ok so based on the purpose we should create islands.. thanks for the quick help..