Svelte linting

.eslintignore

@@ -1,8 +1,6 @@
 demos
 build
 playground
-playground-react
-playground-vue
 node_modules
 dist
 package

.eslintrc.js

@@ -1,10 +1,28 @@
+const rules = {
+  'no-param-reassign': 'off',
+  'no-underscore-dangle': 'off',
+  'prefer-object-spread': 'off',
+  'prefer-destructuring': 'off',
+  'import/prefer-default-export': 'off',
+  'no-shadow': 'off',
+  'guard-for-in': 'off',
+  'no-restricted-syntax': 'off',
+  'import/no-extraneous-dependencies': 'off',
+  'no-console': 'off',
+  'no-restricted-globals': ['error', 'window', 'document'],
+  'react/jsx-filename-extension': 'off',
+  'jsx-a11y/label-has-associated-control': 'off',
+  'react/no-array-index-key': 'off',
+  'react/prop-types': 'off',
+  'react/jsx-props-no-spreading': 'off',
+};
 module.exports = {
   env: {
     browser: true,
     es6: true,
     node: true,
   },
-  extends: ['plugin:react/recommended', 'airbnb-base', 'plugin:prettier/recommended'],
+
   globals: {
     Atomics: 'readonly',
     SharedArrayBuffer: 'readonly',
@@ -16,23 +34,26 @@ module.exports = {
     ecmaVersion: 2018,
     sourceType: 'module',
   },
-  plugins: ['react'],
-  rules: {
-    'no-param-reassign': 'off',
-    'no-underscore-dangle': 'off',
-    'prefer-object-spread': 'off',
-    'prefer-destructuring': 'off',
-    'import/prefer-default-export': 'off',
-    'no-shadow': 'off',
-    'guard-for-in': 'off',
-    'no-restricted-syntax': 'off',
-    'import/no-extraneous-dependencies': 'off',
-    'no-console': 'off',
-    'no-restricted-globals': ['error', 'window', 'document'],
-    'react/jsx-filename-extension': 'off',
-    'jsx-a11y/label-has-associated-control': 'off',
-    'react/no-array-index-key': 'off',
-    'react/prop-types': 'off',
-    'react/jsx-props-no-spreading': 'off',
-  },
+
+  overrides: [
+    {
+      files: ['*.js'],
+      extends: ['plugin:react/recommended', 'airbnb-base', 'plugin:prettier/recommended'],
+      rules,
+    },
+    {
+      files: ['**/*.jsx', 'src/react/*.js'],
+      plugins: ['react'],
+      rules,
+    },
+    {
+      files: ['**/*.svelte'],
+      plugins: ['svelte3'],
+      processor: 'svelte3/svelte3',
+      rules: {
+        ...rules,
+        'no-restricted-globals': 'off',
+      },
+    },
+  ],
 };

.prettierignore

@@ -1,6 +1,5 @@
 demos
 build
-playground
 node_modules
 dist
 package

package.json

@@ -19,10 +19,10 @@
     "vue:dev": "npm run build:dev && concurrently --kill-others \"npm run webpack:vue\" \"npm run watch:dev\"",
     "svelte:dev": "npm run build:dev && concurrently --kill-others \"npm run webpack:svelte\" \"npm run watch:dev\"",
     "serve": "serve -l tcp://0.0.0.0:5000",
-    "prettier": "prettier \"**/*.+(js|json|scss|css|less|ts)\"",
+    "prettier": "prettier \"**/*.+(js|json|scss|css|less|ts|svelte|jsx)\"",
     "format": "npm run prettier -- --write",
     "check-format": "npm run prettier -- --list-different",
-    "lint": "eslint --ext .js .",
+    "lint": "eslint --ext .js,.svelte,.jsx .",
     "validate": "npm-run-all --parallel check-format lint",
     "release": "npm run validate && node ./scripts/release",
     "test": "npm run validate && npm run build:prod"
@@ -90,6 +90,7 @@
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.20.0",
     "eslint-plugin-react-hooks": "^4.0.3",
+    "eslint-plugin-svelte3": "^2.7.3",
     "exec-sh": "^0.3.4",
     "glob": "^7.1.6",
     "html-webpack-plugin": "^4.3.0",
@@ -102,6 +103,7 @@
     "npm-run-all": "^4.1.5",
     "postcss": "^7.0.30",
     "prettier": "^2.0.5",
+    "prettier-plugin-svelte": "^1.3.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "rollup": "^2.10.8",

playground-react/App.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-globals */
 import React from 'react';
 import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from '../build/core';
 import { Swiper, SwiperSlide } from '../build/react';

playground-react/main.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+// eslint-disable-next-line
 import '../build/swiper-bundle.css';
 
 import App from './App.jsx';

playground-svelte/App.svelte

@@ -1,12 +1,18 @@
+<script>
+  import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from '../build/core';
+  import { Swiper, SwiperSlide } from '../build/svelte';
+
+  SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);
+</script>
+
 <main>
   <Swiper
     on:swiper={(e) => (window.swiper = e.detail[0])}
     slidesPerView={3}
     spaceBetween={50}
     navigation
     scrollbar={{ draggable: true }}
-    pagination={{ clickable: true }}
-  >
+    pagination={{ clickable: true }}>
     <SwiperSlide>Slide 1</SwiperSlide>
     <SwiperSlide>Slide 2</SwiperSlide>
     <SwiperSlide>Slide 3</SwiperSlide>
@@ -19,10 +25,3 @@
     <SwiperSlide>Slide 10</SwiperSlide>
   </Swiper>
 </main>
-<script>
-  import SwiperCore, { Navigation, Pagination, Scrollbar, A11y } from '../build/core';
-  import { Swiper, SwiperSlide } from '../build/svelte';
-
-  SwiperCore.use([Navigation, Pagination, Scrollbar, A11y]);
-
-</script>

playground-svelte/Thumbs.svelte

@@ -1,10 +1,23 @@
+<script>
+  import SwiperCore, { Navigation, Pagination, Scrollbar, A11y, Thumbs } from '../build/core';
+  import { Swiper, SwiperSlide } from '../build/svelte';
+
+  SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Thumbs]);
+
+  let thumbsSwiper = null;
+
+  const slides = [0, 1, 2, 3, 4, 5, 6, 7];
+
+  const setThumbsSwiper = (e) => {
+    const [swiper] = e.detail;
+    setTimeout(() => {
+      thumbsSwiper = swiper;
+    });
+  };
+</script>
+
 <main>
-  <Swiper
-    thumbs={{ swiper: thumbsSwiper }}
-    slidesPerView={1}
-    spaceBetween={50}
-    navigation
-  >
+  <Swiper thumbs={{ swiper: thumbsSwiper }} slidesPerView={1} spaceBetween={50} navigation>
     {#each slides as slide, index (index)}
       <SwiperSlide>Slide {slide + 1}</SwiperSlide>
     {/each}
@@ -15,28 +28,9 @@
     spaceBetween={10}
     navigation
     watchSlidesVisibility
-    watchSlidesProgress
-  >
+    watchSlidesProgress>
     {#each slides as slide, index (index)}
       <SwiperSlide>Slide {slide + 1}</SwiperSlide>
     {/each}
   </Swiper>
-
 </main>
-<script>
-  import SwiperCore, { Navigation, Pagination, Scrollbar, A11y, Thumbs } from '../build/core';
-  import { Swiper, SwiperSlide } from '../build/svelte';
-
-  SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Thumbs]);
-
-  let thumbsSwiper = null;
-
-  const slides = [0, 1, 2, 3, 4, 5, 6, 7];
-
-  const setThumbsSwiper = (e) => {
-    const [swiper] = e.detail;
-    setTimeout(() => {
-      thumbsSwiper = swiper;
-    })
-  }
-</script>

playground-svelte/Virtual.svelte

@@ -1,3 +1,12 @@
+<script>
+  import SwiperCore, { Navigation, Pagination, Scrollbar, A11y, Virtual } from '../build/core';
+  import { Swiper, SwiperSlide } from '../build/svelte';
+
+  SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Virtual]);
+
+  const virtualSlides = Array.from({ length: 5 }).map((slides, index) => `Slide ${index + 1}`);
+</script>
+
 <main>
   <Swiper
     on:swiper={(e) => (window.swiper = e.detail[0])}
@@ -6,24 +15,10 @@
     navigation
     scrollbar={{ draggable: true }}
     pagination={{ clickable: true }}
-    virtual={{
-      slides: virtualSlides,
-    }}
-    let:virtualData={{slides, offset, from}}
-  >
+    virtual={{ slides: virtualSlides }}
+    let:virtualData={{ slides, offset, from }}>
     {#each slides as slide, index (from + index)}
-      <SwiperSlide
-        virtualIndex={from + index}
-        style={`left: ${offset}px`}
-      >{slide}</SwiperSlide>
+      <SwiperSlide virtualIndex={from + index} style={`left: ${offset}px`}>{slide}</SwiperSlide>
     {/each}
   </Swiper>
 </main>
-<script>
-  import SwiperCore, { Navigation, Pagination, Scrollbar, A11y, Virtual } from '../build/core';
-  import { Swiper, SwiperSlide } from '../build/svelte';
-
-  SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Virtual]);
-
-  const virtualSlides = Array.from({length: 5}).map((slides, index) => `Slide ${index + 1}`);
-</script>

playground-svelte/main.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line
 import '../build/swiper-bundle.css';
 
 import App from './App.svelte';

playground-vue/main.js

@@ -1,4 +1,6 @@
 import { createApp } from 'vue';
+
+// eslint-disable-next-line
 import '../build/swiper-bundle.css';
 
 import App from './App.vue';

src/svelte/swiper-slide.svelte

@@ -1,20 +1,3 @@
-<div
-  bind:this={slideEl}
-  class={uniqueClasses(`${slideClasses}${className ? ` ${className}` : ''}`)}
-  data-swiper-slide-index={virtualIndex}
-  {...$$restProps}
->
-  {#if zoom}
-    <div
-      class="swiper-zoom-container"
-      data-swiper-zoom={typeof zoom === 'number' ? zoom : undefined}
-    >
-      <slot data={slideData} />
-    </div>
-  {:else}
-    <slot data={slideData} />
-  {/if}
-</div>
 <script>
   import { onMount, onDestroy, beforeUpdate, afterUpdate, tick } from 'svelte';
   import { uniqueClasses } from './utils';
@@ -35,19 +18,19 @@
     if (el === slideEl) {
       slideClasses = classNames;
     }
-  }
+  };
 
   const attachEvent = () => {
     if (!swiper || eventAttached) return;
     swiper.on('_slideClass', updateClasses);
     eventAttached = true;
-  }
+  };
 
   const detachEvent = () => {
     if (!swiper) return;
     swiper.off('_slideClass', updateClasses);
     eventAttached = false;
-  }
+  };
 
   $: slideData = {
     isActive:
@@ -70,7 +53,7 @@
       attachEvent();
     };
     attachEvent();
-  })
+  });
 
   afterUpdate(() => {
     if (!slideEl || !swiper) return;
@@ -90,6 +73,21 @@
   onDestroy(() => {
     if (!swiper) return;
     detachEvent();
-  })
-
+  });
 </script>
+
+<div
+  bind:this={slideEl}
+  class={uniqueClasses(`${slideClasses}${className ? ` ${className}` : ''}`)}
+  data-swiper-slide-index={virtualIndex}
+  {...$$restProps}>
+  {#if zoom}
+    <div
+      class="swiper-zoom-container"
+      data-swiper-zoom={typeof zoom === 'number' ? zoom : undefined}>
+      <slot data={slideData} />
+    </div>
+  {:else}
+    <slot data={slideData} />
+  {/if}
+</div>