Typescript + Examples + Typedoc + Eslint (#10)

* Initial commit * Fix all typescript issues * Remove unwanted file * Main commit to create everything that is needed * Document docs generation * Add typedoc, improve docs * Fix lint * Fix how the package is exported, fix examples. * Run docs generation as part of the CI. * Add dependabot
maplibre · Mar 13, 2024 · 0e5a366 · 0e5a366
1 parent f66d208
commit 0e5a366
Show file tree

Hide file tree

Showing 37 changed files with 4,375 additions and 13,247 deletions.
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
@@ -0,0 +1,17 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 5
+    versioning-strategy: increase
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "daily"
diff --git a/.github/workflows/lint-build.yml b/.github/workflows/lint-build.yml
@@ -17,5 +17,5 @@ jobs:
           node-version-file: '.nvmrc'
       - run: npm ci
       - run: npm run lint
-      - run: npm run build
-      - run: npm run build-compat
+      - run: npm run docs
+      - run: npm run build-dist
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -95,5 +95,5 @@ jobs:
         uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: dist
+          publish_dir: docs
           commit_message: 'deploy docs: ${{ steps.tag_version.outputs.new_tag }}'
diff --git a/.gitignore b/.gitignore
@@ -37,3 +37,4 @@ jspm_packages
 .node_repl_history
 
 dist
+docs
diff --git a/API.md b/API.md
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@ Make sure to include the CSS and JS files.
 **When using a CDN**
 
 ```html
-<script src='https://unpkg.com/@maplibre/maplibre-gl-inspect@latest/dist/maplibre-gl-inspect.min.js'></script>
+<script src='https://unpkg.com/@maplibre/maplibre-gl-inspect@latest/dist/maplibre-gl-inspect.js'></script>
 <link href='https://unpkg.com/@maplibre/maplibre-gl-inspect@latest/dist/maplibre-gl-inspect.css' rel='stylesheet' />
 ```
 

diff --git a/eslint.config.js b/eslint.config.js
@@ -0,0 +1,17 @@
+// @ts-check
+
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  {
+    rules: {
+        indent: [
+            2,
+            2
+        ]
+    }
+  }
+);
diff --git a/examples/custom-color-1.html b/examples/custom-color-1.html
@@ -4,9 +4,9 @@
     <meta charset='utf-8' />
     <title>Maplibre GL Inspect</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js'></script>
-    <link href='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css' rel='stylesheet' />
-    <script src='../dist/maplibre-gl-inspect.min.js'></script>
+    <script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
+    <link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />
+    <script src='../dist/maplibre-gl-inspect.js'></script>
     <link href='../dist/maplibre-gl-inspect.css' rel='stylesheet' />
     <style>
         body { margin:0; padding:0; }

diff --git a/examples/custom-color-2.html b/examples/custom-color-2.html
@@ -4,9 +4,9 @@
     <meta charset='utf-8' />
     <title>Maplibre GL Inspect</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js'></script>
-    <link href='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css' rel='stylesheet' />
-    <script src='../dist/maplibre-gl-inspect.min.js'></script>
+    <script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
+    <link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />
+    <script src='../dist/maplibre-gl-inspect.js'></script>
     <link href='../dist/maplibre-gl-inspect.css' rel='stylesheet' />
     <style>
         body { margin:0; padding:0; }

diff --git a/examples/custom-popup.html b/examples/custom-popup.html
@@ -4,9 +4,9 @@
     <meta charset='utf-8' />
     <title>Maplibre GL Inspect</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js'></script>
-    <link href='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css' rel='stylesheet' />
-    <script src='../dist/maplibre-gl-inspect.min.js'></script>
+    <script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
+    <link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />
+    <script src='../dist/maplibre-gl-inspect.js'></script>
     <link href='../dist/maplibre-gl-inspect.css' rel='stylesheet' />
     <style>
         body { margin:0; padding:0; }

diff --git a/examples/generate-docs.js b/examples/generate-docs.js
@@ -0,0 +1,37 @@
+import fs from 'fs';
+
+/**
+ * This script is used to generate the docs for the examples.
+ * It reads the examples folder and replaces the relative paths to the maplibre-gl-inspect library with the unpkg url.
+ * It also creates an index.html file with links to all the examples.
+ */
+
+const files = fs.readdirSync('./examples');
+
+for (const file of files) {
+    if (file.endsWith('.html')) {
+        let content = fs.readFileSync(`./examples/${file}`, 'utf8');
+        content = content.replaceAll("../", 'https://unpkg.com/@maplibre/maplibre-gl-inspect@latest/');
+        fs.writeFileSync(`./docs/${file}`, content);
+    }
+}
+
+const index = `
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8' />
+    <title>Maplibre GL Inspect Docs</title>
+    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+</head>
+<body>
+
+<H1>Maplibre GL Inspect Docs</H1>
+<H2><a href="API/index.html">API</a></H2>
+<H2>Examples</H2>
+<ul>
+${files.map(f => '    <li><a href="' + f +'">' + f + '</a></li>').join('\n')}
+</body>
+</html>`
+
+fs.writeFileSync(`./docs/index.html`, index);
diff --git a/examples/geojson-source.html b/examples/geojson-source.html
@@ -4,9 +4,9 @@
     <meta charset='utf-8' />
     <title>Maplibre GL Inspect</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js'></script>
-    <link href='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css' rel='stylesheet' />
-    <script src='../dist/maplibre-gl-inspect.min.js'></script>
+    <script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
+    <link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />
+    <script src='../dist/maplibre-gl-inspect.js'></script>
     <link href='../dist/maplibre-gl-inspect.css' rel='stylesheet' />
     <style>
         body { margin:0; padding:0; }

diff --git a/examples/inspect-only.html b/examples/inspect-only.html
@@ -4,9 +4,9 @@
     <meta charset='utf-8' />
     <title>Maplibre GL Inspect</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js'></script>
-    <link href='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css' rel='stylesheet' />
-    <script src='../dist/maplibre-gl-inspect.min.js'></script>
+    <script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
+    <link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />
+    <script src='../dist/maplibre-gl-inspect.js'></script>
     <link href='../dist/maplibre-gl-inspect.css' rel='stylesheet' />
     <style>
         body { margin:0; padding:0; }

diff --git a/examples/less-fidly.html b/examples/less-fidly.html
@@ -4,9 +4,9 @@
     <meta charset='utf-8' />
     <title>Maplibre GL Inspect</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js'></script>
-    <link href='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css' rel='stylesheet' />
-    <script src='../dist/maplibre-gl-inspect.min.js'></script>
+    <script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
+    <link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />
+    <script src='../dist/maplibre-gl-inspect.js'></script>
     <link href='../dist/maplibre-gl-inspect.css' rel='stylesheet' />
     <style>
         body { margin:0; padding:0; }

diff --git a/examples/many-sources.html b/examples/many-sources.html
@@ -4,9 +4,9 @@
     <meta charset='utf-8' />
     <title>Maplibre GL Inspect</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js'></script>
-    <link href='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css' rel='stylesheet' />
-    <script src='../dist/maplibre-gl-inspect.min.js'></script>
+    <script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
+    <link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />
+    <script src='../dist/maplibre-gl-inspect.js'></script>
     <link href='../dist/maplibre-gl-inspect.css' rel='stylesheet' />
     <style>
         body { margin:0; padding:0; }

diff --git a/examples/map-popup.html b/examples/map-popup.html
@@ -4,9 +4,9 @@
     <meta charset='utf-8' />
     <title>Maplibre GL Inspect</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js'></script>
-    <link href='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css' rel='stylesheet' />
-    <script src='../dist/maplibre-gl-inspect.min.js'></script>
+    <script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
+    <link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />
+    <script src='../dist/maplibre-gl-inspect.js'></script>
     <link href='../dist/maplibre-gl-inspect.css' rel='stylesheet' />
     <style>
         body { margin:0; padding:0; }

diff --git a/examples/no-inspect-style.html b/examples/no-inspect-style.html
@@ -4,9 +4,9 @@
     <meta charset='utf-8' />
     <title>Maplibre GL Inspect</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js'></script>
-    <link href='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css' rel='stylesheet' />
-    <script src='../dist/maplibre-gl-inspect.min.js'></script>
+    <script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
+    <link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />
+    <script src='../dist/maplibre-gl-inspect.js'></script>
     <link href='../dist/maplibre-gl-inspect.css' rel='stylesheet' />
     <style>
         body { margin:0; padding:0; }

diff --git a/examples/no-options.html b/examples/no-options.html
@@ -4,9 +4,9 @@
     <meta charset='utf-8' />
     <title>Maplibre GL Inspect</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js'></script>
-    <link href='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css' rel='stylesheet' />
-    <script src='../dist/maplibre-gl-inspect.min.js'></script>
+    <script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
+    <link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />
+    <script src='../dist/maplibre-gl-inspect.js'></script>
     <link href='../dist/maplibre-gl-inspect.css' rel='stylesheet' />
     <style>
         body { margin:0; padding:0; }

diff --git a/examples/no-popup.html b/examples/no-popup.html
@@ -4,9 +4,9 @@
     <meta charset='utf-8' />
     <title>Maplibre GL Inspect</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js'></script>
-    <link href='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css' rel='stylesheet' />
-    <script src='../dist/maplibre-gl-inspect.min.js'></script>
+    <script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
+    <link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />
+    <script src='../dist/maplibre-gl-inspect.js'></script>
     <link href='../dist/maplibre-gl-inspect.css' rel='stylesheet' />
     <style>
         body { margin:0; padding:0; }

diff --git a/examples/popup-on-click.html b/examples/popup-on-click.html
@@ -4,9 +4,9 @@
     <meta charset='utf-8' />
     <title>Maplibre GL Inspect</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js'></script>
-    <link href='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css' rel='stylesheet' />
-    <script src='../dist/maplibre-gl-inspect.min.js'></script>
+    <script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
+    <link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />
+    <script src='../dist/maplibre-gl-inspect.js'></script>
     <link href='../dist/maplibre-gl-inspect.css' rel='stylesheet' />
     <style>
         body { margin:0; padding:0; }

diff --git a/examples/query-params.html b/examples/query-params.html
@@ -4,9 +4,9 @@
     <meta charset='utf-8' />
     <title>Maplibre GL Inspect</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js'></script>
-    <link href='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css' rel='stylesheet' />
-    <script src='../dist/maplibre-gl-inspect.min.js'></script>
+    <script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
+    <link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />
+    <script src='../dist/maplibre-gl-inspect.js'></script>
     <link href='../dist/maplibre-gl-inspect.css' rel='stylesheet' />
     <style>
         body { margin:0; padding:0; }

diff --git a/examples/raster.html b/examples/raster.html
@@ -4,9 +4,9 @@
     <meta charset='utf-8' />
     <title>Maplibre GL Inspect</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js'></script>
-    <link href='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css' rel='stylesheet' />
-    <script src='../dist/maplibre-gl-inspect.min.js'></script>
+    <script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
+    <link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />
+    <script src='../dist/maplibre-gl-inspect.js'></script>
     <link href='../dist/maplibre-gl-inspect.css' rel='stylesheet' />
     <style>
         body { margin:0; padding:0; }

diff --git a/examples/url-hash-toggle-callback.html b/examples/url-hash-toggle-callback.html
@@ -4,9 +4,9 @@
     <meta charset='utf-8' />
     <title>Maplibre GL Inspect</title>
     <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
-    <script src='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.js'></script>
-    <link href='https://unpkg.com/maplibre-gl@1.15.2/dist/maplibre-gl.css' rel='stylesheet' />
-    <script src='../dist/maplibre-gl-inspect.min.js'></script>
+    <script src='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js'></script>
+    <link href='https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css' rel='stylesheet' />
+    <script src='../dist/maplibre-gl-inspect.js'></script>
     <link href='../dist/maplibre-gl-inspect.css' rel='stylesheet' />
     <style>
         body { margin:0; padding:0; }