Giters

slinkity / slinkity

To eleventy and beyond! The all-in-one tool for templates where you want them, component frameworks where you need them 🚀

Home Page:https://slinkity.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Hydrate a single component on a component page

nickrttn opened this issue · comments

commented

What feature were you trying to use?

I've got a page src/index.tsx defined as a Preact component. It doesn't need client hydration, except for a single component on it. From the docs, it's not clear to me how I would achieve that.

This seems to be possible with component shortcodes, but it's not clear how I would use those in a Preact page. I don't need to hydrate the entire page, just the one component.

Where did our docs fail you?

https://slinkity.dev/docs/component-shortcodes/

How can we improve?

Mention how/if this is possible.

commented

Ok, I think I answered my question, but it leads me to a bug. There's an export <Island /> in @slinkity/preact, which seems to be usable for what I want ☝️ . However, when using it, Vite/11ty errors with

[11ty] Unhandled rejection in promise:
[11ty] React is not defined (via ReferenceError)
  Eleventy:EleventyErrorHandler (error stack): ReferenceError: React is not defined
  Eleventy:EleventyErrorHandler     at Object.Island (/node_modules/@slinkity/preact/server.jsx:41:3)
  Eleventy:EleventyErrorHandler     at /Users/nick/.../node_modules/preact-render-to-string/dist/commonjs.js:1:6653
  Eleventy:EleventyErrorHandler     at F (/Users/nick/.../node_modules/preact-render-to-string/dist/commonjs.js:1:6680)
  Eleventy:EleventyErrorHandler     at F (/Users/nick/.../node_modules/preact-render-to-string/dist/commonjs.js:1:7702)
  Eleventy:EleventyErrorHandler     at F (/Users/nick/.../node_modules/preact-render-to-string/dist/commonjs.js:1:7816)
  Eleventy:EleventyErrorHandler     at F (/Users/nick/.../node_modules/preact-render-to-string/dist/commonjs.js:1:7816)
  Eleventy:EleventyErrorHandler     at F (/Users/nick/.../node_modules/preact-render-to-string/dist/commonjs.js:1:5858)
  Eleventy:EleventyErrorHandler     at F (/Users/nick/.../node_modules/preact-render-to-string/dist/commonjs.js:1:6755)
  Eleventy:EleventyErrorHandler     at F (/Users/nick/.../node_modules/preact-render-to-string/dist/commonjs.js:1:6755)
  Eleventy:EleventyErrorHandler     at k (/Users/nick/.../node_modules/preact-render-to-string/dist/commonjs.js:1:5087)
  Eleventy:EleventyErrorHandler     at ssr (/Users/nick/.../node_modules/@slinkity/preact/ssr.cjs:9:11)
  Eleventy:EleventyErrorHandler     at async /Users/nick/.../node_modules/slinkity/dist/index.cjs:173:26
  Eleventy:EleventyErrorHandler     at async Promise.all (index 2)
  Eleventy:EleventyErrorHandler     at async handleSsrComments (/Users/nick/.../node_modules/slinkity/dist/index.cjs:142:5)
  Eleventy:EleventyErrorHandler     at async EleventyDevServer.applyViteHtmlTransform (/Users/nick/.../node_modules/slinkity/dist/index.cjs:202:28) +0ms

Not entirely sure what's going on there.