Skip to content

Commit 07fd152

Browse files
azygisazygis
authored
refactor!: modularize, align component names and add tree-shaking support
### 🚨 Breaking Changes #### Tree-Shaking Support & New Import Structure - **Full tree-shaking support**: You can now import only the modules you need, significantly reducing bundle size. - **New modular import syntax**: Import components from specific subpaths instead of the main package. **Migration Examples:** ```js // ❌ Old import syntax (v11 and below) import { OlMap, OlTileLayer, OlSourceOSM } from "vue3-openlayers"; // ✅ New import syntax (v12+) import { OlMap } from "vue3-openlayers/map"; import { OlTileLayer } from "vue3-openlayers/layers"; import { OlSourceOSM } from "vue3-openlayers/sources"; import { OlFullScreenControl } from "vue3-openlayers/controls"; import { OlStyle } from "vue3-openlayers/styles"; import { OlInteractionSelect } from "vue3-openlayers/interactions"; ``` #### Component Renaming for Consistency All components now use consistent **PascalCase** naming. Duplicate files with inconsistent casing have been removed. **Source Components:** - `OlSourceOsm` ➡️ renamed to **`OlSourceOSM`** - `OlSourceBingmaps` ➡️ renamed to **`OlSourceBingMaps`** - `OlSourceGeoTiff` ➡️ renamed to **`OlSourceGeoTIFF`** - `OlSourceImageWms` ➡️ renamed to **`OlSourceImageWMS`** - `OlSourceTileArcgisRest` ➡️ renamed to **`OlSourceTileArcGISRest`** - `OlSourceTileJson` ➡️ renamed to **`OlSourceTileJSON`** - `OlSourceTileWms` ➡️ renamed to **`OlSourceTileWMS`** - `OlSourceWmts` ➡️ renamed to **`OlSourceWMTS`** - `OlSourceXyz` ➡️ renamed to **`OlSourceXYZ`** **Map Controls:** - `OlFullscreenControl` ➡️ renamed to **`OlFullScreenControl`** - `OlLayerswitcherControl` ➡️ renamed to **`OlLayerSwitcherControl`** - `OlLayerswitcherimageControl` ➡️ renamed to **`OlLayerSwitcherImageControl`** - `OlMousepositionControl` ➡️ renamed to **`OlMousePositionControl`** - `OlOverviewmapControl` ➡️ renamed to **`OlOverviewMapControl`** - `OlPrintdialogControl` ➡️ renamed to **`OlPrintDialogControl`** - `OlScalelineControl` ➡️ renamed to **`OlScaleLineControl`** - `OlVideorecorderControl` ➡️ renamed to **`OlVideoRecorderControl`** - `OlZoomsliderControl` ➡️ renamed to **`OlZoomSliderControl`** - `OlZoomtoextentControl` ➡️ renamed to **`OlZoomToExtentControl`** **Interactions:** - `OlInteractionClusterselect` ➡️ renamed to **`OlInteractionClusterSelect`** - `OlInteractionDragbox` ➡️ renamed to **`OlInteractionDragBox`** - `OlInteractionDragrotate` ➡️ renamed to **`OlInteractionDragRotate`** - `OlInteractionDragrotatezoom` ➡️ renamed to **`OlInteractionDragRotateAndZoom`** **Layers:** - `OlAnimatedClusterlayer` ➡️ renamed to **`OlAnimatedClusterLayer`** **Map Components:** - `OlGeolocation` component location/naming has been updated #### Styles No Longer Auto-Imported - Styles are no longer automatically imported with the package - You must explicitly import both OpenLayers and vue3-openlayers styles ```js // Required imports for styles import 'ol/ol.css'; import 'vue3-openlayers/vue3-openlayers.css'; ``` #### Available Import Paths The following subpaths are now available for tree-shaking: - `vue3-openlayers/animations` - `vue3-openlayers/composables` - `vue3-openlayers/controls` - `vue3-openlayers/geometries` - `vue3-openlayers/helpers` - `vue3-openlayers/interactions` - `vue3-openlayers/layers` - `vue3-openlayers/map` - `vue3-openlayers/sources` - `vue3-openlayers/styles` ### 🔧 Migration Guide 1. **Update imports**: Replace single-package imports with subpath imports 2. **Fix component names**: Update any components using the old inconsistent casing 3. **Add style imports**: Explicitly import CSS files where needed 4. **Review bundle**: Take advantage of smaller bundle sizes with selective imports ### ✨ Other Changes - Internal refactoring for better modularity and future maintenance - Documentation and examples updated to reflect new import patterns - Improved TypeScript support with better type definitions for tree-shaken imports - `package.json` exports configured for all new subpaths - Removed duplicate component files to eliminate confusion closes #378
1 parent 07395b7 commit 07fd152

File tree

93 files changed

+1062
-1193
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

93 files changed

+1062
-1193
lines changed

‎CHANGELOG.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,47 @@
11

2+
## [12.0.0](https://github.com/MelihAltintas/vue3-openlayers/compare/v11.6.2...v12.0.0) (2025-08-27)
3+
4+
### Breaking Changes & Improvements
5+
- Full tree-shaking support: you can now import only the modules you need, reducing bundle size.
6+
New import syntax examples:
7+
```js
8+
// Import a single component
9+
import { OlMap } from "vue3-openlayers/map";
10+
import { OlTileLayer } from "vue3-openlayers/layers";
11+
import { OlSourceOSM } from "vue3-openlayers/sources";
12+
import { OlFullScreenControl } from "vue3-openlayers/controls";
13+
import { OlStyle } from "vue3-openlayers/styles";
14+
```
15+
- Component renaming for consistency: many components have been renamed to use consistent PascalCase naming. All imports and usage are now case-sensitive. For example:
16+
- `OlSourceOSM` (not `OlSourceOsm`)
17+
- `OlSourceWMTS` (not `OlSourceWmts`)
18+
- `OlLayerSwitcherControl` (not `OlLayerSwitchercontrol`)
19+
- `OlLayerSwitcherImageControl` (not `OlLayerSwitcherimageControl`)
20+
- `OlSourceBingMaps` (not `OlSourceBingmaps`)
21+
- `OlSourceGeoTIFF` (not `OlSourceGeoTiff`)
22+
- `OlSourceTileJSON` (not `OlSourceTileJson`)
23+
- `OlSourceTileWMS` (not `OlSourceTileWms`)
24+
- `OlSourceXYZ` (not `OlSourceXyz`)
25+
- `OlInteractionClusterSelect` (not `OlInteractionClusterselect`)
26+
- `OlInteractionDragBox` (not `OlInteractionDragbox`)
27+
- `OlInteractionDragRotate` (not `OlInteractionDragrotate`)
28+
- `OlInteractionDragRotateAndZoom` (not `OlInteractionDragrotatezoom`)
29+
- And more, please see the release diff using the GitHub release diff.
30+
- Styles are no longer automatically imported.
31+
- How to migrate:
32+
- Update all imports to use the new subpath and PascalCase names.
33+
- Review your code for any case mismatches in component names.
34+
- Import styles from both openlayers and vue3-openlayers packages where appropriate:
35+
```js
36+
import 'ol/ol.css';
37+
import 'vue3-openlayers/vue3-openlayers.css';
38+
```
39+
40+
### Other Changes
41+
- Internal refactoring for better modularity and future maintenance.
42+
- Documentation and examples updated to reflect new import patterns.
43+
44+
245

346
## [11.6.2](https://github.com/MelihAltintas/vue3-openlayers/compare/v11.6.1...v11.6.2) (2025-06-05)
447

‎docs/.vitepress/config.ts‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ export const config: UserConfig = {
6969
link: "/componentsguide/overlay/",
7070
},
7171
{
72-
text: "ol-geolocation",
72+
text: "ol-geo-location",
7373
link: "/componentsguide/geolocation/",
7474
},
7575
{
@@ -91,7 +91,7 @@ export const config: UserConfig = {
9191
link: "/componentsguide/layers/group/",
9292
},
9393
{
94-
text: "ol-animated-clusterlayer",
94+
text: "ol-animated-cluster-layer",
9595
link: "/componentsguide/layers/animatedclusterlayer/",
9696
},
9797
{
@@ -133,7 +133,7 @@ export const config: UserConfig = {
133133
collapsed: true,
134134
items: [
135135
{
136-
text: "ol-source-bingmaps",
136+
text: "ol-source-bing-maps",
137137
link: "/componentsguide/sources/bing/",
138138
},
139139
{
@@ -219,23 +219,23 @@ export const config: UserConfig = {
219219
link: "/componentsguide/mapcontrols/fullscreen/",
220220
},
221221
{
222-
text: "ol-layerswitcher-control",
222+
text: "ol-layer-switcher-control",
223223
link: "/componentsguide/mapcontrols/layerswitcher/",
224224
},
225225
{
226-
text: "ol-layerswitcherimage-control",
226+
text: "ol-layer-switcher-image-control",
227227
link: "/componentsguide/mapcontrols/layerswitcherimage/",
228228
},
229229
{
230-
text: "ol-mouseposition-control",
230+
text: "ol-mouse-position-control",
231231
link: "/componentsguide/mapcontrols/mouseposition/",
232232
},
233233
{
234-
text: "ol-overviewmap-control",
234+
text: "ol-overview-map-control",
235235
link: "/componentsguide/mapcontrols/overviewmap/",
236236
},
237237
{
238-
text: "ol-printdialog-control",
238+
text: "ol-print-dialog-control",
239239
link: "/componentsguide/mapcontrols/printdialog/",
240240
},
241241
{
@@ -263,7 +263,7 @@ export const config: UserConfig = {
263263
link: "/componentsguide/mapcontrols/toggle/",
264264
},
265265
{
266-
text: "ol-videorecorder-control",
266+
text: "ol-video-recorder-control",
267267
link: "/componentsguide/mapcontrols/videorecorder/",
268268
},
269269
{
@@ -275,11 +275,11 @@ export const config: UserConfig = {
275275
link: "/componentsguide/mapcontrols/zoom/",
276276
},
277277
{
278-
text: "ol-zoomslider-control",
278+
text: "ol-zoom-slider-control",
279279
link: "/componentsguide/mapcontrols/zoomslider/",
280280
},
281281
{
282-
text: "ol-zoomtoextent-control",
282+
text: "ol-zoom-to-extent-control",
283283
link: "/componentsguide/mapcontrols/zoomtoextent/",
284284
},
285285
],
@@ -357,7 +357,7 @@ export const config: UserConfig = {
357357
collapsed: true,
358358
items: [
359359
{
360-
text: "ol-interaction-clusterselect",
360+
text: "ol-interaction-cluster-select",
361361
link: "/componentsguide/interactions/clusterselect/",
362362
},
363363
{

‎docs/componentsguide/geolocation/index.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# ol-geolocation
1+
# ol-geo-location
22

33
> HTML5 Geolocation wrapper
44
@@ -24,9 +24,9 @@ import GeoLocationDemo from "@demos/GeoLocationDemo.vue"
2424

2525
## Usage
2626

27-
| Plugin Usage | Explicit Import |
28-
| ------------------ | :-------------------: |
29-
| `<ol-geolocation>` | `<Map.OlGeolocation>` |
27+
| Plugin Usage | Explicit Import |
28+
| ------------------- | :-------------------: |
29+
| `<ol-geo-location>` | `<Map.OlGeoLocation>` |
3030

3131
::: code-group
3232

@@ -53,7 +53,7 @@ You have access to all Events from the underlying OpenLayers Geolocation API.
5353
Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_Geolocation-Geolocation.html) to see the available events tht will be fired.
5454

5555
```html
56-
<ol-geolocation :projection="projection" @change:position="geoLocChange" />
56+
<ol-geo-location :projection="projection" @change:position="geoLocChange" />
5757
```
5858

5959
## Methods
@@ -66,7 +66,7 @@ To access the source, you can use a `ref()` as shown below:
6666
```vue
6767
<template>
6868
<!-- ... -->
69-
<ol-geolocation :projection="projection" ref="geoLocRef" />
69+
<ol-geo-location :projection="projection" ref="geoLocRef" />
7070
<!-- ... -->
7171
</template>
7272

‎docs/componentsguide/interactions/clusterselect/index.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# ol-interaction-clusterselect
1+
# ol-interaction-cluster-select
22

33
> Interaction for selecting vector cluster features
44
@@ -22,9 +22,9 @@ import AnimatedClusterDemo from "@demos/AnimatedClusterDemo.vue"
2222

2323
## Usage
2424

25-
| Plugin Usage | Explicit Import |
26-
| -------------------------------- | :-----------------------------------------: |
27-
| `<ol-interaction-clusterselect>` | `<Interactions.OlInteractionClusterselect>` |
25+
| Plugin Usage | Explicit Import |
26+
| --------------------------------- | :-----------------------------------------: |
27+
| `<ol-interaction-cluster-select>` | `<Interactions.OlInteractionClusterSelect>` |
2828

2929
::: code-group
3030

‎docs/componentsguide/layers/animatedclusterlayer/index.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
# ol-animated-clusterlayer
1+
# ol-animated-cluster-layer
22

3-
`ol-animated-clusterlayer` is a layer that animates clusters on zoom change.
4-
`ol-interaction-clusterselect`. is a select interaction.
3+
`ol-animated-cluster-layer` is a layer that animates clusters on zoom change.
4+
`ol-interaction-cluster-select`. is a select interaction.
55
On select cluster springs apart to reveal the features.
66
The revealed features are themselves selectable.
77
Revealed features are themselves a cluster with an attribute 'features' that contain the original feature.
@@ -24,9 +24,9 @@ import AnimatedClusterDemo from "@demos/AnimatedClusterDemo.vue"
2424

2525
## Usage
2626

27-
| Plugin Usage | Explicit Import |
28-
| ---------------------------- | :-------------------------------: |
29-
| `<ol-animated-clusterlayer>` | `<Layers.OlAnimatedClusterlayer>` |
27+
| Plugin Usage | Explicit Import |
28+
| ----------------------------- | :-------------------------------: |
29+
| `<ol-animated-cluster-layer>` | `<Layers.OlAnimatedClusterLayer>` |
3030

3131
::: code-group
3232

@@ -49,7 +49,7 @@ You can find more information in the [performance section for `ol-source-vector`
4949
>
5050
<!-- ... -->
5151
52-
<ol-animated-clusterlayer :animationDuration="500" :distance="40">
52+
<ol-animated-cluster-layer :animationDuration="500" :distance="40">
5353
<ol-source-vector :url="url" :format="geoJson" />
5454
</ol-animated-clusterlayer>
5555
</ol-map>
@@ -154,5 +154,5 @@ You have access to all Events from the underlying `Cluster` source.
154154
Check out [the official OpenLayers docs](https://openlayers.org/en/latest/apidoc/module-ol_source_Cluster-Cluster.html) to see the available events tht will be fired.
155155

156156
```html
157-
<ol-animated-clusterlayer @error="handleEvent" />
157+
<ol-animated-cluster-layer @error="handleEvent" />
158158
```

‎docs/componentsguide/mapcontrols/fullscreen/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import FullscreenControlDemo from "@demos/FullscreenControlDemo.vue"
2121

2222
| Plugin Usage | Explicit Import |
2323
| ------------------------- | :---------------------------------: |
24-
| `<ol-fullscreen-control>` | `<MapControls.OlFullscreenControl>` |
24+
| `<ol-fullscreen-control>` | `<MapControls.OlFullScreenControl>` |
2525

2626
::: code-group
2727

‎docs/componentsguide/mapcontrols/layerswitcher/index.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# ol-layerswitcher-control
1+
# ol-layer-switcher-control
22

33
> A control for switching between layers.
44
@@ -19,9 +19,9 @@ import LayerswitcherControlDemo from "@demos/LayerswitcherControlDemo.vue"
1919

2020
## Usage
2121

22-
| Plugin Usage | Explicit Import |
23-
|------------------------------|:--------------------------------------:|
24-
| `<ol-layerswitcher-control>` | `<MapControls.OlLayerswitcherControl>` |
22+
| Plugin Usage | Explicit Import |
23+
| ----------------------------- | :------------------------------------: |
24+
| `<ol-layer-switcher-control>` | `<MapControls.OlLayerSwitcherControl>` |
2525

2626
::: code-group
2727

‎docs/componentsguide/mapcontrols/layerswitcherimage/index.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# ol-layerswitcherimage-control
1+
# ol-layer-switcher-image-control
22

33
> A control for switching between layers.
44
@@ -23,9 +23,9 @@ import LayerswitcherimageControlDemo from "@demos/LayerswitcherimageControlDemo.
2323

2424
## Usage
2525

26-
| Plugin Usage | Explicit Import |
27-
| --------------------------------- | :-----------------------------------------: |
28-
| `<ol-layerswitcherimage-control>` | `<MapControls.OlLayerswitcherimageControl>` |
26+
| Plugin Usage | Explicit Import |
27+
| ----------------------------------- | :-----------------------------------------: |
28+
| `<ol-layer-switcher-image-control>` | `<MapControls.OlLayerSwitcherImageControl>` |
2929

3030
::: code-group
3131

‎docs/componentsguide/mapcontrols/mouseposition/index.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# ol-mouseposition-control
1+
# ol-mouse-position-control
22

33
> A Mouse Position control for OpenLayers.
44
@@ -19,9 +19,9 @@ import MousepositionControlDemo from "@demos/MousepositionControlDemo.vue"
1919

2020
## Usage
2121

22-
| Plugin Usage | Explicit Import |
23-
| ---------------------------- | :------------------------------------: |
24-
| `<ol-mouseposition-control>` | `<MapControls.OlMousepositionControl>` |
22+
| Plugin Usage | Explicit Import |
23+
| ----------------------------- | :------------------------------------: |
24+
| `<ol-mouse-position-control>` | `<MapControls.OlMousePositionControl>` |
2525

2626
::: code-group
2727

‎docs/componentsguide/mapcontrols/overviewmap/index.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# ol-overviewmap-control
1+
# ol-overview-map-control
22

33
> A Overview Map control for OpenLayers.
44
@@ -19,9 +19,9 @@ import OverviewmapControlDemo from "@demos/OverviewmapControlDemo.vue"
1919

2020
## Usage
2121

22-
| Plugin Usage | Explicit Import |
23-
| -------------------------- | :----------------------------------: |
24-
| `<ol-overviewmap-control>` | `<MapControls.OlOverviewmapControl>` |
22+
| Plugin Usage | Explicit Import |
23+
| --------------------------- | :----------------------------------: |
24+
| `<ol-overview-map-control>` | `<MapControls.OlOverviewMapControl>` |
2525

2626
::: code-group
2727

@@ -52,9 +52,9 @@ To access the source, you can use a `ref()` as shown below:
5252
```vue
5353
<template>
5454
<!-- ... -->
55-
<ol-overviewmap-control :ref="controlRef">
55+
<ol-overview-map-control :ref="controlRef">
5656
<!-- ... -->
57-
</ol-overviewmap-control>
57+
</ol-overview-map-control>
5858
<!-- ... -->
5959
</template>
6060

0 commit comments

Comments
 (0)