make sveltekit look more idiomatic

Using the `$app/env` we can make this look much more idiomatic. While still ensuring the code only runs in the browser.

The compiler is not entirely happy as it still complains:

```
svelte-carousel doesn't appear to be written in CJS, but also doesn't appear to be a valid ES module (i.e. it doesn't have "type": "module" or an .mjs extension for the entry point). Please contact the package author to fix.
```
but the resulting code seems to work fine
This commit is contained in:
Tobias Oetiker
2022-06-27 15:42:29 +02:00
committed by GitHub
parent 67c227995b
commit 57e3c52148

View File

@@ -62,28 +62,25 @@ const config = {
```jsx
<script>
import { onMount } from 'svelte';
import Carousel from 'svelte-carousel';
import { browser } from '$app/env';
let Carousel; // for saving Carousel component class
let carousel; // for calling methods of the carousel instance
onMount(async () => {
const module = await import('svelte-carousel');
Carousel = module.default;
});
const handleNextClick = () => {
carousel.goToNext()
}
</script>
<svelte:component
this={Carousel}
{#if browser}
<Carousel
bind:this={carousel}
>
<div>1</div>
<div>2</div>
<div>3</div>
</svelte:component>
</Carousel>
{/if}
<button on:click={handleNextClick}>Next</button>
```