nuxt-visitors 1.1.1 → 1.2.0

package/README.md

@@ -19,6 +19,14 @@ Add live visitor counting to your Nuxt website in seconds. WebSocket-based, type
 - 🧹 Auto cleanup on unmount
 - 🌐 Leverages [Nitro WebSocket](https://nitro.unjs.io/guide/websocket) with Pub/Sub
 
+> **New (Experimental):** Anonymous tracking of visitors' locations!
+>
+> When enabled, the module tracks visitor locations. The `useVisitors` composable will additionally provide:
+> - A `locations` array: lists locations of all visitors.
+> - A `myLocation` object: contains the specific geolocation data for the current visitor.
+>
+> **Note:** This feature is experimental and may be subject to future changes.
+
 ## Installation
 
 Install the module to your Nuxt application with one command:
@@ -40,6 +48,27 @@ export default defineNuxtConfig({
 })
 ```
 
+### Configuration
+
+The module accepts an optional configuration to enable location tracking. In your `nuxt.config.ts`, you can enable it as follows:
+
+```ts
+export default defineNuxtConfig({
+  modules: ['nuxt-visitors'],
+  visitors: {
+    // Set to true to enable tracking of visitor locations
+    locations: true
+  },
+  nitro: {
+    experimental: {
+      websocket: true
+    }
+  }
+})
+```
+
+This will enable the `locations` and `myLocation` properties in the composable, as well as the `locations` property in the composable's return object.
+
 ## Usage
 
 ```vue
@@ -63,11 +92,13 @@ That's it! The module handles everything else automatically:
 The composable provides additional features:
 ```ts
 const {
-visitors,     // Ref<number> - Current visitor count
-isConnected,  // Ref<boolean> - Connection status
-isLoading,    // Ref<boolean> - Loading state
-error,        // Ref<string | null> - Error message if any
-reconnect     // () => void - Manual reconnection
+  visitors,     // Ref<number> - Current visitor count
+  locations,    // Ref<Location[]> - Array of geolocation objects for all visitors (if `locations: true`)
+  myLocation,   // Ref<Location | null> - Geolocation of the current visitor (if `locations: true`)
+  isConnected,  // Ref<boolean> - Connection status
+  isLoading,    // Ref<boolean> - Loading state
+  error,        // Ref<string | null> - Error message if any
+  reconnect     // () => void - Manual reconnection
 } = useVisitors()
 ```
 
@@ -91,6 +122,20 @@ To start contributing, you can follow these steps:
 
 <!-- /automd -->
 
+<!-- automd:fetch url="gh:hugorcd/markdown/main/src/sponsors.md" -->
+
+## Sponsors
+
+<p align="center">
+  <a href="https://cdn.jsdelivr.net/gh/hugorcd/static/sponsors.svg">
+    <img src='https://cdn.jsdelivr.net/gh/hugorcd/static/sponsors.svg' alt="HugoRCD sponsors" />
+  </a>
+</p> 
+
+<!-- /automd -->
+
+## Contributors
+
 <!-- automd:contributors license=Apache author=HugoRCD github=HugoRCD/nuxt-visitors -->
 
 Published under the [APACHE](https://github.com/HugoRCD/nuxt-visitors/blob/main/LICENSE) license.
@@ -106,6 +151,6 @@ Made by [@HugoRCD](https://github.com/HugoRCD) and [community](https://github.co
 
 ---
 
-_🤖 auto updated with [automd](https://automd.unjs.io) (last updated: Tue Jan 28 2025)_
+_🤖 auto updated with [automd](https://automd.unjs.io) (last updated: Mon Mar 31 2025)_
 
 <!-- /automd -->

package/dist/module.d.mts

@@ -1,5 +1,13 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
-declare const _default: _nuxt_schema.NuxtModule<_nuxt_schema.ModuleOptions, _nuxt_schema.ModuleOptions, false>;
+type ModuleOptions = {
+    /**
+     * Allows for the anonymous tracking of current visitors' locations.
+     * The composable `useVisitors` will provide the visitor count along with an additional `locations` array and a `myLocation` object that contains the visitors' locations.
+     * @default false
+     */
+    locations?: boolean;
+};
+declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
-export { _default as default };
+export { type ModuleOptions, _default as default };

package/dist/module.json

@@ -1,9 +1,9 @@
 {
   "name": "nuxt-visitors",
   "configKey": "visitors",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "builder": {
-    "@nuxt/module-builder": "0.8.4",
-    "unbuild": "2.0.0"
+    "@nuxt/module-builder": "1.0.1",
+    "unbuild": "3.5.0"
   }
 }

package/dist/module.mjs

@@ -1,17 +1,28 @@
-import { defineNuxtModule, createResolver, addImportsDir, addServerHandler } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addImportsDir, addPlugin, addServerHandler } from '@nuxt/kit';
 
 const module = defineNuxtModule({
   meta: {
     name: "nuxt-visitors",
     configKey: "visitors"
   },
-  setup(_options, nuxt) {
+  defaults: {
+    locations: false
+  },
+  setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
     addImportsDir(resolver.resolve("./runtime/app/composables"));
-    addServerHandler({
-      route: "/.nuxt-visitors/ws",
-      handler: resolver.resolve("./runtime/server/routes/visitors")
-    });
+    if (options.locations) {
+      addPlugin(resolver.resolve("./runtime/app/plugins/location.server"));
+      addServerHandler({
+        route: "/.nuxt-visitors/ws",
+        handler: resolver.resolve("./runtime/server/routes/locations")
+      });
+    } else {
+      addServerHandler({
+        route: "/.nuxt-visitors/ws",
+        handler: resolver.resolve("./runtime/server/routes/visitors")
+      });
+    }
   }
 });
 

package/dist/runtime/app/composables/useVisitors.d.ts

@@ -10,15 +10,34 @@
  *
  * @returns {Object} An object containing:
  *  - visitors: Ref<number> - Current number of visitors
+ *  - locations: Ref<Location[]> - Array of geolocation objects for all visitors (if `locations: true`)
+ *  - myLocation: Ref<Location | null> - Geolocation of the current visitor (if `locations: true`)
  *  - isLoading: Ref<boolean> - Loading state indicator
  *  - error: Ref<string | null> - Error message if any
  *  - isConnected: Ref<boolean> - WebSocket connection status
  *  - reconnect: () => void - Function to manually reconnect
  */
 export declare function useVisitors(): {
-    visitors: any;
-    isLoading: any;
-    error: any;
-    isConnected: any;
+    visitors: import("vue").Ref<number, number>;
+    locations: import("vue").Ref<{
+        latitude: number;
+        longitude: number;
+    }[], {
+        latitude: number;
+        longitude: number;
+    }[] | {
+        latitude: number;
+        longitude: number;
+    }[]>;
+    myLocation: import("vue").Ref<{
+        latitude: number;
+        longitude: number;
+    }, {
+        latitude: number;
+        longitude: number;
+    }>;
+    isLoading: import("vue").Ref<boolean, boolean>;
+    error: import("vue").Ref<string | null, string | null>;
+    isConnected: import("vue").Ref<boolean, boolean>;
     reconnect: () => void;
 };

package/dist/runtime/app/composables/useVisitors.js

@@ -1,5 +1,12 @@
+import { ref, onMounted, onBeforeUnmount } from "vue";
+import { useState } from "#imports";
 export function useVisitors() {
   const visitors = useState("visitors", () => 0);
+  const locations = ref([]);
+  const myLocation = useState("location", () => ({
+    latitude: 0,
+    longitude: 0
+  }));
   const isLoading = ref(true);
   const error = ref(null);
   const wsRef = ref(null);
@@ -10,7 +17,7 @@ export function useVisitors() {
   const getWebSocketUrl = () => {
     const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
     const baseUrl = window.location.host.replace(/^(http|https):\/\//, "");
-    return `${protocol}//${baseUrl}/.nuxt-visitors/ws`;
+    return `${protocol}//${baseUrl}/.nuxt-visitors/ws?latitude=${myLocation.value.latitude}&longitude=${myLocation.value.longitude}`;
   };
   const cleanup = () => {
     if (wsRef.value) {
@@ -24,7 +31,8 @@ export function useVisitors() {
     if (!isMounted.value) return;
     try {
       const data = typeof event.data === "string" ? event.data : await event.data.text();
-      const visitorCount = parseInt(data, 10);
+      locations.value = JSON.parse(data);
+      const visitorCount = locations.value.length;
       if (!isNaN(visitorCount) && visitorCount >= 0) {
         visitors.value = visitorCount;
       } else {
@@ -92,6 +100,8 @@ export function useVisitors() {
   });
   return {
     visitors,
+    locations,
+    myLocation,
     isLoading,
     error,
     isConnected,

package/dist/runtime/app/plugins/location.server.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/dist/runtime/app/plugins/location.server.js

@@ -0,0 +1,9 @@
+export default defineNuxtPlugin(() => {
+  const event = useRequestEvent();
+  useState("location", () => ({
+    latitude: event?.context.cf?.latitude || Math.random() * 180 - 90,
+    // default to random latitude (only in dev)
+    longitude: event?.context.cf?.longitude || Math.random() * 360 - 180
+    // default to random longitude (only in dev)
+  }));
+});

package/dist/runtime/server/routes/locations.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, never>;
+export default _default;

package/dist/runtime/server/routes/locations.js

@@ -0,0 +1,17 @@
+import { defineWebSocketHandler } from "h3";
+import { getQuery } from "ufo";
+export default defineWebSocketHandler({
+  open(peer) {
+    const locations = Array.from(peer.peers.values()).map((peer2) => getQuery(peer2.websocket.url));
+    peer.subscribe("nuxt-visitors");
+    peer.publish("nuxt-visitors", JSON.stringify(locations));
+    peer.send(JSON.stringify(locations));
+  },
+  close(peer) {
+    peer.unsubscribe("nuxt-visitors");
+    setTimeout(() => {
+      const locations = Array.from(peer.peers.values()).map((peer2) => getQuery(peer2.websocket.url));
+      peer.publish("nuxt-visitors", JSON.stringify(locations));
+    }, 500);
+  }
+});

package/dist/runtime/server/routes/visitors.d.ts

@@ -1,2 +1,2 @@
-declare const _default: any;
+declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, never>;
 export default _default;

package/dist/runtime/server/routes/visitors.js

@@ -1,3 +1,4 @@
+import { defineWebSocketHandler } from "h3";
 export default defineWebSocketHandler({
   open(peer) {
     peer.subscribe("nuxt-visitors");

package/dist/types.d.mts

@@ -1,7 +1 @@
-import type { NuxtModule } from '@nuxt/schema'
-
-import type { default as Module } from './module.js'
-
-export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
-
-export { default } from './module.js'
+export { type ModuleOptions, default } from './module.mjs'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-visitors",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Add real-time visitor tracking to your Nuxt app with one line of code. WebSocket made easy",
   "license": "Apache-2.0",
   "type": "module",
@@ -15,13 +15,11 @@
   "author": "HugoRCD",
   "exports": {
     ".": {
-      "types": "./dist/types.d.ts",
-      "import": "./dist/module.mjs",
-      "require": "./dist/module.cjs"
+      "types": "./dist/module.d.mts",
+      "import": "./dist/module.mjs"
     }
   },
-  "main": "./dist/module.cjs",
-  "types": "./dist/types.d.ts",
+  "main": "./dist/module.mjs",
   "files": [
     "dist"
   ],
@@ -31,6 +29,7 @@
     "dev:build": "nuxi build playground",
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
     "release": "npm run lint && npm run test && npm run prepack",
+    "typecheck": "tsc --noEmit",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
     "test": "vitest run",
@@ -38,23 +37,22 @@
     "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.15.3"
+    "@nuxt/kit": "3.16.2",
+    "ufo": "^1.6.1"
   },
   "devDependencies": {
-    "@hrcd/eslint-config": "^2.1.1",
-    "@nuxt/devtools": "^1.7.0",
-    "@nuxt/eslint-config": "^0.7.5",
-    "@nuxt/module-builder": "^0.8.4",
-    "@nuxt/schema": "^3.15.3",
-    "@nuxt/test-utils": "^3.15.4",
+    "@hrcd/eslint-config": "edge",
+    "@nuxt/devtools": "^2.4.0",
+    "@nuxt/module-builder": "^1.0.1",
+    "@nuxt/schema": "3.16.2",
+    "@nuxt/test-utils": "^3.17.2",
     "@types/node": "latest",
-    "changelogen": "^0.5.7",
-    "eslint": "^9.19.0",
-    "nuxt": "3.15.3",
-    "typescript": "5.6.3",
-    "vitest": "^3.0.4",
-    "vue-tsc": "^2.2.0",
-    "automd": "^0.3.12"
+    "automd": "^0.4.0",
+    "eslint": "^9.24.0",
+    "nuxt": "3.16.0",
+    "typescript": "5.8.3",
+    "vitest": "^3.1.1",
+    "vue-tsc": "^2.2.8"
   },
-  "packageManager": "pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0"
+  "packageManager": "pnpm@10.8.1"
 }

package/dist/module.cjs

@@ -1,5 +0,0 @@
-module.exports = function(...args) {
-  return import('./module.mjs').then(m => m.default.call(this, ...args))
-}
-const _meta = module.exports.meta = require('./module.json')
-module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.ts

@@ -1,5 +0,0 @@
-import * as _nuxt_schema from '@nuxt/schema';
-
-declare const _default: _nuxt_schema.NuxtModule<_nuxt_schema.ModuleOptions, _nuxt_schema.ModuleOptions, false>;
-
-export { _default as default };

package/dist/types.d.ts

@@ -1,7 +0,0 @@
-import type { NuxtModule } from '@nuxt/schema'
-
-import type { default as Module } from './module'
-
-export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
-
-export { default } from './module'