signalk-tides 2.1.1 → 2.2.0

package/.github/dependabot.yml

@@ -5,6 +5,13 @@ updates:
     schedule:
       interval: "weekly"
     open-pull-requests-limit: 100
+    # vitest and every @vitest/* package pin each other's exact version, so a
+    # bump to one alone fails `npm ci` with ERESOLVE before a test runs.
+    groups:
+      vitest:
+        patterns:
+          - "vitest"
+          - "@vitest/*"
   - package-ecosystem: "github-actions"
     directory: "/"
     schedule:

package/.github/workflows/ci.yml

@@ -12,7 +12,7 @@ jobs:
         uses: actions/checkout@v7
 
       - name: Setup Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v7
 
       - name: Install dependencies
         run: npm install
@@ -30,7 +30,7 @@ jobs:
         uses: actions/checkout@v7
 
       - name: Setup Node.js
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v7
 
       - name: Install dependencies
         run: npm install
@@ -53,7 +53,7 @@ jobs:
     steps:
       - uses: actions/checkout@v7
 
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@v7
 
       - name: Install modules
         run: npm install

package/.github/workflows/release.yml

@@ -15,7 +15,7 @@ jobs:
         with:
           ref: ${{ github.event.release.target_commitish }}
 
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@v7
         with:
           node-version: 24 # npm >= 11.5.1 for trusted publishing
           registry-url: https://registry.npmjs.org

package/.oxlintrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["typescript", "react"],
+  "categories": {
+    "correctness": "error"
+  },
+  "ignorePatterns": ["dist"]
+}

package/README.md

@@ -59,6 +59,12 @@ $ curl http://localhost:3000/signalk/v2/api/resources/tides
 }
 ```
 
+### Chart plotter widget
+
+The plugin offers a tide widget to chart plotters that support Signal K [Plotter Extensions](https://github.com/SignalK/freeboard-sk/blob/master/docs/api/plotter-extensions-api.md), such as [Freeboard-SK](https://github.com/SignalK/freeboard-sk). It shows the tide at the vessel's position: the level now with its trend, and the next high or low water, on the predicted curve. Tapping it opens the full Tides app in a panel beside the chart.
+
+In Freeboard-SK, press and hold an empty spot in a corner of the chart (or right-click it and choose *Add widget here*) and pick *Tides*.
+
 ## License
 
 This plugin is a fork of the [signalk-tides-api](https://github.com/joabakk/signalk-tides-api) plugin (which is no longer working) and is licensed under the [Apache License 2.0](LICENSE). Kudos to @joabakk and @sbender9 for the original work.

package/dist/index.js

@@ -18,6 +18,7 @@ import { findStation, nearestStation, stationsNear } from "neaps";
 import { tideStateAt, timeToNextExtreme } from "./calculations.js";
 import FileCache from "./cache.js";
 import { withVesselPosition } from "./middleware.js";
+import { PLOTTER_EXTENSION_ID, plotterExtensionManifest, } from "./plotter-extension.js";
 // Recompute and republish on a fixed interval. Predictions are computed locally
 // by neaps, so this is cheap and needs no configuration.
 const UPDATE_INTERVAL = 60 * 1000; // 1 minute
@@ -103,7 +104,12 @@ export default function (app) {
         const cache = new FileCache(app.getDataDirPath());
         // Mount the Neaps API, with vessel/default resolved to the configured
         // default station (or the nearest one).
-        activeRouter = withVesselPosition(createRoutes({ prefix: API_PATH }), () => lastPosition, () => config.defaultStation ?? null);
+        activeRouter = withVesselPosition(
+        // @neaps/api bundles its own Express declarations, so its Router is
+        // callable at runtime but not structurally compatible with ours.
+        // The OpenAPI server URL comes from req.baseUrl, set by the
+        // app.use(API_PATH, ...) mount above.
+        createRoutes(), () => lastPosition, () => config.defaultStation ?? null);
         // Register tide predictions as a resource provider
         app.registerResourceProvider({
             type: "tides",
@@ -126,6 +132,27 @@ export default function (app) {
                 },
             },
         });
+        // Offer the tide widget to chart plotters (src/plotter-extension.ts)
+        app.registerResourceProvider({
+            type: "plotterExtensions",
+            methods: {
+                async listResources() {
+                    return { [PLOTTER_EXTENSION_ID]: plotterExtensionManifest };
+                },
+                async getResource(id) {
+                    if (id !== PLOTTER_EXTENSION_ID) {
+                        throw new Error(`No such plotterExtensions resource: ${id}`);
+                    }
+                    return plotterExtensionManifest;
+                },
+                setResource() {
+                    throw new Error("Read-only resource");
+                },
+                deleteResource() {
+                    throw new Error("Read-only resource");
+                },
+            },
+        });
         app.subscriptionmanager.subscribe({
             context: ("vessels." + app.selfId),
             subscribe: [

package/dist/plotter-extension.js

@@ -0,0 +1,35 @@
+/**
+ * The tide widget this plugin offers to chart plotters that implement the
+ * Signal K Plotter Extensions API, such as Freeboard-SK, where the user places
+ * it on the chart. Both pages are part of the webapp, which the server serves
+ * at /signalk-tides/.
+ */
+const WEBAPP_PATH = "/signalk-tides/";
+export const PLOTTER_EXTENSION_ID = "signalk-tides";
+export const plotterExtensionManifest = {
+    name: "Tides",
+    description: "The tide at the vessel's position: the level now and the next high or low water.",
+    apiVersion: "1",
+    requires: ["widgets"],
+    // Without them the widget still shows the tide; tapping it opens the panel.
+    optional: ["panels.iframe", "ui"],
+    widgets: [
+        {
+            id: "tides",
+            title: "Tides",
+            type: "iframe",
+            url: `${WEBAPP_PATH}widget.html`,
+            size: "2x1",
+            lifecycle: "whileEnabled",
+        },
+    ],
+    panels: [
+        {
+            id: "tides",
+            title: "Tides",
+            type: "iframe",
+            url: WEBAPP_PATH,
+            lifecycle: "onOpen",
+        },
+    ],
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "signalk-tides",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Tidal predictions for the vessel's position, powered by Neaps.",
   "type": "module",
   "main": "./dist/index.js",
@@ -8,7 +8,7 @@
   "scripts": {
     "build": "tsc -b && vite build",
     "dev": "vite",
-    "lint": "eslint .",
+    "lint": "oxlint",
     "prepack": "npm run build",
     "preview": "vite preview",
     "test": "npm run test:node && npm run test:browser",
@@ -34,13 +34,14 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@neaps/api": "^0.6.0",
-    "@neaps/react": "^0.1.1",
+    "@neaps/api": "^0.7.0",
+    "@neaps/react": "^0.2.0",
     "@signalk/server-api": "^2.28.0",
     "express": "^5.2.1",
-    "neaps": "^0.7.0",
+    "neaps": "^0.8.0",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "signalk-plotterext-bus": "^0.15.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
@@ -54,25 +55,26 @@
     "@types/react-dom": "^19.0.4",
     "@types/supertest": "^7.2.0",
     "@vitejs/plugin-react": "^6.0.2",
-    "@vitest/browser": "^4.0.18",
-    "@vitest/browser-playwright": "^4.0.18",
-    "@vitest/ui": "^4.0.18",
-    "eslint": "^10.4.1",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.5.2",
-    "globals": "^17.5.0",
-    "jsdom": "^29.1.1",
-    "maplibre-gl": "^5.19.0",
-    "pkg-pr-new": "^0.0.75",
+    "@vitest/browser": "5.0.2",
+    "@vitest/browser-playwright": "5.0.2",
+    "@vitest/ui": "5.0.2",
+    "jsdom": "^30.0.1",
+    "maplibre-gl": "^6.9.0",
+    "oxlint": "^1.74.0",
+    "pkg-pr-new": "^0.0.88",
     "playwright": "^1.58.2",
     "react-map-gl": "^8.1.0",
     "signalk-server": "^2.13.5",
     "supertest": "^7.2.2",
     "tailwindcss": "^4.1.3",
-    "typescript": "^5.8.2",
-    "typescript-eslint": "^8.24.1",
+    "typescript": "^7.0.2",
     "vite": "^8.0.16",
-    "vitest": "^4.0.18"
+    "vitest": "5.0.2"
+  },
+  "overrides": {
+    "vite-plus": {
+      "@vitest/browser-playwright": "4.1.11"
+    }
   },
   "repository": {
     "type": "git",

package/public/assets/main-68xVY5Ec.js

@@ -0,0 +1 @@
+import{a as e,c as t,d as n,f as r,i,l as a,n as o,r as s,s as c,t as l,u}from"./useUnitPreferences-lYEQOWom.js";var d=u(),f=r(n(),1),p=()=>new URLSearchParams(window.location.search).get(`station`)||`vessel/default`;function m(){let[e,t]=(0,f.useState)(p);return(0,f.useEffect)(()=>{let e=()=>t(p());return window.addEventListener(`popstate`,e),()=>window.removeEventListener(`popstate`,e)},[]),[e,(0,f.useCallback)(e=>{let n=e.trim()||`vessel/default`,r=new URL(window.location.href);n===`vessel/default`?r.searchParams.delete(`station`):r.searchParams.set(`station`,n),window.history.pushState(window.history.state,``,r),t(n)},[])]}var h=a(),g={version:8,sources:{osm:{type:`raster`,tiles:[`https://tile.openstreetmap.org/{z}/{x}/{y}.png`],tileSize:256,attribution:`© OpenStreetMap contributors`}},layers:[{id:`osm`,type:`raster`,source:`osm`}]};function _({stationId:n,onSelect:r}){let a=(0,f.useRef)(null),[o,c]=(0,f.useState)(!1),[l,u]=(0,f.useState)(!1),[d,p]=(0,f.useState)(`list`),{data:m}=t(n),_=()=>{u(window.matchMedia(`(min-width: 1024px)`).matches),p(`list`),c(!0),a.current?.showModal()},v=e=>{r(e.id),a.current?.close()};return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(`button`,{type:`button`,onClick:_,"aria-label":`Browse stations`,className:`absolute hidden min-[20rem]:block right-2 top-2 sm:right-4 sm:top-4 md:right-6 md:top-6 lg:right-8 lg:top-8 xl:right-20 xl:top-20 z-10 rounded-md border border-(--neaps-border) bg-(--neaps-bg-subtle) p-2 text-(--neaps-text) hover:bg-(--neaps-bg)`,children:(0,h.jsxs)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,"aria-hidden":`true`,children:[(0,h.jsx)(`line`,{x1:`3`,y1:`6`,x2:`21`,y2:`6`}),(0,h.jsx)(`line`,{x1:`3`,y1:`12`,x2:`21`,y2:`12`}),(0,h.jsx)(`line`,{x1:`3`,y1:`18`,x2:`21`,y2:`18`})]})}),(0,h.jsx)(`dialog`,{ref:a,onClose:()=>c(!1),onClick:e=>{e.target===e.currentTarget&&e.currentTarget.close()},className:`m-auto w-[min(92vw,900px)] max-h-[85vh] rounded-lg border border-(--neaps-border) bg-(--neaps-bg) p-0 text-(--neaps-text) backdrop:bg-black/50`,children:o&&(0,h.jsxs)(`div`,{className:`flex max-h-[85vh] flex-col`,children:[(0,h.jsxs)(`div`,{className:`flex items-center justify-between border-b border-(--neaps-border) p-3`,children:[(0,h.jsx)(`button`,{type:`button`,onClick:()=>a.current?.close(),"aria-label":`Close`,className:`grid size-11 place-items-center rounded-md text-(--neaps-text-muted) hover:text-(--neaps-text)`,children:`✕`}),(0,h.jsx)(`h2`,{className:`text-base font-semibold`,children:`Stations`}),(0,h.jsx)(`button`,{type:`button`,onClick:()=>p(d===`map`?`list`:`map`),"aria-label":d===`map`?`Show list`:`Show map`,className:`grid size-11 place-items-center rounded-md text-(--neaps-text-muted) hover:text-(--neaps-text) lg:invisible`,children:d===`map`?(0,h.jsxs)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:[(0,h.jsx)(`line`,{x1:`8`,y1:`6`,x2:`21`,y2:`6`}),(0,h.jsx)(`line`,{x1:`8`,y1:`12`,x2:`21`,y2:`12`}),(0,h.jsx)(`line`,{x1:`8`,y1:`18`,x2:`21`,y2:`18`}),(0,h.jsx)(`line`,{x1:`3`,y1:`6`,x2:`3.01`,y2:`6`}),(0,h.jsx)(`line`,{x1:`3`,y1:`12`,x2:`3.01`,y2:`12`}),(0,h.jsx)(`line`,{x1:`3`,y1:`18`,x2:`3.01`,y2:`18`})]}):(0,h.jsxs)(`svg`,{width:`20`,height:`20`,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,"aria-hidden":`true`,children:[(0,h.jsx)(`polygon`,{points:`3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21 3 6`}),(0,h.jsx)(`line`,{x1:`9`,y1:`3`,x2:`9`,y2:`18`}),(0,h.jsx)(`line`,{x1:`15`,y1:`6`,x2:`15`,y2:`21`})]})})]}),(0,h.jsxs)(`div`,{className:`flex min-h-0 flex-col gap-4 p-3 lg:flex-row`,children:[(0,h.jsxs)(`div`,{className:`w-full flex-col gap-3 overflow-y-auto lg:flex lg:w-80 ${d===`map`?`hidden`:`flex`}`,children:[(0,h.jsx)(i,{onSelect:v}),(0,h.jsx)(`button`,{type:`button`,onClick:()=>v({id:`vessel/default`}),className:`rounded-md border border-(--neaps-border) px-3 py-2 text-left text-sm hover:bg-(--neaps-bg-subtle)`,children:`📍 Vessel position`}),(0,h.jsx)(s,{stationId:n,onStationSelect:v})]}),(l||d===`map`)&&m&&(0,h.jsx)(`div`,{className:`h-[60vh] overflow-hidden rounded-md border border-(--neaps-border) lg:h-auto lg:min-h-100 lg:flex-1`,children:(0,h.jsx)(e,{mapStyle:g,initialViewState:{longitude:m.longitude,latitude:m.latitude,zoom:10},focusStation:m.id,onStationSelect:v})})]})]})})]})}var{VITE_SIGNALK_URL:v=window.location.toString()}={BASE_URL:`./`,DEV:!1,MODE:`production`,PROD:!0,SSR:!1},y=new URL(`/signalk/v2/api`,v).toString();function b(){let{units:e,ready:t}=l(),[n,r]=m();return t?(0,h.jsx)(o,{baseUrl:y,units:e,children:(0,h.jsxs)(`div`,{className:`relative`,children:[(0,h.jsx)(_,{stationId:n,onSelect:r}),(0,h.jsx)(c,{id:n,className:`overflow-y-auto p-2 sm:p-4 md:p-6 lg:p-8 xl:p-20`})]})}):null}(0,d.createRoot)(document.getElementById(`app`)).render((0,h.jsx)(b,{}));