@vercel/analytics - npm Package Compare versions

Comparing version 1.1.2 to 1.2.0-beta.1

dist/index.d.ts

@@ -17,6 +17,11 @@ interface PageViewEvent {
     mode?: Mode;
+    route?: string | null;
+    disableAutoTrack?: boolean;
+    scriptSrc?: string;
+    endpoint?: string;
+    dsn?: string;
 }
 declare global {
     interface Window {
-        va?: (event: 'beforeSend' | 'event', properties?: unknown) => void;
+        va?: (event: 'beforeSend' | 'event' | 'pageview', properties?: unknown) => void;
         vaq?: [string, unknown?][];
@@ -28,2 +33,4 @@ vai?: boolean;
 
+declare const DEV_SCRIPT_URL = "https://va.vercel-scripts.com/v1/script.debug.js";
+declare const PROD_SCRIPT_URL = "/_vercel/insights/script.js";
 /**
@@ -38,4 +45,7 @@ * Injects the Vercel Web Analytics script into the page head and starts tracking page views. Read more in our [documentation](https://vercel.com/docs/concepts/analytics/package).
  * @param [props.beforeSend] - A middleware function to modify events before they are sent. Should return the event object or `null` to cancel the event.
+ * @param [props.dsn] - The DSN of the project to send events to. Only required when self-hosting.
  */
-declare function inject(props?: AnalyticsProps): void;
+declare function inject(props?: AnalyticsProps & {
+    framework?: string;
+}): void;
 /**
@@ -48,2 +58,5 @@ * Tracks a custom event. Please refer to the [documentation](https://vercel.com/docs/concepts/analytics/custom-events) for more information on custom events.
 declare function track(name: string, properties?: Record<string, AllowedPropertyValues>): void;
+declare function pageview({ route }: {
+    route?: string;
+}): void;
 
@@ -55,2 +68,2 @@ declare const _default: {
 
-export { AnalyticsProps, _default as default, inject, track };
+export { AnalyticsProps, DEV_SCRIPT_URL, PROD_SCRIPT_URL, _default as default, inject, pageview, track };

dist/index.js

@@ -0,4 +1,35 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/generic.ts
+var generic_exports = {};
+__export(generic_exports, {
+  DEV_SCRIPT_URL: () => DEV_SCRIPT_URL,
+  PROD_SCRIPT_URL: () => PROD_SCRIPT_URL,
+  default: () => generic_default,
+  inject: () => inject,
+  pageview: () => pageview,
+  track: () => track
+});
+module.exports = __toCommonJS(generic_exports);
+
 // package.json
 var name = "@vercel/analytics";
-var version = "1.1.2";
+var version = "1.2.0-beta.1";
 
@@ -73,2 +104,4 @@ // src/queue.ts
 // src/generic.ts
+var DEV_SCRIPT_URL = "https://va.vercel-scripts.com/v1/script.debug.js";
+var PROD_SCRIPT_URL = "/_vercel/insights/script.js";
 function inject(props = {
@@ -85,3 +118,3 @@ debug: true
   }
-  const src = isDevelopment() ? "https://va.vercel-scripts.com/v1/script.debug.js" : "/_vercel/insights/script.js";
+  const src = props.scriptSrc || (isDevelopment() ? DEV_SCRIPT_URL : PROD_SCRIPT_URL);
   if (document.head.querySelector(`script[src*="${src}"]`))
@@ -92,4 +125,13 @@ return;
   script.defer = true;
-  script.setAttribute("data-sdkn", name);
-  script.setAttribute("data-sdkv", version);
+  script.dataset.sdkn = name + (props.framework ? `/${props.framework}` : "");
+  script.dataset.sdkv = version;
+  if (props.disableAutoTrack) {
+    script.dataset.disableAutoTrack = "1";
+  }
+  if (props.endpoint) {
+    script.dataset.endpoint = props.endpoint;
+  }
+  if (props.dsn) {
+    script.dataset.dsn = props.dsn;
+  }
   script.onerror = () => {
@@ -102,3 +144,3 @@ const errorMessage = isDevelopment() ? "Please check if any ad blockers are enabled and try again." : "Be sure to enable Web Analytics for your project and deploy again. See https://vercel.com/docs/analytics/quickstart for more information.";
   if (isDevelopment() && props.debug === false) {
-    script.setAttribute("data-debug", "false");
+    script.dataset.debug = "false";
   }
@@ -136,2 +178,8 @@ document.head.appendChild(script);
 }
+function pageview({ route }) {
+  var _a;
+  (_a = window.va) == null ? void 0 : _a.call(window, "pageview", {
+    route
+  });
+}
 var generic_default = {
@@ -141,7 +189,10 @@ inject,
 };
-export {
-  generic_default as default,
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEV_SCRIPT_URL,
+  PROD_SCRIPT_URL,
   inject,
+  pageview,
   track
-};
+});
 //# sourceMappingURL=index.js.map

dist/react/index.d.ts

@@ -17,6 +17,11 @@ interface PageViewEvent {
     mode?: Mode;
+    route?: string | null;
+    disableAutoTrack?: boolean;
+    scriptSrc?: string;
+    endpoint?: string;
+    dsn?: string;
 }
 declare global {
     interface Window {
-        va?: (event: 'beforeSend' | 'event', properties?: unknown) => void;
+        va?: (event: 'beforeSend' | 'event' | 'pageview', properties?: unknown) => void;
         vaq?: [string, unknown?][];
@@ -59,4 +64,6 @@ vai?: boolean;
  */
-declare function Analytics({ beforeSend, debug, mode, }: AnalyticsProps): null;
+declare function Analytics(props: AnalyticsProps & {
+    framework?: string;
+}): null;
 
 export { Analytics, AnalyticsProps, track };

dist/react/index.js

 "use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name2 in all)
+    __defProp(target, name2, { get: all[name2], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/react.tsx
-import { useEffect } from "react";
+var react_exports = {};
+__export(react_exports, {
+  Analytics: () => Analytics,
+  track: () => track
+});
+module.exports = __toCommonJS(react_exports);
+var import_react = require("react");
 
 // package.json
 var name = "@vercel/analytics";
-var version = "1.1.2";
+var version = "1.2.0-beta.1";
 
@@ -78,2 +102,4 @@ // src/queue.ts
 // src/generic.ts
+var DEV_SCRIPT_URL = "https://va.vercel-scripts.com/v1/script.debug.js";
+var PROD_SCRIPT_URL = "/_vercel/insights/script.js";
 function inject(props = {
@@ -90,3 +116,3 @@ debug: true
   }
-  const src = isDevelopment() ? "https://va.vercel-scripts.com/v1/script.debug.js" : "/_vercel/insights/script.js";
+  const src = props.scriptSrc || (isDevelopment() ? DEV_SCRIPT_URL : PROD_SCRIPT_URL);
   if (document.head.querySelector(`script[src*="${src}"]`))
@@ -97,4 +123,13 @@ return;
   script.defer = true;
-  script.setAttribute("data-sdkn", name);
-  script.setAttribute("data-sdkv", version);
+  script.dataset.sdkn = name + (props.framework ? `/${props.framework}` : "");
+  script.dataset.sdkv = version;
+  if (props.disableAutoTrack) {
+    script.dataset.disableAutoTrack = "1";
+  }
+  if (props.endpoint) {
+    script.dataset.endpoint = props.endpoint;
+  }
+  if (props.dsn) {
+    script.dataset.dsn = props.dsn;
+  }
   script.onerror = () => {
@@ -107,3 +142,3 @@ const errorMessage = isDevelopment() ? "Please check if any ad blockers are enabled and try again." : "Be sure to enable Web Analytics for your project and deploy again. See https://vercel.com/docs/analytics/quickstart for more information.";
   if (isDevelopment() && props.debug === false) {
-    script.setAttribute("data-debug", "false");
+    script.dataset.debug = "false";
   }
@@ -141,18 +176,32 @@ document.head.appendChild(script);
 }
+function pageview({ route }) {
+  var _a;
+  (_a = window.va) == null ? void 0 : _a.call(window, "pageview", {
+    route
+  });
+}
 
 // src/react.tsx
-function Analytics({
-  beforeSend,
-  debug = true,
-  mode = "auto"
-}) {
-  useEffect(() => {
-    inject({ beforeSend, debug, mode });
-  }, [beforeSend, debug, mode]);
+function Analytics(props) {
+  (0, import_react.useEffect)(() => {
+    inject({
+      framework: props.framework || "react",
+      ...props.route && { disableAutoTrack: true },
+      ...props
+    });
+  }, [props]);
+  (0, import_react.useEffect)(() => {
+    if (props.route) {
+      pageview({
+        route: props.route
+      });
+    }
+  }, [props.route]);
   return null;
 }
-export {
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
   Analytics,
   track
-};
+});
 //# sourceMappingURL=index.js.map

dist/server/index.d.ts

@@ -5,3 +5,3 @@ type Mode = 'auto' | 'development' | 'production';
     interface Window {
-        va?: (event: 'beforeSend' | 'event', properties?: unknown) => void;
+        va?: (event: 'beforeSend' | 'event' | 'pageview', properties?: unknown) => void;
         vaq?: [string, unknown?][];
@@ -8,0 +8,0 @@ vai?: boolean;

dist/server/index.js

@@ -0,1 +1,27 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/server/index.ts
+var server_exports = {};
+__export(server_exports, {
+  track: () => track
+});
+module.exports = __toCommonJS(server_exports);
+
 // src/utils.ts
@@ -149,5 +175,6 @@ function isBrowser() {
 }
-export {
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
   track
-};
+});
 //# sourceMappingURL=index.js.map

jest.config.js

@@ -1,2 +0,2 @@
-export default {
+module.exports = {
   testEnvironment: 'jsdom',
@@ -3,0 +3,0 @@ transform: {

package.json

 {
   "name": "@vercel/analytics",
-  "version": "1.1.2",
+  "version": "1.2.0-beta.1",
   "description": "Gain real-time traffic insights with Vercel Web Analytics",
@@ -14,3 +14,2 @@ "keywords": [
   "license": "MPL-2.0",
-  "type": "module",
   "exports": {
@@ -28,2 +27,7 @@ "./package.json": "./package.json",
     },
+    "./next": {
+      "browser": "./dist/next/index.mjs",
+      "import": "./dist/next/index.mjs",
+      "require": "./dist/next/index.js"
+    },
     "./server": {
@@ -37,4 +41,4 @@ "node": "./dist/server/index.js",
   },
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "typesVersions": {
@@ -50,2 +54,5 @@ "*": {
         "dist/server/index.d.ts"
+      ],
+      "next": [
+        "dist/next/index.d.ts"
       ]
@@ -84,2 +91,14 @@ }
   },
+  "peerDependencies": {
+    "next": ">= 13",
+    "react": "^18 || ^19"
+  },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    }
+  },
   "scripts": {
@@ -86,0 +105,0 @@ "build": "tsup",

tsup.config.js

@@ -23,2 +23,16 @@ import { defineConfig } from 'tsup';
     entry: {
+      index: 'src/nextjs/index.tsx',
+    },
+    external: ['react', 'next'],
+    outDir: 'dist/next',
+    esbuildOptions: (options) => {
+      // Append "use client" to the top of the react entry point
+      options.banner = {
+        js: '"use client";',
+      };
+    },
+  },
+  {
+    ...cfg,
+    entry: {
       index: 'src/react.tsx',
@@ -25,0 +39,0 @@ },

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

186870

increased by49.97%

Number of package files

31

increased by24%

Lines of code

1646

increased by45.41%

Worsened metrics

Dependency count

3

increased by200%

Number of low quality alerts

1

increased byInfinity%

Number of low supply chain risk alerts

4

increased by100%

Number of medium supply chain risk alerts

3

increased by50%

Is type module

No

No dependency changes