From 57e3c5214895b19a5b771316e9c752e753b0e672 Mon Sep 17 00:00:00 2001
From: Tobias Oetiker <tobi@oetiker.ch>
Date: Mon, 27 Jun 2022 15:42:29 +0200
Subject: [PATCH] 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
---
 README.md | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index 9a4b362..707dfdf 100644
--- a/README.md
+++ b/README.md
@@ -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>
 ```