fix(tpc): custom feature detection flags

src/runtime/composables/useFeatureDetection.ts

@@ -0,0 +1,13 @@
+import { onMounted } from 'vue'
+
+export function useFeatureDetection(id: string) {
+  onMounted(() => {
+    onMounted(() => {
+      performance?.mark?.('mark_feature_usage', {
+        detail: {
+          feature: `nuxt-third-parties-${id}`,
+        },
+      })
+    })
+  })
+}

src/tpc/google-analytics.ts

@@ -20,7 +20,7 @@ export default function googleAnalitycsRegistry() {
         },
         tpcKey: 'gtag',
         tpcTypeImport: 'GoogleAnalyticsApi',
-        augmentWindowTypes: true,
+        featureDetection: 'ga',
       })
     },
     filename: 'nuxt-scripts/tpc/google-analytics.ts',

src/tpc/google-tag-manager.ts

@@ -21,7 +21,7 @@ export default function googleTagManagerRegistry() {
         },
         tpcKey: 'gtm',
         tpcTypeImport: 'GoogleTagManagerApi',
-        augmentWindowTypes: true,
+        featureDetection: 'gtm',
       })
     },
     filename: 'nuxt-scripts/tpc/google-tag-manager.ts',

src/tpc/utils.ts

@@ -7,7 +7,6 @@ export interface ScriptContentOpts {
   data: Output
   scriptFunctionName: string
   tpcTypeImport: string
-  augmentWindowTypes?: boolean
   tpcKey: string
   /**
    * This will be stringified. The function must be pure.
@@ -17,6 +16,7 @@ export interface ScriptContentOpts {
    * This will be stringified. The function must be pure.
    */
   stub: (params: { fn: string }) => any
+  featureDetection: string
 }
 
 const HEAD_VAR = '__head'
@@ -38,10 +38,13 @@ export function getTpcScriptContent(input: ScriptContentOpts) {
     'import { withQuery } from \'ufo\'',
     'import { useRegistryScript } from \'#nuxt-scripts-utils\'',
     'import type { RegistryScriptInput } from \'#nuxt-scripts\'',
+    'import { useFeatureDetection } from \'#imports\'',
   ])
 
   const chunks: string[] = []
-  const functionBody: string[] = []
+  const functionBody: string[] = [
+    `useFeatureDetection('${input.featureDetection}')`,
+  ]
 
   const hasParams = mainScript.params?.length
 
@@ -56,12 +59,10 @@ export function getTpcScriptContent(input: ScriptContentOpts) {
     chunks.push(`const OptionSchema = object({${mainScript.params?.map(p => `${p}:  any()`)}})`)
   }
 
-  if (input.augmentWindowTypes) {
-    chunks.push(`
+  chunks.push(`
 declare global {
   interface Window extends ${input.tpcTypeImport} {}
 }`)
-  }
 
   const clientInitCode: string[] = []
 

test/unit/tpc.test.ts

@@ -35,10 +35,10 @@ describe.each([
       },
       tpcKey: 'google-analytics',
       tpcTypeImport: 'GoogleAnalyticsInput',
-      augmentWindowTypes: true,
       scriptFunctionName: 'useScriptGoogleAnalytics',
       use: () => { },
       stub: () => { },
+      featureDetection: 'ga',
     })).toThrowError('no main script found for google-analytics in third-party-capital')
   })
 
@@ -60,14 +60,14 @@ describe.each([
       },
       tpcKey: 'google-analytics',
       tpcTypeImport: 'GoogleAnalyticsInput',
-      augmentWindowTypes: true,
       scriptFunctionName: 'useScriptGoogleAnalytics',
       use: () => {
         return { dataLayer: window.dataLayer, gtag: window.gtag }
       },
       stub: () => {
         return []
       },
+      featureDetection: 'google-analytics',
     }
 
     it(`expect to${isDev ? '' : ' not'} add the schema to the script options`, () => {
@@ -113,12 +113,13 @@ describe.each([
       expect(getCodeFromAst(result, stubFn)).toContain('return []')
     })
 
-    it('expect to augment window types', () => {
+    it('expect to augment window types and useFeature detection', () => {
       const result = getTpcScriptContent(input)
       const ast = parse(result, { loc: true, range: true })
       const augmentWindowTypes = ast.body.find((node): node is TSESTree.TSModuleDeclaration => node.type === TSESTree.AST_NODE_TYPES.TSModuleDeclaration)
       expect(augmentWindowTypes).toBeTruthy()
       expect(getCodeFromAst(result, augmentWindowTypes!)).toContain('interface Window extends GoogleAnalyticsInput {}')
+      expect(result).toContain('useFeatureDetection(\'google-analytics\')')
     })
   })
 })
@@ -141,10 +142,10 @@ describe('script content generation with head positioning', () => {
     },
     tpcKey: 'google-analytics',
     tpcTypeImport: 'GoogleAnalyticsInput',
-    augmentWindowTypes: true,
     scriptFunctionName: 'useScriptGoogleAnalytics',
     use: () => { },
     stub: () => { },
+    featureDetection: 'google-analytics',
   }
 
   describe('main script', () => {