chore(lint): Add ESLint / CommitLint and VSCode config (#37)

* chore: add vscode config #33 * feat: add eslint #33 * chore: apply lint fix #33 * feat: add lint-staged #33 * feat: add commitlint #33 * chore: rename ci file #33 * chore: add lint step in ci #33
teritorio · Nov 22, 2024 · 34382c5 · 34382c5
1 parent 545864e
commit 34382c5
Show file tree

Hide file tree

Showing 17 changed files with 4,388 additions and 632 deletions.
diff --git a/.github/actions/setup/action.yml b/.github/actions/setup/action.yml
@@ -1,15 +1,15 @@
 name: Setup Node.js (v20) with Yarn v2 🚀
-description: 'Set up Node.js version 20 and enable Yarn v2 using Corepack'
+description: Set up Node.js version 20 and enable Yarn v2 using Corepack
 
 inputs:
   node-version:
-    description: 'The version of Node.js to set up.'
+    description: The version of Node.js to set up.
     required: true
     default: '20'
 
 outputs:
   node-version:
-    description: 'The version of Node.js that was installed.'
+    description: The version of Node.js that was installed.
 
 runs:
   using: composite
@@ -24,4 +24,4 @@ runs:
         corepack enable
         yarn --version
         node --version
-      shell: bash
+      shell: bash
diff --git a/.github/workflows/deploy.yml → .github/workflows/ci.yml b/.github/workflows/deploy.yml → .github/workflows/ci.yml
@@ -4,14 +4,14 @@ on: push
 
 # Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
 permissions:
-  contents: read  # Read access to repository contents
-  pages: write    # Write access for deployment to GitHub Pages
+  contents: read # Read access to repository contents
+  pages: write # Write access for deployment to GitHub Pages
   id-token: write # Allow GitHub to issue an ID token for authentication
 
 # Allow only one concurrent deployment at a time
 concurrency:
-  group: 'pages'  # Group deployments by name for concurrency control
-  cancel-in-progress: true  # Cancel any in-progress deployments if a new one starts
+  group: pages # Group deployments by name for concurrency control
+  cancel-in-progress: true # Cancel any in-progress deployments if a new one starts
 
 jobs:
   # Setup environment and dependencies
@@ -20,11 +20,11 @@ jobs:
     runs-on: ubuntu-latest
     outputs:
       node-modules-path: ${{ steps.cache-dependencies.outputs.cache-hit }}
-    
+
     steps:
       - name: Checkout Repository 📥
         uses: actions/checkout@v4
-      
+
       - name: Cache Dependencies 📦
         uses: actions/cache@v4
         id: cache-dependencies
@@ -38,11 +38,14 @@ jobs:
         uses: ./.github/actions/setup
         with:
           node-version: 20
-  
+
       - name: Install Dependencies 🛠️
         run: yarn install --immutable
         if: steps.cache-dependencies.outputs.cache-hit != 'true' # Only install if cache miss
 
+      - name: Run Linter 🧑‍💻
+        run: yarn lint
+
   tests:
     name: 🔍 Execute Unit Tests
     needs: setup
@@ -69,9 +72,9 @@ jobs:
     if: github.ref == 'refs/heads/main' # Only deploy from the main branch
 
     environment:
-      name: github-pages  # Set deployment environment to GitHub Pages
-      url: ${{ steps.deployment.outputs.page_url }}  # Output page URL
-      
+      name: github-pages # Set deployment environment to GitHub Pages
+      url: ${{ steps.deployment.outputs.page_url }} # Output page URL
+
     runs-on: ubuntu-latest
 
     steps:
@@ -95,8 +98,8 @@ jobs:
       - name: Upload Build Artifacts 📦
         uses: actions/upload-pages-artifact@v3
         with:
-          path: './dist' # Path to the build output directory
-          
+          path: ./dist # Path to the build output directory
+
       - name: Deploy to GitHub Pages 🌐
         id: deployment
         uses: actions/deploy-pages@v4 # Deploy the build to GitHub Pages
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint"
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,50 @@
+{
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off", "fixable": true },
+    { "rule": "format/*", "severity": "off", "fixable": true },
+    { "rule": "*-indent", "severity": "off", "fixable": true },
+    { "rule": "*-spacing", "severity": "off", "fixable": true },
+    { "rule": "*-spaces", "severity": "off", "fixable": true },
+    { "rule": "*-order", "severity": "off", "fixable": true },
+    { "rule": "*-dangle", "severity": "off", "fixable": true },
+    { "rule": "*-newline", "severity": "off", "fixable": true },
+    { "rule": "*quotes", "severity": "off", "fixable": true },
+    { "rule": "*semi", "severity": "off", "fixable": true }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml",
+    "xml",
+    "gql",
+    "graphql",
+    "astro",
+    "svelte",
+    "css",
+    "less",
+    "scss",
+    "pcss",
+    "postcss"
+  ]
+}
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -27,4 +27,4 @@ The package is bundled with [Typescript tsc CLI](https://www.typescriptlang.org/
 
 ```shell
 yarn build
-```
+```
diff --git a/README.md b/README.md
@@ -30,49 +30,49 @@ Or use it from CDN
 > Set your GeoJson source with `clusterMaxZoom: 22` in order to let the plugin handle cluster/individual marker rendering across all zoom level
 
 ```js
-import { Map } from "maplibre-gl"
 import { TeritorioCluster } from '@teritorio/maplibre-gl-teritorio-cluster'
+import { Map } from 'maplibre-gl'
 
 const map = new Map({
-  container: "map",
+  container: 'map',
   style: {
     version: 8,
-    name: "Empty Style",
-    metadata: { "maputnik:renderer": "mlgljs" },
+    name: 'Empty Style',
+    metadata: { 'maputnik:renderer': 'mlgljs' },
     sources: {
       points: {
-        type: "geojson",
+        type: 'geojson',
         cluster: true,
         clusterRadius: 80,
         clusterMaxZoom: 22, // Required
         data: {
-          type: "FeatureCollection",
+          type: 'FeatureCollection',
           features: [
             {
-              type: "Feature",
+              type: 'Feature',
               properties: { id: 1 },
-              geometry: { type: "Point", coordinates: [0, 0] }
+              geometry: { type: 'Point', coordinates: [0, 0] }
             },
             {
-              type: "Feature",
+              type: 'Feature',
               properties: { id: 2 },
-              geometry: { type: "Point", coordinates: [0, 1] }
+              geometry: { type: 'Point', coordinates: [0, 1] }
             }
           ]
         }
       }
     },
-    glyphs: "https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf",
+    glyphs: 'https://orangemug.github.io/font-glyphs/glyphs/{fontstack}/{range}.pbf',
     layers: [
       {
-        id: "cluster",
-        type: "circle",
-        source: "points"
+        id: 'cluster',
+        type: 'circle',
+        source: 'points'
       }
     ],
-    id: "muks8j3"
+    id: 'muks8j3'
   }
-});
+})
 
 map.on('load', () => {
   const teritorioCluster = new TeritorioCluster(map, 'points', options)
@@ -84,13 +84,13 @@ map.on('load', () => {
 })
 
 // Create whatever HTML element you want as Cluster
-const clusterRender = (element: HTMLDivElement, props: MapGeoJSONFeature['properties']): void => {}
+function clusterRender(element, props) {}
 
 // Create whatever HTML element you want as individual Marker
-const markerRender = (element: HTMLDivElement, feature: MapGeoJSONFeature, markerSize: number): void => {}
+function markerRender(element, feature, markerSize) {}
 
 // Create whatever HTML element you want as Pin Marker
-const pinMarkerRender = (coords: LngLatLike, offset: Point): Marker => {}
+function pinMarkerRender(coords, offset) {}
 ```
 
 ## API

diff --git a/commitlint.config.ts b/commitlint.config.ts
@@ -0,0 +1,7 @@
+import type { UserConfig } from '@commitlint/types'
+
+const Configuration: UserConfig = {
+  extends: ['@commitlint/config-conventional'],
+}
+
+export default Configuration
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -0,0 +1,5 @@
+import antfu from '@antfu/eslint-config'
+
+export default antfu({
+  type: 'lib',
+})
diff --git a/package.json b/package.json
@@ -1,49 +1,66 @@
 {
   "name": "@teritorio/maplibre-gl-teritorio-cluster",
+  "type": "module",
   "version": "0.0.12",
+  "packageManager": "[email protected]",
   "description": "Allow visualization and interaction with all markers, even when superposed. Can display and interact with small cluster without the need to zoom or uncluster.",
-  "type": "module",
-  "files": [
-    "dist"
-  ],
-  "main": "./dist/maplibre-gl-teritorio-cluster.umd.cjs",
-  "module": "./dist/maplibre-gl-teritorio-cluster.js",
-  "types": "./dist/index.d.ts",
+  "author": "Teritorio",
+  "license": "MIT",
+  "homepage": "https://github.com/teritorio/maplibre-gl-teritorio-cluster#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/teritorio/maplibre-gl-teritorio-cluster.git"
+  },
+  "bugs": {
+    "url": "https://github.com/teritorio/maplibre-gl-teritorio-cluster/issues"
+  },
   "exports": {
     ".": {
       "import": "./dist/maplibre-gl-teritorio-cluster.js",
       "require": "./dist/maplibre-gl-teritorio-cluster.umd.cjs"
     }
   },
+  "main": "./dist/maplibre-gl-teritorio-cluster.umd.cjs",
+  "module": "./dist/maplibre-gl-teritorio-cluster.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "tsc && vite build",
     "build:demo": "vite build --mode development",
     "coverage": "vitest run --coverage",
     "dev": "vite",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "preversion": "yarn build",
+    "prepare": "simple-git-hooks",
     "preview": "vite preview",
     "test": "vitest"
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/teritorio/maplibre-gl-teritorio-cluster.git"
-  },
-  "author": "Teritorio",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/teritorio/maplibre-gl-teritorio-cluster/issues"
+  "dependencies": {
+    "@turf/bbox": "^7.1.0",
+    "@turf/helpers": "^7.1.0",
+    "maplibre-gl": "^4.7.0"
   },
-  "homepage": "https://github.com/teritorio/maplibre-gl-teritorio-cluster#readme",
   "devDependencies": {
-    "@vitest/coverage-v8": "2.1.5",
+    "@antfu/eslint-config": "^3.9.2",
+    "@commitlint/cli": "^19.6.0",
+    "@commitlint/config-conventional": "^19.6.0",
+    "@vitest/coverage-v8": "^2.1.5",
+    "eslint": "^9.15.0",
+    "lint-staged": "^15.2.10",
+    "simple-git-hooks": "^2.11.1",
     "typescript": "^5.6.2",
     "vite": "^5.4.4",
     "vitest": "^2.1.5"
   },
-  "dependencies": {
-    "@turf/bbox": "^7.1.0",
-    "@turf/helpers": "^7.1.0",
-    "maplibre-gl": "^4.7.0"
+  "simple-git-hooks": {
+    "commit-msg": "yarn dlx commitlint --edit $1",
+    "pre-commit": "yarn dlx lint-staged",
+    "preserveUnused": true
   },
-  "packageManager": "[email protected]"
+  "lint-staged": {
+    "*": "yarn lint:fix"
+  }
 }
diff --git a/src/index.ts b/src/index.ts
@@ -1,8 +1,8 @@
-export { TeritorioCluster } from "./teritorio-cluster";
+export { TeritorioCluster } from './teritorio-cluster'
 export {
   buildCss,
   unfoldedClusterRenderCircle,
-  unfoldedClusterRenderHexaGrid,
   unfoldedClusterRenderGrid,
-  unfoldedClusterRenderSmart
-} from "./utils/helpers";
+  unfoldedClusterRenderHexaGrid,
+  unfoldedClusterRenderSmart,
+} from './utils/helpers'
-Original file line number
+Diff line change
@@ Expand Up @@
     ```shell
     yarn build
-    ```
+    ```