Tree shaking

CHANGELOG.md

@@ -1,4 +1,47 @@
 
+## [12.0.0](https://github.com/MelihAltintas/vue3-openlayers/compare/v11.6.2...v12.0.0) (2025-08-27)
+
+### Breaking Changes & Improvements
+  - Full tree-shaking support: you can now import only the modules you need, reducing bundle size.
+    New import syntax examples:
+    ```js
+    // Import a single component
+    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";
+    ```
+  - Component renaming for consistency: many components have been renamed to use consistent PascalCase naming. All imports and usage are now case-sensitive. For example:
+    - `OlSourceOSM` (not `OlSourceOsm`)
+    - `OlSourceWMTS` (not `OlSourceWmts`)
+    - `OlLayerSwitcherControl` (not `OlLayerSwitchercontrol`)
+    - `OlLayerSwitcherImageControl` (not `OlLayerSwitcherimageControl`)
+    - `OlSourceBingMaps` (not `OlSourceBingmaps`)
+    - `OlSourceGeoTIFF` (not `OlSourceGeoTiff`)
+    - `OlSourceTileJSON` (not `OlSourceTileJson`)
+    - `OlSourceTileWMS` (not `OlSourceTileWms`)
+    - `OlSourceXYZ` (not `OlSourceXyz`)
+    - `OlInteractionClusterSelect` (not `OlInteractionClusterselect`)
+    - `OlInteractionDragBox` (not `OlInteractionDragbox`)
+    - `OlInteractionDragRotate` (not `OlInteractionDragrotate`)
+    - `OlInteractionDragRotateAndZoom` (not `OlInteractionDragrotatezoom`)
+    - And more, please see the release diff using the GitHub release diff.
+  - Styles are no longer automatically imported.
+  - How to migrate:
+    - Update all imports to use the new subpath and PascalCase names.
+    - Review your code for any case mismatches in component names.
+    - Import styles from both openlayers and vue3-openlayers packages where appropriate:
+    ```js
+    import 'ol/ol.css';
+    import 'vue3-openlayers/vue3-openlayers.css';
+    ```
+
+### Other Changes
+  - Internal refactoring for better modularity and future maintenance.
+  - Documentation and examples updated to reflect new import patterns.
+
+
 
 ## [11.6.2](https://github.com/MelihAltintas/vue3-openlayers/compare/v11.6.1...v11.6.2) (2025-06-05)
 

docs/.vitepress/config.ts

@@ -69,7 +69,7 @@ export const config: UserConfig = {
                 link: "/componentsguide/overlay/",
               },
               {
-                text: "ol-geolocation",
+                text: "ol-geo-location",
                 link: "/componentsguide/geolocation/",
               },
               {
@@ -91,7 +91,7 @@ export const config: UserConfig = {
                 link: "/componentsguide/layers/group/",
               },
               {
-                text: "ol-animated-clusterlayer",
+                text: "ol-animated-cluster-layer",
                 link: "/componentsguide/layers/animatedclusterlayer/",
               },
               {
@@ -133,7 +133,7 @@ export const config: UserConfig = {
             collapsed: true,
             items: [
               {
-                text: "ol-source-bingmaps",
+                text: "ol-source-bing-maps",
                 link: "/componentsguide/sources/bing/",
               },
               {
@@ -219,23 +219,23 @@ export const config: UserConfig = {
                 link: "/componentsguide/mapcontrols/fullscreen/",
               },
               {
-                text: "ol-layerswitcher-control",
+                text: "ol-layer-switcher-control",
                 link: "/componentsguide/mapcontrols/layerswitcher/",
               },
               {
-                text: "ol-layerswitcherimage-control",
+                text: "ol-layer-switcher-image-control",
                 link: "/componentsguide/mapcontrols/layerswitcherimage/",
               },
               {
-                text: "ol-mouseposition-control",
+                text: "ol-mouse-position-control",
                 link: "/componentsguide/mapcontrols/mouseposition/",
               },
               {
-                text: "ol-overviewmap-control",
+                text: "ol-overview-map-control",
                 link: "/componentsguide/mapcontrols/overviewmap/",
               },
               {
-                text: "ol-printdialog-control",
+                text: "ol-print-dialog-control",
                 link: "/componentsguide/mapcontrols/printdialog/",
               },
               {
@@ -263,7 +263,7 @@ export const config: UserConfig = {
                 link: "/componentsguide/mapcontrols/toggle/",
               },
               {
-                text: "ol-videorecorder-control",
+                text: "ol-video-recorder-control",
                 link: "/componentsguide/mapcontrols/videorecorder/",
               },
               {
@@ -275,11 +275,11 @@ export const config: UserConfig = {
                 link: "/componentsguide/mapcontrols/zoom/",
               },
               {
-                text: "ol-zoomslider-control",
+                text: "ol-zoom-slider-control",
                 link: "/componentsguide/mapcontrols/zoomslider/",
               },
               {
-                text: "ol-zoomtoextent-control",
+                text: "ol-zoom-to-extent-control",
                 link: "/componentsguide/mapcontrols/zoomtoextent/",
               },
             ],
@@ -357,7 +357,7 @@ export const config: UserConfig = {
             collapsed: true,
             items: [
               {
-                text: "ol-interaction-clusterselect",
+                text: "ol-interaction-cluster-select",
                 link: "/componentsguide/interactions/clusterselect/",
               },
               {

docs/componentsguide/geolocation/index.md

@@ -1,4 +1,4 @@
-# ol-geolocation
+# ol-geo-location
 
 > HTML5 Geolocation wrapper
 
@@ -24,9 +24,9 @@ import GeoLocationDemo from "@demos/GeoLocationDemo.vue"
 
 ## Usage
 
-| Plugin Usage       |    Explicit Import    |
-| ------------------ | :-------------------: |
-| `<ol-geolocation>` | `<Map.OlGeolocation>` |
+| Plugin Usage        |    Explicit Import    |
+| ------------------- | :-------------------: |
+| `<ol-geo-location>` | `<Map.OlGeoLocation>` |
 
 ::: code-group
 
@@ -53,7 +53,7 @@ You have access to all Events from the underlying OpenLayers Geolocation API.
 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.
 
 ```html
-<ol-geolocation :projection="projection" @change:position="geoLocChange" />
+<ol-geo-location :projection="projection" @change:position="geoLocChange" />
 ```
 
 ## Methods
@@ -66,7 +66,7 @@ To access the source, you can use a `ref()` as shown below:
 ```vue
 <template>
   <!-- ... -->
-  <ol-geolocation :projection="projection" ref="geoLocRef" />
+  <ol-geo-location :projection="projection" ref="geoLocRef" />
   <!-- ... -->
 </template>
 

docs/componentsguide/interactions/clusterselect/index.md

@@ -1,4 +1,4 @@
-# ol-interaction-clusterselect
+# ol-interaction-cluster-select
 
 > Interaction for selecting vector cluster features
 
@@ -22,9 +22,9 @@ import AnimatedClusterDemo from "@demos/AnimatedClusterDemo.vue"
 
 ## Usage
 
-| Plugin Usage                     |               Explicit Import               |
-| -------------------------------- | :-----------------------------------------: |
-| `<ol-interaction-clusterselect>` | `<Interactions.OlInteractionClusterselect>` |
+| Plugin Usage                      |               Explicit Import               |
+| --------------------------------- | :-----------------------------------------: |
+| `<ol-interaction-cluster-select>` | `<Interactions.OlInteractionClusterSelect>` |
 
 ::: code-group
 

docs/componentsguide/layers/animatedclusterlayer/index.md

@@ -1,7 +1,7 @@
-# ol-animated-clusterlayer
+# ol-animated-cluster-layer
 
-`ol-animated-clusterlayer` is a layer that animates clusters on zoom change.
-`ol-interaction-clusterselect`. is a select interaction.
+`ol-animated-cluster-layer` is a layer that animates clusters on zoom change.
+`ol-interaction-cluster-select`. is a select interaction.
 On select cluster springs apart to reveal the features.
 The revealed features are themselves selectable.
 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"
 
 ## Usage
 
-| Plugin Usage                 |          Explicit Import          |
-| ---------------------------- | :-------------------------------: |
-| `<ol-animated-clusterlayer>` | `<Layers.OlAnimatedClusterlayer>` |
+| Plugin Usage                  |          Explicit Import          |
+| ----------------------------- | :-------------------------------: |
+| `<ol-animated-cluster-layer>` | `<Layers.OlAnimatedClusterLayer>` |
 
 ::: code-group
 
@@ -49,7 +49,7 @@ You can find more information in the [performance section for `ol-source-vector`
   >
     <!-- ... -->
 
-    <ol-animated-clusterlayer :animationDuration="500" :distance="40">
+  <ol-animated-cluster-layer :animationDuration="500" :distance="40">
       <ol-source-vector :url="url" :format="geoJson" />
     </ol-animated-clusterlayer>
   </ol-map>
@@ -154,5 +154,5 @@ You have access to all Events from the underlying `Cluster` source.
 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.
 
 ```html
-<ol-animated-clusterlayer @error="handleEvent" />
+<ol-animated-cluster-layer @error="handleEvent" />
 ```

docs/componentsguide/mapcontrols/fullscreen/index.md

@@ -21,7 +21,7 @@ import FullscreenControlDemo from "@demos/FullscreenControlDemo.vue"
 
 | Plugin Usage              |           Explicit Import           |
 | ------------------------- | :---------------------------------: |
-| `<ol-fullscreen-control>` | `<MapControls.OlFullscreenControl>` |
+| `<ol-fullscreen-control>` | `<MapControls.OlFullScreenControl>` |
 
 ::: code-group
 

docs/componentsguide/mapcontrols/layerswitcher/index.md

@@ -1,4 +1,4 @@
-# ol-layerswitcher-control
+# ol-layer-switcher-control
 
 > A control for switching between layers.
 
@@ -19,9 +19,9 @@ import LayerswitcherControlDemo from "@demos/LayerswitcherControlDemo.vue"
 
 ## Usage
 
-| Plugin Usage                 |            Explicit Import             |
-|------------------------------|:--------------------------------------:|
-| `<ol-layerswitcher-control>` | `<MapControls.OlLayerswitcherControl>` |
+| Plugin Usage                  |            Explicit Import             |
+| ----------------------------- | :------------------------------------: |
+| `<ol-layer-switcher-control>` | `<MapControls.OlLayerSwitcherControl>` |
 
 ::: code-group
 

docs/componentsguide/mapcontrols/layerswitcherimage/index.md

@@ -1,4 +1,4 @@
-# ol-layerswitcherimage-control
+# ol-layer-switcher-image-control
 
 > A control for switching between layers.
 
@@ -23,9 +23,9 @@ import LayerswitcherimageControlDemo from "@demos/LayerswitcherimageControlDemo.
 
 ## Usage
 
-| Plugin Usage                      |               Explicit Import               |
-| --------------------------------- | :-----------------------------------------: |
-| `<ol-layerswitcherimage-control>` | `<MapControls.OlLayerswitcherimageControl>` |
+| Plugin Usage                        |               Explicit Import               |
+| ----------------------------------- | :-----------------------------------------: |
+| `<ol-layer-switcher-image-control>` | `<MapControls.OlLayerSwitcherImageControl>` |
 
 ::: code-group
 

docs/componentsguide/mapcontrols/mouseposition/index.md

@@ -1,4 +1,4 @@
-# ol-mouseposition-control
+# ol-mouse-position-control
 
 > A Mouse Position control for OpenLayers.
 
@@ -19,9 +19,9 @@ import MousepositionControlDemo from "@demos/MousepositionControlDemo.vue"
 
 ## Usage
 
-| Plugin Usage                 |            Explicit Import             |
-| ---------------------------- | :------------------------------------: |
-| `<ol-mouseposition-control>` | `<MapControls.OlMousepositionControl>` |
+| Plugin Usage                  |            Explicit Import             |
+| ----------------------------- | :------------------------------------: |
+| `<ol-mouse-position-control>` | `<MapControls.OlMousePositionControl>` |
 
 ::: code-group
 

docs/componentsguide/mapcontrols/overviewmap/index.md

@@ -1,4 +1,4 @@
-# ol-overviewmap-control
+# ol-overview-map-control
 
 > A Overview Map control for OpenLayers.
 
@@ -19,9 +19,9 @@ import OverviewmapControlDemo from "@demos/OverviewmapControlDemo.vue"
 
 ## Usage
 
-| Plugin Usage               |           Explicit Import            |
-| -------------------------- | :----------------------------------: |
-| `<ol-overviewmap-control>` | `<MapControls.OlOverviewmapControl>` |
+| Plugin Usage                |           Explicit Import            |
+| --------------------------- | :----------------------------------: |
+| `<ol-overview-map-control>` | `<MapControls.OlOverviewMapControl>` |
 
 ::: code-group
 
@@ -52,9 +52,9 @@ To access the source, you can use a `ref()` as shown below:
 ```vue
 <template>
   <!-- ... -->
-  <ol-overviewmap-control :ref="controlRef">
+  <ol-overview-map-control :ref="controlRef">
     <!-- ... -->
-  </ol-overviewmap-control>
+  </ol-overview-map-control>
   <!-- ... -->
 </template>
 

docs/componentsguide/mapcontrols/printdialog/index.md

@@ -1,4 +1,4 @@
-# ol-printdialog-control
+# ol-print-dialog-control
 
 > A print dialog to print the current map canvas content.
 
@@ -19,9 +19,9 @@ import PrintdialogControlDemo from "@demos/PrintdialogControlDemo.vue"
 
 ## Usage
 
-| Plugin Usage               |           Explicit Import            |
-| -------------------------- | :----------------------------------: |
-| `<ol-printdialog-control>` | `<MapControls.OlPrintdialogControl>` |
+| Plugin Usage                |           Explicit Import            |
+| --------------------------- | :----------------------------------: |
+| `<ol-print-dialog-control>` | `<MapControls.OlPrintDialogControl>` |
 
 ::: code-group
 

docs/componentsguide/mapcontrols/videorecorder/index.md

@@ -1,4 +1,4 @@
-# ol-videorecorder-control
+# ol-video-recorder-control
 
 > A simple toggle control The control can be created with an interaction to control its activation.
 
@@ -19,9 +19,9 @@ import VideorecorderControlDemo from "@demos/VideorecorderControlDemo.vue"
 
 ## Usage
 
-| Plugin Usage                 |            Explicit Import             |
-| ---------------------------- | :------------------------------------: |
-| `<ol-videorecorder-control>` | `<MapControls.OlVideorecorderControl>` |
+| Plugin Usage                  |            Explicit Import             |
+| ----------------------------- | :------------------------------------: |
+| `<ol-video-recorder-control>` | `<MapControls.OlVideoRecorderControl>` |
 
 ::: code-group
 
@@ -52,7 +52,7 @@ You have access to all Events from the underlying control.
 Check out [the official docs](https://viglino.github.io/ol-ext/doc/doc-pages/ol.control.VideoRecorder.html) to see the available events tht will be fired.
 
 ```html
-<ol-videorecorder-control @error="handleEvent" />
+<ol-video-recorder-control @error="handleEvent" />
 ```
 
 ## Methods
@@ -65,7 +65,7 @@ To access the source, you can use a `ref()` as shown below:
 ```vue
 <template>
   <!-- ... -->
-  <ol-videorecorder-control ref="vRef" @error="handleEvent" />
+  <ol-video-recorder-control ref="vRef" @error="handleEvent" />
   <!-- ... -->
 </template>