chore: bump sveltekit to v2 along with its dependencies, add tabindex…

… and role=button to avoid aria warnings and fix package publishing to tackle the https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#missing-exports-condition issue

.eslintrc.cjs

@@ -1,16 +1,27 @@
 module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
-  plugins: ['svelte3', '@typescript-eslint', 'cypress'],
-  ignorePatterns: ['*.cjs'],
-  overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
-  settings: {
-    'svelte3/typescript': () => require('typescript'),
-  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+    'plugin:svelte/recommended',
+  ],
+  plugins: ['@typescript-eslint', 'cypress'],
+  ignorePatterns: ['*.cjs', 'dist/*'],
+  overrides: [
+    {
+      files: ['*.svelte'],
+      parser: 'svelte-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser',
+      },
+    },
+  ],
   parserOptions: {
     sourceType: 'module',
     ecmaVersion: 2020,
+    extraFileExtensions: ['.svelte'],
   },
   env: {
     browser: true,

.github/workflows/quality-gate.yml

@@ -2,7 +2,6 @@ name: Quality Gate
 
 on: [pull_request]
 
-
 jobs:
   quality-gate:
     runs-on: ubuntu-latest

.gitignore

@@ -2,7 +2,7 @@
 node_modules
 /build
 /.svelte-kit
-/package
+/dist
 .env
 .env.*
 !.env.example
@@ -12,4 +12,4 @@ cypress/fixtures
 cypress/videos
 cypress/screenshots
 yarn-error.log
-package-lock.json
+package-lock.json

.prettierignore

@@ -2,7 +2,7 @@
 node_modules
 /build
 /.svelte-kit
-/package
+/dist
 .env
 .env.*
 !.env.example

README.md

@@ -4,7 +4,7 @@ A Svelte component to crop images with easy interactions
 
 This is a rewrite of `react-easy-crop` (https://github.com/valentinh/react-easy-crop).
 
-[![version][version-badge]][package] [![Monthly downloads][npmstats-badge]][npmstats] ![gzip size][gzip-badge]  [![MIT License][license-badge]][license] [![PRs Welcome][prs-badge]][prs]
+[![version][version-badge]][package] [![Monthly downloads][npmstats-badge]][npmstats] ![gzip size][gzip-badge] [![MIT License][license-badge]][license] [![PRs Welcome][prs-badge]][prs]
 
 ![svelte-easy-crop Demo](https://user-images.githubusercontent.com/2678610/41561426-365e7a44-734a-11e8-8e0e-1c04251f53e4.gif)
 

package.json

@@ -20,12 +20,12 @@
   "scripts": {
     "dev": "vite dev --port 3000",
     "build": "svelte-kit sync && yarn package",
-    "prepublishOnly": "echo 'Did you mean to publish `./package/`, instead of `./`?' && exit 1",
+    "prepublishOnly": "yarn package",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "prettier --plugin-search-dir . --check . && eslint .",
     "format": "prettier --plugin-search-dir . --write .",
-    "package": "svelte-package && cp README.md package/",
+    "package": "svelte-package",
     "test": "vitest run && yarn e2e",
     "unit": "vitest",
     "e2e": "start-server-and-test dev http://localhost:3000 cy:run",
@@ -35,26 +35,45 @@
     "cy:ci": "cypress run --record"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^1.0.2",
-    "@sveltejs/kit": "^1.0.0",
-    "@sveltejs/package": "^1.0.0",
-    "@typescript-eslint/eslint-plugin": "^5.45.0",
-    "@typescript-eslint/parser": "^5.45.0",
+    "@sveltejs/adapter-auto": "^3.0.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/package": "^2.2.4",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.15.0",
+    "@typescript-eslint/parser": "^6.15.0",
     "cypress": "^12.4.1",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-cypress": "^2.12.1",
-    "eslint-plugin-svelte3": "^4.0.0",
+    "eslint-plugin-svelte": "^2.35.1",
     "prettier": "^2.8.0",
-    "prettier-plugin-svelte": "^2.8.1",
+    "prettier-plugin-svelte": "^2.10.1",
     "query-string": "^8.1.0",
     "start-server-and-test": "^1.15.3",
-    "svelte": "^3.54.0",
-    "svelte-check": "^3.0.1",
+    "svelte-check": "^3.4.3",
     "tslib": "^2.4.1",
-    "typescript": "^4.9.3",
-    "vite": "^4.0.0",
-    "vitest": "^0.28.3"
+    "typescript": "^5.0.0",
+    "vite": "^5.0.0",
+    "vitest": "^1.0.0"
   },
-  "type": "module"
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
+  "type": "module",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "dependencies": {
+    "svelte": "^4.2.8"
+  }
 }

src/lib/Cropper.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { createEventDispatcher, onDestroy, onMount } from 'svelte'
-  import type { HTMLImgAttributes } from 'svelte/elements/index'
+  import type { HTMLImgAttributes } from 'svelte/elements'
   import * as helpers from './helpers'
   import type { Point, CropShape, Size, DispatchEvents, ImageSize } from './types'
 
@@ -16,6 +16,7 @@
   export let zoomSpeed = 1
   export let crossOrigin: HTMLImgAttributes['crossorigin'] = null
   export let restrictPosition = true
+  export let tabindex: number | undefined
 
   let cropperSize: Size | null = null
   let imageSize: ImageSize = { width: 0, height: 0, naturalWidth: 0, naturalHeight: 0 }
@@ -251,6 +252,8 @@
   on:mousedown|preventDefault={onMouseDown}
   on:touchstart|preventDefault={onTouchStart}
   on:wheel|preventDefault={onWheel}
+  {tabindex}
+  role="button"
   data-testid="container"
 >
   <img

svelte.config.js

@@ -1,5 +1,5 @@
 import adapter from '@sveltejs/adapter-auto'
-import { vitePreprocess } from '@sveltejs/kit/vite'
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {