Merge branch 'release/2.7.0-alpha.1'

Author: titouanmathis

.github/workflows/tests.yml

@@ -35,7 +35,7 @@ jobs:
         run: npm run lint
 
   unit:
-    runs-on: macos-latest
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
@@ -44,6 +44,8 @@ jobs:
           cache: npm
       - name: Install dependencies
         run: npm install
+      - name: Install Playwright Dependencies
+        run: npx playwright install chromium --with-deps
       - name: Run tests
         run: npm run test -- -- --retry=3 --coverage.enabled
       - name: Upload coverage to Codecov

CHANGELOG.md

@@ -4,6 +4,12 @@ All notable changes to this project will be documented in this file. The format
 
 ## [Unreleased]
 
+## [v2.7.0-alpha.1](https://github.com/studiometa/vue-mapbox-gl/compare/2.7.0-alpha.0...2.7.0-alpha.1) (2025-01-24)
+
+### Fixed
+
+- Fix Mapbox event binding ([#231](https://github.com/studiometa/vue-mapbox-gl/issues/231), [#232](https://github.com/studiometa/vue-mapbox-gl/pull/232), [882baca](https://github.com/studiometa/vue-mapbox-gl/commit/882baca))
+
 ## [v2.7.0-alpha.0](https://github.com/studiometa/vue-mapbox-gl/compare/2.6.0...2.7.0-alpha.0) (2025-01-02)
 
 ### Added

README.md

@@ -1,4 +1,4 @@
-# 🗺 Vue 3 Mapbox GL
+# 🗺 @studiometa/vue-mapbox-gl
 
 [![NPM Version](https://img.shields.io/npm/v/@studiometa/vue-mapbox-gl.svg?style=flat&colorB=3e63dd&colorA=414853)](https://www.npmjs.com/package/@studiometa/vue-mapbox-gl/)
 [![Downloads](https://img.shields.io/npm/dm/@studiometa/vue-mapbox-gl?style=flat&colorB=3e63dd&colorA=414853)](https://www.npmjs.com/package/@studiometa/vue-mapbox-gl/)

eslint.config.js

@@ -11,6 +11,9 @@ export default defineConfig(
         ...globals.browser,
       },
     },
+    rules: {
+      'vue/valid-define-emits': 'off',
+    },
   },
   {
     ignores: ['**/.nuxt/**', '**/.output/**'],

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "@studiometa/vue-mapbox-gl-workspace",
   "private": true,
-  "version": "2.7.0-alpha.0",
+  "version": "2.7.0-alpha.1",
   "type": "module",
   "workspaces": [
     "packages/*"
@@ -24,14 +24,14 @@
   "devDependencies": {
     "@studiometa/eslint-config": "4.2.0",
     "@studiometa/prettier-config": "4.1.0",
-    "eslint": "9.17.0",
+    "eslint": "9.18.0",
     "prettier": "3.4.2"
   },
   "dependencies": {
     "@vitejs/plugin-vue": "5.2.1",
     "@vue/tsconfig": "0.7.0",
-    "vite": "6.0.6",
-    "vite-plugin-dts": "4.4.0",
+    "vite": "6.0.9",
+    "vite-plugin-dts": "4.5.0",
     "vue-tsc": "2.1.10"
   }
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/vue-mapbox-gl-demo",
-  "version": "2.7.0-alpha.0",
+  "version": "2.7.0-alpha.1",
   "scripts": {
     "dev": "nuxt dev",
     "build": "nuxt build"

packages/demo/package.json

@@ -2,13 +2,13 @@
   "name": "@studiometa/vue-mapbox-gl-docs",
   "private": true,
   "type": "module",
-  "version": "2.7.0-alpha.0",
+  "version": "2.7.0-alpha.1",
   "scripts": {
     "dev": "vitepress",
     "build": "vitepress build"
   },
   "devDependencies": {
-    "sass": "1.83.0",
+    "sass": "1.83.4",
     "tailwindcss": "3.4.17",
     "vitepress": "1.5.0"
   }

packages/docs/package.json

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest';
+import { render } from 'vitest-browser-vue';
+import { MapboxMap } from '@studiometa/vue-mapbox-gl';
+import 'mapbox-gl/dist/mapbox-gl.css';
+
+describe('The MapboxMap component', () => {
+  it('should display a map', async () => {
+    const { emitted, getByTestId } = render(MapboxMap, {
+      props: {
+        accessToken:
+          'pk.eyJ1IjoiYWdlbmNlc3R1ZGlvbWV0YSIsImEiOiJjanh5ZW81aHEwOHV3M2lwZzhhNW1vdXl5In0.3hbV2QKVzZWf511JK9xCug',
+        mapStyle: 'mapbox://styles/mapbox/streets-v11',
+      },
+      attrs: {
+        'data-testid': 'map',
+        style: {
+          height: '100vh',
+        },
+      },
+    });
+
+    await expect.element(getByTestId('map')).toBeVisible();
+    expect(emitted('mb-created')).toBeDefined();
+  });
+});

packages/tests/components/MapboxMap.spec.ts

@@ -3,11 +3,10 @@ import * as pkg from '@studiometa/vue-mapbox-gl';
 
 describe('The package', () => {
   it('should export all components', () => {
-    expect(Object.keys(pkg)).toMatchInlineSnapshot(`
+    expect(Object.keys(pkg).sort()).toMatchInlineSnapshot(`
       [
-        "StoreLocator",
-        "VueScroller",
         "MapboxCluster",
+        "MapboxFullscreenControl",
         "MapboxGeocoder",
         "MapboxGeolocateControl",
         "MapboxImage",
@@ -18,7 +17,8 @@ describe('The package', () => {
         "MapboxNavigationControl",
         "MapboxPopup",
         "MapboxSource",
-        "MapboxFullscreenControl",
+        "StoreLocator",
+        "VueScroller",
         "useControl",
         "useEventsBinding",
         "useMap",

packages/tests/index.spec.ts

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/vue-mapbox-gl-tests",
-  "version": "2.7.0-alpha.0",
+  "version": "2.7.0-alpha.1",
   "type": "module",
   "scripts": {
     "test": "vitest"
@@ -9,11 +9,12 @@
     "@mapbox/mapbox-gl-geocoder": "^5.0.3",
     "@studiometa/vue-mapbox-gl": "*",
     "@vitejs/plugin-vue": "5.2.1",
+    "@vitest/browser": "2.1.8",
+    "@vitest/coverage-v8": "2.1.8",
     "mapbox-gl": "^3.9.1",
+    "playwright": "1.49.1",
     "vitest": "2.1.8",
+    "vitest-browser-vue": "0.1.0",
     "vue": "^3.5.13"
-  },
-  "devDependencies": {
-    "@vitest/coverage-v8": "2.1.8"
   }
 }

packages/tests/package.json

@@ -12,5 +12,10 @@ export default defineConfig({
       provider: 'v8',
       include: ['vue-mapbox-gl/**'],
     },
+    browser: {
+      provider: 'playwright', // or 'webdriverio'
+      enabled: true,
+      name: 'chromium', // browser name is required
+    },
   },
 });

packages/tests/vitest.config.ts

@@ -130,12 +130,7 @@
   import MapboxSource from './MapboxSource.vue';
 
   const props = defineProps(propsConfig);
-  const emit = defineEmits([
-    'mb-cluster-click',
-    'mb-feature-click',
-    'mb-feature-mouseenter',
-    'mb-feature-mouseleave',
-  ]);
+  const emit = defineEmits();
 
   const { map } = useMap();
   const id = ref(`mb-cluster-${index}`);

packages/vue-mapbox-gl/components/MapboxCluster.vue

@@ -136,7 +136,7 @@
   import { useControl } from '../composables/index.js';
 
   const props = defineProps(propsConfig);
-  const emit = defineEmits(events.map((event) => `mb-${event}`));
+  const emit = defineEmits();
 
   const root = ref();
   const options = computed(() => {

packages/vue-mapbox-gl/components/MapboxGeocoder.vue

@@ -67,7 +67,7 @@
   import { useControl } from '../composables/index.js';
 
   const props = defineProps(propsConfig);
-  const emit = defineEmits(events.map((event) => `mb-${event}`));
+  const emit = defineEmits();
 
   const { control } = useControl(GeolocateControl, { propsConfig, events, props, emit });
 

packages/vue-mapbox-gl/components/MapboxGeolocateControl.vue

@@ -47,7 +47,7 @@
   import { useMap } from '../composables/index.js';
 
   const props = defineProps(propsConfig);
-  const emit = defineEmits(['mb-add']);
+  const emit = defineEmits();
 
   const { map } = useMap();
   const isReady = ref(false);

packages/vue-mapbox-gl/components/MapboxImage.vue

@@ -25,7 +25,7 @@
       required: true,
     },
   });
-  const emit = defineEmits(['mb-add', 'mb-ready']);
+  const emit = defineEmits();
 
   const isReady = ref(false);
   const addedImages = new Map();

packages/vue-mapbox-gl/components/MapboxImages.vue

@@ -61,7 +61,7 @@
   import { useEventsBinding, useMap } from '../composables/index.js';
 
   const props = defineProps(propsConfig);
-  const emit = defineEmits(events.map((event) => `mb-${event}`));
+  const emit = defineEmits();
 
   const { map } = useMap();
   const options = computed(() => {

packages/vue-mapbox-gl/components/MapboxLayer.vue

@@ -304,7 +304,7 @@
   import { useEventsBinding, usePropsBinding } from '../composables/index.js';
 
   const props = defineProps(propsConfig);
-  const emit = defineEmits(events.map((event) => `mb-${event}`));
+  const emit = defineEmits();
 
   const map = shallowRef<Map>(null);
   provide('mapbox-map', map);

packages/vue-mapbox-gl/components/MapboxMap.vue

@@ -92,7 +92,7 @@
   import MapboxPopup from './MapboxPopup.vue';
 
   const props = defineProps(propsConfig);
-  const emit = defineEmits(events.map((event) => `mb-${event}`));
+  const emit = defineEmits();
   const slots = useSlots();
 
   const marker = shallowRef();

packages/vue-mapbox-gl/components/MapboxMarker.vue

@@ -73,7 +73,7 @@
   import { useMap, usePropsBinding, useEventsBinding } from '../composables/index.js';
 
   const props = defineProps(propsConfig);
-  const emit = defineEmits(['mb-open', 'mb-close']);
+  const emit = defineEmits();
 
   const popup = shallowRef();
   const root = ref();

packages/vue-mapbox-gl/components/MapboxPopup.vue

@@ -1,6 +1,6 @@
 {
   "name": "@studiometa/vue-mapbox-gl",
-  "version": "2.7.0-alpha.0",
+  "version": "2.7.0-alpha.1",
   "description": "A small components library to use Mapbox GL in Vue 3.",
   "homepage": "https://github.com/studiometa/vue-mapbox-gl#readme",
   "bugs": {
@@ -43,7 +43,7 @@
   "devDependencies": {
     "@mapbox/mapbox-gl-geocoder": "5.0.3",
     "@studiometa/js-toolkit": "2.12.1",
-    "mapbox-gl": "3.9.1",
+    "mapbox-gl": "3.9.3",
     "vue": "3.5.13"
   },
   "peerDependencies": {