DRAFT: convert to vue composition with ts. add types.

.eslintrc.cjs

@@ -0,0 +1,127 @@
+module.exports = {
+  // https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy
+  // This option interrupts the configuration hierarchy at this file
+  // Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)
+  root: true,
+
+  // https://eslint.vuejs.org/user-guide/#how-to-use-a-custom-parser
+  // Must use parserOptions instead of "parser" to allow vue-eslint-parser to keep working
+  // `parser: 'vue-eslint-parser'` is already included with any 'plugin:vue/**' config and should be omitted
+  parserOptions: {
+    parser: '@typescript-eslint/parser',
+    extraFileExtensions: ['.vue'],
+  },
+
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+    'vue/setup-compiler-macros': true,
+  },
+
+  // Rules order is important, please avoid shuffling them
+  extends: [
+    // Base ESLint recommended rules
+    // 'eslint:recommended',
+
+    // https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin#usage
+    // ESLint typescript rules
+    'plugin:@typescript-eslint/recommended',
+
+    '@vue/eslint-config-typescript/recommended',
+
+    // Uncomment any of the lines below to choose desired strictness,
+    // but leave only one uncommented!
+    // See https://eslint.vuejs.org/rules/#available-rules
+    'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
+    // 'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
+    // 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
+
+    'airbnb-base',
+
+  ],
+
+  plugins: [
+    // required to apply rules which need type information
+    '@typescript-eslint',
+
+    // https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
+    // required to lint *.vue files
+    'vue',
+  ],
+
+  globals: {
+    process: 'readonly',
+    chrome: 'readonly',
+  },
+
+  // add your custom rules here
+  rules: {
+    'max-len': [1, 120, 2],
+
+    'no-param-reassign': 'off',
+    'no-void': 'off',
+    'no-nested-ternary': 'off',
+    'max-classes-per-file': 'off',
+
+    'no-shadow': 'off',
+    '@typescript-eslint/no-shadow': 'error',
+
+    'import/first': 'off',
+    'import/named': 'error',
+    'import/namespace': 'error',
+    'import/default': 'error',
+    'import/export': 'error',
+    'import/extensions': 'off',
+    'import/no-unresolved': 'off',
+    'import/no-extraneous-dependencies': 'off',
+    'import/prefer-default-export': 'off',
+
+    'prefer-promise-reject-errors': 'off',
+
+    quotes: ['error', 'single', { avoidEscape: true }],
+
+    // this rule, if on, would require explicit return type on the `render` function
+    '@typescript-eslint/explicit-function-return-type': 'off',
+
+    // in plain CommonJS modules, you can't use `import foo = to pass this rule, so it has to be disabled
+    '@typescript-eslint/no-var-requires': 'off',
+
+    // The core 'no-unused-vars' rules (in the eslint:recommended ruleset)
+    // does not work with type definitions
+    'no-unused-vars': 'off',
+
+    // allow debugger during development only
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    '@typescript-eslint/ban-ts-comment': 'off',
+
+    semi: ['error', 'never'],
+    'arrow-body-style': 'off',
+    'func-call-spacing': 'off',
+    'no-spaced-func': 'off',
+    'arrow-parens': ['error', 'as-needed'],
+    'no-console': 'off',
+    'no-alert': 'off',
+    'no-underscore-dangle': 'off',
+
+    'vue/valid-v-slot': ['error', {
+      allowModifiers: true,
+    }],
+    'linebreak-style': ['error', (process.platform === 'win32' ? 'windows' : 'unix')],
+    '@typescript-eslint/consistent-type-imports': 'error',
+    'class-methods-use-this': 'off',
+    'no-undef': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+    '@typescript-eslint/no-empty-interface': 'off',
+  },
+  overrides: [
+    {
+      files: ['./src/swaggerSchema.d.ts'],
+      rules: {
+        'no-use-before-define': 'off',
+        'max-len': 'off',
+      },
+    },
+  ],
+  ignorePatterns: ['/dist/*'],
+}

.gitignore

@@ -25,3 +25,5 @@ pnpm-debug.log*
 # vitepress
 docs/.vitepress/dist
 docs/.vitepress/cache
+
+/npm

components.d.ts

@@ -0,0 +1,83 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    OlAnimatedClusterLayer: typeof import('./src/components/layers/OlAnimatedClusterLayer.vue')['default']
+    OlAnimationDrop: typeof import('./src/components/animations/OlAnimationDrop.vue')['default']
+    OlAnimationFade: typeof import('./src/components/animations/OlAnimationFade.vue')['default']
+    OlAnimationPath: typeof import('./src/components/animations/OlAnimationPath.vue')['default']
+    OlAnimationShake: typeof import('./src/components/animations/OlAnimationShake.vue')['default']
+    OlAnimationSlide: typeof import('./src/components/animations/OlAnimationSlide.vue')['default']
+    OlAnimationTeleport: typeof import('./src/components/animations/OlAnimationTeleport.vue')['default']
+    OlAnimationZoom: typeof import('./src/components/animations/OlAnimationZoom.vue')['default']
+    OlAttributionControl: typeof import('./src/components/mapControls/OlAttributionControl.vue')['default']
+    OlContextMenu: typeof import('./src/components/mapControls/OlContextMenu.vue')['default']
+    OlControlBar: typeof import('./src/components/mapControls/OlControlBar.vue')['default']
+    OlControlButton: typeof import('./src/components/mapControls/OlControlButton.vue')['default']
+    OlControlPrintDialog: typeof import('./src/components/mapControls/OlControlPrintDialog.vue')['default']
+    OlControlToggle: typeof import('./src/components/mapControls/OlControlToggle.vue')['default']
+    OlControlVideoRecorder: typeof import('./src/components/mapControls/OlControlVideoRecorder.vue')['default']
+    OlFeature: typeof import('./src/components/map/OlFeature.vue')['default']
+    OlFeatureAnimation: typeof import('./src/components/animations/OlFeatureAnimation.vue')['default']
+    OlFullScreenControl: typeof import('./src/components/mapControls/OlFullScreenControl.vue')['default']
+    OlGeoLocation: typeof import('./src/components/map/OlGeoLocation.vue')['default']
+    OlGeomLineString: typeof import('./src/components/geometries/OlGeomLineString.vue')['default']
+    OlGeomMultiLineString: typeof import('./src/components/geometries/OlGeomMultiLineString.vue')['default']
+    OlGeomMultiPoint: typeof import('./src/components/geometries/OlGeomMultiPoint.vue')['default']
+    OlGeomMultiPolygon: typeof import('./src/components/geometries/OlGeomMultiPolygon.vue')['default']
+    OlGeomPoint: typeof import('./src/components/geometries/OlGeomPoint.vue')['default']
+    OlGeomPolygon: typeof import('./src/components/geometries/OlGeomPolygon.vue')['default']
+    OlHeatmapLayer: typeof import('./src/components/layers/OlHeatmapLayer.vue')['default']
+    OlImageLayer: typeof import('./src/components/layers/OlImageLayer.vue')['default']
+    OlInteractionClusterSelect: typeof import('./src/components/interaction/OlInteractionClusterSelect.vue')['default']
+    OlInteractionDragRotateZoom: typeof import('./src/components/interaction/OlInteractionDragRotateZoom.vue')['default']
+    OlInteractionDraw: typeof import('./src/components/interaction/OlInteractionDraw.vue')['default']
+    OlInteractionModify: typeof import('./src/components/interaction/OlInteractionModify.vue')['default']
+    OlInteractionSelect: typeof import('./src/components/interaction/OlInteractionSelect.vue')['default']
+    OlInteractionSnap: typeof import('./src/components/interaction/OlInteractionSnap.vue')['default']
+    OlInteractionTransform: typeof import('./src/components/interaction/OlInteractionTransform.vue')['default']
+    OlLayerSwitcherControl: typeof import('./src/components/mapControls/OlLayerSwitcherControl.vue')['default']
+    OlLayerSwitcherImageControl: typeof import('./src/components/mapControls/OlLayerSwitcherImageControl.vue')['default']
+    OlMap: typeof import('./src/components/map/OlMap.vue')['default']
+    OlMousePositionControl: typeof import('./src/components/mapControls/OlMousePositionControl.vue')['default']
+    OlOverlay: typeof import('./src/components/map/OlOverlay.vue')['default']
+    OlOverviewMapControl: typeof import('./src/components/mapControls/OlOverviewMapControl.vue')['default']
+    OlProjectionRegister: typeof import('./src/components/map/OlProjectionRegister.vue')['default']
+    OlRotateControl: typeof import('./src/components/mapControls/OlRotateControl.vue')['default']
+    OlScaleLineControl: typeof import('./src/components/mapControls/OlScaleLineControl.vue')['default']
+    OlSourceBingMaps: typeof import('./src/components/sources/OlSourceBingMaps.vue')['default']
+    OlSourceCluster: typeof import('./src/components/sources/OlSourceCluster.vue')['default']
+    OlSourceImageStatic: typeof import('./src/components/sources/OlSourceImageStatic.vue')['default']
+    OlSourceImageWMS: typeof import('./src/components/sources/OlSourceImageWMS.vue')['default']
+    OlSourceOSM: typeof import('./src/components/sources/OlSourceOSM.vue')['default']
+    OlSourceTianDiTu: typeof import('./src/components/sources/OlSourceTianDiTu.vue')['default']
+    OlSourceVector: typeof import('./src/components/sources/OlSourceVector.vue')['default']
+    OlSourceWebglPoints: typeof import('./src/components/sources/OlSourceWebglPoints.vue')['default']
+    OlSourceWMTS: typeof import('./src/components/sources/OlSourceWMTS.vue')['default']
+    OlSourceXYZ: typeof import('./src/components/sources/OlSourceXYZ.vue')['default']
+    OlStyle: typeof import('./src/components/styles/OlStyle.vue')['default']
+    OlStyleCircle: typeof import('./src/components/styles/OlStyleCircle.vue')['default']
+    OlStyleFill: typeof import('./src/components/styles/OlStyleFill.vue')['default']
+    OlStyleFlowLine: typeof import('./src/components/styles/OlStyleFlowLine.vue')['default']
+    OlStyleIcon: typeof import('./src/components/styles/OlStyleIcon.vue')['default']
+    OlStyleStroke: typeof import('./src/components/styles/OlStyleStroke.vue')['default']
+    OlStyleText: typeof import('./src/components/styles/OlStyleText.vue')['default']
+    OlSwipeControl: typeof import('./src/components/mapControls/OlSwipeControl.vue')['default']
+    OlTileLayer: typeof import('./src/components/layers/OlTileLayer.vue')['default']
+    OlVectorLayer: typeof import('./src/components/layers/OlVectorLayer.vue')['default']
+    OlView: typeof import('./src/components/map/OlView.vue')['default']
+    OlWebglPointsLayer: typeof import('./src/components/layers/OlWebglPointsLayer.vue')['default']
+    OlWebglTileLayer: typeof import('./src/components/layers/OlWebglTileLayer.vue')['default']
+    OlZoneControl: typeof import('./src/components/mapControls/OlZoneControl.vue')['default']
+    OlZoomControl: typeof import('./src/components/mapControls/OlZoomControl.vue')['default']
+    OlZoomSliderControl: typeof import('./src/components/mapControls/OlZoomSliderControl.vue')['default']
+    OlZoomToExtentControl: typeof import('./src/components/mapControls/OlZoomToExtentControl.vue')['default']
+  }
+}

index.d.ts

@@ -1,22 +1,22 @@
 declare module 'vue3-openlayers' {
-  import {App} from 'vue';
-  import feature from 'ol/Feature';
-  import * as geom from 'ol/geom/';
-  import * as format from 'ol/format';
-  import * as loadingstrategy from 'ol/loadingstrategy';
-  import * as selectconditions from 'ol/events/condition';
-  import * as extent from 'ol/extent';
-  import * as animations from 'ol/easing';
+    import type { App } from 'vue'
+    import type feature from 'ol/Feature'
+    import type * as geom from 'ol/geom'
+    import type * as format from 'ol/format'
+    import type * as loadingstrategy from 'ol/loadingstrategy'
+    import type * as selectconditions from 'ol/events/condition'
+    import type * as extent from 'ol/extent'
+    import type * as animations from 'ol/easing'
 
-  module '@vue/runtime-core' {
-    export declare function inject(key: 'ol-feature'): typeof feature
-    export declare function inject(key: 'ol-geom'): typeof geom
-    export declare function inject(key: 'ol-animations'): typeof animations
-    export declare function inject(key: 'ol-format'): typeof format
-    export declare function inject(key: 'ol-loadingstrategy'): typeof loadingstrategy
-    export declare function inject(key: 'ol-selectconditions'): typeof selectconditions
-    export declare function inject(key: 'ol-extent'): typeof extent
-  }
+    module '@vue/runtime-core' {
+        export function inject(key: 'ol-feature'): feature
+        export function inject(key: 'ol-geom'): typeof geom
+        export function inject(key: 'ol-animations'): typeof animations
+        export function inject(key: 'ol-format'): typeof format
+        export function inject(key: 'ol-loadingstrategy'): typeof loadingstrategy
+        export function inject(key: 'ol-selectconditions'): typeof selectconditions
+        export function inject(key: 'ol-extent'): typeof extent
+    }
 
-  export default function install(app: App): void
+    export default function install(app: App): void
 }

index.html

@@ -13,6 +13,6 @@
       <strong>We're sorry but vue3-openlayers doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 </html>