Can I put the props of an island in a separate js file instead of the HTML file?

[ouuan]

I have a search page in my blog. Now I calculate the props for the search component outside of the island so that it runs on the server side. But the props are placed in the HTML file, so it's getting bigger and bigger. I want to put the props in a separate .js file. How can I do that?

Alternatively, is it possible to get the data of useDocuments outside of iles, for example, in a Vite plugin, so that I can generate the search data elsewhere?

[ElMassimo]

Hi Yufan!

This is an interesting use case. In îles props are inlined in HTML, there's no built-in way to store them as JS instead.

You can get the data of useDocuments using an internal API, by adding an import like the following inside a script that you import from the island:

import documents from '/@islands/documents?pattern=~/pages/{post/**/*,about}.{md,mdx}'

That way, that data would be stored in JS, and you could even use a dynamic import to load it asynchronously.

---

If you want to get more control by creating a Vite plugin, you can use the pages API to get the frontmatter, meta, and excerpt, and read the raw file as you are doing now.

The downside of this search technique, is that the browser needs to download the entire content of site.

---

In my blog and in the îles docs I'm using DocSearch to power search, and have a CI task that will crawl the site every time it's deployed to make sure the indexes are up-to-date.

There are other alternatives like this, which are very efficient and work nicely even in mobile devices and slow network conditions.