refactor highlight.run SDK into plugins

.changeset/config.json

@@ -1,7 +1,7 @@
 {
 	"$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
 	"changelog": "@changesets/cli/changelog",
-	"commit": true,
+	"commit": ["@changesets/cli/commit", { "skipCI": false }],
 	"fixed": [],
 	"linked": [],
 	"access": "public",

.changeset/fruity-parents-float.md

@@ -0,0 +1,7 @@
+---
+'@launchdarkly/session-replay': minor
+'@launchdarkly/observability': minor
+'highlight.run': minor
+---
+
+refactors highlight.run SDK into plugins consumed by new @launchdarkly packages

e2e/react-router/package.json

@@ -11,7 +11,10 @@
 	},
 	"dependencies": {
 		"@highlight-run/react": "workspace:*",
-		"highlight.run": "workspace:*",
+		"@launchdarkly/js-client-sdk": "^0.6.0",
+		"@launchdarkly/observability": "workspace:*",
+		"@launchdarkly/session-replay": "workspace:*",
+		"launchdarkly-js-client-sdk": "^3.7.0-beta.1",
 		"localforage": "^1.10.0",
 		"match-sorter": "^6.3.1",
 		"react": "^19.0.0",

e2e/react-router/src/routes/root.tsx

@@ -1,17 +1,109 @@
-import { H } from 'highlight.run'
+// import { initialize as init4 } from '@launchdarkly/js-client-sdk'
+import { initialize as init3 } from 'launchdarkly-js-client-sdk'
+import Observability, { LDObserve } from '@launchdarkly/observability'
+import SessionReplay, { LDRecord } from '@launchdarkly/session-replay'
+import { useEffect, useRef, useState } from 'react'
+// import { LD } from '@launchdarkly/browser'
 
-H.init('1', {
-	// Get your project ID from https://app.highlight.io/setup
-	networkRecording: {
-		enabled: true,
-		recordHeadersAndBody: true,
+const client = init3(
+	'66d9d3c255856f0fa8fd62d0',
+	{ key: 'unknown' },
+	{
+		// Not including plugins at all would be equivalent to the current LaunchDarkly SDK.
+		plugins: [
+			new Observability('1', {
+				networkRecording: {
+					enabled: true,
+					recordHeadersAndBody: true,
+				},
+				serviceName: 'ryan-test',
+				backendUrl: 'https://pub.observability.ld-stg.launchdarkly.com',
+				otlpEndpoint:
+					'https://otel.observability.ld-stg.launchdarkly.com',
+			}),
+			new SessionReplay('1', {
+				serviceName: 'ryan-test',
+				backendUrl: 'https://pub.observability.ld-stg.launchdarkly.com',
+			}), // Could be omitted for customers who cannot use session replay.
+		],
 	},
-})
+)
 
 export default function Root() {
+	const fillColor = 'lightblue'
+	const canvasRef = useRef<HTMLCanvasElement>(null)
+	const [flags, setFlags] = useState<string>()
+
+	useEffect(() => {
+		const canvas = canvasRef.current
+		if (!canvas) return
+		const ctx = canvas.getContext('2d')!
+		// Fill the entire canvas with the specified color
+		ctx.fillStyle = fillColor
+		ctx.fillRect(0, 0, canvas.width, canvas.height)
+	}, [fillColor])
+
 	return (
 		<div id="sidebar">
 			<h1>Hello, world</h1>
+			<p>{flags}</p>
+			<canvas width="100" height="100" ref={canvasRef}></canvas>
+			<button
+				onClick={() => {
+					LDObserve.recordLog('hello', 'INFO')
+				}}
+			>
+				LDObserve.recordLog
+			</button>
+			<button
+				onClick={() => {
+					LDObserve.recordError(new Error('test error'))
+				}}
+			>
+				LDObserve.consumeError
+			</button>
+			<button
+				onClick={() => {
+					if (canvasRef.current) {
+						LDRecord.snapshot(canvasRef.current)
+					}
+				}}
+			>
+				LDRecord.snapshot
+			</button>
+			<button
+				onClick={async () => {
+					await client.identify({
+						kind: 'user',
+						key: '[email protected]',
+					})
+					setFlags(JSON.stringify(client.allFlags()))
+				}}
+			>
+				client.identify
+			</button>
+			<button
+				onClick={async () => {
+					await client.identify({
+						kind: 'multi',
+						org: {
+							key: 'my-org-key',
+							someAttribute: 'my-attribute-value',
+						},
+						user: {
+							key: 'my-user-key',
+							firstName: 'Bob',
+							lastName: 'Bobberson',
+							_meta: {
+								privateAttributes: ['firstName'],
+							},
+						},
+					})
+					setFlags(JSON.stringify(client.allFlags()))
+				}}
+			>
+				client.identify multi
+			</button>
 		</div>
 	)
 }

package.json

@@ -24,7 +24,7 @@
 		"lint": "yarn run turbo lint --filter=!rrweb --filter=!rrvideo --filter=!@rrweb/rrweb-plugin-console-record --filter=!@rrweb/_monorepo --filter=!@rrweb/all --filter=!@rrweb/record --filter=!@rrweb/replay --filter=!@rrweb/types --filter=!@rrweb/packer --filter=!@rrweb/utils --filter=!@rrweb/web-extension --filter=!rrweb-snapshot --filter=!rrweb-player --filter=!rrdom --filter=!rrdom-nodejs --filter=!e2e-react-native",
 		"prepare": "husky",
 		"preinstall": "git submodule update --init --recursive || true",
-		"publish": "yarn workspaces foreach -R --no-private --from '@launchdarkly/*' npm publish --access public --tolerate-republish",
+		"publish": "yarn workspaces foreach -A --include '@launchdarkly/*' --exclude '@launchdarkly/observability-sdk' npm publish --access public --tolerate-republish",
 		"publish:highlight": "yarn workspaces foreach -R --no-private --from '@highlight-run/*' npm publish --access public --tolerate-republish && yarn workspace highlight.run npm publish --access public --tolerate-republish",
 		"test": "yarn turbo run test --filter=!rrweb --filter=!rrvideo --filter=!@rrweb/rrweb-plugin-console-record --filter=!@rrweb/_monorepo --filter=!@rrweb/all --filter=!@rrweb/record --filter=!@rrweb/replay --filter=!@rrweb/types --filter=!@rrweb/packer --filter=!@rrweb/utils --filter=!@rrweb/web-extension --filter=!rrweb-snapshot --filter=!rrweb-player --filter=!rrdom --filter=!rrdom-nodejs --filter=!nextjs"
 	},

sdk/@launchdarkly/observability/README.md

@@ -1,10 +1,9 @@
 # LaunchDarkly JavaScript Observability SDK for Browsers
 
-[![NPM][browser-sdk-npm-badge]][browser-sdk-npm-link]
-[![Actions Status][browser-sdk-ci-badge]][browser-sdk-ci]
-[![Documentation][browser-sdk-ghp-badge]][browser-sdk-ghp-link]
-[![NPM][browser-sdk-dm-badge]][browser-sdk-npm-link]
-[![NPM][browser-sdk-dt-badge]][browser-sdk-npm-link]
+[![NPM][o11y-sdk-npm-badge]][o11y-sdk-npm-link]
+[![Actions Status][o11y-sdk-ci-badge]][o11y-sdk-ci]
+[![NPM][o11y-sdk-dm-badge]][o11y-sdk-npm-link]
+[![NPM][o11y-sdk-dt-badge]][o11y-sdk-npm-link]
 
 # ⛔️⛔️⛔️⛔️
 
@@ -13,17 +12,39 @@
 
 # ☝️☝️☝️☝️☝️☝️
 
-<!--
 ## Install
 
+Install the package
 ```shell
 # npm
 npm i @launchdarkly/observability
 
 # yarn
 yarn add @launchdarkly/observability
 ```
--->
+
+Update your web app entrypoint.
+```tsx
+import { initialize } from 'launchdarkly-js-client-sdk'
+import Observability, { LDObserve } from '@launchdarkly/observability'
+
+const client = init3(
+        '<CLIENT_SIDE_ID>',
+        { key: '[email protected]' },
+        {
+          // Not including plugins at all would be equivalent to the current LaunchDarkly SDK.
+          plugins: [
+            new Observability('<OBSERVABILITY_PROJECT_ID>', {
+              networkRecording: {
+                enabled: true,
+                recordHeadersAndBody: true,
+              },
+            }),
+          ],
+        },
+)
+
+```
 
 ## Getting started
 
@@ -49,11 +70,9 @@ LaunchDarkly uses the [SLSA framework](https://slsa.dev/spec/v1.0/about) (Supply
     - [apidocs.launchdarkly.com](https://apidocs.launchdarkly.com/ 'LaunchDarkly API Documentation') for our API documentation
     - [blog.launchdarkly.com](https://blog.launchdarkly.com/ 'LaunchDarkly Blog Documentation') for the latest product updates
 
-[browser-sdk-ci-badge]: https://github.com/launchdarkly/observability-sdk/actions/workflows/browser.yml/badge.svg
-[browser-sdk-ci]: https://github.com/launchdarkly/observability-sdk/actions/workflows/browser.yml
-[browser-sdk-npm-badge]: https://img.shields.io/npm/v/@launchdarkly/observability.svg?style=flat-square
-[browser-sdk-npm-link]: https://www.npmjs.com/package/@launchdarkly/observability
-[browser-sdk-ghp-badge]: https://img.shields.io/static/v1?label=GitHub+Pages&message=API+reference&color=00add8
-[browser-sdk-ghp-link]: https://launchdarkly.github.io/js-core/packages/sdk/browser/docs/
-[browser-sdk-dm-badge]: https://img.shields.io/npm/dm/@launchdarkly/observability.svg?style=flat-square
-[browser-sdk-dt-badge]: https://img.shields.io/npm/dt/@launchdarkly/observability.svg?style=flat-square
+[o11y-sdk-ci-badge]: https://github.com/launchdarkly/observability-sdk/actions/workflows/turbo.yml/badge.svg
+[o11y-sdk-ci]: https://github.com/launchdarkly/observability-sdk/actions/workflows/turbo.yml
+[o11y-sdk-npm-badge]: https://img.shields.io/npm/v/@launchdarkly/observability.svg?style=flat-square
+[o11y-sdk-npm-link]: https://www.npmjs.com/package/@launchdarkly/observability
+[o11y-sdk-dm-badge]: https://img.shields.io/npm/dm/@launchdarkly/observability.svg?style=flat-square
+[o11y-sdk-dt-badge]: https://img.shields.io/npm/dt/@launchdarkly/observability.svg?style=flat-square

sdk/@launchdarkly/observability/package.json

@@ -25,20 +25,21 @@
 			"url": "https://github.com/launchdarkly/observability-sdk.git"
 		}
 	},
+	"scripts": {
+		"typegen": "tsc",
+		"build": "vite build"
+	},
+	"devDependencies": {
+		"highlight.run": "workspace:*",
+		"rollup-plugin-visualizer": "^5.14.0",
+		"typescript": "^5.8.3",
+		"vite": "^6.3.4",
+		"vitest": "^3.1.2"
+	},
 	"type": "module",
-	"main": "./dist/index.js",
-	"module": "./dist/index.js",
-	"unpkg": "./dist/index.umd.js",
-	"jsdelivr": "./dist/index.umd.js",
+	"main": "./dist/observability.js",
+	"module": "./dist/observability.js",
 	"types": "./dist/index.d.ts",
-	"exports": {
-		"types": "./dist/index.d.ts",
-		"unpkg": "./dist/index.umd.js",
-		"jsdelivr": "./dist/index.umd.js",
-		"import": "./dist/index.js",
-		"require": "./dist/index.js",
-		"default": "./dist/index.js"
-	},
 	"files": [
 		"dist"
 	],

sdk/@launchdarkly/observability/src/index.ts

@@ -0,0 +1,2 @@
+export { Observe as default } from 'highlight.run/observe'
+export { LDObserve } from 'highlight.run/ld/observe'

sdk/@launchdarkly/observability/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "baseUrl": "src",
+    "declaration": true,
+    "declarationDir": "dist",
+    "downlevelIteration": true,
+    "emitDeclarationOnly": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "target": "ESNext",
+    "rootDir": "src",
+    "types": ["@types/chrome", "@types/node", "vitest/globals"],
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "exclude": ["**/src/**/*.test.tsx"],
+  "files": ["package.json"]
+}

sdk/@launchdarkly/observability/vite.config.ts

@@ -0,0 +1,37 @@
+// vite.config.ts
+import { resolve as resolvePath } from 'path'
+import { defineConfig } from 'vite'
+import { visualizer } from 'rollup-plugin-visualizer'
+
+export default defineConfig(({}) => {
+	return {
+		build: {
+			target: 'esnext',
+			lib: {
+				formats: ['es'],
+				entry: resolvePath(__dirname, 'src/index.ts'),
+			},
+			minify: true,
+			sourcemap: true,
+			emptyOutDir: false,
+			rollupOptions: {
+				treeshake: 'smallest',
+				output: {
+					exports: 'named',
+				},
+				cache: false,
+			},
+		},
+		plugins:
+			process.env.VISUALIZE_BUNDLE === 'true'
+				? [
+						visualizer({
+							gzipSize: true,
+							brotliSize: true,
+							sourcemap: true,
+							open: true,
+						}),
+					]
+				: [],
+	}
+})