WIP react support with sub-package

Author: andrewbrook

packages/telemetry/api-extractor.react.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../../config/api-extractor.json",
+  "mainEntryPointFilePath": "<projectFolder>/dist/react/index.d.ts",
+  "dtsRollup": {
+    "enabled": true,
+    "untrimmedFilePath": "<projectFolder>/dist/react/index.d.ts"
+  },
+  "apiReport": {
+    "enabled": false
+  },
+  "docModel": {
+    "enabled": false
+  },
+  "tsdocMetadata": {
+    "enabled": false
+  }
+}

packages/telemetry/index.node.ts

@@ -29,4 +29,3 @@ registerTelemetry();
 export * from './src/api';
 export * from './src/public-types';
 export * from './src/next';
-export * from './src/react';

packages/telemetry/index.ts

@@ -22,4 +22,3 @@ registerTelemetry();
 export * from './src/api';
 export * from './src/public-types';
 export * from './src/next';
-export * from './src/react';

packages/telemetry/package.json

@@ -19,6 +19,18 @@
       },
       "default": "./dist/index.esm.js"
     },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "node": {
+        "import": "./dist/react-node-esm/index.node.esm.js",
+        "default": "./dist/react.node.cjs.js"
+      },
+      "browser": {
+        "require": "./dist/react.cjs.js",
+        "import": "./dist/react.esm.js"
+      },
+      "default": "./dist/react.esm.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -36,14 +48,24 @@
     "test:browser": "karma start",
     "test:node": "TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' nyc --reporter lcovonly -- mocha src/**/*.test.* --config ../../config/mocharc.node.js",
     "trusted-type-check": "tsec -p tsconfig.json --noEmit",
-    "api-report": "api-extractor run --local --verbose",
+    "api-report": "yarn api-report:main && yarn api-report:react",
+    "api-report:main": "api-extractor run --local --verbose",
+    "api-report:react": "api-extractor run --config api-extractor.react.json --local --verbose",
     "typings:public": "node ../../scripts/build/use_typings.js ./dist/telemetry-public.d.ts"
   },
   "peerDependencies": {
     "@firebase/app": "0.x",
     "@firebase/app-types": "0.x",
-    "@types/react": "19.x",
-    "react": "19.x"
+    "@types/react": "17.x || 18.x || 19.x",
+    "react": "17.x || 18.x || 19.x"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "@types/react": {
+      "optional": true
+    }
   },
   "dependencies": {
     "@firebase/component": "0.7.0",
@@ -54,7 +76,7 @@
     "@opentelemetry/otlp-transformer": "0.205.0",
     "@opentelemetry/resources": "2.0.1",
     "@opentelemetry/sdk-logs": "0.203.0",
-    "@opentelemetry/semantic-conventions": "1.36.0",    
+    "@opentelemetry/semantic-conventions": "1.36.0",
     "tslib": "^2.1.0"
   },
   "license": "Apache-2.0",

packages/telemetry/rollup.config.js

@@ -41,7 +41,7 @@ const browserBuilds = [
   {
     input: 'index.ts',
     output: {
-      file: './dist/index.cjs.js',
+      file: pkg.exports['.'].browser.require,
       format: 'cjs',
       sourcemap: true
     },
@@ -73,4 +73,100 @@ const nodeBuilds = [
   }
 ];
 
-export default [...browserBuilds, ...nodeBuilds];
+const reactBuilds = [
+  {
+    input: 'src/react/index.ts',
+    output: {
+      file: pkg.exports['./react'].browser.import,
+      format: 'es',
+      sourcemap: true,
+      banner: `'use client';`
+    },
+    plugins: [
+      typescriptPlugin({
+        typescript,
+        tsconfigOverride: {
+          compilerOptions: {
+            declarationDir: 'dist/react'
+          }
+        }
+      }),
+      json()
+    ],
+    external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`))
+  },
+  {
+    input: 'src/react/index.ts',
+    output: {
+      file: pkg.exports['./react'].browser.require,
+      format: 'cjs',
+      sourcemap: true,
+      banner: `'use client';`
+    },
+    plugins: [
+      typescriptPlugin({
+        typescript,
+        tsconfigOverride: {
+          compilerOptions: {
+            declarationDir: 'dist/react'
+          }
+        }
+      }),
+      json()
+    ],
+    external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`))
+  }
+];
+
+const reactNodeBuilds = [
+  {
+    input: 'src/react/index.ts',
+    output: {
+      file: pkg.exports['./react'].node.default,
+      format: 'cjs',
+      sourcemap: true,
+      banner: `'use client';`
+    },
+    plugins: [
+      typescriptPlugin({
+        typescript,
+        tsconfigOverride: {
+          compilerOptions: {
+            declarationDir: 'dist/react'
+          }
+        }
+      }),
+      json()
+    ],
+    external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`))
+  },
+  {
+    input: 'src/react/index.ts',
+    output: {
+      file: pkg.exports['./react'].node.import,
+      format: 'es',
+      sourcemap: true,
+      banner: `'use client';`
+    },
+    plugins: [
+      typescriptPlugin({
+        typescript,
+        tsconfigOverride: {
+          compilerOptions: {
+            declarationDir: 'dist/react'
+          }
+        }
+      }),
+      json(),
+      emitModulePackageFile()
+    ],
+    external: id => deps.some(dep => id === dep || id.startsWith(`${dep}/`))
+  }
+];
+
+export default [
+  ...browserBuilds,
+  ...nodeBuilds,
+  ...reactBuilds,
+  ...reactNodeBuilds
+];

packages/telemetry/src/react.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export interface FirebaseTelemetryBoundaryProps {
+  children: React.ReactNode;
+}
+
+export class FirebaseTelemetryBoundary extends React.Component<FirebaseTelemetryBoundaryProps> {
+  constructor(public props: FirebaseTelemetryBoundaryProps) {
+    super(props);
+
+    console.info('init firebase telemetry boundary');
+  }
+
+  render(): React.ReactNode {
+    console.info('abc');
+    return this.props.children;
+  }
+}

packages/telemetry/src/react.tsx

@@ -1,8 +1,7 @@
 {
   "extends": "../../config/tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "dist",
-    "jsx": "react"
+    "outDir": "dist"
   },
   "exclude": ["dist/**/*"]
 }

packages/telemetry/src/react/index.ts

@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist/react",
+    "declarationDir": "dist/react"
+  },
+  "include": ["src/react/index.ts"]
+}