feat: upgrade to upgrade @sveltejs/kit@2, vite-plugin-svelte@3, vite@5, and vitest@1

package.json

@@ -15,7 +15,10 @@
   "sideEffects": false,
   "license": "ISC",
   "exports": {
-    ".": "./index.js",
+    ".": {
+      "svelte": "./index.js",
+      "types": "./index.d.ts"
+    },
     "./index.d.ts": "./index.d.ts",
     "./index.js": "./index.js",
     "./themes/jse-theme-dark.css": "./themes/jse-theme-dark.css",
@@ -110,10 +113,10 @@
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-terser": "0.4.4",
     "@rollup/plugin-typescript": "11.1.5",
-    "@sveltejs/adapter-auto": "2.1.1",
-    "@sveltejs/kit": "1.27.7",
+    "@sveltejs/adapter-auto": "3.0.0",
+    "@sveltejs/kit": "2.0.0",
     "@sveltejs/package": "2.2.3",
-    "@sveltejs/vite-plugin-svelte": "2.5.3",
+    "@sveltejs/vite-plugin-svelte": "3.0.1",
     "@testing-library/jest-dom": "6.1.5",
     "@testing-library/svelte": "4.0.5",
     "@types/cookie": "0.6.0",
@@ -122,7 +125,7 @@
     "@types/lodash-es": "4.17.12",
     "@typescript-eslint/eslint-plugin": "6.13.2",
     "@typescript-eslint/parser": "6.13.2",
-    "@vitest/coverage-c8": "0.33.0",
+    "@vitest/coverage-v8": "1.0.4",
     "cpy-cli": "5.0.0",
     "del-cli": "5.1.0",
     "eslint": "8.55.0",
@@ -140,10 +143,9 @@
     "rollup-plugin-svelte": "7.1.6",
     "standard-version": "9.5.0",
     "svelte-check": "3.6.2",
-    "svelte-preprocess": "5.1.1",
-    "svelte2tsx": "0.6.27",
+    "svelte-preprocess": "5.1.3",
     "typescript": "5.3.2",
-    "vite": "4.5.1",
-    "vitest": "0.34.6"
+    "vite": "5.0.9",
+    "vitest": "1.0.4"
   }
 }

src/lib/components/__snapshots__/JSONEditor.test.ts.snap

@@ -1476,8 +1476,8 @@ exports[`JSONEditor > render tree mode 1`] = `
           data-jsoneditor-scrollable-contents="true"
         >
           <div
-            aria-selected="true"
-            class="jse-json-node jse-expanded s-BfIc3EpAoT-Y jse-root jse-selected-value"
+            aria-selected="false"
+            class="jse-json-node jse-expanded s-BfIc3EpAoT-Y jse-root"
             data-path=""
             role="treeitem"
             style="--level: 0;"
@@ -1544,38 +1544,6 @@ exports[`JSONEditor > render tree mode 1`] = `
                   </div>
                 </div>
 
-                <div
-                  class="jse-context-menu-pointer-anchor s-BfIc3EpAoT-Y"
-                >
-                  <button
-                    class="jse-context-menu-pointer s-g41Za8tY_tFa jse-selected"
-                    title="Open context menu (Click here, right click on the selection, or use the context menu button or Ctrl+Q)"
-                    type="button"
-                  >
-                    <svg
-                      aria-label=""
-                      class="fa-icon s-T5YyQewRBd7n"
-                      height="16"
-                      role="presentation"
-                      style=""
-                      version="1.1"
-                      viewBox="0 0 320 512"
-                      width="10"
-                    >
-                      <path
-                        d="M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z"
-                      />
-
-
-
-
-
-                    </svg>
-                    <!--&lt;Svg&gt;-->
-                    <!--&lt;Icon&gt;-->
-                  </button>
-                  <!--&lt;ContextMenuPointer&gt;-->
-                </div>
               </div>
 
 
@@ -1593,8 +1561,8 @@ exports[`JSONEditor > render tree mode 1`] = `
 
 
               <div
-                aria-selected="true"
-                class="jse-json-node jse-expanded s-BfIc3EpAoT-Y jse-selected-value"
+                aria-selected="false"
+                class="jse-json-node jse-expanded s-BfIc3EpAoT-Y"
                 data-path="%2F0"
                 role="treeitem"
                 style="--level: 1;"
@@ -1681,8 +1649,8 @@ exports[`JSONEditor > render tree mode 1`] = `
                 >
 
                   <div
-                    aria-selected="true"
-                    class="jse-json-node s-BfIc3EpAoT-Y jse-selected-value"
+                    aria-selected="false"
+                    class="jse-json-node s-BfIc3EpAoT-Y"
                     data-path="%2F0%2Fid"
                     role="treeitem"
                     style="--level: 2;"
@@ -1771,8 +1739,8 @@ exports[`JSONEditor > render tree mode 1`] = `
               <!--&lt;JSONNode&gt;-->
 
               <div
-                aria-selected="true"
-                class="jse-json-node jse-expanded s-BfIc3EpAoT-Y jse-selected-value"
+                aria-selected="false"
+                class="jse-json-node jse-expanded s-BfIc3EpAoT-Y"
                 data-path="%2F1"
                 role="treeitem"
                 style="--level: 1;"
@@ -1859,8 +1827,8 @@ exports[`JSONEditor > render tree mode 1`] = `
                 >
 
                   <div
-                    aria-selected="true"
-                    class="jse-json-node s-BfIc3EpAoT-Y jse-selected-value"
+                    aria-selected="false"
+                    class="jse-json-node s-BfIc3EpAoT-Y"
                     data-path="%2F1%2Fid"
                     role="treeitem"
                     style="--level: 2;"
@@ -1922,8 +1890,8 @@ exports[`JSONEditor > render tree mode 1`] = `
                   </div>
                   <!--&lt;JSONNode&gt;-->
                   <div
-                    aria-selected="true"
-                    class="jse-json-node s-BfIc3EpAoT-Y jse-selected-value"
+                    aria-selected="false"
+                    class="jse-json-node s-BfIc3EpAoT-Y"
                     data-path="%2F1%2Fname"
                     role="treeitem"
                     style="--level: 2;"
@@ -2012,8 +1980,8 @@ exports[`JSONEditor > render tree mode 1`] = `
               <!--&lt;JSONNode&gt;-->
 
               <div
-                aria-selected="true"
-                class="jse-json-node jse-expanded s-BfIc3EpAoT-Y jse-selected-value"
+                aria-selected="false"
+                class="jse-json-node jse-expanded s-BfIc3EpAoT-Y"
                 data-path="%2F2"
                 role="treeitem"
                 style="--level: 1;"
@@ -2100,8 +2068,8 @@ exports[`JSONEditor > render tree mode 1`] = `
                 >
 
                   <div
-                    aria-selected="true"
-                    class="jse-json-node s-BfIc3EpAoT-Y jse-selected-value"
+                    aria-selected="false"
+                    class="jse-json-node s-BfIc3EpAoT-Y"
                     data-path="%2F2%2Fid"
                     role="treeitem"
                     style="--level: 2;"

src/lib/components/modes/tablemode/TableMode.svelte

@@ -432,7 +432,7 @@
     if (!isEqual(documentState.selection, externalSelection)) {
       debug('applyExternalSelection', externalSelection)
 
-      if (isJSONSelection(externalSelection)) {
+      if (isJSONSelection(externalSelection) || externalSelection === null) {
         updateSelection(externalSelection)
       }
     }

src/lib/components/modes/treemode/TreeMode.svelte

@@ -265,6 +265,8 @@
     escapeUnicodeCharacters
   })
 
+  $: debug('selection', documentState.selection)
+
   let pastedJson: PastedJson
 
   let showSearch = false
@@ -609,7 +611,7 @@
     if (!isEqual(documentState.selection, externalSelection)) {
       debug('applyExternalSelection', externalSelection)
 
-      if (isJSONSelection(externalSelection)) {
+      if (isJSONSelection(externalSelection) || externalSelection === null) {
         updateSelection(externalSelection)
       }
     }

src/lib/logic/documentState.ts

@@ -42,7 +42,6 @@ import type {
   Section,
   VisibleSection
 } from '$lib/types'
-import { SelectionType } from '$lib/types.js'
 import { CaretType } from '$lib/types.js'
 import { int } from '../utils/numberUtils.js'
 import { isLargeContent } from '$lib/utils/jsonUtils.js'
@@ -60,11 +59,7 @@ export function createDocumentState(props?: CreateDocumentStateProps): DocumentS
     expandedMap: {},
     enforceStringMap: {},
     visibleSectionsMap: {},
-    selection: {
-      type: SelectionType.value,
-      path: [],
-      edit: false
-    },
+    selection: null,
     sortedColumn: null
   }
 

svelte.config.js

@@ -1,14 +1,17 @@
 import adapter from '@sveltejs/adapter-auto'
-import preprocess from 'svelte-preprocess'
+import sveltePreprocess from 'svelte-preprocess'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   // Consult https://github.com/sveltejs/svelte-preprocess
   // for more information about preprocessors
-  preprocess: preprocess(),
+  preprocess: sveltePreprocess(),
 
   kit: {
-    adapter: adapter()
+    adapter: adapter(),
+    alias: {
+      'svelte-jsoneditor': 'src/lib'
+    }
   }
 }
 

tools/createVanillaPackageJson.js

@@ -27,6 +27,7 @@ const vanillaPackage = {
   browser: './standalone.js',
   exports: {
     ...pkg.exports,
+    '.': './index.js', // we don't create an object here, see https://github.com/josdejong/svelte-jsoneditor/issues/334
     './index.js.map': './index.js.map',
     './standalone.js': './standalone.js',
     './standalone.js.map': './standalone.js.map'

tsconfig.json

@@ -5,31 +5,16 @@
     "module": "es2020",
     "lib": ["es2020", "dom"],
     "target": "es2020",
-    /**
-			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
-			to enforce using \`import type\` instead of \`import\` for Types.
-			*/
-    "importsNotUsedAsValues": "error",
     "isolatedModules": true,
     "resolveJsonModule": true,
-    /**
-			To have warnings/errors of the Svelte compiler at the correct position,
-			enable source maps by default.
-			*/
-    "sourceMap": true,
+    "sourceMap": true, // To have warnings/errors of the Svelte compiler at the correct position, enable source maps
     "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
-    "baseUrl": ".",
     "strict": true,
     "noImplicitAny": true,
-    "allowJs": false, // turned off (temporarily?) because else Mocha tests fail to run in WebStorm, see https://youtrack.jetbrains.com/issue/WEB-50130
-    "checkJs": false,
-    "paths": {
-      "$lib": ["src/lib"],
-      "$lib/*": ["src/lib/*"],
-      "svelte-jsoneditor": ["src/lib"]
-    }
+    "allowJs": false,
+    "checkJs": false
   },
   "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
 }