Standalone and independently versioned browser-destinations (#1276)

This patch makes each browser destinations accessible through NPM by making it standalone and independently versioned. This will let customers install the destinations from NPM and have it packaged into their main app bundle through webpack or other bundlers, thus eliminating the reliance on CDN and a lot of concurrent network requests.

.github/workflows/ci.yml

@@ -105,7 +105,7 @@ jobs:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
       - name: Build
-        run: NODE_ENV=production yarn lerna run build --scope=@segment/browser-destinations --include-dependencies --stream
+        run: NODE_ENV=production yarn build:browser-destinations && yarn browser build-web
 
       - name: Run Saucelabs Tests
         working-directory: packages/browser-destinations-integration-tests

docs/create.md

@@ -119,7 +119,7 @@ With this minimal configuration, the destination can connect to the Segment App'
 
 ```js
 import type { Settings } from './generated-types'
-import type { BrowserDestinationDefinition } from '../../lib/browser-destinations'
+import type { BrowserDestinationDefinition } from '@segment/browser-destination-runtime/types'
 import { browserDestination } from '../../runtime/shim'
 
 // Declare global to access your client

lerna.json

@@ -1,5 +1,5 @@
 {
-  "packages": ["packages/*"],
+  "packages": ["packages/*", "packages/browser-destinations/destinations/*"],
   "npmClient": "yarn",
   "version": "independent",
   "useWorkspaces": true,

package.json

@@ -4,7 +4,8 @@
   "license": "MIT",
   "workspaces": {
     "packages": [
-      "packages/*"
+      "packages/*",
+      "packages/browser-destinations/destinations/*"
     ]
   },
   "engines": {
@@ -17,10 +18,11 @@
     "cli-internal": "yarn workspace @segment/actions-cli-internal",
     "core": "yarn workspace @segment/actions-core",
     "bootstrap": "lerna bootstrap",
-    "build": "./bin/run generate:types && lerna run build --stream --ignore @segment/actions-cli-internal",
+    "build": "./bin/run generate:types && lerna run build  --concurrency 1 --stream --ignore @segment/actions-cli-internal && yarn browser build-web",
+    "build:browser-destinations": "yarn lerna run build --concurrency 1 --scope=@segment/destinations-manifest --include-dependencies --stream && yarn browser build-web",
     "types": "./bin/run generate:types",
     "validate": "./bin/run validate",
-    "lint": "eslint '**/*.ts' --cache",
+    "lint": "ls -d ./packages/* | xargs -I {} eslint '{}/**/*.ts' --cache",
     "subscriptions": "yarn workspace @segment/destination-subscriptions",
     "test": "lerna run test --stream",
     "test-partners": "lerna run test --stream --ignore @segment/actions-core --ignore @segment/actions-cli --ignore @segment/ajv-human-errors",
@@ -68,7 +70,7 @@
     "timers-browserify": "^2.0.12",
     "ts-jest": "^27.0.0",
     "ts-node": "^9.1.1",
-    "typescript": "^4.1.3",
+    "typescript": "4.3.5",
     "ws": "^8.5.0"
   },
   "resolutions": {

packages/browser-destination-runtime/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@segment/browser-destination-runtime",
+  "version": "0.0.0",
+  "scripts": {
+    "build": "yarn build:esm && yarn build:cjs",
+    "build:esm": "tsc --outDir ./dist/esm",
+    "build:cjs": "tsc  --module commonjs --outDir ./dist/cjs"
+  },
+  "exports": {
+    ".": {
+      "require": "./dist/cjs/index.js",
+      "default": "./dist/esm/index.js"
+    },
+    "./load-script": {
+      "require": "./dist/cjs/load-script.js",
+      "default": "./dist/esm/load-script.js"
+    },
+    "./plugin": {
+      "require": "./dist/cjs/plugin.js",
+      "default": "./dist/esm/plugin.js"
+    },
+    "./resolve-when": {
+      "require": "./dist/cjs/resolve-when.js",
+      "default": "./dist/esm/resolve-when.js"
+    },
+    "./shim": {
+      "require": "./dist/cjs/shim.js",
+      "default": "./dist/esm/shim.js"
+    },
+    "./types": {
+      "require": "./dist/cjs/types.js",
+      "default": "./dist/esm/types.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/esm/index.d.ts"
+      ],
+      "load-script": [
+        "dist/esm/load-script.d.ts"
+      ],
+      "plugin": [
+        "dist/esm/plugin.d.ts"
+      ],
+      "resolve-when": [
+        "dist/esm/resolve-when.d.ts"
+      ],
+      "shim": [
+        "dist/esm/shim.d.ts"
+      ],
+      "types": [
+        "dist/esm/types.d.ts"
+      ]
+    }
+  },
+  "dependencies": {
+    "@segment/actions-core": "^3.70.0"
+  },
+  "devDependencies": {
+    "@segment/analytics-next": "*"
+  },
+  "peerDependencies": {
+    "@segment/analytics-next": "*"
+  }
+}

packages/browser-destinations/src/runtime/__tests__/plugin.test.ts → packages/browser-destination-runtime/src/__tests__/plugin.test.ts

@@ -1,4 +1,4 @@
-import { BrowserDestinationDefinition } from 'src/lib/browser-destinations'
+import { BrowserDestinationDefinition } from '../types'
 import { generatePlugins } from '../plugin'
 
 describe('generatePlugins', () => {

packages/browser-destinations/src/runtime/plugin.ts → packages/browser-destination-runtime/src/plugin.ts

@@ -2,7 +2,7 @@ import type { Analytics, Context, Plugin } from '@segment/analytics-next'
 import type { JSONObject } from '@segment/actions-core'
 import { transform } from '@segment/actions-core/mapping-kit'
 import { parseFql, validate } from '@segment/destination-subscriptions'
-import { ActionInput, BrowserDestinationDefinition, Subscription } from '../lib/browser-destinations'
+import { ActionInput, BrowserDestinationDefinition, Subscription } from './types'
 import { loadScript } from './load-script'
 import { resolveWhen } from './resolve-when'
 

packages/browser-destination-runtime/src/shim.ts

@@ -0,0 +1,16 @@
+import type { BrowserDestinationDefinition, PluginFactory, Subscription } from './types'
+
+export function browserDestination<S, C>(definition: BrowserDestinationDefinition<S, C>): PluginFactory {
+  const factory = (async (settings: S & { subscriptions?: Subscription[] }) => {
+    const plugin = await import(
+      /* webpackChunkName: "actions-plugin" */
+      /* webpackMode: "lazy-once" */
+      './plugin'
+    )
+    return plugin.generatePlugins(definition, settings, settings.subscriptions || [])
+  }) as unknown as PluginFactory
+
+  factory.pluginName = definition.name
+
+  return factory
+}

packages/browser-destinations/src/lib/browser-destinations.ts → packages/browser-destination-runtime/src/types.ts

@@ -4,7 +4,8 @@ import type {
   BaseActionDefinition,
   ExecuteInput,
   JSONLikeObject,
-  GlobalSetting
+  GlobalSetting,
+  JSONValue
 } from '@segment/actions-core'
 
 export type ActionInput<Settings, Payload> = ExecuteInput<Settings, Payload> & {
@@ -61,3 +62,8 @@ export interface Subscription {
   subscribe: string
   mapping: JSONLikeObject
 }
+
+export interface PluginFactory {
+  (settings: JSONValue): Plugin | Plugin[] | Promise<Plugin | Plugin[]>
+  pluginName: string
+}

packages/browser-destination-runtime/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "module": "esnext",
+    "removeComments": false,
+    "baseUrl": "."
+  },
+  "exclude": ["dist"]
+}

packages/browser-destinations-integration-tests/src/tests/browser-destinations.test.ts

@@ -2,10 +2,10 @@ import page from '../pageobjects/page'
 import { expect } from 'expect'
 import { listDestinations } from '../server/utils'
 
-// '688' is actions-core, we don't want to test it as a destination here
+// actions-plugins is just a shared chunk, we don't want to test it as a destination here
 const allDestinations = listDestinations()
   .map((el) => el.dirPath)
-  .filter((el) => el !== '688')
+  .filter((el) => el !== 'actions-plugin')
 
 describe('Bundles are capable of being parsed and loaded without errors', () => {
   for (const destination of allDestinations) {

packages/browser-destinations/destinations/adobe-target/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@segment/analytics-browser-actions-adobe-target",
+  "version": "0.0.0",
+  "license": "MIT",
+  "main": "./dist/cjs",
+  "module": "./dist/esm",
+  "scripts": {
+    "build": "yarn build:esm && yarn build:cjs",
+    "build-es": "tsc",
+    "build:cjs": "tsc --module commonjs --outDir ./dist/cjs",
+    "build:esm": "tsc --outDir ./dist/esm"
+  },
+  "typings": "./dist/esm",
+  "dependencies": {
+    "@segment/browser-destination-runtime": "^0.0.0"
+  },
+  "peerDependencies": {
+    "@segment/analytics-next": "*"
+  }
+}

packages/browser-destinations/src/destinations/adobe-target/__tests__/index.test.ts → packages/browser-destinations/destinations/adobe-target/src/__tests__/index.test.ts

@@ -1,6 +1,6 @@
 import { Analytics, Context } from '@segment/analytics-next'
 import adobeTarget, { destination } from '../index'
-import { Subscription } from '../../../lib/browser-destinations'
+import { Subscription } from '@segment/browser-destination-runtime/types'
 
 describe('Adobe Target Web', () => {
   test('can load ATJS', async () => {

packages/browser-destinations/src/destinations/adobe-target/index.ts → packages/browser-destinations/destinations/adobe-target/src/index.ts

@@ -1,6 +1,6 @@
 import type { Settings } from './generated-types'
-import type { BrowserDestinationDefinition } from '../../lib/browser-destinations'
-import { browserDestination } from '../../runtime/shim'
+import type { BrowserDestinationDefinition } from '@segment/browser-destination-runtime/types'
+import { browserDestination } from '@segment/browser-destination-runtime/shim'
 import { Adobe } from './types'
 import { initScript } from './init-script'
 

packages/browser-destinations/src/destinations/adobe-target/trackEvent/__tests__/index.test.ts → packages/browser-destinations/destinations/adobe-target/src/trackEvent/__tests__/index.test.ts

@@ -1,6 +1,6 @@
 import { Analytics, Context } from '@segment/analytics-next'
 import adobeTarget, { destination } from '../../index'
-import { Subscription } from '../../../../lib/browser-destinations'
+import { Subscription } from '@segment/browser-destination-runtime/types'
 
 describe('Adobe Target Web', () => {
   describe('#track', () => {

packages/browser-destinations/src/destinations/adobe-target/trackEvent/index.ts → packages/browser-destinations/destinations/adobe-target/src/trackEvent/index.ts

@@ -1,4 +1,4 @@
-import type { BrowserActionDefinition } from '../../../lib/browser-destinations'
+import type { BrowserActionDefinition } from '@segment/browser-destination-runtime/types'
 import type { Settings } from '../generated-types'
 import type { Payload } from './generated-types'
 import { Adobe } from '../types'

packages/browser-destinations/src/destinations/adobe-target/triggerView/__tests__/index.test.ts → packages/browser-destinations/destinations/adobe-target/src/triggerView/__tests__/index.test.ts

@@ -1,6 +1,6 @@
 import { Analytics, Context } from '@segment/analytics-next'
 import adobeTarget, { destination } from '../../index'
-import { Subscription } from '../../../../lib/browser-destinations'
+import { Subscription } from '@segment/browser-destination-runtime/types'
 
 describe('Adobe Target Web', () => {
   describe('#page', () => {

packages/browser-destinations/src/destinations/adobe-target/triggerView/index.ts → packages/browser-destinations/destinations/adobe-target/src/triggerView/index.ts

@@ -1,4 +1,4 @@
-import type { BrowserActionDefinition } from '../../../lib/browser-destinations'
+import type { BrowserActionDefinition } from '@segment/browser-destination-runtime/types'
 import type { Settings } from '../generated-types'
 import type { Payload } from './generated-types'
 import { Adobe } from '../types'

packages/browser-destinations/src/destinations/adobe-target/upsertProfile/__tests__/index.test.ts → packages/browser-destinations/destinations/adobe-target/src/upsertProfile/__tests__/index.test.ts

@@ -1,6 +1,6 @@
 import { Analytics, Context } from '@segment/analytics-next'
 import adobeTarget, { destination } from '../../index'
-import { Subscription } from '../../../../lib/browser-destinations'
+import { Subscription } from '@segment/browser-destination-runtime/types'
 
 describe('Adobe Target Web', () => {
   describe('#identify', () => {

packages/browser-destinations/src/destinations/adobe-target/upsertProfile/index.ts → packages/browser-destinations/destinations/adobe-target/src/upsertProfile/index.ts

@@ -1,4 +1,4 @@
-import type { BrowserActionDefinition } from '../../../lib/browser-destinations'
+import type { BrowserActionDefinition } from '@segment/browser-destination-runtime/types'
 import type { Settings } from '../generated-types'
 import { Adobe } from '../types'
 import type { Payload } from './generated-types'

packages/browser-destinations/destinations/adobe-target/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "baseUrl": "."
+  },
+  "include": ["src"],
+  "exclude": ["dist", "**/__tests__"]
+}

packages/browser-destinations/destinations/amplitude-plugins/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@segment/analytics-browser-actions-amplitude-plugins",
+  "version": "0.0.0",
+  "license": "MIT",
+  "main": "./dist/cjs",
+  "module": "./dist/esm",
+  "scripts": {
+    "build": "yarn build:esm && yarn build:cjs",
+    "build:cjs": "tsc --module commonjs --outDir ./dist/cjs",
+    "build:esm": "tsc --outDir ./dist/esm"
+  },
+  "typings": "./dist/esm",
+  "dependencies": {
+    "@segment/browser-destination-runtime": "^0.0.0"
+  },
+  "peerDependencies": {
+    "@segment/analytics-next": "*"
+  }
+}

packages/browser-destinations/src/destinations/amplitude-plugins/index.ts → packages/browser-destinations/destinations/amplitude-plugins/src/index.ts

@@ -1,6 +1,6 @@
 import type { Settings } from './generated-types'
-import type { BrowserDestinationDefinition } from '../../lib/browser-destinations'
-import { browserDestination } from '../../runtime/shim'
+import type { BrowserDestinationDefinition } from '@segment/browser-destination-runtime/types'
+import { browserDestination } from '@segment/browser-destination-runtime/shim'
 import sessionId from './sessionId'
 
 export const destination: BrowserDestinationDefinition<Settings, {}> = {

packages/browser-destinations/src/destinations/amplitude-plugins/sessionId/__tests__/sessionId.test.ts → packages/browser-destinations/destinations/amplitude-plugins/src/sessionId/__tests__/sessionId.test.ts

@@ -1,6 +1,6 @@
 import { Analytics, Context, Plugin } from '@segment/analytics-next'
 import browserPluginsDestination from '../..'
-import { Subscription } from '../../../../lib/browser-destinations'
+import { Subscription } from '@segment/browser-destination-runtime/types'
 import jar from 'js-cookie'
 
 expect.extend({

packages/browser-destinations/src/destinations/amplitude-plugins/sessionId/index.ts → packages/browser-destinations/destinations/amplitude-plugins/src/sessionId/index.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 import { UniversalStorage } from '@segment/analytics-next'
-import type { BrowserActionDefinition } from '../../../lib/browser-destinations'
+import type { BrowserActionDefinition } from '@segment/browser-destination-runtime/types'
 import type { Settings } from '../generated-types'
 import type { Payload } from './generated-types'
 

packages/browser-destinations/destinations/amplitude-plugins/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "baseUrl": "."
+  },
+  "include": ["src"],
+  "exclude": ["dist", "**/__tests__"]
+}

packages/browser-destinations/destinations/braze-cloud-plugins/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@segment/analytics-browser-actions-braze-cloud-plugins",
+  "version": "0.0.0",
+  "license": "MIT",
+  "main": "./dist/cjs",
+  "module": "./dist/esm",
+  "scripts": {
+    "build": "yarn build:esm && yarn build:cjs",
+    "build:cjs": "tsc --module commonjs --outDir ./dist/cjs",
+    "build:esm": "tsc --outDir ./dist/esm"
+  },
+  "typings": "./dist/esm",
+  "dependencies": {
+    "@segment/analytics-browser-actions-braze": "^0.0.0",
+    "@segment/browser-destination-runtime": "^0.0.0"
+  },
+  "peerDependencies": {
+    "@segment/analytics-next": "*"
+  }
+}

packages/browser-destinations/src/destinations/braze-cloud-plugins/index.ts → packages/browser-destinations/destinations/braze-cloud-plugins/src/index.ts

@@ -1,7 +1,7 @@
 import type { Settings } from './generated-types'
-import type { BrowserDestinationDefinition } from '../../lib/browser-destinations'
-import { browserDestination } from '../../runtime/shim'
-import debouncePlugin from '../braze/debounce'
+import type { BrowserDestinationDefinition } from '@segment/browser-destination-runtime/types'
+import { browserDestination } from '@segment/browser-destination-runtime/shim'
+import debouncePlugin from '@segment/analytics-browser-actions-braze/debounce'
 
 export const destination: BrowserDestinationDefinition<Settings, unknown> = {
   name: 'Braze Cloud Mode (Actions)',

packages/browser-destinations/destinations/braze-cloud-plugins/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.build.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "baseUrl": "."
+  },
+  "include": ["src"],
+  "exclude": ["dist", "**/__tests__"]
+}