feat(svelte): add Svelte components typings

scripts/build-types.js

@@ -13,8 +13,10 @@ async function build(cb) {
 
   let coreEventsReact = '';
   let coreEventsVue = '';
+  let coreEventsSvelte = '';
   let modulesEventsReact = '';
   let modulesEventsVue = '';
+  let modulesEventsSvelte = '';
 
   const replaceInstances = (content) => {
     return content
@@ -38,6 +40,14 @@ async function build(cb) {
         return ` ${name.replace('?', '')}: (`;
       }),
     );
+    coreEventsSvelte = replaceInstances(
+      coreEventsContent
+        .replace(/ ([a-zA-Z_?]*): \(/g, (string, name) => {
+          return ` ${name.replace('?', '')}: CustomEvent<[`;
+        })
+        .replace(/\) => void;/g, ']>;')
+        .replace(/\) => any;/g, ']>;'),
+    );
   };
 
   const getModulesEventsContent = async () => {
@@ -62,6 +72,14 @@ async function build(cb) {
             return ` ${name.replace('?', '')}: (`;
           }),
         );
+        modulesEventsSvelte += replaceInstances(
+          eventsContent
+            .replace(/ ([a-zA-Z_?]*): \(/g, (string, name) => {
+              return ` ${name.replace('?', '')}: CustomEvent<[`;
+            })
+            .replace(/\) => void;/g, ']>;')
+            .replace(/\) => any;/g, ']>;'),
+        );
       }
     });
   };
@@ -82,6 +100,10 @@ async function build(cb) {
         fileContent = fileContent.replace('// CORE_EVENTS', coreEventsVue);
         fileContent = fileContent.replace('// MODULES_EVENTS', modulesEventsVue);
         fse.writeFileSync(path.resolve(__dirname, `../${outputDir}`, file), fileContent);
+      } else if (file.indexOf('swiper-svelte.d.ts') >= 0) {
+        fileContent = fileContent.replace('// CORE_EVENTS', coreEventsSvelte);
+        fileContent = fileContent.replace('// MODULES_EVENTS', modulesEventsSvelte);
+        fse.writeFileSync(path.resolve(__dirname, `../${outputDir}`, file), fileContent);
       } else {
         fse.writeFileSync(path.resolve(__dirname, `../${outputDir}`, file), fileContent);
       }

src/svelte/init-swiper.js

@@ -1,8 +1,7 @@
 import Swiper from 'swiper';
 import { needsNavigation, needsPagination, needsScrollbar } from './utils.js';
 
-function initSwiper(swiperParams, modules) {
-  if (modules) Swiper.use(modules);
+function initSwiper(swiperParams) {
   return new Swiper(swiperParams);
 }
 

src/svelte/swiper-slide.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { onMount, onDestroy, beforeUpdate, afterUpdate, tick } from 'svelte';
+  import { onMount, onDestroy, beforeUpdate, afterUpdate } from 'svelte';
   import { uniqueClasses } from './utils.js';
 
   export let zoom = undefined;

src/svelte/swiper-svelte.d.ts

@@ -0,0 +1,49 @@
+import { SvelteComponentTyped } from 'svelte';
+import { SwiperOptions, Swiper as SwiperClass } from '../types/';
+
+// @ts-ignore
+interface SwiperProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {}
+interface SwiperProps extends SwiperOptions {}
+
+// @ts-ignore
+interface SwiperSlideProps extends svelte.JSX.HTMLAttributes<HTMLElementTagNameMap['div']> {
+  /**
+   * Enables additional wrapper required for zoom mode
+   *
+   * @default false
+   */
+  zoom?: boolean;
+
+  /**
+   * Slide's index in slides array/collection
+   *
+   * @default false
+   */
+  virtualIndex?: number;
+}
+
+declare class Swiper extends SvelteComponentTyped<
+  SwiperProps,
+  {
+    swiper: CustomEvent<void>;
+    // CORE_EVENTS
+    // MODULES_EVENTS
+  },
+  {
+    default: {};
+    'container-start': {};
+    'wrapper-start': {};
+    'wrapper-end': {};
+    'container-end': {};
+  }
+> {}
+
+declare class SwiperSlide extends SvelteComponentTyped<
+  SwiperSlideProps,
+  {},
+  {
+    default: {};
+  }
+> {}
+
+export { Swiper, SwiperSlide };

src/svelte/swiper.svelte

@@ -23,7 +23,6 @@
 
   let className = undefined;
   export { className as class };
-  export let modules = null;
 
   let containerClasses = 'swiper-container';
   let breakpointChanged = false;
@@ -86,7 +85,7 @@
     },
   });
 
-  swiperInstance = initSwiper(swiperParams, modules);
+  swiperInstance = initSwiper(swiperParams);
   if (swiperInstance.virtual && swiperInstance.params.virtual.enabled) {
     const extendWith = {
       cache: false,