Giters

bluwy / whyframe

Develop components in isolation with just an iframe

Home Page:https://whyframe.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

`@whyframe/jsx` used with `@astrojs/react` renders iframe contents outside the document

mayank99 opened this issue · comments

commented

Using this react component:

export default function Whyframe() {
  return (
    <iframe data-why>
      <span>Hello world</span>
    </iframe>
  );
}

in an astro component:

---
import Whyframe from '../components/Whyframe';
---
<Whyframe client:only='react' />

leads to the contents of the whyframe being rendered after the <html> tag.

Minimal repro: https://stackblitz.com/edit/github-bs7uue?file=src%2Fpages%2Findex.astro,src%2Fcomponents%2FWhyframe.tsx,astro.config.mjs&on=stackblitz

commented

This seems to happen because whyframe's jsx plugin is being ran after Astro's, which I've made a hacky patch to re-sort it. This should be done inside the jsx plugin instead so whyframeAstro isn't needed to fix this.

I'll tweak this and cut a new release.

commented

Fixed in eb2a845 and @whyframe/jsx 0.1.2. I also published @whyframe/astro 0.2.0 to remove the JSX plugin handling, as 0.2.0 now requires @whyframe/jsx 0.1.2.

Thanks for reporting this!

commented

Works great so far, thanks!