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:
15
README.md
15
README.md
@@ -62,28 +62,25 @@ const config = {
|
|||||||
```jsx
|
```jsx
|
||||||
|
|
||||||
<script>
|
<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
|
let carousel; // for calling methods of the carousel instance
|
||||||
onMount(async () => {
|
|
||||||
const module = await import('svelte-carousel');
|
|
||||||
Carousel = module.default;
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleNextClick = () => {
|
const handleNextClick = () => {
|
||||||
carousel.goToNext()
|
carousel.goToNext()
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:component
|
{#if browser}
|
||||||
this={Carousel}
|
<Carousel
|
||||||
bind:this={carousel}
|
bind:this={carousel}
|
||||||
>
|
>
|
||||||
<div>1</div>
|
<div>1</div>
|
||||||
<div>2</div>
|
<div>2</div>
|
||||||
<div>3</div>
|
<div>3</div>
|
||||||
</svelte:component>
|
</Carousel>
|
||||||
|
{/if}
|
||||||
|
|
||||||
<button on:click={handleNextClick}>Next</button>
|
<button on:click={handleNextClick}>Next</button>
|
||||||
```
|
```
|
||||||
|
|||||||
Reference in New Issue
Block a user