Svelte5 migration + complete rewrite

.github/workflows/npm-publish-next.yml

@@ -0,0 +1,33 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a 'next' tag is published
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Publish @radiofrance/svelte-leaflet
+
+on:
+  push:
+    tags:
+      - 'v[0-9]+.[0-9]+.[0-9]+-next.[0-9]+'
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - run: npm ci
+      - run: npm run check
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm publish --tag next
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

.github/workflows/npm-publish.yml → .github/workflows/npm-publish-stable.yml

@@ -1,12 +1,12 @@
-# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# This workflow will run tests using node and then publish a package to GitHub Packages when a stable tag is published
 # For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
 
 name: Publish @radiofrance/svelte-leaflet
 
 on:
-  release:
-    types: [created]
-
+  push:
+    tags:
+      - 'v[0-9]+.[0-9]+.[0-9]+'
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -25,7 +25,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 22
           registry-url: https://registry.npmjs.org/
       - run: npm ci
       - run: npm publish

.gitignore

@@ -1,13 +1,23 @@
-.DS_Store
+test-results
 node_modules
+
+# Output
+.output
+.vercel
+/.svelte-kit
 /build
 /dist
-/.svelte-kit
-/package
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
 .env
 .env.*
 !.env.example
+!.env.test
+
+# Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
-
-/test-results/

.prettierignore

@@ -1,4 +1,4 @@
-# Ignore files for PNPM, NPM and YARN
-pnpm-lock.yaml
+# Package Managers
 package-lock.json
+pnpm-lock.yaml
 yarn.lock

.prettierrc

@@ -1,8 +1,8 @@
 {
 	"useTabs": true,
 	"singleQuote": true,
-	"trailingComma": "none",
+	"trailingComma": "all",
 	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

.vscode/settings.json

@@ -0,0 +1,28 @@
+{
+	"workbench.editor.labelFormat": "default",
+	"workbench.editor.customLabels.patterns": {
+		// Page
+		"**/routes/**/*/+page.svelte": "${dirname} - Page",
+		"**/routes/+page.svelte": "(root) - Page",
+		// Layout
+		"**/routes/**/*/+layout.svelte": "${dirname} - Layout",
+		"**/routes/+layout.svelte": "(root) - Layout",
+		// Page Data
+		"**/routes/**/*/+page.[tj]s": "${dirname} - Page Data",
+		"**/routes/+page.[tj]s": "(root) - Page Data",
+		// Layout Data
+		"**/routes/**/*/+layout.[tj]s": "${dirname} - Layout Data",
+		"**/routes/+layout.[tj]s": "(root) - Layout Data",
+		// Page Server Data
+		"**/routes/**/*/+page.server.[tj]s": "${dirname} - Page Server Data",
+		"**/routes/+page.server.[tj]s": "(root) - Page Server Data",
+		// Page Layout Data
+		"**/routes/**/*/+layout.server.[tj]s": "${dirname} - Layout Server Data",
+		"**/routes/+layout.server.[tj]s": "(root) - Layout Server Data",
+		// Error Page
+		"**/routes/**/*/+error.svelte": "${dirname} - Error Page",
+		"**/routes/+error.svelte": "(root) - Error Page",
+		// Server Endpoint
+		"**/routes/**/*/+server.[tj]s": "${dirname} - Server Endpoint"
+	}
+}

README.md

@@ -1,90 +1,80 @@
 # @radiofrance/svelte-leaflet
 
-A library that wraps leaflet classes in domless/renderless svelte components.
+Simple Leaflet maps for your Svelte projects.
 
-## Install
-
-`npm i -D @radiofrance/svelte-leaflet`
-
-## Components
-
-### Map
-
-Renders a map Leaflet Map. The Map will take up 100% of its container's height and width.
-
-#### Attributes
-
-| Attribute     | Type                                                          | Default                                            | Notes                                                                              |
-| ------------- | ------------------------------------------------------------- | -------------------------------------------------- | ---------------------------------------------------------------------------------- |
-| `options`     | [MapOptions](https://leafletjs.com/reference.html#map-option) | `{}`                                               | Map options                                                                        |
-| `tilesUrl`    | string                                                        | `'https://tile.openstreetmap.org/{z}/{x}/{y}.png'` | more free tile services can be found at https://alexurquhart.github.io/free-tiles/ |
-| `attribution` | string                                                        | `'©OpenStreetMap'` _(link to openstreetmap)_      |                                                                                    |
-
-#### Events
+## Features
 
-All events are forwarded from the Map class, see the leaflet documentation for more information.
+- Works in SSR pages
+- TypeScript : events, props and options are fully typed
+- Simple event usage with the `oneventname` syntax
+  - ![](./static/map-types.png)
+  - `event.sourceTarget` is correctly typed
+- Fully reactive : update props and options, the components will update
+- Customize `DivIcon`, `Popup` and more with Svelte components or HTML instead of strings
+- Single dependency : no `leaflet` or `@types/leaflet` needed
 
-- https://leafletjs.com/reference.html#map-event
+## Compatibility
 
-Example:
+- Version 1.0.0 and above are compatible with Svelte 5.
+- For Svelte 3 and 4, use version 0.1.x (not actively maintained).
 
-```svelte
-<Map {options} on:click={(e) => console.log(e.detail.latlng)} />
-```
-
-### Marker
-
-Add a marker to the map.
-
-- Can be used as a child of `<Map>` or `<MarkerClusterGroup>`
-- A `<Popup>` component can be passed as the Marker child to display a popup when the marker is clicked.
-- A component with `slot="icon"` attribute can be passed as the Marker child to display a custom icon.
-
-#### Attributes
-
-| Name     | Type                                                  | Default    | Notes                                         |
-| -------- | ----------------------------------------------------- | ---------- | --------------------------------------------- |
-| `latlng` | [LatLng](https://leafletjs.com/reference.html#latlng) | _required_ | position of the marker                        |
-| `size`   | number                                                | `25`       | icon size (only used with a custom icon)      |
-| `id`     | string                                                | `''`       | an identifier to link the maker with you data |
-
-#### Events
+## Install
 
-All events are forwarded from the Marker class, see the leaflet documentation for more information.
+`npm i -D @radiofrance/svelte-leaflet`
 
-- https://leafletjs.com/reference.html#marker-event
+## Components
 
-### Popup
+### UI Layers
 
-`<Popup>` children will be displayed when the marker is clicked.
+- ✅ Marker
+- DivOverlay _(abstract class)_
+- ✅ Popup
+- ✅ Tooltip
 
-- Use as a `<Marker>` child.
+### Raster Layers
 
-#### Attributes
+- ✅ TileLayer
+- ✅ TileLayer.WMS
+- ✅ ImageOverlay
+- ✅ VideoOverlay
 
-| Name      | Type                                                              | Default | Notes                                |
-| --------- | ----------------------------------------------------------------- | ------- | ------------------------------------ |
-| `options` | [PopupOptions](https://leafletjs.com/reference.html#popup-option) | `{}`    | options to pass to the leaflet popup |
+### Vector Layers
 
-### MarkerClusterGroup
+- Path
+- ✅ Polyline
+- ✅ Polygon
+- ✅ Rectangle
+- ✅ Circle
+- ✅ CircleMarker
+- ✅ SVGOverlay
+- SVG _(this is a Renderer, won't be implemented)_
+- Canvas _(this is a Renderer, won't be implemented)_
 
-Enables clustering of child markers
+### Other Layers
 
-- Use as a `<Map>` child
+- LayerGroup
+- FeatureGroup
+- GeoJSON
+- GridLayer
 
-#### Attributes
+### Basic Types
 
-| Name      | Type                                                                                                                                   | Default | Notes                                                                                                      |
-| --------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------------------- |
-| `options` | [MarkerClusterGroupOptions](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/leaflet.markercluster/index.d.ts#L36) | `{}`    | [MarkerClusterGroup options](https://github.com/leaflet/Leaflet.markercluster?tab=readme-ov-file#defaults) |
+- LatLng
+- LatLngBounds
+- Point
+- Bounds
+- ✅ Icon
+- ✅ DivIcon
 
-### Polyline
+### Controls
 
-Allows to draw lines on the map
+- ✅ Zoom
+- Attribution
+- Layers
+- Scale
 
-#### Attributes
+### Extra
 
-| Name      | Type                                                                    | Default    | Notes                                   |
-| --------- | ----------------------------------------------------------------------- | ---------- | --------------------------------------- |
-| `latlngs` | [LatLng[]](https://leafletjs.com/reference.html#latlng)                 | _required_ | array of points to draw the line        |
-| `options` | [PolylineOptions](https://leafletjs.com/reference.html#polyline-option) | `{}`       | options to pass to the leaflet polyline |
+- ✅ MarkerClusterGroup
+- ✅ LocateControl
+  - ![locate control](./static//locate-control.png)

tests/test.ts → e2e/demo.test.ts

@@ -12,7 +12,7 @@ test('Getting started page', async ({ page }) => {
 	await page.goto('http://localhost:5173/');
 	await page.getByRole('link', { name: 'Getting started' }).click();
 	await page.getByRole('link', { name: 'Map' }).click();
-	await expect(page.getByText('It\'s the only component you')).toBeVisible();
+	await expect(page.getByText("It's the only component you")).toBeVisible();
 	await expect(page.getByText('A Map has an options props')).toBeVisible();
 });
 

eslint.config.js

@@ -0,0 +1,33 @@
+import prettier from 'eslint-config-prettier';
+import js from '@eslint/js';
+import svelte from 'eslint-plugin-svelte';
+import globals from 'globals';
+import ts from 'typescript-eslint';
+
+export default ts.config(
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs['flat/recommended'],
+	prettier,
+	...svelte.configs['flat/prettier'],
+	{
+		languageOptions: {
+			globals: {
+				...globals.browser,
+				...globals.node,
+			},
+		},
+	},
+	{
+		files: ['**/*.svelte'],
+
+		languageOptions: {
+			parserOptions: {
+				parser: ts.parser,
+			},
+		},
+	},
+	{
+		ignores: ['build/', '.svelte-kit/', 'dist/'],
+	},
+);