feat: enforce consistent trailing slash (#116)

Author: ijkml

package.json

@@ -13,7 +13,7 @@
     "type": "git",
     "url": "git+https://github.com/ijkml/nuxt-umami.git"
   },
-  "packageManager": "pnpm@9.9.0",
+  "packageManager": "pnpm@9.10.0",
   "exports": {
     ".": {
       "types": "./dist/types.d.ts",
@@ -42,13 +42,13 @@
     "request-ip": "^3.3.0"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^0.5.6",
-    "@nuxt/module-builder": "^0.8.3",
+    "@nuxt/eslint-config": "^0.5.7",
+    "@nuxt/module-builder": "^0.8.4",
     "@nuxt/schema": "^3.13.1",
     "@types/node": "^22.5.4",
     "@types/request-ip": "^0.0.41",
     "bumpp": "^9.5.2",
-    "eslint": "^9.9.1",
+    "eslint": "^9.10.0",
     "nuxt": "^3.13.1",
     "typescript": "latest",
     "vue-tsc": "^2.1.6"

playground/app.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const shareUrl = 'https://savory.vercel.app/share/j2f1spIBFqHJKsXv/Nuxt%20Umami';
+const { shareUrl } = useAppConfig();
 
 function testView() {
   umTrackView().then(({ ok }) => {

playground/nuxt.config.ts

@@ -3,19 +3,25 @@ export default defineNuxtConfig({
   compatibilityDate: '2024-08-08',
 
   modules: ['../src/module'],
+
   umami: {
     enabled: true,
-    host: 'https://savory.vercel.app/',
-    id: '84cc2d28-8689-4df0-b575-2202e34a75aa',
+    host: 'https://savory.ijkml.dev/',
+    id: '94c6eb8c-646d-41ff-8b5b-a924ce2b4111',
     ignoreLocalhost: false,
     autoTrack: true,
     useDirective: true,
     customEndpoint: null,
     logErrors: true,
     domains: null,
     excludeQueryParams: false,
+    trailingSlash: 'always',
     proxy: 'cloak',
   },
 
+  appConfig: {
+    shareUrl: 'https://savory.ijkml.dev/share/xj2RHnDuAD8khsui/localhost',
+  },
+
   css: ['@/assets/reset.css'],
 });

pnpm-lock.yaml

@@ -3,10 +3,11 @@ import type {
   PreflightResult, EventData, FetchResult,
 } from '../types';
 import { earlyPromise, flattenObject, isValidString } from './utils';
-import { collect, config, logger } from '#build/umami.config.mjs';
+import { buildPathUrl, collect, config, logger } from '#build/umami.config.mjs';
 
 let configChecks: PreflightResult | undefined;
 let staticPayload: StaticPayload | undefined;
+let queryRef: string | undefined;
 
 function runPreflight(): PreflightResult {
   if (typeof window === 'undefined')
@@ -54,18 +55,21 @@ function getStaticPayload(): StaticPayload {
   return staticPayload;
 }
 
+function getQueryRef(): string {
+  if (typeof queryRef === 'string')
+    return queryRef;
+
+  const params = new URL(window.location.href).searchParams;
+  queryRef = params.get('referrer') || params.get('ref') || '';
+
+  return queryRef;
+}
+
 function getPayload(): ViewPayload {
   const { referrer, title } = window.document;
-  const pageUrl = new URL(window.location.href);
-
-  const ref = referrer
-    || pageUrl.searchParams.get('referrer')
-    || pageUrl.searchParams.get('ref')
-    || '';
 
-  const url = config.excludeQueryParams
-    ? pageUrl.pathname
-    : pageUrl.pathname + pageUrl.search;
+  const ref = referrer || getQueryRef();
+  const url = buildPathUrl();
 
   return {
     ...getStaticPayload(),

src/runtime/composables.ts

@@ -34,6 +34,7 @@ function normalizeConfig(options: ModuleOptions = {}): NormalizedModuleOptions {
     excludeQueryParams = false,
     logErrors = false,
     enabled = true,
+    trailingSlash = 'any',
   } = options;
 
   return {
@@ -57,6 +58,14 @@ function normalizeConfig(options: ModuleOptions = {}): NormalizedModuleOptions {
         return proxy.trim() as typeof proxy;
       return false;
     })(),
+    trailingSlash: (function () {
+      if (
+        isValidString(trailingSlash)
+        && ['always', 'never'].includes(trailingSlash.trim())
+      )
+        return trailingSlash.trim() as typeof trailingSlash;
+      return 'any';
+    })(),
     ignoreLocalhost: ignoreLocalhost === true,
     autoTrack: autoTrack !== false,
     useDirective: useDirective === true,

src/runtime/utils.ts

@@ -45,14 +45,18 @@ const fn_direct = `const { type, payload } = load;
 
 const collectFn: Record<`fn_${ModuleMode}`, string> = { fn_direct, fn_faux, fn_proxy };
 
-function generateTemplate({ options: { mode, config: { logErrors, ...config }, path } }: TemplateOptions) {
+function generateTemplate({
+  options: { mode, path, config: { logErrors, ...config } },
+}: TemplateOptions) {
   return `// template-generated
 import { ofetch } from 'ofetch';
 import { ${logErrors ? 'logger' : 'fauxLogger'} as $logger } from "${path.logger}";
 
 /**
  * @typedef {import("${path.types}").FetchFn} FetchFn
  * 
+ * @typedef {import("${path.types}").BuildPathUrlFn} BuildPathUrlFn
+ * 
  * @typedef {import("${path.types}").UmPublicConfig} UmPublicConfig
  */
 
@@ -84,6 +88,21 @@ function handleSuccess(response) {
   return { ok: true };
 }
 
+/**
+ * @type BuildPathUrlFn
+ */
+export function buildPathUrl() {
+  const { pathname, search } = new URL(window.location.href);
+
+  const path = ${config.trailingSlash === 'always'
+    ? `pathname.endsWith('/') ? pathname : pathname + '/'`
+    : config.trailingSlash === 'never'
+      ? `pathname.endsWith('/') ? pathname.slice(0, -1) : pathname`
+      : 'pathname'};
+
+  return ${config.excludeQueryParams ? 'path' : 'path + search'};
+}
+
 /**
  * @type FetchFn 
  * 

src/template.ts

@@ -1,4 +1,10 @@
 type ModuleOptions = Partial<{
+  /**
+   * Whether to enable the module
+   *
+   * @default true
+   */
+  enabled: boolean;
   /**
    * Your umami endpoint. This is where you would
    * normally load the script from.
@@ -72,11 +78,11 @@ type ModuleOptions = Partial<{
    */
   proxy: false | 'direct' | 'cloak';
   /**
-   * Whether to enable the module
+   * Consistent trailing slash
    *
-   * @default true
+   * @default 'any'
    */
-  enabled: boolean;
+  trailingSlash: 'any' | 'always' | 'never';
 }>;
 
 interface NormalizedModuleOptions extends Required<ModuleOptions> {
@@ -135,6 +141,7 @@ interface ServerPayload {
 
 type FetchResult = Promise<{ ok: boolean }>;
 type FetchFn = (load: ServerPayload) => FetchResult;
+type BuildPathUrlFn = () => string;
 
 export type {
   PreflightResult,
@@ -147,6 +154,7 @@ export type {
   UmPrivateConfig,
   ModuleMode,
   FetchFn,
+  BuildPathUrlFn,
   PayloadTypes,
   ViewPayload,
   EventPayload,