├── .gitignore ├── .npmrc ├── .prettierignore ├── .prettierrc ├── README.md ├── islands.config.js ├── jsconfig.json ├── mdsvex.config.js ├── package-lock.json ├── package.json ├── src ├── app.css ├── app.d.ts ├── app.html ├── lib │ ├── Island.svelte │ └── islands │ │ ├── Count.svelte │ │ ├── Interaction.svelte │ │ └── Mount.svelte └── routes │ ├── +layout.js │ ├── +layout.svelte │ ├── +page.svelte │ ├── full │ ├── +page.js │ └── +page.svelte │ └── readme │ └── +page.svelte ├── static ├── favicon.png └── social.png ├── svelte.config.js └── vite.config.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | static/__islands -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /build 4 | /.svelte-kit 5 | /package 6 | .env 7 | .env.* 8 | !.env.example 9 | 10 | # Ignore files for PNPM, NPM and YARN 11 | pnpm-lock.yaml 12 | package-lock.json 13 | yarn.lock 14 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "useTabs": true, 3 | "singleQuote": true, 4 | "trailingComma": "none", 5 | "printWidth": 100, 6 | "plugins": ["prettier-plugin-svelte"], 7 | "pluginSearchDirs": ["."], 8 | "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] 9 | } 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SvelteKit + `` 2 | 3 | ![SvelteKit islands over an image of Outset Island from Zelda](https://raw.githubusercontent.com/geoffrich/sveltekit-is-land/main/static/social.png) 4 | 5 | This is an experiment with adding partial hydration to a [SvelteKit](https://kit.svelte.dev/) site with [@11ty/is-land](https://github.com/11ty/is-land), a "framework independent partial hydration islands architecture implementation." 6 | 7 | By using the provided `Island.svelte` component, you can selectively hydrate individual components instead of the whole page. 8 | 9 | This is just a POC for now, but may be packaged for reuse at a later date. 10 | 11 | ## Getting started 12 | 13 | Create a component in `/src/lib/islands`. On your page, import the `Island.svelte` component and the component you would like to render inside the island. 14 | 15 | For partial hydration to work, you need to [disable client-side rendering](https://kit.svelte.dev/docs/page-options#csr) for the page. Otherwise, the entire page will hydrate. 16 | 17 | ```svelte 18 | 22 | 23 |

Without props

24 | 25 | 26 | 27 |

With props

28 | 29 | 30 | 31 |

Customizing island options

32 | 33 | 34 | ``` 35 | 36 | You will also need to set up a separate Vite build to bundle the island components - see the `build` script in this repo's `package.json` for an example. 37 | 38 | ### Props 39 | 40 | - `component`: the component to render. This is used to server-render the component 41 | - `name`: the name of the component file. This is used to import the component on the client when hydration occurs. 42 | - `props`: an object of props to pass to the component 43 | - `islandProps`: an object of props to pass to the ``. See the [is-land documentation](https://github.com/11ty/is-land#usage). 44 | 45 | See the source code for [+page.svelte](https://github.com/geoffrich/sveltekit-is-land/blob/main/src/routes/%2Bpage.svelte) for a full example. 46 | 47 | ## How it works 48 | 49 | The bulk of the work is in `/src/lib/Island.svelte`. This component renders an `` element with a `