feat(analytics-module-segment): adopt new frontend system (#35)

Signed-off-by: Alec Jacobs <charles.jacobs@segment.com>

Author: alecjacobs5401

plugins/analytics-module-segment/README.md

@@ -17,7 +17,25 @@ This plugin requires an active workspace with [Segment][segment]. Please referen
 yarn --cwd packages/app add @segment/backstage-plugin-analytics-module-segment
 ```
 
-### Wire up the API implementation to your App:
+### New frontend system
+
+Add the module to your app's frontend features:
+
+```ts
+// packages/app/src/App.tsx
+import segmentAnalyticsModule from '@segment/backstage-plugin-analytics-module-segment/alpha';
+
+const app = createApp({
+  features: [segmentAnalyticsModule],
+});
+```
+
+The module uses the configured Backstage identity when identifying users in
+Segment.
+
+### Legacy frontend system
+
+Wire up the API implementation to your app:
 
 ```ts
 // packages/app/src/apis.ts

plugins/analytics-module-segment/package.json

@@ -11,10 +11,25 @@
     "main": "dist/index.esm.js",
     "types": "dist/index.d.ts"
   },
+  "exports": {
+    ".": "./src/index.ts",
+    "./alpha": "./src/alpha.ts",
+    "./package.json": "./package.json"
+  },
+  "typesVersions": {
+    "*": {
+      "alpha": [
+        "src/alpha.ts"
+      ],
+      "package.json": [
+        "package.json"
+      ]
+    }
+  },
   "backstage": {
     "role": "frontend-plugin-module",
     "pluginId": "app",
-    "pluginPackage": "@backstage/plugin-app-backend"
+    "pluginPackage": "@backstage/plugin-app"
   },
   "repository": {
     "type": "git",
@@ -32,6 +47,8 @@
     "postpack": "backstage-cli package postpack"
   },
   "dependencies": {
+    "@backstage/frontend-plugin-api": "^0.17.3",
+    "@backstage/plugin-app-react": "^0.2.6",
     "@segment/analytics-next": "^1.72.1"
   },
   "peerDependencies": {
@@ -44,7 +61,6 @@
     "@backstage/core-components": "^0.18.12",
     "@backstage/core-plugin-api": "^1.12.8",
     "@backstage/dev-utils": "^1.1.25",
-    "@backstage/frontend-plugin-api": "^0.17.3",
     "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
   },
   "files": [

plugins/analytics-module-segment/src/alpha.ts

@@ -0,0 +1 @@
+export { segmentAnalyticsModule as default } from './module';

plugins/analytics-module-segment/src/module.test.ts

@@ -0,0 +1,12 @@
+import segmentModule from './alpha';
+import { segmentAnalyticsModule } from './module';
+
+describe('segmentAnalyticsModule', () => {
+  it('provides an app frontend module through the alpha entry point', () => {
+    expect(segmentModule).toBe(segmentAnalyticsModule);
+    expect(segmentAnalyticsModule).toMatchObject({
+      $$type: '@backstage/FrontendModule',
+      pluginId: 'app',
+    });
+  });
+});

plugins/analytics-module-segment/src/module.ts

@@ -0,0 +1,24 @@
+import {
+  configApiRef,
+  createFrontendModule,
+  identityApiRef,
+} from '@backstage/frontend-plugin-api';
+import { AnalyticsImplementationBlueprint } from '@backstage/plugin-app-react';
+
+import { SegmentAnalytics } from './apis';
+
+const segmentAnalyticsImplementation = AnalyticsImplementationBlueprint.make({
+  name: 'segment',
+  params: defineParams =>
+    defineParams({
+      deps: { configApi: configApiRef, identityApi: identityApiRef },
+      factory: ({ configApi, identityApi }) =>
+        SegmentAnalytics.fromConfig(configApi, { identityApi }),
+    }),
+});
+
+/** @public */
+export const segmentAnalyticsModule = createFrontendModule({
+  pluginId: 'app',
+  extensions: [segmentAnalyticsImplementation],
+});