How to use bigger-picture in svelte project

[giggei]

Hi @henrygd ,

I like your project a lot and would like to use it in a svelte-kit project.
Problem is, apart from the one-liner in the readme I found no information how to do that.

My approach was something like that:

<script>
    import BiggerPicture from "bigger-picture/svelte";

    let images = [
        {
            width: 416,
            height: 277,
            src: "https://images.unsplash.com/photo-1558981852-426c6c22a060?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80",
        },
        {
            width: 416,
            height: 624,
            src: "https://images.unsplash.com/photo-1582876352491-0831e1fbb226?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80",
        },
        {
            width: 416,
            height: 277,
            src: "https://images.unsplash.com/photo-1582848176372-ce1c91cfc78e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80",
        },
        {
            width: 416,
            height: 624,
            src: "https://images.unsplash.com/photo-1582816849149-735e95c5f8a0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80",
        },
        {
            width: 416,
            height: 277,
            src: "https://images.unsplash.com/photo-1582850578041-c7b4dcb8f5df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80",
        },
        {
            width: 416,
            height: 624,
            src: "https://images.unsplash.com/photo-1582874011838-6316c26afd27?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80",
        },
    ];
</script>

<section>
    <BiggerPicture {images} />
</section>

It results in

<BiggerPicture> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules
Error: <BiggerPicture> is not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules

I already added

   ssr: {
        noExternal: ['bigger-picture']
    }

to my vite.config.js but that did not help.

Any tip on how to proceed here would be highly appreciated.

[henrygd]

Hi,

It does return a Svelte component when initialized, but the usage remains the same as the vanilla version.

It also needs access to the target element, so should only be initialized in the browser.

Something like below should work in SvelteKit, or just initialize in onMount or a use action. Then use as normal in an event handler. You can probably also export {bp} from the script below and use across components, but I haven't tested that yet.

I'll update the docs with examples of different ways to use in SvelteKit in the near future since you're not the only one who has had questions about this.

import { browser } from "$app/env";
import BiggerPicture from "bigger-picture";
import type { BiggerPictureInstance } from "bigger-picture";

let bp: BiggerPictureInstance

if (browser) {
  bp = BiggerPicture({ target: document.body });
}

Edit: Just want to specify that the above is for apps using SSR like SvelteKit. If you only use Svelte on the client side then you don't need to worry about which environment you're in -- you should always have access to the DOM.

[giggei]

Hi,

thanks a ot for your quick reply. I still have some issues (which may also be a result of not using TypeScript in my current project).
But if you plan to update the docs I am looking forward to that.

[henrygd]

Just made a repo that I'll post examples in: https://github.com/henrygd/bigger-picture-examples

So far I have a basic SvelteKit example in typescript and vanilla. No readme yet, but it should be straightforward enough. This is what the example site looks like: https://bp-sveltekit.vercel.app

Also, it seems there's a bug in Svelte 3.50.0 that breaks the transitions in the library, so please use 3.49.0 or import bigger-picture/vanilla until it's fixed.

[giggei]

Wow, thanks so much @henrygd, with the tutorial integration worked like a charm! :)