diff --git a/.eslintrc.cjs b/.eslintrc.cjs new file mode 100644 index 0000000..de97bb0 --- /dev/null +++ b/.eslintrc.cjs @@ -0,0 +1,36 @@ +/* eslint-env node */ +require('@rushstack/eslint-patch/modern-module-resolution') + +module.exports = { + root: true, + plugins: ['vue', '@typescript-eslint', 'sonarjs'], + extends: [ + 'plugin:vue/vue3-recommended', + '@vue/eslint-config-prettier', + 'eslint:recommended', + 'plugin:@typescript-eslint/stylistic', + 'plugin:sonarjs/recommended', + '@vue/eslint-config-typescript', + 'plugin:jsdoc/recommended-typescript-error' + ], + parser: 'vue-eslint-parser', + parserOptions: { + parser: '@typescript-eslint/parser', + sourceType: 'module', + extraFileExtensions: ['.vue'] + }, + rules: { + 'vue/html-self-closing': 'error', + '@typescript-eslint/no-unused-vars': 'error', + 'sort-imports': [ + 'error', + { + ignoreCase: false, + ignoreDeclarationSort: true, + ignoreMemberSort: false, + memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'], + allowSeparatedGroups: false + } + ] + } +} diff --git a/.github/dependabot.yml b/.github/dependabot.yml new file mode 100644 index 0000000..aff82a1 --- /dev/null +++ b/.github/dependabot.yml @@ -0,0 +1,6 @@ +version: 2 +updates: + - package-ecosystem: "npm" + directory: "/" + schedule: + interval: "weekly" diff --git a/.github/workflows/check-links.yml b/.github/workflows/check-links.yml new file mode 100644 index 0000000..d4dcdc3 --- /dev/null +++ b/.github/workflows/check-links.yml @@ -0,0 +1,19 @@ +name: Check Markdown links + +on: + push: + branches: + - main + schedule: + # every sunday at 03:00 + - cron: "0 3 * * 0" + +jobs: + markdown-link-check: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: gaurav-nelson/github-action-markdown-link-check@v1 + with: + base-branch: 'main' + use-verbose-mode: 'yes' diff --git a/.github/workflows/deploy_demo_app.yml b/.github/workflows/deploy_demo_app.yml new file mode 100644 index 0000000..0de6b33 --- /dev/null +++ b/.github/workflows/deploy_demo_app.yml @@ -0,0 +1,39 @@ +name: Deploy demo app + +on: + push: + branches: [] # TODO: re-activate once Pages activated ["main"] + + workflow_dispatch: + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: "pages" + cancel-in-progress: false + +jobs: + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + - name: Setup Pages + uses: actions/configure-pages@v4 + - run: npm ci + - run: npm run lint + - run: npm run check-types:app + - run: npm run build:app + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + path: './dist-app' + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml new file mode 100644 index 0000000..007c529 --- /dev/null +++ b/.github/workflows/lint.yml @@ -0,0 +1,30 @@ +name: Lint + +on: + push: + branches: [ "main" ] + pull_request: + branches: [ "main" ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [18.x, 20.x] + + steps: + - uses: actions/checkout@v3 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v3 + with: + node-version: ${{ matrix.node-version }} + cache: 'npm' + - run: npm ci + - run: npm run lint + - run: npm run type-check:app + - run: npm run type-check:lib + - run: npm run build:lib + - run: npm run build:app diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3c8af06 --- /dev/null +++ b/.gitignore @@ -0,0 +1,32 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +.DS_Store +dist +dist-app +dist-ssr +coverage +*.local + +/cypress/videos/ +/cypress/screenshots/ + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +# npm packages +*.tgz \ No newline at end of file diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..66e2335 --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1,8 @@ +{ + "$schema": "https://json.schemastore.org/prettierrc", + "semi": false, + "tabWidth": 2, + "singleQuote": true, + "printWidth": 100, + "trailingComma": "none" +} \ No newline at end of file diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..009a534 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,8 @@ +{ + "recommendations": [ + "Vue.volar", + "Vue.vscode-typescript-vue-plugin", + "dbaeumer.vscode-eslint", + "esbenp.prettier-vscode" + ] +} diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..f504717 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2024 Jakob Miksch + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..ff7278e --- /dev/null +++ b/README.md @@ -0,0 +1,60 @@ +# vue-ol-comp [![Lint](https://github.com/JakobMiksch/vue-ol-comp/actions/workflows/lint.yml/badge.svg)](https://github.com/JakobMiksch/vue-ol-comp/actions/workflows/lint.yml) [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz_small.svg)](https://stackblitz.com/github/JakobMiksch/vue-ol-comp) + +This [composable](https://vuejs.org/guide/reusability/composables) exposes reactive variables to make the state of an [OpenLayers](https://openlayers.org/) map available in Vue. It provides easy access to commonly used variables such as `map`, `layers`, `center`, `extent`, `zoom`, `pointerCoordinate`, `pointerPixel`, and more. See [src/composables/useOl.ts](src/composables/useOl.ts) for implementation details. + +## Usage + +```shell +# install +npm install vue-ol-comp +``` + +Initialize or edit the map in any component, for example in `App.vue`: + +```vue + +``` + +The map can be added to any component like this: + +```vue + +``` + +## Development + +```shell +# install dependencies +npm install + +# run the development application +npm run dev +``` + +The application will be accessible at + +## Alternatives ways to use OpenLayers in Vue + +- **directly** without any additional library. This is done in the application template [Wegue](https://github.com/wegue-oss/wegue/) or described in this [blog post](https://spatial-dev.guru/2022/02/20/integrating-openlayers-map-with-vuejs-create-map-part-1/) +- using a **component library** like [vue3-openlayers](https://github.com/MelihAltintas/vue3-openlayers) (for Vue 3) or [vuelayers](https://github.com/ghettovoice/vuelayers) (for Vue 2) that let's one configure the map via the `