Hey! Gist & other things

[Ennoriel]

I think the library is awesome! 🔥

I have made a Gist component that I can move here: https://github.com/Ennoriel/machyme/blob/master/src/lib/components/blog/Gist.svelte. However, the component is not handled the same way as your iframes since gist are not really embedable with an iframe but more like an external <script>. In addition, the height is not set but calculated afterwards. For this reason, the component is not fully SSR.

I think that the Observer is great, I would maybe load the iframe a little bit before its visible (say 100 or 200px like lazy loading images). This offset could maybe be configurable (in a context). And I'd like to know why it is dismounted afterwards?

In addition, I've seen a past discussion about adding a common <Iframe> component I strongly agree with. ;)

[spences10]

Hey @Ennoriel, thanks for starting a discussion on this!

I have made a Gist component that I can move here: Ennoriel/machyme@master/src/lib/components/blog/Gist.svelte. However, the component is not handled the same way as your iframes since gist are not really embedable with an iframe but more like an external <script>. In addition, the height is not set but calculated afterwards. For this reason, the component is not fully SSR.

Yeah, that would work, happy if you want to submit a PR on this

I think that the Observer is great, I would maybe load the iframe a little bit before its visible (say 100 or 200px like lazy loading images). This offset could maybe be configurable (in a context). And I'd like to know why it is dismounted afterwards?

Oh, yeah, to be honest I haven't really put a lot of thought into that, do you have an example of how you' implement that?

In addition, I've seen a past discussion about adding a common <Iframe> component I strongly agree with. ;)

Guessing you're referring to #177 I think @Cahllagerfeld made a component for this in https://github.com/spences10/sveltekit-embed/blob/main/src/lib/components/generic-embed.svelte

If you have other thoughts I'd love to hear them, thanks

[Ennoriel]

Hey @Ennoriel, thanks for starting a discussion on this!

I have made a Gist component that I can move here: Ennoriel/machyme@master/src/lib/components/blog/Gist.svelte. However, the component is not handled the same way as your iframes since gist are not really embedable with an iframe but more like an external <script>. In addition, the height is not set but calculated afterwards. For this reason, the component is not fully SSR.

Yeah, that would work, happy if you want to submit a PR on this

I'll do that!

I think that the Observer is great, I would maybe load the iframe a little bit before its visible (say 100 or 200px like lazy loading images). This offset could maybe be configurable (in a context). And I'd like to know why it is dismounted afterwards?

Oh, yeah, to be honest I haven't really put a lot of thought into that, do you have an example of how you' implement that?

The rootMargin option seems to do the job (I had something more complicated in mind at first): MDN doc. Also, the margin value could be parametrized within each Component (I guess) or with a Context (optional one maybe?). It's done on svelte-notifications (but it's not optional here and would be a breaking change).

In addition, I've seen a past discussion about adding a common <Iframe> component I strongly agree with. ;)

Guessing you're referring to #177 I think @Cahllagerfeld made a component for this in https://github.com/spences10/sveltekit-embed/blob/main/src/lib/components/generic-embed.svelte

Yes that's the one. I would use it on every single component then. If you have some props that are the same across all components like width, height (and rootMargin), you can pass $$props if you don't need them elsewhere in the component. I'll add an example with Gist or another one.

If you have other thoughts I'd love to hear them, thanks

What do you think about adding a summary at the top of the page with the link to each section/component?

[spences10]

What do you think about adding a summary at the top of the page with the link to each section/component?

Go for it

With regard to the breaking change though, maybe put that one into it's own branch while we try work out a way to try work with the current API