fix(tpc): custom feature detection flags (#113)

Author: huang-julien

src/runtime/composables/useScript.ts

@@ -30,7 +30,7 @@ export function useScript<T extends Record<string | symbol, any>>(input: UseScri
     if (!nuxtApp._scripts?.[id]) {
       performance?.mark?.('mark_feature_usage', {
         detail: {
-          feature: `nuxt-scripts:${id}`,
+          feature: options.performanceMarkFeature ?? `nuxt-scripts:${id}`,
         },
       })
     }

src/runtime/types.ts

@@ -46,6 +46,10 @@ export type NuxtUseScriptOptions<T = any> = Omit<UseScriptOptions<T>, 'trigger'>
    * loading the actual script and not getting warnings.
    */
   skipValidation?: boolean
+  /**
+   * @internal
+   */
+  performanceMarkFeature?: string
 }
 
 export type NuxtUseScriptOptionsSerializable = Omit<NuxtUseScriptOptions, 'use' | 'skipValidation' | 'stub' | 'trigger' | 'eventContext' | 'beforeInit'> & { trigger?: 'client' | 'server' | 'onNuxtReady' }

src/tpc/google-analytics.ts

@@ -19,6 +19,7 @@ export default function googleAnalitycsRegistry(scripts: RegistryScript[]) {
         },
         tpcKey: 'gtag',
         tpcTypeImport: 'GoogleAnalyticsApi',
+        featureDetectionName: 'nuxt-third-parties-ga',
       })
     },
     filename: 'nuxt-scripts/tpc/google-analytics.ts',

src/tpc/google-tag-manager.ts

@@ -19,6 +19,7 @@ export default function googleTagManagerRegistry(scripts: RegistryScript[]) {
         },
         tpcKey: 'gtm',
         tpcTypeImport: 'GoogleTagManagerApi',
+        featureDetectionName: 'nuxt-third-parties-gtm',
       })
     },
     filename: 'nuxt-scripts/tpc/google-tag-manager.ts',

src/tpc/utils.ts

@@ -17,6 +17,7 @@ export interface ScriptContentOpts {
    * This will be stringified. The function must be pure.
    */
   stub: (params: { fn: string }) => any
+  featureDetectionName?: string
 }
 
 const HEAD_VAR = '__head'
@@ -100,6 +101,7 @@ ${functionBody.join('\n')}
         scriptOptions: {
             use: ${input.use.toString()},
             stub: import.meta.client ? undefined :  ${input.stub.toString()},
+            ${input.featureDetectionName ? `performanceMarkFeature: ${JSON.stringify(input.featureDetectionName)},` : ''}
             ${mainScriptOptions ? `...(${JSON.stringify(mainScriptOptions)})` : ''}
         },
         ${clientInitCode.length ? `clientInit: import.meta.server ? undefined : () => {${clientInitCode.join('\n')}},` : ''}