From fc01cf31d5fbcd2abb4c744361b57993f06f1721 Mon Sep 17 00:00:00 2001 From: Chris Esplin Date: Tue, 1 Aug 2023 15:32:40 -0600 Subject: [PATCH] Adding back a stripped-down explanation of constants in Next.js (#6086) We had a Discourse complaint about ambiguity around injecting `CONSTANTS` into Next.js https://highlightcorp.slack.com/archives/C02N2AZS8BV/p1689951434906759 This is a stripped-down explanation of how we get `CONSTANTS` injected into Next.js. ![image](https://github.com/highlight/highlight/assets/878947/f32c745c-876c-4e37-b1ee-0c9a2fa26d8c) --- .../fullstack-frameworks/next-js.md | 49 ++++++-- e2e/.gitignore | 1 + e2e/nextjs/README.md | 12 +- e2e/nextjs/highlight.config.ts | 2 +- e2e/nextjs/instrumentation.ts | 2 +- e2e/nextjs/package.json | 6 +- e2e/nextjs/pages/_app.tsx | 2 +- e2e/nextjs/src/app/app-h-identify/page.tsx | 2 +- e2e/nextjs/src/app/components/canvas.tsx | 2 +- .../src/app/components/highlight-buttons.tsx | 2 +- .../src/app/components/highlight-identify.tsx | 2 +- e2e/nextjs/src/app/layout.tsx | 2 +- e2e/nextjs/src/app/utils/highlight.config.ts | 2 +- .../QuickstartContent/frontend/next.tsx | 2 +- highlight.io/highlight.config.ts | 2 +- highlight.io/next.config.js | 2 +- sdk/client/src/graph/generated/operations.ts | 6 + sdk/client/src/graph/generated/schemas.ts | 6 + sdk/highlight-next/CHANGELOG.md | 10 +- sdk/highlight-next/bin/clean-dist.sh | 2 + .../bin/clean-highlight-init.sh | 2 - sdk/highlight-next/client.d.ts | 1 + sdk/highlight-next/index.d.ts | 2 +- sdk/highlight-next/package.json | 48 ++++--- sdk/highlight-next/server.d.ts | 1 + .../{HighlightInit.tsx => next-client.tsx} | 8 +- .../src/{index.edge.ts => server.edge.ts} | 0 .../src/{index.ts => server.ts} | 0 sdk/highlight-next/tsup.config.ts | 2 +- yarn.lock | 117 +++++++++--------- 30 files changed, 186 insertions(+), 111 deletions(-) create mode 100755 sdk/highlight-next/bin/clean-dist.sh delete mode 100755 sdk/highlight-next/bin/clean-highlight-init.sh create mode 100644 sdk/highlight-next/client.d.ts create mode 100644 sdk/highlight-next/server.d.ts rename sdk/highlight-next/src/{HighlightInit.tsx => next-client.tsx} (55%) rename sdk/highlight-next/src/{index.edge.ts => server.edge.ts} (100%) rename sdk/highlight-next/src/{index.ts => server.ts} (100%) diff --git a/docs-content/getting-started/fullstack-frameworks/next-js.md b/docs-content/getting-started/fullstack-frameworks/next-js.md index deb5a481ad3..3fb7faebc7f 100644 --- a/docs-content/getting-started/fullstack-frameworks/next-js.md +++ b/docs-content/getting-started/fullstack-frameworks/next-js.md @@ -28,6 +28,39 @@ all-in-one. yarn add @highlight-run/next @highlight-run/react highlight.run ``` +## Environment Configuration (optional) + +> This section is extra opinionated about Next.js constants. It's not for everyone. We like how `zod` and TypeScript work together to validate `process.env` inputs... but this is a suggestion. Do your own thing and replace our imports (`import CONSTANTS from '@/app/constants'`) with your own! + +1. Install Zod: `yarn add zod` +2. Edit `.env` to add your projectID to `NEXT_PUBLIC_HIGHLIGHT_PROJECT_ID` + +```bash +# .env +NEXT_PUBLIC_HIGHLIGHT_PROJECT_ID='1jdkoe52' +``` + +3. Feed your environment variables into the application with a constants file. We're using `zod` for this example, because it creates a validated, typed `CONSTANTS` object that plays nicely with TypeScript. + +```javascript +// src/app/constants.ts +import { z } from 'zod' + +// Must assign NEXT_PUBLIC_* env vars to a variable to force Next to inline them +const publicEnv = { + NEXT_PUBLIC_HIGHLIGHT_PROJECT_ID: + process.env.NEXT_PUBLIC_HIGHLIGHT_PROJECT_ID, +} + +const CONSTANTS = z + .object({ + NEXT_PUBLIC_HIGHLIGHT_PROJECT_ID: z.string(), + }) + .parse(publicEnv) + +export default CONSTANTS +``` + ## Client Instrumentation This implementation requires React 17 or greater. If you're behind on React versions, follow our [React.js docs](../3_client-sdk/1_reactjs.md) @@ -38,7 +71,7 @@ This implementation requires React 17 or greater. If you're behind on React vers // pages/_app.tsx import { AppProps } from 'next/app' import CONSTANTS from '@/app/constants' -import { HighlightInit } from '@highlight-run/next/highlight-init' +import { HighlightInit } from '@highlight-run/next/client' export default function MyApp({ Component, pageProps }: AppProps) { return ( @@ -50,7 +83,6 @@ export default function MyApp({ Component, pageProps }: AppProps) { enabled: true, recordHeadersAndBody: true }} - backendUrl={CONSTANTS.NEXT_PUBLIC_HIGHLIGHT_BACKEND_URL} /> @@ -66,7 +98,7 @@ export default function MyApp({ Component, pageProps }: AppProps) { import './globals.css' import CONSTANTS from '@/app/constants' -import { HighlightInit } from '@highlight-run/next/highlight-init' +import { HighlightInit } from '@highlight-run/next/client' export default function RootLayout({ children }: { children: React.ReactNode }) { return ( @@ -78,7 +110,6 @@ export default function RootLayout({ children }: { children: React.ReactNode }) enabled: true, recordHeadersAndBody: true }} - backendUrl={CONSTANTS.NEXT_PUBLIC_HIGHLIGHT_BACKEND_URL} /> @@ -95,7 +126,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) ```javascript // src/app/utils/highlight.config.ts: import CONSTANTS from '@/app/constants' -import { Highlight } from '@highlight-run/next' +import { Highlight } from '@highlight-run/next/server' export const withHighlight = Highlight({ projectID: '', @@ -143,7 +174,7 @@ If you use a `next.config.js` file: ```javascript // next.config.js const nextBuildId = require('next-build-id') -const { withHighlightConfig } = require('@highlight-run/next') +const { withHighlightConfig } = require('@highlight-run/next/server') /** @type {import('next').NextConfig} */ const nextConfig = { @@ -165,7 +196,7 @@ If you use a `next.config.mjs` file: import { dirname } from 'path' import { fileURLToPath } from 'url' import nextBuildId from 'next-build-id' -import { withHighlightConfig } from '@highlight-run/next' +import { withHighlightConfig } from '@highlight-run/next/server' const __filename = fileURLToPath(import.meta.url) const __dirname = dirname(__filename) @@ -193,7 +224,7 @@ export async function register() { if (process.env.NEXT_RUNTIME === 'nodejs') { /** Conditional import required for use with Next middleware to avoid a webpack error * https://nextjs.org/docs/pages/building-your-application/routing/middleware */ - const { registerHighlight } = await import('@highlight-run/next') + const { registerHighlight } = await import('@highlight-run/next/server') registerHighlight({ projectID: CONSTANTS.NEXT_PUBLIC_HIGHLIGHT_PROJECT_ID, @@ -236,7 +267,7 @@ Make sure to implement `nextConfig.generateBuildId` so that our source map uploa ```javascript // next.config.js const nextBuildId = require('next-build-id') -const { withHighlightConfig } = require('@highlight-run/next') +const { withHighlightConfig } = require('@highlight-run/next/server') /** @type {import('next').NextConfig} */ const nextConfig = { diff --git a/e2e/.gitignore b/e2e/.gitignore index 3481a6ec2e8..e1767f0776a 100644 --- a/e2e/.gitignore +++ b/e2e/.gitignore @@ -67,3 +67,4 @@ node_modules/ .yarn .env.local +.cache \ No newline at end of file diff --git a/e2e/nextjs/README.md b/e2e/nextjs/README.md index 0e8663f76d7..297d5af3a34 100644 --- a/e2e/nextjs/README.md +++ b/e2e/nextjs/README.md @@ -75,7 +75,7 @@ export default CONSTANTS ```javascript // src/app/utils/highlight.config.ts: import CONSTANTS from '@/app/constants' -import { Highlight } from '@highlight-run/next' +import { Highlight } from '@highlight-run/next/server' if (process.env.NODE_ENV === 'development') { // Highlight's dev instance expects HTTPS. Disable HTTPS errors in development. @@ -121,7 +121,7 @@ Next.js comes out of the box instrumented for Open Telemetry. This example Highl 1. Install `next-build-id` with `npm install next-build-id`. -2. Turn on `instrumentationHook`. We've also turned on `productionBrowserSourceMaps` because Highlight is much easier to use with sourcemaps. Notice that we're transpiling the `@highlight-run/next/highlight-init` package. +2. Turn on `instrumentationHook`. We've also turned on `productionBrowserSourceMaps` because Highlight is much easier to use with sourcemaps. Notice that we're transpiling the `@highlight-run/next/client` package. ```javascript // next.config.js @@ -145,7 +145,7 @@ module.exports = nextConfig ```javascript // instrumentation.ts import CONSTANTS from '@/app/constants' -import { registerHighlight } from '@highlight-run/next' +import { registerHighlight } from '@highlight-run/next/server' export async function register() { registerHighlight({ @@ -163,7 +163,7 @@ export async function register() { // pages/_app.tsx import { AppProps } from 'next/app' import CONSTANTS from '@/app/constants' -import { HighlightInit } from '@highlight-run/next/highlight-init' +import { HighlightInit } from '@highlight-run/next/client' export default function MyApp({ Component, pageProps }: AppProps) { return ( @@ -191,7 +191,7 @@ export default function MyApp({ Component, pageProps }: AppProps) { import './globals.css' import CONSTANTS from '@/app/constants' -import { HighlightInit } from '@highlight-run/next/highlight-init' +import { HighlightInit } from '@highlight-run/next/client' export const metadata = { title: 'Highlight Next Demo', @@ -238,7 +238,7 @@ Make sure to implement `nextConfig.generateBuildId` so that our sourcemap upload ```javascript // next.config.js const nextBuildId = require('next-build-id') -const { withHighlightConfig } = require('@highlight-run/next') +const { withHighlightConfig } = require('@highlight-run/next/server') /** @type {import('next').NextConfig} */ const nextConfig = { diff --git a/e2e/nextjs/highlight.config.ts b/e2e/nextjs/highlight.config.ts index 4eb70f23e0c..1cf74d430fb 100644 --- a/e2e/nextjs/highlight.config.ts +++ b/e2e/nextjs/highlight.config.ts @@ -1,4 +1,4 @@ -import { Highlight } from '@highlight-run/next' +import { Highlight } from '@highlight-run/next/server' import winston from 'winston' const projectID = '1jdkoe52' diff --git a/e2e/nextjs/instrumentation.ts b/e2e/nextjs/instrumentation.ts index 4e6b82536de..992f83c6a94 100644 --- a/e2e/nextjs/instrumentation.ts +++ b/e2e/nextjs/instrumentation.ts @@ -9,7 +9,7 @@ export async function register() { * Avoids the following error: * An error occurred while loading instrumentation hook: (0 , _highlight_run_next__WEBPACK_IMPORTED_MODULE_1__.registerHighlight) is not a function */ - const { registerHighlight } = await import('@highlight-run/next') + const { registerHighlight } = await import('@highlight-run/next/server') registerHighlight({ projectID: CONSTANTS.NEXT_PUBLIC_HIGHLIGHT_PROJECT_ID, diff --git a/e2e/nextjs/package.json b/e2e/nextjs/package.json index 9ae0a824ebb..fb4919c9a62 100644 --- a/e2e/nextjs/package.json +++ b/e2e/nextjs/package.json @@ -15,7 +15,7 @@ "@highlight-run/next": "workspace:*", "@highlight-run/node": "workspace:*", "@highlight-run/react": "workspace:*", - "@next/env": "^13.4.9", + "@next/env": "^13.4.12", "@tanstack/react-query": "^4.29.7", "@trpc/client": "^10.26.0", "@trpc/next": "^10.26.0", @@ -27,10 +27,10 @@ "babylonjs": "^6.11.2", "classnames": "^2.3.2", "eslint": "8.39.0", - "eslint-config-next": "13.4.9", + "eslint-config-next": "13.4.12", "highlight.run": "workspace:*", "ky": "^0.33.3", - "next": "13.4.9", + "next": "13.4.12", "next-build-id": "^3.0.0", "react": "18.2.0", "react-dom": "18.2.0", diff --git a/e2e/nextjs/pages/_app.tsx b/e2e/nextjs/pages/_app.tsx index ae1ef8e8581..ad4e997f25f 100644 --- a/e2e/nextjs/pages/_app.tsx +++ b/e2e/nextjs/pages/_app.tsx @@ -2,7 +2,7 @@ import { AppProps } from 'next/app' import CONSTANTS from '@/app/constants' import { H } from 'highlight.run' -import { HighlightInit } from '@highlight-run/next/highlight-init' +import { HighlightInit } from '@highlight-run/next/client' import { useEffect } from 'react' export default function MyApp({ Component, pageProps }: AppProps) { diff --git a/e2e/nextjs/src/app/app-h-identify/page.tsx b/e2e/nextjs/src/app/app-h-identify/page.tsx index 31185dd1a07..6d99c8b1a77 100644 --- a/e2e/nextjs/src/app/app-h-identify/page.tsx +++ b/e2e/nextjs/src/app/app-h-identify/page.tsx @@ -1,6 +1,6 @@ 'use client' -import { H } from 'highlight.run' +import { H } from '@highlight-run/next/client' import { useEffect } from 'react' export default function HighlightIdentify() { diff --git a/e2e/nextjs/src/app/components/canvas.tsx b/e2e/nextjs/src/app/components/canvas.tsx index 31f09404fca..efa6846bee4 100644 --- a/e2e/nextjs/src/app/components/canvas.tsx +++ b/e2e/nextjs/src/app/components/canvas.tsx @@ -13,7 +13,7 @@ import { Color3, } from 'babylonjs' import React, { useEffect, useRef, useState } from 'react' -import { H } from 'highlight.run' +import { H } from '@highlight-run/next/client' export const Canvas = ({ antialias, diff --git a/e2e/nextjs/src/app/components/highlight-buttons.tsx b/e2e/nextjs/src/app/components/highlight-buttons.tsx index 4afe7101af9..cd3c57aeb2f 100644 --- a/e2e/nextjs/src/app/components/highlight-buttons.tsx +++ b/e2e/nextjs/src/app/components/highlight-buttons.tsx @@ -1,7 +1,7 @@ 'use client' import { Button } from '@/app/components/button' -import { H } from 'highlight.run' +import { H } from '@highlight-run/next/client' export function HighlightButtons() { return ( diff --git a/e2e/nextjs/src/app/components/highlight-identify.tsx b/e2e/nextjs/src/app/components/highlight-identify.tsx index 6b0625808aa..7755d266776 100644 --- a/e2e/nextjs/src/app/components/highlight-identify.tsx +++ b/e2e/nextjs/src/app/components/highlight-identify.tsx @@ -1,6 +1,6 @@ 'use client' -import { H } from 'highlight.run' +import { H } from '@highlight-run/next/client' import { useEffect } from 'react' export function HighlightIdentify() { diff --git a/e2e/nextjs/src/app/layout.tsx b/e2e/nextjs/src/app/layout.tsx index d3aaf6454a3..6ed9db56bd5 100644 --- a/e2e/nextjs/src/app/layout.tsx +++ b/e2e/nextjs/src/app/layout.tsx @@ -2,7 +2,7 @@ import './globals.css' import CONSTANTS from '@/app/constants' -import { HighlightInit } from '@highlight-run/next/highlight-init' +import { HighlightInit } from '@highlight-run/next/client' export const metadata = { title: 'Highlight Next Demo', diff --git a/e2e/nextjs/src/app/utils/highlight.config.ts b/e2e/nextjs/src/app/utils/highlight.config.ts index 3d153a331ee..39a312cb98d 100644 --- a/e2e/nextjs/src/app/utils/highlight.config.ts +++ b/e2e/nextjs/src/app/utils/highlight.config.ts @@ -1,6 +1,6 @@ // src/app/utils/highlight.config.ts: import CONSTANTS from '@/app/constants' -import { Highlight } from '@highlight-run/next' +import { Highlight } from '@highlight-run/next/server' if (process.env.NODE_ENV === 'development') { // Highlight's dev instance expects HTTPS. Disable HTTPS errors in development. diff --git a/highlight.io/components/QuickstartContent/frontend/next.tsx b/highlight.io/components/QuickstartContent/frontend/next.tsx index a294e411779..b07b454bf78 100644 --- a/highlight.io/components/QuickstartContent/frontend/next.tsx +++ b/highlight.io/components/QuickstartContent/frontend/next.tsx @@ -55,7 +55,7 @@ If you're using the original Next.js Page router, drop \`\` in { text: ` // src/app/layout.tsx -import { HighlightInit } from '@highlight-run/next/highlight-init' +import { HighlightInit } from '@highlight-run/next/client' export default function RootLayout({ children }: { children: React.ReactNode }) { return ( diff --git a/highlight.io/highlight.config.ts b/highlight.io/highlight.config.ts index 7e82899e922..3bdbf16927d 100644 --- a/highlight.io/highlight.config.ts +++ b/highlight.io/highlight.config.ts @@ -1,4 +1,4 @@ -import { Highlight } from '@highlight-run/next' +import { Highlight } from '@highlight-run/next/server' export const withHighlight = Highlight({ projectID: '4d7k1xeo', diff --git a/highlight.io/next.config.js b/highlight.io/next.config.js index ee69b6bbf2d..9d9ff7ca017 100644 --- a/highlight.io/next.config.js +++ b/highlight.io/next.config.js @@ -1,5 +1,5 @@ const { withAxiom } = require('next-axiom') -const { withHighlightConfig } = require('@highlight-run/next') +const { withHighlightConfig } = require('@highlight-run/next/server') const getStaticPages = require('./scripts/get-static-pages') /** @type {import('next').NextConfig} */ diff --git a/sdk/client/src/graph/generated/operations.ts b/sdk/client/src/graph/generated/operations.ts index a4980d84684..7bac75aea6b 100644 --- a/sdk/client/src/graph/generated/operations.ts +++ b/sdk/client/src/graph/generated/operations.ts @@ -29,6 +29,7 @@ export type BackendErrorObjectInput = { log_cursor?: InputMaybe payload?: InputMaybe request_id?: InputMaybe + service: ServiceInput session_secure_id?: InputMaybe source: Scalars['String'] span_id?: InputMaybe @@ -171,6 +172,11 @@ export type ReplayEventsInput = { events: Array> } +export type ServiceInput = { + name: Scalars['String'] + version: Scalars['String'] +} + export type Session = { __typename?: 'Session' id?: Maybe diff --git a/sdk/client/src/graph/generated/schemas.ts b/sdk/client/src/graph/generated/schemas.ts index 3f18d3265cf..68f0cda5f92 100644 --- a/sdk/client/src/graph/generated/schemas.ts +++ b/sdk/client/src/graph/generated/schemas.ts @@ -26,6 +26,7 @@ export type BackendErrorObjectInput = { log_cursor?: InputMaybe payload?: InputMaybe request_id?: InputMaybe + service: ServiceInput session_secure_id?: InputMaybe source: Scalars['String'] span_id?: InputMaybe @@ -168,6 +169,11 @@ export type ReplayEventsInput = { events: Array> } +export type ServiceInput = { + name: Scalars['String'] + version: Scalars['String'] +} + export type Session = { __typename?: 'Session' id?: Maybe diff --git a/sdk/highlight-next/CHANGELOG.md b/sdk/highlight-next/CHANGELOG.md index be11b9b8ce2..5a4718bc431 100644 --- a/sdk/highlight-next/CHANGELOG.md +++ b/sdk/highlight-next/CHANGELOG.md @@ -32,6 +32,14 @@ ### 3.1.2 -### Minor Changes +### Patch Changes - Bumping to match `@highlight-run/node` + +### 3.2.0 + +### Minor Changes + +- Adding exports for `@highlight-run/next/client` and `@highlight-run/next/server` + > We're hoping to remove `@highlight-run/next/highlight-init` and the default `@highlight-run/next` imports in favor of the new `/client` and `/server` varieties. For now we'll maintain the original imports as aliases. +- Adding `@highlight-run/node` and `highlight.run` to `peerDependencies` diff --git a/sdk/highlight-next/bin/clean-dist.sh b/sdk/highlight-next/bin/clean-dist.sh new file mode 100755 index 00000000000..292bd30b062 --- /dev/null +++ b/sdk/highlight-next/bin/clean-dist.sh @@ -0,0 +1,2 @@ +printf '%s%s' '"use client";' "$(cat dist/next-client.js)" > dist/next-client.js +printf '%s%s' '"use client";' "$(cat dist/next-client.mjs)" > dist/next-client.mjs diff --git a/sdk/highlight-next/bin/clean-highlight-init.sh b/sdk/highlight-next/bin/clean-highlight-init.sh deleted file mode 100755 index 9480bfcb5b7..00000000000 --- a/sdk/highlight-next/bin/clean-highlight-init.sh +++ /dev/null @@ -1,2 +0,0 @@ -printf '%s%s' '"use client";' "$(cat dist/HighlightInit.js)" > dist/HighlightInit.js -printf '%s%s' '"use client";' "$(cat dist/HighlightInit.mjs)" > dist/HighlightInit.mjs diff --git a/sdk/highlight-next/client.d.ts b/sdk/highlight-next/client.d.ts new file mode 100644 index 00000000000..80468ea5a02 --- /dev/null +++ b/sdk/highlight-next/client.d.ts @@ -0,0 +1 @@ +export * from './dist/next-client' diff --git a/sdk/highlight-next/index.d.ts b/sdk/highlight-next/index.d.ts index 9247c2a8c74..ecf941a47d5 100644 --- a/sdk/highlight-next/index.d.ts +++ b/sdk/highlight-next/index.d.ts @@ -1 +1 @@ -export * from './dist/index' +export * from './dist/server' diff --git a/sdk/highlight-next/package.json b/sdk/highlight-next/package.json index 8059c5aeaf0..95b177e8ac8 100644 --- a/sdk/highlight-next/package.json +++ b/sdk/highlight-next/package.json @@ -1,27 +1,44 @@ { "name": "@highlight-run/next", - "version": "3.1.7", + "version": "3.2.0", "description": "Client for interfacing with Highlight in next.js", "files": [ "dist", "highlight-init.d.ts", + "client.d.ts", + "server.d.ts", "index.d.ts" ], "exports": { ".": { - "types": "./dist/index.d.ts", - "edge": "./dist/index.edge.js", - "edge-light": "./dist/index.edge.js", - "browser": "./dist/index.edge.js", - "worker": "./dist/index.edge.js", - "workerd": "./dist/index.edge.js", - "require": "./dist/index.js", - "import": "./dist/index.mjs" + "types": "./dist/server.d.ts", + "edge": "./dist/server.edge.js", + "edge-light": "./dist/server.edge.js", + "browser": "./dist/server.edge.js", + "worker": "./dist/server.edge.js", + "workerd": "./dist/server.edge.js", + "require": "./dist/server.js", + "import": "./dist/server.mjs" + }, + "./server": { + "types": "./dist/server.d.ts", + "edge": "./dist/server.edge.js", + "edge-light": "./dist/server.edge.js", + "browser": "./dist/server.edge.js", + "worker": "./dist/server.edge.js", + "workerd": "./dist/server.edge.js", + "require": "./dist/server.js", + "import": "./dist/server.mjs" }, "./highlight-init": { - "types": "./dist/HighlightInit.d.ts", - "import": "./dist/HighlightInit.mjs", - "require": "./dist/HighlightInit.js" + "types": "./dist/next-client.d.ts", + "import": "./dist/next-client.mjs", + "require": "./dist/next-client.js" + }, + "./client": { + "types": "./dist/next-client.d.ts", + "import": "./dist/next-client.mjs", + "require": "./dist/next-client.js" } }, "installConfig": { @@ -32,14 +49,15 @@ }, "scripts": { "typegen": "tsup --dts-only", - "dev": "tsup --watch && sh ./bin/clean-highlight-init.sh", - "build": "tsup && sh ./bin/clean-highlight-init.sh", + "dev": "tsup --watch && sh ./bin/clean-dist.sh", + "build": "tsup && sh ./bin/clean-dist.sh", "test": "jest" }, "author": "", "license": "ISC", "peerDependencies": { - "highlight.run": ">=3.0.0", + "@highlight-run/node": "workspace:^", + "highlight.run": "workspace:^", "next": ">=12", "react": ">=17" }, diff --git a/sdk/highlight-next/server.d.ts b/sdk/highlight-next/server.d.ts new file mode 100644 index 00000000000..ecf941a47d5 --- /dev/null +++ b/sdk/highlight-next/server.d.ts @@ -0,0 +1 @@ +export * from './dist/server' diff --git a/sdk/highlight-next/src/HighlightInit.tsx b/sdk/highlight-next/src/next-client.tsx similarity index 55% rename from sdk/highlight-next/src/HighlightInit.tsx rename to sdk/highlight-next/src/next-client.tsx index f657a024086..7a629e1cbfb 100644 --- a/sdk/highlight-next/src/HighlightInit.tsx +++ b/sdk/highlight-next/src/next-client.tsx @@ -1,16 +1,18 @@ 'use client' -import { H, HighlightOptions } from 'highlight.run' +import { H as localH, HighlightOptions } from 'highlight.run' + +export { localH as H } import { useEffect } from 'react' -interface Props extends HighlightOptions { +export interface Props extends HighlightOptions { projectId?: string } export function HighlightInit({ projectId, ...highlightOptions }: Props) { useEffect(() => { - projectId && H.init(projectId, highlightOptions) + projectId && localH.init(projectId, highlightOptions) }, []) // eslint-disable-line react-hooks/exhaustive-deps return null diff --git a/sdk/highlight-next/src/index.edge.ts b/sdk/highlight-next/src/server.edge.ts similarity index 100% rename from sdk/highlight-next/src/index.edge.ts rename to sdk/highlight-next/src/server.edge.ts diff --git a/sdk/highlight-next/src/index.ts b/sdk/highlight-next/src/server.ts similarity index 100% rename from sdk/highlight-next/src/index.ts rename to sdk/highlight-next/src/server.ts diff --git a/sdk/highlight-next/tsup.config.ts b/sdk/highlight-next/tsup.config.ts index 7ff2b185775..18285ce6540 100644 --- a/sdk/highlight-next/tsup.config.ts +++ b/sdk/highlight-next/tsup.config.ts @@ -1,7 +1,7 @@ import { defineConfig } from 'tsup' export default defineConfig({ - entry: ['src/index.edge.ts', 'src/index.ts', 'src/HighlightInit.tsx'], + entry: ['src/server.edge.ts', 'src/server.ts', 'src/next-client.tsx'], format: ['cjs', 'esm'], minify: 'terser', dts: true, diff --git a/yarn.lock b/yarn.lock index 8e0b2b06b88..1e0ff10ca5b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12883,7 +12883,8 @@ __metadata: tsup: ^6.7.0 typescript: ^5.0.4 peerDependencies: - highlight.run: ">=3.0.0" + "@highlight-run/node": "workspace:^" + highlight.run: "workspace:^" next: ">=12" react: ">=17" languageName: unknown @@ -14849,10 +14850,10 @@ __metadata: languageName: node linkType: hard -"@next/env@npm:13.4.9, @next/env@npm:^13.4.9": - version: 13.4.9 - resolution: "@next/env@npm:13.4.9" - checksum: 625f01571ac5dabbb90567a987fdc16eca86cd9cfd592edabf7d3e3024972cd83564d53202293163851b85fa643f846a5757c8696a3c44315c98dae5b634f122 +"@next/env@npm:13.4.12, @next/env@npm:^13.4.12": + version: 13.4.12 + resolution: "@next/env@npm:13.4.12" + checksum: 2ccb2e271b3c42697c1e807cdf988429fcb563f80fa0ca72512f65f47cbbcc46c44fc53bf055814d4b467f1394de8c1a1ef6aad14d35f9993004faa956466d02 languageName: node linkType: hard @@ -14865,12 +14866,12 @@ __metadata: languageName: node linkType: hard -"@next/eslint-plugin-next@npm:13.4.9": - version: 13.4.9 - resolution: "@next/eslint-plugin-next@npm:13.4.9" +"@next/eslint-plugin-next@npm:13.4.12": + version: 13.4.12 + resolution: "@next/eslint-plugin-next@npm:13.4.12" dependencies: glob: 7.1.7 - checksum: d57f1246fac54173c47a065404ba7237cfd6618648db4effbcdb30b5578b99edb3a2593df13ca617aa63c40e5e1336551089c506b2168a69a6cf8d5d7d045c0b + checksum: a20cf430efe7602b819e69d826c33659a9c2cfa7c6162f63d91b607ff6ac9da0e79ff27f38cebd79117500640329bd107521b4874e6a2d009ddafab762885c82 languageName: node linkType: hard @@ -14881,9 +14882,9 @@ __metadata: languageName: node linkType: hard -"@next/swc-darwin-arm64@npm:13.4.9": - version: 13.4.9 - resolution: "@next/swc-darwin-arm64@npm:13.4.9" +"@next/swc-darwin-arm64@npm:13.4.12": + version: 13.4.12 + resolution: "@next/swc-darwin-arm64@npm:13.4.12" conditions: os=darwin & cpu=arm64 languageName: node linkType: hard @@ -14895,9 +14896,9 @@ __metadata: languageName: node linkType: hard -"@next/swc-darwin-x64@npm:13.4.9": - version: 13.4.9 - resolution: "@next/swc-darwin-x64@npm:13.4.9" +"@next/swc-darwin-x64@npm:13.4.12": + version: 13.4.12 + resolution: "@next/swc-darwin-x64@npm:13.4.12" conditions: os=darwin & cpu=x64 languageName: node linkType: hard @@ -14909,9 +14910,9 @@ __metadata: languageName: node linkType: hard -"@next/swc-linux-arm64-gnu@npm:13.4.9": - version: 13.4.9 - resolution: "@next/swc-linux-arm64-gnu@npm:13.4.9" +"@next/swc-linux-arm64-gnu@npm:13.4.12": + version: 13.4.12 + resolution: "@next/swc-linux-arm64-gnu@npm:13.4.12" conditions: os=linux & cpu=arm64 & libc=glibc languageName: node linkType: hard @@ -14923,9 +14924,9 @@ __metadata: languageName: node linkType: hard -"@next/swc-linux-arm64-musl@npm:13.4.9": - version: 13.4.9 - resolution: "@next/swc-linux-arm64-musl@npm:13.4.9" +"@next/swc-linux-arm64-musl@npm:13.4.12": + version: 13.4.12 + resolution: "@next/swc-linux-arm64-musl@npm:13.4.12" conditions: os=linux & cpu=arm64 & libc=musl languageName: node linkType: hard @@ -14937,9 +14938,9 @@ __metadata: languageName: node linkType: hard -"@next/swc-linux-x64-gnu@npm:13.4.9": - version: 13.4.9 - resolution: "@next/swc-linux-x64-gnu@npm:13.4.9" +"@next/swc-linux-x64-gnu@npm:13.4.12": + version: 13.4.12 + resolution: "@next/swc-linux-x64-gnu@npm:13.4.12" conditions: os=linux & cpu=x64 & libc=glibc languageName: node linkType: hard @@ -14951,9 +14952,9 @@ __metadata: languageName: node linkType: hard -"@next/swc-linux-x64-musl@npm:13.4.9": - version: 13.4.9 - resolution: "@next/swc-linux-x64-musl@npm:13.4.9" +"@next/swc-linux-x64-musl@npm:13.4.12": + version: 13.4.12 + resolution: "@next/swc-linux-x64-musl@npm:13.4.12" conditions: os=linux & cpu=x64 & libc=musl languageName: node linkType: hard @@ -14965,9 +14966,9 @@ __metadata: languageName: node linkType: hard -"@next/swc-win32-arm64-msvc@npm:13.4.9": - version: 13.4.9 - resolution: "@next/swc-win32-arm64-msvc@npm:13.4.9" +"@next/swc-win32-arm64-msvc@npm:13.4.12": + version: 13.4.12 + resolution: "@next/swc-win32-arm64-msvc@npm:13.4.12" conditions: os=win32 & cpu=arm64 languageName: node linkType: hard @@ -14979,9 +14980,9 @@ __metadata: languageName: node linkType: hard -"@next/swc-win32-ia32-msvc@npm:13.4.9": - version: 13.4.9 - resolution: "@next/swc-win32-ia32-msvc@npm:13.4.9" +"@next/swc-win32-ia32-msvc@npm:13.4.12": + version: 13.4.12 + resolution: "@next/swc-win32-ia32-msvc@npm:13.4.12" conditions: os=win32 & cpu=ia32 languageName: node linkType: hard @@ -14993,9 +14994,9 @@ __metadata: languageName: node linkType: hard -"@next/swc-win32-x64-msvc@npm:13.4.9": - version: 13.4.9 - resolution: "@next/swc-win32-x64-msvc@npm:13.4.9" +"@next/swc-win32-x64-msvc@npm:13.4.12": + version: 13.4.12 + resolution: "@next/swc-win32-x64-msvc@npm:13.4.12" conditions: os=win32 & cpu=x64 languageName: node linkType: hard @@ -32045,11 +32046,11 @@ __metadata: languageName: node linkType: hard -"eslint-config-next@npm:13.4.9": - version: 13.4.9 - resolution: "eslint-config-next@npm:13.4.9" +"eslint-config-next@npm:13.4.12": + version: 13.4.12 + resolution: "eslint-config-next@npm:13.4.12" dependencies: - "@next/eslint-plugin-next": 13.4.9 + "@next/eslint-plugin-next": 13.4.12 "@rushstack/eslint-patch": ^1.1.3 "@typescript-eslint/parser": ^5.42.0 eslint-import-resolver-node: ^0.3.6 @@ -32064,7 +32065,7 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 83d990f3529f84dda9e54ce8cef64802490850f47d63b51176695a4f327a6b0e0a0847e1af4f11e00e662db8103af197c37d30b878cfe0593477ebc0b43d2b10 + checksum: 633eccf920d94a1248c089ec08c52245d863b1b45d68be04deff93c0a0d60373c96610d69d005909b2c9beb81b0af7a12a777d03277cd4db60233e99ac8ef281 languageName: node linkType: hard @@ -42704,20 +42705,20 @@ __metadata: languageName: node linkType: hard -"next@npm:13.4.9": - version: 13.4.9 - resolution: "next@npm:13.4.9" +"next@npm:13.4.12": + version: 13.4.12 + resolution: "next@npm:13.4.12" dependencies: - "@next/env": 13.4.9 - "@next/swc-darwin-arm64": 13.4.9 - "@next/swc-darwin-x64": 13.4.9 - "@next/swc-linux-arm64-gnu": 13.4.9 - "@next/swc-linux-arm64-musl": 13.4.9 - "@next/swc-linux-x64-gnu": 13.4.9 - "@next/swc-linux-x64-musl": 13.4.9 - "@next/swc-win32-arm64-msvc": 13.4.9 - "@next/swc-win32-ia32-msvc": 13.4.9 - "@next/swc-win32-x64-msvc": 13.4.9 + "@next/env": 13.4.12 + "@next/swc-darwin-arm64": 13.4.12 + "@next/swc-darwin-x64": 13.4.12 + "@next/swc-linux-arm64-gnu": 13.4.12 + "@next/swc-linux-arm64-musl": 13.4.12 + "@next/swc-linux-x64-gnu": 13.4.12 + "@next/swc-linux-x64-musl": 13.4.12 + "@next/swc-win32-arm64-msvc": 13.4.12 + "@next/swc-win32-ia32-msvc": 13.4.12 + "@next/swc-win32-x64-msvc": 13.4.12 "@swc/helpers": 0.5.1 busboy: 1.6.0 caniuse-lite: ^1.0.30001406 @@ -42759,7 +42760,7 @@ __metadata: optional: true bin: next: dist/bin/next - checksum: 7adb9919dc50598e53bf32da2d0f90da325b66a23cb16c291c276d0683f81bade0bb21aeaeede10154ef53eabcb4953bf883f4d752852a62a6bd7be42021aef9 + checksum: 50bd443ffe09424c1a94d6606d41886ccd1d65185e125aa199957ea92c5e4d1c226f1675f3e5ea92e88f43f8355824ba50db52a8aeae225f7a86b6c901d25527 languageName: node linkType: hard @@ -42842,7 +42843,7 @@ __metadata: "@highlight-run/next": "workspace:*" "@highlight-run/node": "workspace:*" "@highlight-run/react": "workspace:*" - "@next/env": ^13.4.9 + "@next/env": ^13.4.12 "@tanstack/react-query": ^4.29.7 "@trpc/client": ^10.26.0 "@trpc/next": ^10.26.0 @@ -42854,10 +42855,10 @@ __metadata: babylonjs: ^6.11.2 classnames: ^2.3.2 eslint: 8.39.0 - eslint-config-next: 13.4.9 + eslint-config-next: 13.4.12 highlight.run: "workspace:*" ky: ^0.33.3 - next: 13.4.9 + next: 13.4.12 next-build-id: ^3.0.0 react: 18.2.0 react-dom: 18.2.0