Add support for custom elements

.changeset/wicked-tomatoes-grin.md

@@ -0,0 +1,7 @@
+---
+'@segment/analytics-signals': minor
+'@segment/analytics-signals-runtime': minor
+---
+
+- Add support for interaction signals for custom components and elements with contenteditable property
+- Allow custom disallow list to override network signals, even if same domain.

.husky/pre-push

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-CI=true yarn test --colors --silent
+yarn prepush

.vscode/launch.json

@@ -6,16 +6,10 @@
       "request": "launch",
       "name": "Jest Current File",
       "program": "${workspaceFolder}/node_modules/.bin/jest",
-      "args": [
-        "--testTimeout=100000",
-        "--findRelatedTests",
-        "${relativeFile}"
-      ],
+      "args": ["--testTimeout=100000", "--findRelatedTests", "${relativeFile}"],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
-      "skipFiles": [
-        "<node_internals>/**"
-      ]
+      "skipFiles": ["<node_internals>/**"]
     },
     {
       "type": "node",
@@ -30,9 +24,17 @@
       ],
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
-      "skipFiles": [
-        "<node_internals>/**"
-      ]
+      "skipFiles": ["<node_internals>/**"]
+    },
+    {
+      "name": "Run Jest Tests for Current Package",
+      "type": "node",
+      "request": "launch",
+      "program": "${workspaceFolder}/node_modules/.bin/jest",
+      "args": ["--testTimeout=100000"],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "cwd": "${fileDirname}"
     },
     {
       "type": "node",
@@ -47,9 +49,7 @@
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "program": "${workspaceFolder}/node_modules/jest/bin/jest",
-      "skipFiles": [
-        "<node_internals>/**"
-      ]
+      "skipFiles": ["<node_internals>/**"]
     },
     {
       "type": "node",
@@ -64,9 +64,7 @@
       "console": "integratedTerminal",
       "internalConsoleOptions": "neverOpen",
       "program": "${workspaceFolder}/node_modules/jest/bin/jest",
-      "skipFiles": [
-        "<node_internals>/**"
-      ]
+      "skipFiles": ["<node_internals>/**"]
     },
     {
       "name": "ts-node Current File",

package.json

@@ -20,6 +20,7 @@
     "build": "turbo run build --filter='./packages/**'",
     "watch": "turbo run watch --filter='./packages/**'",
     "dev": "yarn workspace @playground/next-playground run dev",
+    "prepush": "yarn lint && CI=true yarn test --colors --silent",
     "postinstall": "husky install",
     "changeset": "changeset",
     "update-versions-and-changelogs": "changeset version && yarn version-run-all && bash scripts/update-lockfile.sh",

packages/browser/webpack.config.js

@@ -38,7 +38,7 @@ if (process.env.ANALYZE) {
 
 /** @type { import('webpack').Configuration } */
 const config = {
-  stats: process.env.WATCH === 'true' ? 'errors-warnings' : 'normal',
+  stats: process.env.WATCH === 'true' ? 'errors-warnings' : 'minimal',
   node: {
     global: false, // do not polyfill global object, we can use getGlobal function if needed.
   },

packages/config-webpack/webpack.config.common.js

@@ -16,7 +16,7 @@ const isWatch = process.env.WATCH === 'true'
  */
 module.exports = {
   devtool: 'source-map',
-  stats: isWatch ? 'errors-warnings' : 'normal',
+  stats: isWatch ? 'errors-warnings' : 'minimal',
   mode: isProd ? 'production' : 'development',
   target: ['web', 'es5'], // target es5 for ie11 support (generates module boilerplate in es5)
   module: {

packages/consent/consent-tools-integration-tests/webpack.config.ts

@@ -15,6 +15,10 @@ const entries = files.reduce((acc, file) => {
 }, {})
 
 const config: WebpackConfiguration = {
+  stats: 'minimal',
+  performance: {
+    hints: false,
+  },
   mode: 'development',
   devtool: 'source-map',
   entry: entries,

packages/signals/signals-example/webpack.config.js

@@ -12,6 +12,10 @@ const bodyParser = require('body-parser')
  */
 
 module.exports = {
+  stats: 'minimal',
+  performance: {
+    hints: false,
+  },
   entry: './src/index.tsx',
   devtool: 'source-map',
   mode: 'development',

packages/signals/signals-integration-tests/.babelrc

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

packages/signals/signals-integration-tests/.eslintignore

@@ -0,0 +1 @@
+playwright-report/

packages/signals/signals-integration-tests/package.json

@@ -9,6 +9,9 @@
     ".": "yarn run -T turbo run --filter=@internal/signals-integration-tests...",
     "build": "webpack",
     "test": "playwright test",
+    "test:vanilla": "playwright test src/tests/vanilla",
+    "test:perf": "playwright test src/tests/performance",
+    "test:custom": "playwright test src/tests/custom",
     "watch": "webpack -w",
     "lint": "yarn concurrently 'yarn:eslint .' 'yarn:tsc --noEmit'",
     "concurrently": "yarn run -T concurrently",
@@ -25,8 +28,13 @@
     "@playwright/test": "^1.28.1",
     "@segment/analytics-next": "workspace:^",
     "@segment/analytics-signals": "workspace:^",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18",
     "globby": "^11.0.2",
     "http-server": "14.1.1",
+    "react": "^18.0.0",
+    "react-aria-components": "^1.5.0",
+    "react-dom": "^18.0.0",
     "tslib": "^2.4.1",
     "webpack": "^5.76.0",
     "webpack-cli": "^4.8.0"

packages/signals/signals-integration-tests/playwright.config.ts

@@ -31,11 +31,14 @@ const config: PlaywrightTestConfig = {
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: [['html', { open: 'never' }]],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on',
+    launchOptions: {
+      args: ['--enable-precise-memory-info', '--js-flags=--expose-gc'],
+    },
   },
 
   /* Configure projects for major browsers */

packages/signals/signals-integration-tests/src/helpers/playwright-utils.ts

@@ -19,7 +19,7 @@ export function waitForCondition(
           resolve()
         } else if (Date.now() - startTime >= timeout) {
           clearInterval(interval)
-          reject(new Error(errorMessage))
+          reject(new Error(`${errorMessage}. Timeout: ${timeout}ms`))
         }
       } catch (error) {
         clearInterval(interval)

packages/signals/signals-integration-tests/src/shims.d.ts

@@ -5,5 +5,6 @@ declare global {
   interface Window {
     analytics: AnalyticsBrowser
     signalsPlugin: SignalsPlugin
+    SignalsPlugin: typeof SignalsPlugin
   }
 }

packages/signals/signals-integration-tests/src/tests/custom-elements/components/App.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { TextField } from './TextField'
+import { Select, SelectItem } from './Select'
+
+export const App: React.FC = () => {
+  return (
+    <main>
+      <div id="textfield">
+        <h2>TextField</h2>
+        <TextField label="some-text-field" />
+      </div>
+      <div id="select">
+        <h2>Select</h2>
+        <Select>
+          <SelectItem>Chocolate</SelectItem>
+          <SelectItem>Mint</SelectItem>
+          <SelectItem>Strawberry</SelectItem>
+          <SelectItem>Vanilla</SelectItem>
+        </Select>
+      </div>
+    </main>
+  )
+}

packages/signals/signals-integration-tests/src/tests/custom-elements/components/Button.css

@@ -0,0 +1,42 @@
+@import "./theme.css";
+
+.react-aria-Button {
+  color: var(--text-color);
+  background: var(--button-background);
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  appearance: none;
+  vertical-align: middle;
+  font-size: 1rem;
+  text-align: center;
+  margin: 0;
+  outline: none;
+  padding: 6px 10px;
+  text-decoration: none;
+
+  &[data-pressed] {
+    box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.1);
+    background: var(--button-background-pressed);
+    border-color: var(--border-color-pressed);
+  }
+
+  &[data-focus-visible] {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: -1px;
+  }
+
+  &[data-disabled]{
+    border-color: var(--border-color-disabled);
+    color: var(--text-color-disabled);
+  }
+}
+
+@keyframes toggle {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

packages/signals/signals-integration-tests/src/tests/custom-elements/components/Button.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import { Button as RACButton, ButtonProps } from 'react-aria-components'
+import './Button.css'
+
+export function Button(props: ButtonProps) {
+  return <RACButton {...props} />
+}

packages/signals/signals-integration-tests/src/tests/custom-elements/components/Checkbox.css

@@ -0,0 +1,99 @@
+@import "./theme.css";
+
+.react-aria-Checkbox {
+  --selected-color: var(--highlight-background);
+  --selected-color-pressed: var(--highlight-background-pressed);
+  --checkmark-color: var(--highlight-foreground);
+
+  display: flex;
+  align-items: center;
+  gap: 0.571rem;
+  font-size: 1.143rem;
+  color: var(--text-color);
+  forced-color-adjust: none;
+
+  .checkbox {
+    width: 1.143rem;
+    height: 1.143rem;
+    border: 2px solid var(--border-color);
+    border-radius: 4px;
+    transition: all 200ms;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+    fill: none;
+    stroke: var(--checkmark-color);
+    stroke-width: 3px;
+    stroke-dasharray: 22px;
+    stroke-dashoffset: 66;
+    transition: all 200ms;
+  }
+
+  &[data-pressed] .checkbox {
+    border-color: var(--border-color-pressed);
+  }
+
+  &[data-focus-visible] .checkbox {
+    outline: 2px solid var(--focus-ring-color);
+    outline-offset: 2px;
+  }
+
+  &[data-selected],
+  &[data-indeterminate] {
+    .checkbox {
+      border-color: var(--selected-color);
+      background: var(--selected-color);
+    }
+
+    &[data-pressed] .checkbox {
+      border-color: var(--selected-color-pressed);
+      background: var(--selected-color-pressed);
+    }
+
+    svg {
+      stroke-dashoffset: 44;
+    }
+  }
+
+  &[data-indeterminate] {
+    & svg {
+      stroke: none;
+      fill: var(--checkmark-color);
+    }
+  }
+
+  &[data-invalid] {
+    .checkbox {
+      --checkmark-color: var(--gray-50);
+      border-color: var(--invalid-color);
+    }
+
+    &[data-pressed] .checkbox {
+      border-color: var(--invalid-color-pressed);
+    }
+
+    &[data-selected],
+    &[data-indeterminate] {
+      .checkbox {
+        background: var(--invalid-color);
+      }
+
+      &[data-pressed] .checkbox {
+        background: var(--invalid-color-pressed);
+      }
+    }
+  }
+
+  &[data-disabled] {
+    color: var(--text-color-disabled);
+
+    .checkbox {
+      border-color: var(--border-color-disabled);
+    }
+  }
+}

packages/signals/signals-integration-tests/src/tests/custom-elements/components/Checkbox.tsx

@@ -0,0 +1,26 @@
+import { Checkbox as AriaCheckbox, CheckboxProps } from 'react-aria-components'
+import React from 'react'
+import './Checkbox.css'
+
+export function Checkbox({ children, ...props }: CheckboxProps) {
+  return (
+    <AriaCheckbox {...props}>
+      {({ isIndeterminate }) => (
+        <>
+          <div className="checkbox">
+            <svg viewBox="0 0 18 18" aria-hidden="true">
+              {isIndeterminate ? (
+                <rect x={1} y={7.5} width={15} height={3} />
+              ) : (
+                <polyline points="1 9 7 14 15 4" />
+              )}
+            </svg>
+          </div>
+          {children}
+        </>
+      )}
+    </AriaCheckbox>
+  )
+}
+
+export { Checkbox as MyCheckbox }