wideangle/wideangle-nuxt
3
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactoring Nuxt plugin

Browse source
This commit is contained in:
Jarek Rozanski 2025-01-29 01:01:34 +01:00
parent 842cc6f499
commit c315cc2bcc
12 changed files with 122 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

26
README.md
View file

@ -87,11 +87,21 @@ export default defineNuxtConfig({
# Usage
The Wide Angle Analytics provides an instance of `waa` which can be then injected to your component.
The Wide Angle Analytics provides a composable which can be used in your component.
```javascript
const waa = useWaa();
waa.dispatchEvent('purchase', {'basket_element': 'dress'}, {'basket_item_price': 123.44});
<template>
<button @click="sendEvent">Send Event</button>
</template>
<script setup>
import { useWideAngle } from '#imports';
const sendEvent = () => {
useWideAngle().dispatchEvent('basket-open', {'page': 'catalogue'}, {'item-price': 599.00, 'basket-total': 1299.00});
}
</script>
```
You will find a fully functional example in this [repository](playground/app.vue).
@ -132,16 +142,14 @@ Example:
</template>
<script setup>
import { useWaa } from '#imports'
const waa = useWaa();
import { useWideAngle } from '#imports'
const sendEvent = async () => {
const params = {
session: 'cjhw92nf9aq',
cohort: 'c1233'
}
waa.dispatchEvent('interest', params);
useWideAngle().dispatchEvent('interest', params);
}
</script>
```
@ -196,9 +204,9 @@ Example usage:
```vue
<script setup>
import { useWaa } from '#imports'
import { useWideAngle } from '#imports'
const waa = useWaa();
const waa = useWideAngle();
waa.recordConsent('FHJ44111');

13
package.json
View file

@ -34,8 +34,9 @@
"dev": "nuxi dev playground",
"dev:build": "nuxi build playground",
"dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
"release": "npm run lint && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
"lint": "eslint ."
"release": "npm lint && npm test && npm prepack && changelogen --release && npm publish && git push --follow-tags",
"lint": "eslint .",
"lint:fix": "eslint . --fix"
},
"dependencies": {
"@nuxt/kit": "^3.13.2",
@ -43,10 +44,10 @@
"defu": "^6.1.2"
},
"devDependencies": {
"@nuxt/eslint-config": "^0.7.4",
"@nuxt/module-builder": "^0.8.4",
"@nuxt/schema": "^3.13.2",
"@nuxt/test-utils": "^3.12.0",
"@nuxt/devtools": "latest",
"@nuxt/eslint-config": "^0.3.13",
"@nuxt/module-builder": "^0.8.1",
"@nuxt/schema": "^3.12.4",
"@types/node": "^18",
"changelogen": "^0.5.3",
"eslint": "^9.17.0",

36
playground/app.vue
View file

@ -1,36 +0,0 @@
<template>
<main>
<h1>Nuxt Application</h1>
<button @click="trackClick">
Track Click
</button>
</main>
</template>
<script setup lang="ts">
import { useWaaEvent } from "#imports";
function trackClick() {
useWaaEvent("foo", {"name": "bar"}, {"count" : 2});
}
</script>
<style>
main {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 2rem;
display: flex;
flex-direction: column;
max-width: 300px;
gap: 2rem;
align-items: center;
margin: 0 auto;
text-align: center;
}
button {
padding: 1rem;
}
</style>

11
playground/components/sample-tracker.vue Normal file
View file

@ -0,0 +1,11 @@
<template>
<button @click="sendEvent">Send Event</button>
</template>
<script setup>
import { useWideAngle } from '#imports';
const sendEvent = () => {
useWideAngle().dispatchEvent('foo', {'param1': 'bar'}, {'value1': 123});
}
</script>

15
playground/nuxt.config.ts
View file

@ -1,12 +1,17 @@
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
modules: ['../src/module'],
devtools: { enabled: true },
compatibilityDate: "2025-01-28",
modules: ['wideangle-nuxt'],
// ssr: false,
runtimeConfig: {
public: {
wideangle: {
siteId: "7982G3B9ACB1BF4380",
fingerprint: true,
supressDnt: true
siteId: "8D27G3B9ACA01F4241",
domain: "events.wideangle.test",
fingerprint: false,
suppressDnt: true
}
}
}
});
})

4
playground/package.json
View file

@ -1,4 +0,0 @@
{
"private": true,
"name": "wideangle-playground"
}

7
playground/pages/index.vue Normal file
View file

@ -0,0 +1,7 @@
<template>
<div>
<h1>Wide Angle Analytics Playground</h1>
<sample-tracker/>
</div>
</template>

33
src/module.ts
View file

@ -1,6 +1,5 @@
import { defineNuxtModule, addPlugin, addImports, createResolver, useLogger } from '@nuxt/kit'
import { defineNuxtModule, addPlugin, addImportsDir, createResolver, useLogger } from '@nuxt/kit'
import { defu } from 'defu'
import { fileURLToPath } from 'url'
const logger = useLogger('nuxt:wideangle')
@ -20,40 +19,32 @@ export default defineNuxtModule<ModuleOptions>({
name: 'wideangle',
configKey: 'wideangle',
compatibility: {
nuxt: '>=3'
}
nuxt: '>=3',
},
},
defaults: {
domain: "stats.wideangle.co",
domain: 'stats.wideangle.co',
fingerprint: false,
suppressDnt: false,
includeParams: [],
excludePaths: [],
ignoreHash: false,
consentMarker: null
consentMarker: undefined,
},
setup(options, nuxt) {
const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
const resolver = createResolver(import.meta.url)
nuxt.options.runtimeConfig.public.wideangle = defu(
nuxt.options.runtimeConfig.public.wideangle,
options,
)
nuxt.options.build.transpile.push(runtimeDir);
const resolver = createResolver(import.meta.url);
nuxt.options.build.transpile.push(resolver.resolve('./runtime'))
logger.info('Adding Wide Angle Analytics runtime plugin');
logger.info('Adding Wide Angle Analytics (useWideAngle) import')
addImportsDir(resolver.resolve('./runtime/composables'))
addImports({
name: "useWaaEvent",
as: "useWaaEvent",
from: resolver.resolve('./runtime/composables/useWaaEvent')
});
logger.info('Adding Wide Angle Analytics runtime plugin')
addPlugin(resolver.resolve('./runtime/plugin.client'))
addPlugin({
src: resolver.resolve('./runtime/plugin.client')
});
}
},
})

8
src/runtime/composables/useWaa.ts
View file

@ -1,8 +0,0 @@
import { useNuxtApp } from '#imports';
function useWaa() {
const waa = useNuxtApp().$waa;
return waa.value;
}
export useWaa;

27
src/runtime/composables/useWideAngle.ts Normal file
View file

@ -0,0 +1,27 @@
import {useNuxtApp} from '#imports'
import type {WideAngleApi} from "~/src/types";
class NoOpWideAngleAnalyticsApi implements WideAngleApi {
dispatchEvent(name: string, params: any, values: any): void {
console.debug(`[WideAngleApi#dispatchEvent] Defaulting to NoOp Wide Angle call with name "${name}", params: ${JSON.stringify(params)}, values: ${JSON.stringify(params)}`);
}
recordConsent(subjectsId: string): void {
console.debug(`[WideAngleApi#recordConsent] Defaulting to NoOp Wide Angle call with ${subjectsId}`);
}
revokeConsent() {
console.debug(`[WideAngleApi#revokeConsent] Defaulting to NoOp Wide Angle call`);
}
}
const noOpWideAngleApi = new NoOpWideAngleAnalyticsApi();
export function useWideAngle() {
const { $waa } = useNuxtApp()
if ($waa) {
return $waa.value;
} else {
return noOpWideAngleApi;
}
}

38
src/runtime/plugin.client.ts
View file

@ -1,30 +1,36 @@
import { defineNuxtPlugin, useRuntimeConfig } from '#imports';
import { ref } from 'vue';
import { initWideAngle } from 'wideangle-vuejs';
import { type Ref, ref} from 'vue'
import { initWideAngle } from 'wideangle-vuejs'
import { defineNuxtPlugin, type NuxtApp } from '#app'
import { useRuntimeConfig } from "#imports";
import type { WideAngleApi } from "~/src/types";
export default defineNuxtPlugin(async (_nuxtApp) => {
export default defineNuxtPlugin(() => {
if (import.meta.server) {
console.warn("[WAA] Plugin will not be enabled on server side.");
return;
console.warn('[WAA] Plugin will not be enabled on server side.')
return
}
const { wideangle: options } = useRuntimeConfig().public
console.debug(`[WAA] Initializing Wide Angle Analytics with: ${JSON.stringify(options)}`);
console.debug(`[WAA] Initializing Wide Angle Analytics with: ${JSON.stringify(options)}`)
if (options.siteId == null) {
throw new Error("[WAA] Wide Angle Analytics requires the site ID.");
throw new Error('[WAA] Wide Angle Analytics requires the site ID.')
}
const waa = ref()
initWideAngle(options)
.then(waaInstance => {
waa.value = waaInstance;
console.debug("[WAA] Wide Angle Analytics instance available");
}).catch(e => { console.error("[WAA] Failed to load Wide Angle Plugin", e)});
.then((waaInstance) => {
waa.value = waaInstance
console.debug('[WAA] Wide Angle Analytics instance available')
}).catch((e) => {
console.error('[WAA] Failed to load Wide Angle Plugin', e)
})
return {
provide: {
waa
}
waa: waa as Ref<WideAngleApi>,
},
}
})

5
src/types.ts Normal file
View file

@ -0,0 +1,5 @@
export interface WideAngleApi {
dispatchEvent(name: string, params: any, values: any) : void;
recordConsent(subjectsId: string) : void;
revokeConsent() : void;
}