Add signals implementation (#1101)

.buildkite/pipeline.yml

@@ -137,7 +137,7 @@ steps:
     commands:
       - npm config set "//registry.npmjs.org/:_authToken" $${NPM_TOKEN}
       - echo "--- Install dependencies"
-      - PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 HUSKY=0 yarn install --immutable
+      - HUSKY=0 yarn install --immutable
       - echo "--- Build bundles"
       - yarn turbo run --filter='./packages/signals/*' build
       - echo "+++ Run Lint"

.changeset/big-donkeys-cry.md

@@ -0,0 +1,5 @@
+---
+'@segment/analytics-next': patch
+---
+
+Add edgeFunction to CDNSettings type

.changeset/little-ghosts-jump.md

@@ -0,0 +1,5 @@
+---
+'@segment/analytics-next': minor
+---
+
+Export segment plugin and arg resolvers

.changeset/six-sloths-jam.md

@@ -0,0 +1,4 @@
+---
+'@segment/analytics-signals': patch
+---
+Initial release.

.gitignore

@@ -34,3 +34,4 @@ reports/*
 playwright-report/
 playwright/.cache/
 tmp.tsconfig.json
+.env

jest.config.js

@@ -17,6 +17,6 @@ module.exports = () =>
       '<rootDir>/packages/consent/consent-tools',
       '<rootDir>/packages/consent/consent-wrapper-onetrust',
       '<rootDir>/scripts',
-      '<rootDir>/packages/signals/browser-signals',
+      '<rootDir>/packages/signals/signals',
     ],
   })

packages/browser/src/browser/index.ts

@@ -104,6 +104,23 @@ export interface CDNSettings {
      */
     hasUnmappedDestinations: boolean
   }
+  /**
+   * Settings for edge function. Used for signals.
+   */
+  edgeFunction?: // this is technically non-nullable according to ajs-renderer atm, but making it optional because it's strange API choice, and we might want to change it.
+  | {
+        /**
+         * The URL of the edge function (.js file).
+         * @example 'https://cdn.edgefn.segment.com/MY-WRITEKEY/foo.js',
+         */
+        downloadURL: string
+        /**
+         * The version of the edge function
+         * @example 1
+         */
+        version: number
+      }
+    | {}
 }
 
 export interface AnalyticsBrowserSettings {

packages/browser/src/core/analytics/index.ts

@@ -88,7 +88,10 @@ export class AnalyticsInstanceSettings {
 
   constructor(settings: AnalyticsSettings) {
     this.writeKey = settings.writeKey
-    this.cdnSettings = settings.cdnSettings ?? { integrations: {} }
+    this.cdnSettings = settings.cdnSettings ?? {
+      integrations: {},
+      edgeFunction: {},
+    }
   }
 }
 

packages/browser/src/index.ts

@@ -17,3 +17,9 @@ export type { MiddlewareFunction } from './plugins/middleware'
 export { getGlobalAnalytics } from './lib/global-analytics-helper'
 export { UniversalStorage, Store, StorageObject } from './core/storage'
 export { segmentio } from './plugins/segmentio'
+export {
+  resolveAliasArguments,
+  resolveArguments,
+  resolvePageArguments,
+  resolveUserArguments,
+} from './core/arguments-resolver'

packages/signals/signals-example/.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ]
+}

packages/signals/signals-example/.env.example

@@ -0,0 +1,4 @@
+# Configure + rename this file to .env
+
+WRITEKEY=your-write-key
+STAGE=false

packages/signals/signals-example/README.md

@@ -0,0 +1,9 @@
+# Signals Example
+
+### Instructions
+- `cd packages/signals/signal-example`
+- `yarn install` 
+- `yarn . build`
+- Rename: `.env.example` -> `.env` (set `WRITEKEY=XXX` in `.env`)
+- `yarn dev`
+- If you make a change on another package that is not showing up, you can run `yarn . build` to rebuild all of the example's dependencies.

packages/signals/signals-example/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@internal/signals-example",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    ".": "yarn run -T turbo run --filter=@segment/signals-example...",
+    "dev": "webpack serve",
+    "build": "webpack"
+  },
+  "dependencies": {
+    "@segment/analytics-next": "workspace:^",
+    "@segment/analytics-signals": "workspace:^",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-router-dom": "^6.23.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.11",
+    "@babel/preset-env": "^7.22.10",
+    "@babel/preset-react": "^7.24.6",
+    "@babel/preset-typescript": "^7.22.11",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18",
+    "babel-loader": "^8.0.0",
+    "css-loader": "^7.1.2",
+    "dotenv-webpack": "^8.1.0",
+    "html-webpack-plugin": "^5.6.0",
+    "style-loader": "^4.0.0",
+    "typescript": "^4.7.0",
+    "webpack": "^5.76.0",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.15.1"
+  }
+}

packages/signals/signals-example/public/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>React TypeScript App</title>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>

packages/signals/signals-example/src/components/App.tsx

@@ -0,0 +1,27 @@
+import '../lib/analytics'
+import React, { useEffect } from 'react'
+import { loadAnalytics } from '../lib/analytics'
+import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom'
+import { HomePage } from '../pages/Home'
+import { OtherPage } from '../pages/Other'
+
+const App: React.FC = () => {
+  useEffect(() => {
+    void loadAnalytics()
+  }, [])
+
+  return (
+    <Router>
+      <nav>
+        <Link to="/">Home</Link>
+        <Link to="/other">Other</Link>
+      </nav>
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/other" element={<OtherPage />} />
+      </Routes>
+    </Router>
+  )
+}
+
+export default App

packages/signals/signals-example/src/components/ComplexForm.tsx

@@ -0,0 +1,64 @@
+import React, { FormEventHandler, useState } from 'react'
+
+const ComplexForm = () => {
+  const [inputField, setInputField] = useState('')
+  const [selectField, setSelectField] = useState('')
+
+  const handleSubmit: FormEventHandler<HTMLFormElement> = (event) => {
+    event.preventDefault()
+    const formData = {
+      inputField,
+      selectField,
+    }
+    console.log('Submitting form:', JSON.stringify(formData))
+    fetch('/parrot', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(formData),
+    })
+      .then((response) => response.json())
+      .then((data) => {
+        console.log('Form submitted successfully:', data)
+      })
+      .catch((error) => {
+        console.error('Error submitting form:', error)
+      })
+    console.log({ inputField, selectField })
+  }
+
+  return (
+    <div>
+      <button data-custom-attr="some-custom-attribute">Example Button</button>
+      <form onSubmit={handleSubmit}>
+        <div>
+          <label htmlFor="ex-input">Input Field:</label>
+          <input
+            id="ex-input"
+            type="text"
+            value={inputField}
+            onChange={(e) => setInputField(e.target.value)}
+          />
+        </div>
+        <div>
+          <label htmlFor="ex-select">Select Field:</label>
+          <select
+            id="ex-select"
+            value={selectField}
+            onChange={(e) => setSelectField(e.target.value)}
+          >
+            <option value="" disabled>
+              Select
+            </option>
+            <option value="Option 1">Option 1</option>
+            <option value="Option 2">Option 2</option>
+          </select>
+        </div>
+        <button type="submit">Submit</button>
+      </form>
+    </div>
+  )
+}
+
+export default ComplexForm

packages/signals/signals-example/src/index.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './components/App'
+import './styles.css'
+
+ReactDOM.render(<App />, document.getElementById('root'))