feat: support configurable deployment basepath

vercel · Nov 18, 2024 · 705a0f0 · 705a0f0
1 parent 68d0d13
commit 705a0f0
Show file tree

Hide file tree

Showing 22 changed files with 1,958 additions and 1,729 deletions.
diff --git a/apps/remix/.eslintrc.cjs b/apps/remix/.eslintrc.cjs
diff --git a/apps/remix/.gitignore b/apps/remix/.gitignore
@@ -1,6 +1,5 @@
 node_modules
 
+/.cache
 /build
-/public/build
 .env
-.cache
diff --git a/apps/remix/README.md b/apps/remix/README.md
@@ -1 +1,16 @@
 # Remix Vercel Web Analytics Test
+
+## Setup
+
+This application was created with the following commands:
+
+- `cd apps`
+- `pnpx create-remix@latest remix` (answers: no git, no dependencies installation)
+- `cd remix`
+- TODO
+- edit package.json to add `"@vercel/analytics": "workspace:*"`
+- `pnpm i`
+
+## Usage
+
+Start it with `pnpm -F remix dev` and browse to [http://localhost:5173](http://localhost:5173)
diff --git a/apps/remix/app/root.tsx b/apps/remix/app/root.tsx
@@ -1,20 +1,13 @@
-import { cssBundleHref } from '@remix-run/css-bundle';
-import type { LinksFunction } from '@remix-run/node';
 import {
   Links,
-  LiveReload,
   Meta,
   Outlet,
   Scripts,
   ScrollRestoration,
 } from '@remix-run/react';
 import { Analytics } from '@vercel/analytics/remix';
 
-export const links: LinksFunction = () => [
-  ...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []),
-];
-
-export default function App() {
+export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <head>
@@ -25,11 +18,14 @@ export default function App() {
       </head>
       <body>
         <Analytics />
-        <Outlet />
+        {children}
         <ScrollRestoration />
         <Scripts />
-        <LiveReload />
       </body>
     </html>
   );
 }
+
+export default function App() {
+  return <Outlet />;
+}
diff --git a/apps/remix/app/routes/_index.tsx b/apps/remix/app/routes/_index.tsx
@@ -1,5 +1,4 @@
-import { json } from '@vercel/remix';
-import { Form, Link, useActionData } from '@remix-run/react';
+import { Form, json, Link, useActionData } from '@remix-run/react';
 import { track } from '@vercel/analytics/server';
 
 export const action = async () => {

diff --git a/apps/remix/app/routes/blog.$slug.tsx b/apps/remix/app/routes/blog.$slug.tsx
@@ -1,6 +1,5 @@
 import { json, type LoaderFunctionArgs } from '@remix-run/node';
 import { Link, useLoaderData } from '@remix-run/react';
-import { track } from '@vercel/analytics';
 
 export const loader = async ({ params }: LoaderFunctionArgs) => {
   return json({ slug: params.slug });
@@ -11,7 +10,7 @@ export default function BlogPage() {
   return (
     <div>
       <h1>Blog</h1>
-      <p>We don't talk about {slug}</p>
+      <p>We don&apos;t talk about {slug}</p>
       <br />
       <Link to="/">Back</Link>
     </div>

diff --git a/apps/remix/package.json b/apps/remix/package.json
@@ -1,34 +1,35 @@
 {
   "name": "remix",
   "private": true,
+  "sideEffects": false,
   "type": "module",
   "scripts": {
-    "build": "remix build",
-    "dev": "remix dev --manual",
-    "start": "remix-serve ./build/index.js",
+    "build": "remix vite:build",
+    "dev": "remix vite:dev",
+    "start": "remix-serve ./build/server/index.js",
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@remix-run/css-bundle": "^2.5.0",
-    "@remix-run/node": "^2.5.0",
-    "@remix-run/react": "^2.5.0",
-    "@remix-run/serve": "^2.5.0",
-    "@remix-run/server-runtime": "^2.5.0",
+    "@remix-run/node": "latest",
+    "@remix-run/react": "latest",
+    "@remix-run/serve": "latest",
     "@vercel/analytics": "workspace:*",
-    "@vercel/remix": "2.5.0",
-    "isbot": "^3.6.3",
+    "isbot": "^4.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@remix-run/dev": "^2.5.0",
-    "@remix-run/eslint-config": "^2.5.0",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^18.0.8",
-    "eslint": "^8.56.0",
-    "typescript": "^5.3.3"
+    "@remix-run/dev": "latest",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.4",
+    "typescript": "^5.1.6",
+    "vite": "^5.1.0",
+    "vite-tsconfig-paths": "^4.2.1"
   },
   "engines": {
-    "node": ">=18"
+    "node": ">=20.0.0"
   }
 }
diff --git a/apps/remix/remix.config.js b/apps/remix/remix.config.js
diff --git a/apps/remix/remix.env.d.ts b/apps/remix/remix.env.d.ts
diff --git a/apps/remix/tsconfig.json b/apps/remix/tsconfig.json
@@ -1,22 +1,32 @@
 {
-  "include": ["remix.env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": [
+    "**/*.ts",
+    "**/*.tsx",
+    "**/.server/**/*.ts",
+    "**/.server/**/*.tsx",
+    "**/.client/**/*.ts",
+    "**/.client/**/*.tsx"
+  ],
   "compilerOptions": {
-    "lib": ["DOM", "DOM.Iterable", "ES2019"],
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "types": ["@remix-run/node", "vite/client"],
     "isolatedModules": true,
     "esModuleInterop": true,
     "jsx": "react-jsx",
+    "module": "ESNext",
     "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "target": "ES2022",
     "strict": true,
     "allowJs": true,
+    "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
     "baseUrl": ".",
     "paths": {
       "~/*": ["./app/*"]
     },
 
-    // Remix takes care of building everything in `remix build`.
+    // Vite takes care of building everything, not tsc.
     "noEmit": true
   }
 }
diff --git a/apps/remix/vite.config.ts b/apps/remix/vite.config.ts
@@ -0,0 +1,6 @@
+import { vitePlugin as remix } from '@remix-run/dev';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [remix()],
+});
diff --git a/packages/web/jest.setup.ts b/packages/web/jest.setup.ts
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@vercel/analytics",
-  "version": "1.5.0-canary.1",
+  "version": "1.5.0-canary.2",
   "description": "Gain real-time traffic insights with Vercel Web Analytics",
   "keywords": [
     "analytics",
@@ -42,7 +42,7 @@
       "require": "./dist/remix/index.js"
     },
     "./server": {
-      "node": "./dist/server/index.js",
+      "node": "./dist/server/index.mjs",
       "edge-light": "./dist/server/index.mjs",
       "import": "./dist/server/index.mjs",
       "require": "./dist/server/index.js",
@@ -94,7 +94,7 @@
     "dev": "pnpm copy-astro && tsup --watch",
     "lint": "eslint .",
     "lint-fix": "eslint . --fix",
-    "test": "jest",
+    "test": "vitest watch",
     "type-check": "tsc --noEmit"
   },
   "eslintConfig": {
@@ -109,19 +109,16 @@
     ]
   },
   "devDependencies": {
-    "@jest/globals": "^29.7.0",
-    "@swc/core": "^1.8.0",
-    "@swc/jest": "^0.2.37",
+    "@swc/core": "^1.9.2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
-    "@types/node": "^20.17.6",
+    "@types/node": "^22.9.0",
     "@types/react": "^18.3.12",
     "@vercel/eslint-config": "workspace:0.0.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
     "server-only": "^0.0.1",
     "svelte": "^5.1.10",
-    "tsup": "7.1.0",
+    "tsup": "8.3.5",
+    "vitest": "^2.1.5",
     "vue": "^3.5.12",
     "vue-router": "^4.4.5"
   },

diff --git a/packages/web/src/generic.test.ts b/packages/web/src/generic.test.ts
@@ -1,4 +1,4 @@
-import { beforeEach, describe, it, expect, jest } from '@jest/globals';
+import { beforeEach, describe, it, expect, vi } from 'vitest';
 import { inject, track } from './generic';
 import type { AllowedPropertyValues, Mode } from './types';
 
@@ -7,7 +7,10 @@ describe.each([
     mode: 'development',
     file: 'https://va.vercel-scripts.com/v1/script.debug.js',
   },
-  { mode: 'production', file: 'http://localhost/_vercel/insights/script.js' },
+  {
+    mode: 'production',
+    file: 'http://localhost:3000/_vercel/insights/script.js',
+  },
 ] as { mode: Mode; file: string }[])('in $mode mode', ({ mode, file }) => {
   describe('inject', () => {
     it('adds the script tag correctly', () => {
@@ -49,7 +52,7 @@ describe.each([
       });
 
       it('should strip data for nested objects', () => {
-        jest.spyOn(global.console, 'error').mockImplementation(() => void 0);
+        vi.spyOn(global.console, 'error').mockImplementation(() => void 0);
 
         const name = 'custom event';
         const data = { string: 'string', number: 1 };
@@ -59,10 +62,9 @@ describe.each([
         });
 
         if (mode === 'development') {
-          // eslint-disable-next-line jest/no-conditional-expect, no-console -- only in development
+          // eslint-disable-next-line no-console -- only in development
           expect(console.error).toHaveBeenCalledTimes(1);
         } else {
-          // eslint-disable-next-line jest/no-conditional-expect -- only in production
           expect(window.vaq?.[0]).toEqual(['event', { name, data }]);
         }
       });

diff --git a/packages/web/src/generic.ts b/packages/web/src/generic.ts
@@ -14,14 +14,10 @@ import {
   isDevelopment,
   isProduction,
   computeRoute,
+  getBasePath,
+  getScriptSrc,
 } from './utils';
 
-export const DEV_SCRIPT_URL =
-  'https://va.vercel-scripts.com/v1/script.debug.js';
-export const PROD_SCRIPT_URL = '/_vercel/insights/script.js';
-
-export const basepathVariableName = 'NEXT_PUBLIC_WEB_ANALYTICS_BASEPATH';
-
 /**
  * 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] - Analytics options.
@@ -52,8 +48,7 @@ function inject(
     window.va?.('beforeSend', props.beforeSend);
   }
 
-  const src =
-    props.scriptSrc || (isDevelopment() ? DEV_SCRIPT_URL : PROD_SCRIPT_URL);
+  const src = getScriptSrc(props);
 
   if (document.head.querySelector(`script[src*="${src}"]`)) return;
 
@@ -67,10 +62,11 @@ function inject(
   if (props.disableAutoTrack) {
     script.dataset.disableAutoTrack = '1';
   }
+  const basePath = getBasePath();
   if (props.endpoint) {
     script.dataset.endpoint = props.endpoint;
-  } else if (process.env[basepathVariableName]) {
-    script.dataset.endpoint = `/${process.env[basepathVariableName]}/_vercel/insights`;
+  } else if (basePath) {
+    script.dataset.endpoint = `${basePath}/insights`;
   }
   if (props.dsn) {
     script.dataset.dsn = props.dsn;

diff --git a/packages/web/src/react.test.tsx b/packages/web/src/react.test.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { afterEach, beforeEach, describe, it, expect } from '@jest/globals';
+import { afterEach, beforeEach, describe, it, expect } from 'vitest';
 import { cleanup, render } from '@testing-library/react';
 import { Analytics, track } from './react';
 import type { AllowedPropertyValues, AnalyticsProps, Mode } from './types';
@@ -20,7 +20,10 @@ describe('<Analytics />', () => {
       mode: 'development',
       file: 'https://va.vercel-scripts.com/v1/script.debug.js',
     },
-    { mode: 'production', file: 'http://localhost/_vercel/insights/script.js' },
+    {
+      mode: 'production',
+      file: 'http://localhost:3000/_vercel/insights/script.js',
+    },
   ] as { mode: Mode; file: string }[])('in $mode mode', ({ mode, file }) => {
     it('adds the script tag correctly', () => {
       render(<Analytics mode={mode} />);