@versatiles/svelte 2.1.5 → 2.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -34,16 +34,18 @@
34
34
  // Escape special characters in search string for use in regex
35
35
  const regExpEscape = (s: string) => s.replace(/[-\\^$*+?.()|[\]{}]/g, '\\$&');
36
36
 
37
- if (inputText.length >= minChar) {
38
- const r = filterResults();
39
- if (r.length > 0) {
40
- const { key, value } = r[0];
41
- inputText = key;
42
- change(JSON.parse(JSON.stringify(value)));
43
- } else {
44
- inputText = '';
37
+ $effect(() => {
38
+ if (inputText.length >= minChar) {
39
+ const r = filterResults();
40
+ if (r.length > 0) {
41
+ const { key, value } = r[0];
42
+ inputText = key;
43
+ change(JSON.parse(JSON.stringify(value)));
44
+ } else {
45
+ inputText = '';
46
+ }
45
47
  }
46
- }
48
+ });
47
49
 
48
50
  // Handle input change
49
51
  function onChange() {
@@ -3,10 +3,9 @@
3
3
  import InputRow from './InputRow.svelte';
4
4
 
5
5
  const { layer }: { layer: MapLayerFill } = $props();
6
-
7
- let color = $state(layer.color);
8
- let pattern = $state(layer.pattern);
9
- let opacity = $state(layer.opacity);
6
+ const color = $derived(layer.color);
7
+ const pattern = $derived(layer.pattern);
8
+ const opacity = $derived(layer.opacity);
10
9
  </script>
11
10
 
12
11
  <InputRow label="Color" id="color">
@@ -16,7 +15,7 @@
16
15
  bind:value={
17
16
  () => $color,
18
17
  (v) => {
19
- $color = v;
18
+ color.set(v);
20
19
  layer.manager.state?.log();
21
20
  }
22
21
  }
@@ -29,7 +28,7 @@
29
28
  bind:value={
30
29
  () => $pattern,
31
30
  (v) => {
32
- $pattern = v;
31
+ pattern.set(v);
33
32
  layer.manager.state?.log();
34
33
  }
35
34
  }
@@ -50,7 +49,7 @@
50
49
  bind:value={
51
50
  () => $opacity,
52
51
  (v) => {
53
- $opacity = v;
52
+ opacity.set(v);
54
53
  layer.manager.state?.log();
55
54
  }
56
55
  }
@@ -3,10 +3,9 @@
3
3
  import InputRow from './InputRow.svelte';
4
4
 
5
5
  const { layer }: { layer: MapLayerLine } = $props();
6
-
7
- let color = $state(layer.color);
8
- let width = $state(layer.width);
9
- let dashed = $state(layer.dashed);
6
+ const color = $derived(layer.color);
7
+ const width = $derived(layer.width);
8
+ const dashed = $derived(layer.dashed);
10
9
  </script>
11
10
 
12
11
  <InputRow id="color" label="Color">
@@ -16,7 +15,7 @@
16
15
  bind:value={
17
16
  () => $color,
18
17
  (v) => {
19
- $color = v;
18
+ color.set(v);
20
19
  layer.manager.state?.log();
21
20
  }
22
21
  }
@@ -29,7 +28,7 @@
29
28
  bind:value={
30
29
  () => $dashed,
31
30
  (v) => {
32
- $dashed = v;
31
+ dashed.set(v);
33
32
  layer.manager.state?.log();
34
33
  }
35
34
  }
@@ -50,7 +49,7 @@
50
49
  bind:value={
51
50
  () => $width,
52
51
  (v) => {
53
- $width = v;
52
+ width.set(v);
54
53
  layer.manager.state?.log();
55
54
  }
56
55
  }
@@ -4,14 +4,13 @@
4
4
  import SymbolSelector from './PanelSymbolSelector.svelte';
5
5
 
6
6
  const { layer }: { layer: MapLayerSymbol } = $props();
7
-
8
- let symbolIndex = $state(layer.symbolIndex);
9
- let color = $state(layer.color);
10
- let rotate = $state(layer.rotate);
11
- let halo = $state(layer.halo);
12
- let label = $state(layer.label);
13
- let labelAlign = $state(layer.labelAlign);
14
- let size = $state(layer.size);
7
+ const symbolIndex = $derived(layer.symbolIndex);
8
+ const color = $derived(layer.color);
9
+ const rotate = $derived(layer.rotate);
10
+ const halo = $derived(layer.halo);
11
+ const label = $derived(layer.label);
12
+ const labelAlign = $derived(layer.labelAlign);
13
+ const size = $derived(layer.size);
15
14
  </script>
16
15
 
17
16
  <InputRow id="label" label="Symbol">
@@ -19,7 +18,7 @@
19
18
  bind:symbolIndex={
20
19
  () => $symbolIndex,
21
20
  (v) => {
22
- $symbolIndex = v;
21
+ symbolIndex.set(v);
23
22
  layer.manager.state?.log();
24
23
  }
25
24
  }
@@ -34,7 +33,7 @@
34
33
  bind:value={
35
34
  () => $color,
36
35
  (v) => {
37
- $color = v;
36
+ color.set(v);
38
37
  layer.manager.state?.log();
39
38
  }
40
39
  }
@@ -51,7 +50,7 @@
51
50
  bind:value={
52
51
  () => $size,
53
52
  (v) => {
54
- $size = v;
53
+ size.set(v);
55
54
  layer.manager.state?.log();
56
55
  }
57
56
  }
@@ -68,7 +67,7 @@
68
67
  bind:value={
69
68
  () => $rotate,
70
69
  (v) => {
71
- $rotate = v;
70
+ rotate.set(v);
72
71
  layer.manager.state?.log();
73
72
  }
74
73
  }
@@ -85,7 +84,7 @@
85
84
  bind:value={
86
85
  () => $halo,
87
86
  (v) => {
88
- $halo = v;
87
+ halo.set(v);
89
88
  layer.manager.state?.log();
90
89
  }
91
90
  }
@@ -99,7 +98,7 @@
99
98
  bind:value={
100
99
  () => $label,
101
100
  (v) => {
102
- $label = v;
101
+ label.set(v);
103
102
  layer.manager.state?.log();
104
103
  }
105
104
  }
@@ -112,7 +111,7 @@
112
111
  bind:value={
113
112
  () => $labelAlign,
114
113
  (v) => {
115
- $labelAlign = v;
114
+ labelAlign.set(v);
116
115
  layer.manager.state?.log();
117
116
  }
118
117
  }
@@ -12,7 +12,7 @@
12
12
 
13
13
  let { symbolIndex = $bindable(), map }: { symbolIndex: number; map: MaplibreMap } = $props();
14
14
 
15
- const symbolLibrary = new SymbolLibrary(map);
15
+ const symbolLibrary = $derived(new SymbolLibrary(map));
16
16
 
17
17
  const drawIconHalo: Action<HTMLCanvasElement, number> = (canvas, index) => symbolLibrary.drawSymbol(canvas, index, 3);
18
18
 
@@ -9,10 +9,10 @@
9
9
  const { geometryManager }: { geometryManager: GeometryManagerInteractive } = $props();
10
10
 
11
11
  let panelShareMap: DialogShareMap | null = null;
12
- let history = geometryManager.state;
13
- let undoEnabled = $state(geometryManager.state.history.undoEnabled);
14
- let redoEnabled = $state(geometryManager.state.history.redoEnabled);
15
- let activeElement = geometryManager.selection.selectedElement;
12
+ const history = $derived(geometryManager.state);
13
+ const undoEnabled = $derived(geometryManager.state.history.undoEnabled);
14
+ const redoEnabled = $derived(geometryManager.state.history.redoEnabled);
15
+ const activeElement = $derived(geometryManager.selection.selectedElement);
16
16
 
17
17
  function importGeoJSON() {
18
18
  const input = document.createElement('input');
package/package.json CHANGED
@@ -1,14 +1,15 @@
1
1
  {
2
2
  "name": "@versatiles/svelte",
3
- "version": "2.1.5",
3
+ "version": "2.1.6",
4
4
  "license": "MIT",
5
5
  "scripts": {
6
6
  "build": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json && vite build && npm run package",
7
7
  "check-watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
8
- "check": "npm run format && npm run lint && npm run build && npm run test",
8
+ "check": "npm run lint && npm run build && npm run test && npm run format:check",
9
9
  "dev": "vite dev",
10
10
  "format": "prettier --write --log-level warn .",
11
- "lint": "prettier --check . && eslint --color .",
11
+ "format:check": "prettier --check .",
12
+ "lint": "eslint --color .",
12
13
  "package": "svelte-kit sync && svelte-package && publint",
13
14
  "prepack": "npm run build",
14
15
  "prepublishOnly": "npm run package",
@@ -17,9 +18,10 @@
17
18
  "screenshots": "npx tsx ./scripts/screenshots.ts",
18
19
  "test-coverage": "vitest run --coverage",
19
20
  "test-playwright": "./scripts/test_playwright.sh",
20
- "test-unit": "vitest run",
21
+ "test-unit": "vitest run --testTimeout 10000",
21
22
  "test": "npm run test-unit && npm run test-playwright",
22
- "upgrade": "vrt deps-upgrade"
23
+ "upgrade": "vrt deps-upgrade",
24
+ "prepare": "husky"
23
25
  },
24
26
  "exports": {
25
27
  ".": {
@@ -36,45 +38,46 @@
36
38
  "!dist/BBoxMap/helpers/*"
37
39
  ],
38
40
  "peerDependencies": {
39
- "sass-embedded": "^1.93.2",
40
- "svelte": "^5.39.11"
41
+ "sass-embedded": "^1.96.0",
42
+ "svelte": "^5.45.8"
41
43
  },
42
44
  "devDependencies": {
43
- "@playwright/test": "^1.56.0",
45
+ "@playwright/test": "^1.57.0",
44
46
  "@sveltejs/adapter-static": "^3.0.10",
45
- "@sveltejs/kit": "^2.46.4",
46
- "@sveltejs/package": "^2.5.4",
47
- "@sveltejs/vite-plugin-svelte": "^6.2.1",
48
- "@turf/turf": "^7.2.0",
47
+ "@sveltejs/kit": "^2.49.5",
48
+ "@sveltejs/package": "^2.5.7",
49
+ "@sveltejs/vite-plugin-svelte": "^6.2.4",
50
+ "@turf/turf": "^7.3.2",
49
51
  "@types/eslint": "^9.6.1",
50
- "@types/node": "^24.7.2",
51
- "@versatiles/release-tool": "^2.4.3",
52
- "@vitest/coverage-v8": "^3.2.4",
53
- "cookie": "^1.0.2",
54
- "eslint": "^9.37.0",
52
+ "@types/node": "^25.0.9",
53
+ "@versatiles/release-tool": "^2.5.0",
54
+ "@vitest/coverage-v8": "^4.0.17",
55
+ "cookie": "^1.1.1",
56
+ "eslint": "^9.39.2",
55
57
  "eslint-config-prettier": "^10.1.8",
56
- "eslint-plugin-svelte": "^3.12.4",
58
+ "eslint-plugin-svelte": "^3.14.0",
57
59
  "geojson": "^0.5.0",
58
- "globals": "^16.4.0",
59
- "happy-dom": "^20.0.0",
60
- "prettier": "^3.6.2",
61
- "prettier-plugin-svelte": "^3.4.0",
62
- "publint": "^0.3.14",
63
- "sass-embedded": "^1.93.2",
64
- "svelte": "^5.39.11",
65
- "svelte-check": "^4.3.3",
60
+ "globals": "^17.0.0",
61
+ "happy-dom": "^20.3.0",
62
+ "husky": "^9.1.7",
63
+ "prettier": "^3.8.0",
64
+ "prettier-plugin-svelte": "^3.4.1",
65
+ "publint": "^0.3.16",
66
+ "sass-embedded": "^1.97.2",
67
+ "svelte": "^5.46.4",
68
+ "svelte-check": "^4.3.5",
66
69
  "svelte-preprocess": "^6.0.3",
67
- "tsx": "^4.20.6",
70
+ "tsx": "^4.21.0",
68
71
  "typescript": "^5.9.3",
69
- "typescript-eslint": "^8.46.0",
70
- "vite": "^7.1.9",
71
- "vitest": "^3.1.3"
72
+ "typescript-eslint": "^8.53.0",
73
+ "vite": "^7.3.1",
74
+ "vitest": "^4.0.17"
72
75
  },
73
76
  "svelte": "./dist/index.js",
74
77
  "types": "./dist/index.d.ts",
75
78
  "type": "module",
76
79
  "dependencies": {
77
- "@versatiles/style": "^5.7.0",
78
- "maplibre-gl": "^5.9.0"
80
+ "@versatiles/style": "^5.8.4",
81
+ "maplibre-gl": "^5.16.0"
79
82
  }
80
83
  }