fix: vulnerable package version usage

README.md

@@ -1,73 +1,29 @@
-![svelte-carousel](./docs/svelte-carousel-logo-md.png)
+# @xxfogs/svelte-carousel
 
-
+This is a fork of [svelte-carousel](https://github.com/vadimkorr/svelte-carousel) project made due to it's lack of maintainment.
-# svelte-carousel
-
-<div align="left">
-
-[![npm](https://img.shields.io/npm/v/svelte-carousel.svg)](https://www.npmjs.com/package/svelte-carousel) [![npm](https://img.shields.io/npm/dm/svelte-carousel.svg)](https://www.npmjs.com/package/svelte-carousel)
-<br />
-[![GitHub repo](https://img.shields.io/badge/github-repo-green.svg?style=flat)](https://github.com/vadimkorr/svelte-carousel) [![GitHub followers](https://img.shields.io/github/followers/vadimkorr.svg?style=social&label=Follow)](https://github.com/vadimkorr)
-
-</div>
-
-The awesome carousel component for Svelte 3
-
-## Demo
-* [vadimkorr.github.io/svelte-carousel](https://vadimkorr.github.io/svelte-carousel)
-* [REPL](https://svelte.dev/repl/f503a458832f4a358d9ec00f88945ff5)
 
 ## Installation
+
 ```bash
-yarn add svelte-carousel
+yarn add -D @xxfogs/svelte-carousel
-```
-```bash
-npm install svelte-carousel
 ```
 
-Import component
+```bash
-```jsx
+pnpm i -D @xxfogs/svelte-carousel
+```
+
+```bash
+yarn i -D @xxfogs/svelte-carousel
+```
+
+## Usage
+
+1. Install as development dependancy
+2. Import and use
+
+```svelte
 <script>
-  import Carousel from 'svelte-carousel'
+  import Carousel from '@xxfogs/svelte-carousel';
-  // ...
-</script>
-```
-
-## SvelteKit support
-There are several things to keep in mind when `svelte-carousel` is used with SvelteKit. This is because `svelte-carousel` is a client-side library and depends on `document` and `window`. [See more in SvelteKit FAQ](https://kit.svelte.dev/faq).
-
-1. Install `svelte-carousel` as a dev dependency. [Why as a dev dependency?](https://github.com/sveltejs/sapper-template#using-external-components)
-
-```bash
-yarn add svelte-carousel -D
-```
-```bash
-npm install svelte-carousel -D
-```
-
-2. Extend `kit` in `svelte.config.js` to include the `vite` property
-
-```js
-const config = {
-  // existing props
-  kit: {
-    // existing props
-    vite: {
-      optimizeDeps: {
-        include: ['lodash.get', 'lodash.isequal', 'lodash.clonedeep']
-      }
-      // plugins: []
-    }
-  }
-}
-```
-
-3. Import and use it:
-
-```jsx
-
-<script>
-  import Carousel from 'svelte-carousel';
   import { browser } from '$app/environment';
 
   let carousel; // for calling methods of the carousel instance
@@ -90,42 +46,8 @@ const config = {
 <button on:click={handleNextClick}>Next</button>
 ```
 
-## Vite support
-1. Extend `optimizeDeps.include` in `vite.config.js`
-
-```js
-export default defineConfig({
-  optimizeDeps: {
-    include: ['lodash.get', 'lodash.isequal', 'lodash.clonedeep']
-  }
-})
-```
-
-2. Import and use it:
-
-```jsx
-
-<script>
-  import Carousel from 'svelte-carousel'
-
-  let carousel; // for calling methods of the carousel instance
-  const handleNextClick = () => {
-    carousel.goToNext()
-  }
-</script>
-
-<Carousel
-  bind:this={carousel}
->
-  <div>1</div>
-  <div>2</div>
-  <div>3</div>
-</Carousel>
-
-<button on:click={handleNextClick}>Next</button>
-```
-
 ## Props
+
 | Prop                      | Type       | Default         | Description                                   | 
 |---------------------------|------------|-----------------|-----------------------------------------------|
 | `arrows`                  | `boolean`  | `true`          | Enables next/prev arrows                      |
@@ -146,13 +68,14 @@ export default defineConfig({
 ## Events
 
 ### `pageChange`
+
 It is dispatched on page change
 
 | Payload field      | Type        | Description                           | 
 |--------------------|-------------|---------------------------------------|
 | `event.detail`     | `number`    | Current page index                    |
 
-```jsx
+```svelte
 <Carousel
   on:pageChange={
     event => console.log(`Current page index: ${event.detail}`)
@@ -165,6 +88,7 @@ It is dispatched on page change
 ## Slots
 
 ### `prev` and `next`
+
 They are used for customizing prev and next buttons.
 
 Slot props:
@@ -174,7 +98,7 @@ Slot props:
 | `showPrevPage`     | `function`  | Call it to switch to the previos page |
 | `showNextPage`     | `function`  | Call it to switch to the next page    |
 
-```jsx
+```svelte
 <Carousel
   let:showPrevPage
   let:showNextPage
@@ -190,6 +114,7 @@ Slot props:
 ```
 
 ### `dots`
+
 This slot is used for customizing how dots look like.
 
 Slot props:
@@ -200,7 +125,7 @@ Slot props:
 | `pagesCount`        | `number`     | Total pages amount                           |
 | `showPage`          | `function`   | Takes index as page to be shown              |
 
-```jsx
+```svelte
 <Carousel
   let:currentPageIndex
   let:pagesCount
@@ -214,6 +139,7 @@ Slot props:
 ```
 
 ### Default slot
+
 This slot takes content for the carousel.
 
 Slot props:
@@ -223,7 +149,7 @@ Slot props:
 | `loaded`           | `number[]` | Contains indexes of pages to be loaded. Can be used for lazy loading |
 | `currentPageIndex` | `number`   | Represents current page index (start from 0)                         |
 
-```jsx
+```svelte
 <Carousel
   let:loaded
 >
@@ -237,6 +163,7 @@ Slot props:
 ## Methods
 
 ### `goTo`
+
 Navigates to a page by index. `(pageIndex, options) => Promise<void>`.
 
 Arguments:
@@ -246,7 +173,7 @@ Arguments:
 | `pageIndex`        | `number`    |         | Page number                           |
 | `options.animated` | `boolean`   | `true`  | Should it be animated or not          |
 
-```jsx
+```svelte
 <script>
   // ...
   let carousel;
@@ -264,6 +191,7 @@ Arguments:
 ```
 
 ### `goToPrev`
+
 Navigates to the previous page. `(options) => Promise<void>`.
 
 Arguments:
@@ -272,7 +200,7 @@ Arguments:
 |--------------------|-------------|---------|-------------------------------|
 | `options.animated` | `boolean`   | `true`  | Should it be animated or not  |
 
-```jsx
+```svelte
 <script>
   // ...
   let carousel;
@@ -290,6 +218,7 @@ Arguments:
 ```
 
 ### `goToNext`
+
 Navigates to the next page. `(options) => Promise<void>`.
 
 Arguments:
@@ -298,7 +227,7 @@ Arguments:
 |--------------------|-------------|---------|------------------------------|
 | `options.animated` | `boolean`   | `true`  | Should it be animated or not |
 
-```jsx
+```svelte
 <script>
   // ...
   let carousel;

package.json

@@ -1,20 +1,20 @@
 {
-  "name": "svelte-carousel",
+  "name": "@xxfogs/svelte-carousel",
-  "version": "1.0.25",
+  "version": "1.0.0",
   "description": "Svelte carousel",
   "main": "src/main.js",
   "module": "src/main.js",
   "svelte": "src/main.js",
-  "author": "vadimkorr",
+  "author": "xxfogs",
   "type": "module",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/vadimkorr/svelte-carousel.git"
+    "url": "git+https://github.com/xxfogs/svelte-carousel.git"
   },
   "bugs": {
-    "url": "https://github.com/vadimkorr/svelte-carousel/issues"
+    "url": "https://github.com/xxfogs/svelte-carousel/issues"
   },
-  "homepage": "https://github.com/vadimkorr/svelte-carousel#readme",
+  "homepage": "https://github.com/xxfogs/svelte-carousel#readme",
   "keywords": [
     "svelte",
     "carousel",
@@ -39,9 +39,9 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^11.0.0",
     "@storybook/addon-actions": "^6.1.14",
-    "@storybook/addon-essentials": "^6.1.14",
+    "@storybook/addon-essentials": "^7.6.16",
     "@storybook/addon-links": "^6.1.14",
-    "@storybook/svelte": "^6.1.14",
+    "@storybook/svelte": "^7.6.16",
     "babel-loader": "^8.2.2",
     "jest": "^26.6.3",
     "lodash": "^4.17.20",