@watchupltd/svelte 0.1.9 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/action.d.mts +46 -0
- package/dist/action.d.ts +46 -0
- package/dist/action.js +58 -0
- package/dist/action.js.map +1 -0
- package/dist/action.mjs +4 -0
- package/dist/action.mjs.map +1 -0
- package/dist/chunk-A275SBSC.mjs +43 -0
- package/dist/chunk-A275SBSC.mjs.map +1 -0
- package/dist/chunk-JOD5F3DS.mjs +20 -0
- package/dist/chunk-JOD5F3DS.mjs.map +1 -0
- package/dist/context.d.mts +18 -0
- package/dist/context.d.ts +18 -0
- package/dist/context.js +23 -0
- package/dist/context.js.map +1 -0
- package/dist/context.mjs +3 -0
- package/dist/context.mjs.map +1 -0
- package/dist/index.d.mts +45 -0
- package/dist/index.d.ts +45 -12
- package/dist/index.js +72 -33
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +23 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +27 -14
- package/src/WatchupProvider.svelte +32 -0
- package/dist/index.d.ts.map +0 -1
- package/src/index.ts +0 -50
- package/tsconfig.json +0 -9
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { Action } from 'svelte/action';
|
|
2
|
+
|
|
3
|
+
interface TrackClickParams {
|
|
4
|
+
/** Event name sent to Watchup. */
|
|
5
|
+
event: string;
|
|
6
|
+
/** Optional properties merged into the event payload. */
|
|
7
|
+
properties?: Record<string, unknown>;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Svelte action that tracks a click event.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* <script>
|
|
14
|
+
* import { trackClick } from '@watchupltd/svelte';
|
|
15
|
+
* </script>
|
|
16
|
+
* <button use:trackClick={{ event: 'cta.clicked', properties: { variant: 'A' } }}>
|
|
17
|
+
* Get started
|
|
18
|
+
* </button>
|
|
19
|
+
*/
|
|
20
|
+
declare const trackClick: Action<HTMLElement, TrackClickParams>;
|
|
21
|
+
/**
|
|
22
|
+
* Svelte action that traces the time between `mount` and when `done()` is
|
|
23
|
+
* called, emitting a trace span.
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* <script>
|
|
27
|
+
* import { traceAction } from '@watchupltd/svelte';
|
|
28
|
+
*
|
|
29
|
+
* let done: () => void;
|
|
30
|
+
*
|
|
31
|
+
* async function load() {
|
|
32
|
+
* const data = await fetchData();
|
|
33
|
+
* done?.();
|
|
34
|
+
* return data;
|
|
35
|
+
* }
|
|
36
|
+
* </script>
|
|
37
|
+
* <div use:traceAction={{ span: 'dashboard load', onDone: (fn) => (done = fn) }}>
|
|
38
|
+
* ...
|
|
39
|
+
* </div>
|
|
40
|
+
*/
|
|
41
|
+
declare const traceAction: Action<HTMLElement, {
|
|
42
|
+
span: string;
|
|
43
|
+
onDone: (endFn: () => void) => void;
|
|
44
|
+
}>;
|
|
45
|
+
|
|
46
|
+
export { traceAction, trackClick };
|
package/dist/action.d.ts
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { Action } from 'svelte/action';
|
|
2
|
+
|
|
3
|
+
interface TrackClickParams {
|
|
4
|
+
/** Event name sent to Watchup. */
|
|
5
|
+
event: string;
|
|
6
|
+
/** Optional properties merged into the event payload. */
|
|
7
|
+
properties?: Record<string, unknown>;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Svelte action that tracks a click event.
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* <script>
|
|
14
|
+
* import { trackClick } from '@watchupltd/svelte';
|
|
15
|
+
* </script>
|
|
16
|
+
* <button use:trackClick={{ event: 'cta.clicked', properties: { variant: 'A' } }}>
|
|
17
|
+
* Get started
|
|
18
|
+
* </button>
|
|
19
|
+
*/
|
|
20
|
+
declare const trackClick: Action<HTMLElement, TrackClickParams>;
|
|
21
|
+
/**
|
|
22
|
+
* Svelte action that traces the time between `mount` and when `done()` is
|
|
23
|
+
* called, emitting a trace span.
|
|
24
|
+
*
|
|
25
|
+
* @example
|
|
26
|
+
* <script>
|
|
27
|
+
* import { traceAction } from '@watchupltd/svelte';
|
|
28
|
+
*
|
|
29
|
+
* let done: () => void;
|
|
30
|
+
*
|
|
31
|
+
* async function load() {
|
|
32
|
+
* const data = await fetchData();
|
|
33
|
+
* done?.();
|
|
34
|
+
* return data;
|
|
35
|
+
* }
|
|
36
|
+
* </script>
|
|
37
|
+
* <div use:traceAction={{ span: 'dashboard load', onDone: (fn) => (done = fn) }}>
|
|
38
|
+
* ...
|
|
39
|
+
* </div>
|
|
40
|
+
*/
|
|
41
|
+
declare const traceAction: Action<HTMLElement, {
|
|
42
|
+
span: string;
|
|
43
|
+
onDone: (endFn: () => void) => void;
|
|
44
|
+
}>;
|
|
45
|
+
|
|
46
|
+
export { traceAction, trackClick };
|
package/dist/action.js
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var svelte = require('svelte');
|
|
4
|
+
|
|
5
|
+
// src/context.ts
|
|
6
|
+
var KEY = /* @__PURE__ */ Symbol("watchup");
|
|
7
|
+
function getWatchup() {
|
|
8
|
+
const instance = svelte.getContext(KEY);
|
|
9
|
+
if (!instance) {
|
|
10
|
+
throw new Error(
|
|
11
|
+
"[watchup] getWatchup() must be called inside a component that is a descendant of <WatchupProvider>."
|
|
12
|
+
);
|
|
13
|
+
}
|
|
14
|
+
return instance;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
// src/action.ts
|
|
18
|
+
var trackClick = (node, params) => {
|
|
19
|
+
let watchup;
|
|
20
|
+
try {
|
|
21
|
+
watchup = getWatchup();
|
|
22
|
+
} catch {
|
|
23
|
+
return {};
|
|
24
|
+
}
|
|
25
|
+
const handler = () => {
|
|
26
|
+
watchup.track(params.event, params.properties);
|
|
27
|
+
};
|
|
28
|
+
node.addEventListener("click", handler);
|
|
29
|
+
return {
|
|
30
|
+
update(newParams) {
|
|
31
|
+
params = newParams;
|
|
32
|
+
},
|
|
33
|
+
destroy() {
|
|
34
|
+
node.removeEventListener("click", handler);
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
var traceAction = (node, params) => {
|
|
39
|
+
let watchup;
|
|
40
|
+
try {
|
|
41
|
+
watchup = getWatchup();
|
|
42
|
+
} catch {
|
|
43
|
+
params.onDone(() => {
|
|
44
|
+
});
|
|
45
|
+
return {};
|
|
46
|
+
}
|
|
47
|
+
const end = watchup.startTrace(params.span);
|
|
48
|
+
params.onDone(() => end({ status: "ok" }));
|
|
49
|
+
return {
|
|
50
|
+
destroy() {
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
exports.traceAction = traceAction;
|
|
56
|
+
exports.trackClick = trackClick;
|
|
57
|
+
//# sourceMappingURL=action.js.map
|
|
58
|
+
//# sourceMappingURL=action.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/context.ts","../src/action.ts"],"names":["getContext"],"mappings":";;;;;AAOA,IAAM,GAAA,0BAAa,SAAS,CAAA;AAkBrB,SAAS,UAAA,GAAsB;AACpC,EAAA,MAAM,QAAA,GAAWA,kBAAgC,GAAG,CAAA;AACpD,EAAA,IAAI,CAAC,QAAA,EAAU;AACb,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KAEF;AAAA,EACF;AACA,EAAA,OAAO,QAAA;AACT;;;ACRO,IAAM,UAAA,GAAoD,CAC/D,IAAA,EACA,MAAA,KACG;AACH,EAAA,IAAI,OAAA;AACJ,EAAA,IAAI;AACF,IAAA,OAAA,GAAU,UAAA,EAAW;AAAA,EACvB,CAAA,CAAA,MAAQ;AAEN,IAAA,OAAO,EAAC;AAAA,EACV;AAEA,EAAA,MAAM,UAAU,MAAM;AACpB,IAAA,OAAA,CAAQ,KAAA,CAAM,MAAA,CAAO,KAAA,EAAO,MAAA,CAAO,UAAU,CAAA;AAAA,EAC/C,CAAA;AAEA,EAAA,IAAA,CAAK,gBAAA,CAAiB,SAAS,OAAO,CAAA;AAEtC,EAAA,OAAO;AAAA,IACL,OAAO,SAAA,EAAW;AAChB,MAAA,MAAA,GAAS,SAAA;AAAA,IACX,CAAA;AAAA,IACA,OAAA,GAAU;AACR,MAAA,IAAA,CAAK,mBAAA,CAAoB,SAAS,OAAO,CAAA;AAAA,IAC3C;AAAA,GACF;AACF;AAsBO,IAAM,WAAA,GAGT,CAAC,IAAA,EAAM,MAAA,KAAW;AACpB,EAAA,IAAI,OAAA;AACJ,EAAA,IAAI;AACF,IAAA,OAAA,GAAU,UAAA,EAAW;AAAA,EACvB,CAAA,CAAA,MAAQ;AACN,IAAA,MAAA,CAAO,OAAO,MAAM;AAAA,IAAC,CAAC,CAAA;AACtB,IAAA,OAAO,EAAC;AAAA,EACV;AAEA,EAAA,MAAM,GAAA,GAAM,OAAA,CAAQ,UAAA,CAAW,MAAA,CAAO,IAAI,CAAA;AAC1C,EAAA,MAAA,CAAO,OAAO,MAAM,GAAA,CAAI,EAAE,MAAA,EAAQ,IAAA,EAAM,CAAC,CAAA;AAEzC,EAAA,OAAO;AAAA,IACL,OAAA,GAAU;AAAA,IAEV;AAAA,GACF;AACF","file":"action.js","sourcesContent":["// ─────────────────────────────────────────────────────────────────────────────\n// @watchupltd/svelte · context helpers\n// ─────────────────────────────────────────────────────────────────────────────\n\nimport { getContext, setContext } from 'svelte';\nimport type { Watchup } from '@watchupltd/browser';\n\nconst KEY = Symbol('watchup');\n\n/** Called internally by WatchupProvider. */\nexport function _setWatchupContext(instance: Watchup): void {\n setContext(KEY, instance);\n}\n\n/**\n * Returns the `Watchup` instance from the nearest `<WatchupProvider>`.\n * Call this at component initialisation time (not inside event handlers).\n *\n * @example\n * <script>\n * import { getWatchup } from '@watchupltd/svelte';\n * const watchup = getWatchup();\n * </script>\n * <button on:click={() => watchup.track('button.clicked')}>Click me</button>\n */\nexport function getWatchup(): Watchup {\n const instance = getContext<Watchup | undefined>(KEY);\n if (!instance) {\n throw new Error(\n '[watchup] getWatchup() must be called inside a component ' +\n 'that is a descendant of <WatchupProvider>.',\n );\n }\n return instance;\n}\n","// ─────────────────────────────────────────────────────────────────────────────\n// @watchupltd/svelte · Svelte actions\n// ─────────────────────────────────────────────────────────────────────────────\n\nimport type { Action } from 'svelte/action';\nimport type { Watchup } from '@watchupltd/browser';\nimport { getWatchup } from './context.js';\n\ninterface TrackClickParams {\n /** Event name sent to Watchup. */\n event: string;\n /** Optional properties merged into the event payload. */\n properties?: Record<string, unknown>;\n}\n\n/**\n * Svelte action that tracks a click event.\n *\n * @example\n * <script>\n * import { trackClick } from '@watchupltd/svelte';\n * </script>\n * <button use:trackClick={{ event: 'cta.clicked', properties: { variant: 'A' } }}>\n * Get started\n * </button>\n */\nexport const trackClick: Action<HTMLElement, TrackClickParams> = (\n node,\n params,\n) => {\n let watchup: Watchup;\n try {\n watchup = getWatchup();\n } catch {\n // No provider in tree — silently no-op\n return {};\n }\n\n const handler = () => {\n watchup.track(params.event, params.properties);\n };\n\n node.addEventListener('click', handler);\n\n return {\n update(newParams) {\n params = newParams;\n },\n destroy() {\n node.removeEventListener('click', handler);\n },\n };\n};\n\n/**\n * Svelte action that traces the time between `mount` and when `done()` is\n * called, emitting a trace span.\n *\n * @example\n * <script>\n * import { traceAction } from '@watchupltd/svelte';\n *\n * let done: () => void;\n *\n * async function load() {\n * const data = await fetchData();\n * done?.();\n * return data;\n * }\n * </script>\n * <div use:traceAction={{ span: 'dashboard load', onDone: (fn) => (done = fn) }}>\n * ...\n * </div>\n */\nexport const traceAction: Action<\n HTMLElement,\n { span: string; onDone: (endFn: () => void) => void }\n> = (node, params) => {\n let watchup: Watchup;\n try {\n watchup = getWatchup();\n } catch {\n params.onDone(() => {});\n return {};\n }\n\n const end = watchup.startTrace(params.span);\n params.onDone(() => end({ status: 'ok' }));\n\n return {\n destroy() {\n // If destroyed before done() was called, mark as cancelled\n },\n };\n};\n"]}
|
package/dist/action.mjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"action.mjs"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { getWatchup } from './chunk-JOD5F3DS.mjs';
|
|
2
|
+
|
|
3
|
+
// src/action.ts
|
|
4
|
+
var trackClick = (node, params) => {
|
|
5
|
+
let watchup;
|
|
6
|
+
try {
|
|
7
|
+
watchup = getWatchup();
|
|
8
|
+
} catch {
|
|
9
|
+
return {};
|
|
10
|
+
}
|
|
11
|
+
const handler = () => {
|
|
12
|
+
watchup.track(params.event, params.properties);
|
|
13
|
+
};
|
|
14
|
+
node.addEventListener("click", handler);
|
|
15
|
+
return {
|
|
16
|
+
update(newParams) {
|
|
17
|
+
params = newParams;
|
|
18
|
+
},
|
|
19
|
+
destroy() {
|
|
20
|
+
node.removeEventListener("click", handler);
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
var traceAction = (node, params) => {
|
|
25
|
+
let watchup;
|
|
26
|
+
try {
|
|
27
|
+
watchup = getWatchup();
|
|
28
|
+
} catch {
|
|
29
|
+
params.onDone(() => {
|
|
30
|
+
});
|
|
31
|
+
return {};
|
|
32
|
+
}
|
|
33
|
+
const end = watchup.startTrace(params.span);
|
|
34
|
+
params.onDone(() => end({ status: "ok" }));
|
|
35
|
+
return {
|
|
36
|
+
destroy() {
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
export { traceAction, trackClick };
|
|
42
|
+
//# sourceMappingURL=chunk-A275SBSC.mjs.map
|
|
43
|
+
//# sourceMappingURL=chunk-A275SBSC.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/action.ts"],"names":[],"mappings":";;;AA0BO,IAAM,UAAA,GAAoD,CAC/D,IAAA,EACA,MAAA,KACG;AACH,EAAA,IAAI,OAAA;AACJ,EAAA,IAAI;AACF,IAAA,OAAA,GAAU,UAAA,EAAW;AAAA,EACvB,CAAA,CAAA,MAAQ;AAEN,IAAA,OAAO,EAAC;AAAA,EACV;AAEA,EAAA,MAAM,UAAU,MAAM;AACpB,IAAA,OAAA,CAAQ,KAAA,CAAM,MAAA,CAAO,KAAA,EAAO,MAAA,CAAO,UAAU,CAAA;AAAA,EAC/C,CAAA;AAEA,EAAA,IAAA,CAAK,gBAAA,CAAiB,SAAS,OAAO,CAAA;AAEtC,EAAA,OAAO;AAAA,IACL,OAAO,SAAA,EAAW;AAChB,MAAA,MAAA,GAAS,SAAA;AAAA,IACX,CAAA;AAAA,IACA,OAAA,GAAU;AACR,MAAA,IAAA,CAAK,mBAAA,CAAoB,SAAS,OAAO,CAAA;AAAA,IAC3C;AAAA,GACF;AACF;AAsBO,IAAM,WAAA,GAGT,CAAC,IAAA,EAAM,MAAA,KAAW;AACpB,EAAA,IAAI,OAAA;AACJ,EAAA,IAAI;AACF,IAAA,OAAA,GAAU,UAAA,EAAW;AAAA,EACvB,CAAA,CAAA,MAAQ;AACN,IAAA,MAAA,CAAO,OAAO,MAAM;AAAA,IAAC,CAAC,CAAA;AACtB,IAAA,OAAO,EAAC;AAAA,EACV;AAEA,EAAA,MAAM,GAAA,GAAM,OAAA,CAAQ,UAAA,CAAW,MAAA,CAAO,IAAI,CAAA;AAC1C,EAAA,MAAA,CAAO,OAAO,MAAM,GAAA,CAAI,EAAE,MAAA,EAAQ,IAAA,EAAM,CAAC,CAAA;AAEzC,EAAA,OAAO;AAAA,IACL,OAAA,GAAU;AAAA,IAEV;AAAA,GACF;AACF","file":"chunk-A275SBSC.mjs","sourcesContent":["// ─────────────────────────────────────────────────────────────────────────────\n// @watchupltd/svelte · Svelte actions\n// ─────────────────────────────────────────────────────────────────────────────\n\nimport type { Action } from 'svelte/action';\nimport type { Watchup } from '@watchupltd/browser';\nimport { getWatchup } from './context.js';\n\ninterface TrackClickParams {\n /** Event name sent to Watchup. */\n event: string;\n /** Optional properties merged into the event payload. */\n properties?: Record<string, unknown>;\n}\n\n/**\n * Svelte action that tracks a click event.\n *\n * @example\n * <script>\n * import { trackClick } from '@watchupltd/svelte';\n * </script>\n * <button use:trackClick={{ event: 'cta.clicked', properties: { variant: 'A' } }}>\n * Get started\n * </button>\n */\nexport const trackClick: Action<HTMLElement, TrackClickParams> = (\n node,\n params,\n) => {\n let watchup: Watchup;\n try {\n watchup = getWatchup();\n } catch {\n // No provider in tree — silently no-op\n return {};\n }\n\n const handler = () => {\n watchup.track(params.event, params.properties);\n };\n\n node.addEventListener('click', handler);\n\n return {\n update(newParams) {\n params = newParams;\n },\n destroy() {\n node.removeEventListener('click', handler);\n },\n };\n};\n\n/**\n * Svelte action that traces the time between `mount` and when `done()` is\n * called, emitting a trace span.\n *\n * @example\n * <script>\n * import { traceAction } from '@watchupltd/svelte';\n *\n * let done: () => void;\n *\n * async function load() {\n * const data = await fetchData();\n * done?.();\n * return data;\n * }\n * </script>\n * <div use:traceAction={{ span: 'dashboard load', onDone: (fn) => (done = fn) }}>\n * ...\n * </div>\n */\nexport const traceAction: Action<\n HTMLElement,\n { span: string; onDone: (endFn: () => void) => void }\n> = (node, params) => {\n let watchup: Watchup;\n try {\n watchup = getWatchup();\n } catch {\n params.onDone(() => {});\n return {};\n }\n\n const end = watchup.startTrace(params.span);\n params.onDone(() => end({ status: 'ok' }));\n\n return {\n destroy() {\n // If destroyed before done() was called, mark as cancelled\n },\n };\n};\n"]}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { setContext, getContext } from 'svelte';
|
|
2
|
+
|
|
3
|
+
// src/context.ts
|
|
4
|
+
var KEY = /* @__PURE__ */ Symbol("watchup");
|
|
5
|
+
function _setWatchupContext(instance) {
|
|
6
|
+
setContext(KEY, instance);
|
|
7
|
+
}
|
|
8
|
+
function getWatchup() {
|
|
9
|
+
const instance = getContext(KEY);
|
|
10
|
+
if (!instance) {
|
|
11
|
+
throw new Error(
|
|
12
|
+
"[watchup] getWatchup() must be called inside a component that is a descendant of <WatchupProvider>."
|
|
13
|
+
);
|
|
14
|
+
}
|
|
15
|
+
return instance;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export { _setWatchupContext, getWatchup };
|
|
19
|
+
//# sourceMappingURL=chunk-JOD5F3DS.mjs.map
|
|
20
|
+
//# sourceMappingURL=chunk-JOD5F3DS.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/context.ts"],"names":[],"mappings":";;;AAOA,IAAM,GAAA,0BAAa,SAAS,CAAA;AAGrB,SAAS,mBAAmB,QAAA,EAAyB;AAC1D,EAAA,UAAA,CAAW,KAAK,QAAQ,CAAA;AAC1B;AAaO,SAAS,UAAA,GAAsB;AACpC,EAAA,MAAM,QAAA,GAAW,WAAgC,GAAG,CAAA;AACpD,EAAA,IAAI,CAAC,QAAA,EAAU;AACb,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KAEF;AAAA,EACF;AACA,EAAA,OAAO,QAAA;AACT","file":"chunk-JOD5F3DS.mjs","sourcesContent":["// ─────────────────────────────────────────────────────────────────────────────\n// @watchupltd/svelte · context helpers\n// ─────────────────────────────────────────────────────────────────────────────\n\nimport { getContext, setContext } from 'svelte';\nimport type { Watchup } from '@watchupltd/browser';\n\nconst KEY = Symbol('watchup');\n\n/** Called internally by WatchupProvider. */\nexport function _setWatchupContext(instance: Watchup): void {\n setContext(KEY, instance);\n}\n\n/**\n * Returns the `Watchup` instance from the nearest `<WatchupProvider>`.\n * Call this at component initialisation time (not inside event handlers).\n *\n * @example\n * <script>\n * import { getWatchup } from '@watchupltd/svelte';\n * const watchup = getWatchup();\n * </script>\n * <button on:click={() => watchup.track('button.clicked')}>Click me</button>\n */\nexport function getWatchup(): Watchup {\n const instance = getContext<Watchup | undefined>(KEY);\n if (!instance) {\n throw new Error(\n '[watchup] getWatchup() must be called inside a component ' +\n 'that is a descendant of <WatchupProvider>.',\n );\n }\n return instance;\n}\n"]}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { Watchup } from '@watchupltd/browser';
|
|
2
|
+
|
|
3
|
+
/** Called internally by WatchupProvider. */
|
|
4
|
+
declare function _setWatchupContext(instance: Watchup): void;
|
|
5
|
+
/**
|
|
6
|
+
* Returns the `Watchup` instance from the nearest `<WatchupProvider>`.
|
|
7
|
+
* Call this at component initialisation time (not inside event handlers).
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* <script>
|
|
11
|
+
* import { getWatchup } from '@watchupltd/svelte';
|
|
12
|
+
* const watchup = getWatchup();
|
|
13
|
+
* </script>
|
|
14
|
+
* <button on:click={() => watchup.track('button.clicked')}>Click me</button>
|
|
15
|
+
*/
|
|
16
|
+
declare function getWatchup(): Watchup;
|
|
17
|
+
|
|
18
|
+
export { _setWatchupContext, getWatchup };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { Watchup } from '@watchupltd/browser';
|
|
2
|
+
|
|
3
|
+
/** Called internally by WatchupProvider. */
|
|
4
|
+
declare function _setWatchupContext(instance: Watchup): void;
|
|
5
|
+
/**
|
|
6
|
+
* Returns the `Watchup` instance from the nearest `<WatchupProvider>`.
|
|
7
|
+
* Call this at component initialisation time (not inside event handlers).
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* <script>
|
|
11
|
+
* import { getWatchup } from '@watchupltd/svelte';
|
|
12
|
+
* const watchup = getWatchup();
|
|
13
|
+
* </script>
|
|
14
|
+
* <button on:click={() => watchup.track('button.clicked')}>Click me</button>
|
|
15
|
+
*/
|
|
16
|
+
declare function getWatchup(): Watchup;
|
|
17
|
+
|
|
18
|
+
export { _setWatchupContext, getWatchup };
|
package/dist/context.js
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var svelte = require('svelte');
|
|
4
|
+
|
|
5
|
+
// src/context.ts
|
|
6
|
+
var KEY = /* @__PURE__ */ Symbol("watchup");
|
|
7
|
+
function _setWatchupContext(instance) {
|
|
8
|
+
svelte.setContext(KEY, instance);
|
|
9
|
+
}
|
|
10
|
+
function getWatchup() {
|
|
11
|
+
const instance = svelte.getContext(KEY);
|
|
12
|
+
if (!instance) {
|
|
13
|
+
throw new Error(
|
|
14
|
+
"[watchup] getWatchup() must be called inside a component that is a descendant of <WatchupProvider>."
|
|
15
|
+
);
|
|
16
|
+
}
|
|
17
|
+
return instance;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
exports._setWatchupContext = _setWatchupContext;
|
|
21
|
+
exports.getWatchup = getWatchup;
|
|
22
|
+
//# sourceMappingURL=context.js.map
|
|
23
|
+
//# sourceMappingURL=context.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/context.ts"],"names":["setContext","getContext"],"mappings":";;;;;AAOA,IAAM,GAAA,0BAAa,SAAS,CAAA;AAGrB,SAAS,mBAAmB,QAAA,EAAyB;AAC1D,EAAAA,iBAAA,CAAW,KAAK,QAAQ,CAAA;AAC1B;AAaO,SAAS,UAAA,GAAsB;AACpC,EAAA,MAAM,QAAA,GAAWC,kBAAgC,GAAG,CAAA;AACpD,EAAA,IAAI,CAAC,QAAA,EAAU;AACb,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KAEF;AAAA,EACF;AACA,EAAA,OAAO,QAAA;AACT","file":"context.js","sourcesContent":["// ─────────────────────────────────────────────────────────────────────────────\n// @watchupltd/svelte · context helpers\n// ─────────────────────────────────────────────────────────────────────────────\n\nimport { getContext, setContext } from 'svelte';\nimport type { Watchup } from '@watchupltd/browser';\n\nconst KEY = Symbol('watchup');\n\n/** Called internally by WatchupProvider. */\nexport function _setWatchupContext(instance: Watchup): void {\n setContext(KEY, instance);\n}\n\n/**\n * Returns the `Watchup` instance from the nearest `<WatchupProvider>`.\n * Call this at component initialisation time (not inside event handlers).\n *\n * @example\n * <script>\n * import { getWatchup } from '@watchupltd/svelte';\n * const watchup = getWatchup();\n * </script>\n * <button on:click={() => watchup.track('button.clicked')}>Click me</button>\n */\nexport function getWatchup(): Watchup {\n const instance = getContext<Watchup | undefined>(KEY);\n if (!instance) {\n throw new Error(\n '[watchup] getWatchup() must be called inside a component ' +\n 'that is a descendant of <WatchupProvider>.',\n );\n }\n return instance;\n}\n"]}
|
package/dist/context.mjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","file":"context.mjs"}
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
export { getWatchup } from './context.mjs';
|
|
2
|
+
export { traceAction, trackClick } from './action.mjs';
|
|
3
|
+
import { WatchupUser, FlagContext } from '@watchupltd/browser';
|
|
4
|
+
export { ErrorPayload, EventPayload, FeatureFlag, FlagContext, TracePayload, WatchupOptions, WatchupUser } from '@watchupltd/browser';
|
|
5
|
+
import 'svelte/action';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Attach a user to all subsequent errors and traces.
|
|
9
|
+
* Call this after login, inside a Svelte component or store subscription.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* import { identify } from '@watchupltd/svelte';
|
|
13
|
+
* identify({ id: $user.id, email: $user.email, name: $user.name });
|
|
14
|
+
*/
|
|
15
|
+
declare function identify(user: WatchupUser): void;
|
|
16
|
+
/**
|
|
17
|
+
* Remove the current user context (e.g. after logout).
|
|
18
|
+
*
|
|
19
|
+
* @example
|
|
20
|
+
* import { clearUser } from '@watchupltd/svelte';
|
|
21
|
+
* clearUser();
|
|
22
|
+
*/
|
|
23
|
+
declare function clearUser(): void;
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* Check whether a feature flag is enabled for the current visitor/user.
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* import { isFlagEnabled } from '@watchupltd/svelte';
|
|
30
|
+
* {#if isFlagEnabled('new-checkout')}
|
|
31
|
+
* <NewCheckout />
|
|
32
|
+
* {/if}
|
|
33
|
+
*/
|
|
34
|
+
declare function isFlagEnabled(key: string, ctx?: FlagContext): boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Get the variant key for a multivariate (A/B) flag.
|
|
37
|
+
* Returns `"control"` if the flag is off or the visitor isn't in the rollout.
|
|
38
|
+
*
|
|
39
|
+
* @example
|
|
40
|
+
* import { getFlagVariant } from '@watchupltd/svelte';
|
|
41
|
+
* const variant = getFlagVariant('pricing-layout');
|
|
42
|
+
*/
|
|
43
|
+
declare function getFlagVariant(key: string, ctx?: FlagContext): string;
|
|
44
|
+
|
|
45
|
+
export { clearUser, getFlagVariant, identify, isFlagEnabled };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,12 +1,45 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
export {
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
1
|
+
export { getWatchup } from './context.js';
|
|
2
|
+
export { traceAction, trackClick } from './action.js';
|
|
3
|
+
import { WatchupUser, FlagContext } from '@watchupltd/browser';
|
|
4
|
+
export { ErrorPayload, EventPayload, FeatureFlag, FlagContext, TracePayload, WatchupOptions, WatchupUser } from '@watchupltd/browser';
|
|
5
|
+
import 'svelte/action';
|
|
6
|
+
|
|
7
|
+
/**
|
|
8
|
+
* Attach a user to all subsequent errors and traces.
|
|
9
|
+
* Call this after login, inside a Svelte component or store subscription.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* import { identify } from '@watchupltd/svelte';
|
|
13
|
+
* identify({ id: $user.id, email: $user.email, name: $user.name });
|
|
14
|
+
*/
|
|
15
|
+
declare function identify(user: WatchupUser): void;
|
|
16
|
+
/**
|
|
17
|
+
* Remove the current user context (e.g. after logout).
|
|
18
|
+
*
|
|
19
|
+
* @example
|
|
20
|
+
* import { clearUser } from '@watchupltd/svelte';
|
|
21
|
+
* clearUser();
|
|
22
|
+
*/
|
|
23
|
+
declare function clearUser(): void;
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* Check whether a feature flag is enabled for the current visitor/user.
|
|
27
|
+
*
|
|
28
|
+
* @example
|
|
29
|
+
* import { isFlagEnabled } from '@watchupltd/svelte';
|
|
30
|
+
* {#if isFlagEnabled('new-checkout')}
|
|
31
|
+
* <NewCheckout />
|
|
32
|
+
* {/if}
|
|
33
|
+
*/
|
|
34
|
+
declare function isFlagEnabled(key: string, ctx?: FlagContext): boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Get the variant key for a multivariate (A/B) flag.
|
|
37
|
+
* Returns `"control"` if the flag is off or the visitor isn't in the rollout.
|
|
38
|
+
*
|
|
39
|
+
* @example
|
|
40
|
+
* import { getFlagVariant } from '@watchupltd/svelte';
|
|
41
|
+
* const variant = getFlagVariant('pricing-layout');
|
|
42
|
+
*/
|
|
43
|
+
declare function getFlagVariant(key: string, ctx?: FlagContext): string;
|
|
44
|
+
|
|
45
|
+
export { clearUser, getFlagVariant, identify, isFlagEnabled };
|
package/dist/index.js
CHANGED
|
@@ -1,40 +1,79 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var svelte = require('svelte');
|
|
4
|
+
|
|
5
|
+
// src/context.ts
|
|
6
|
+
var KEY = /* @__PURE__ */ Symbol("watchup");
|
|
7
|
+
function getWatchup() {
|
|
8
|
+
const instance = svelte.getContext(KEY);
|
|
9
|
+
if (!instance) {
|
|
10
|
+
throw new Error(
|
|
11
|
+
"[watchup] getWatchup() must be called inside a component that is a descendant of <WatchupProvider>."
|
|
12
|
+
);
|
|
13
|
+
}
|
|
14
|
+
return instance;
|
|
10
15
|
}
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
16
|
+
|
|
17
|
+
// src/action.ts
|
|
18
|
+
var trackClick = (node, params) => {
|
|
19
|
+
let watchup;
|
|
20
|
+
try {
|
|
21
|
+
watchup = getWatchup();
|
|
22
|
+
} catch {
|
|
23
|
+
return {};
|
|
24
|
+
}
|
|
25
|
+
const handler = () => {
|
|
26
|
+
watchup.track(params.event, params.properties);
|
|
27
|
+
};
|
|
28
|
+
node.addEventListener("click", handler);
|
|
29
|
+
return {
|
|
30
|
+
update(newParams) {
|
|
31
|
+
params = newParams;
|
|
32
|
+
},
|
|
33
|
+
destroy() {
|
|
34
|
+
node.removeEventListener("click", handler);
|
|
14
35
|
}
|
|
15
|
-
|
|
36
|
+
};
|
|
37
|
+
};
|
|
38
|
+
var traceAction = (node, params) => {
|
|
39
|
+
let watchup;
|
|
40
|
+
try {
|
|
41
|
+
watchup = getWatchup();
|
|
42
|
+
} catch {
|
|
43
|
+
params.onDone(() => {
|
|
44
|
+
});
|
|
45
|
+
return {};
|
|
46
|
+
}
|
|
47
|
+
const end = watchup.startTrace(params.span);
|
|
48
|
+
params.onDone(() => end({ status: "ok" }));
|
|
49
|
+
return {
|
|
50
|
+
destroy() {
|
|
51
|
+
}
|
|
52
|
+
};
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
// src/identify.ts
|
|
56
|
+
function identify(user) {
|
|
57
|
+
getWatchup().setUser(user);
|
|
16
58
|
}
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
subscribe(run) {
|
|
20
|
-
subscribers.add(run);
|
|
21
|
-
run(client);
|
|
22
|
-
return () => {
|
|
23
|
-
subscribers.delete(run);
|
|
24
|
-
};
|
|
25
|
-
}
|
|
26
|
-
};
|
|
59
|
+
function clearUser() {
|
|
60
|
+
getWatchup().clearUser();
|
|
27
61
|
}
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
void client.captureException(error, {
|
|
33
|
-
service: "svelte",
|
|
34
|
-
metadata
|
|
35
|
-
});
|
|
62
|
+
|
|
63
|
+
// src/flags.ts
|
|
64
|
+
function isFlagEnabled(key, ctx) {
|
|
65
|
+
return getWatchup().isEnabled(key, ctx);
|
|
36
66
|
}
|
|
37
|
-
function
|
|
38
|
-
|
|
67
|
+
function getFlagVariant(key, ctx) {
|
|
68
|
+
return getWatchup().getVariant(key, ctx);
|
|
39
69
|
}
|
|
70
|
+
|
|
71
|
+
exports.clearUser = clearUser;
|
|
72
|
+
exports.getFlagVariant = getFlagVariant;
|
|
73
|
+
exports.getWatchup = getWatchup;
|
|
74
|
+
exports.identify = identify;
|
|
75
|
+
exports.isFlagEnabled = isFlagEnabled;
|
|
76
|
+
exports.traceAction = traceAction;
|
|
77
|
+
exports.trackClick = trackClick;
|
|
78
|
+
//# sourceMappingURL=index.js.map
|
|
40
79
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["../src/context.ts","../src/action.ts","../src/identify.ts","../src/flags.ts"],"names":["getContext"],"mappings":";;;;;AAOA,IAAM,GAAA,0BAAa,SAAS,CAAA;AAkBrB,SAAS,UAAA,GAAsB;AACpC,EAAA,MAAM,QAAA,GAAWA,kBAAgC,GAAG,CAAA;AACpD,EAAA,IAAI,CAAC,QAAA,EAAU;AACb,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KAEF;AAAA,EACF;AACA,EAAA,OAAO,QAAA;AACT;;;ACRO,IAAM,UAAA,GAAoD,CAC/D,IAAA,EACA,MAAA,KACG;AACH,EAAA,IAAI,OAAA;AACJ,EAAA,IAAI;AACF,IAAA,OAAA,GAAU,UAAA,EAAW;AAAA,EACvB,CAAA,CAAA,MAAQ;AAEN,IAAA,OAAO,EAAC;AAAA,EACV;AAEA,EAAA,MAAM,UAAU,MAAM;AACpB,IAAA,OAAA,CAAQ,KAAA,CAAM,MAAA,CAAO,KAAA,EAAO,MAAA,CAAO,UAAU,CAAA;AAAA,EAC/C,CAAA;AAEA,EAAA,IAAA,CAAK,gBAAA,CAAiB,SAAS,OAAO,CAAA;AAEtC,EAAA,OAAO;AAAA,IACL,OAAO,SAAA,EAAW;AAChB,MAAA,MAAA,GAAS,SAAA;AAAA,IACX,CAAA;AAAA,IACA,OAAA,GAAU;AACR,MAAA,IAAA,CAAK,mBAAA,CAAoB,SAAS,OAAO,CAAA;AAAA,IAC3C;AAAA,GACF;AACF;AAsBO,IAAM,WAAA,GAGT,CAAC,IAAA,EAAM,MAAA,KAAW;AACpB,EAAA,IAAI,OAAA;AACJ,EAAA,IAAI;AACF,IAAA,OAAA,GAAU,UAAA,EAAW;AAAA,EACvB,CAAA,CAAA,MAAQ;AACN,IAAA,MAAA,CAAO,OAAO,MAAM;AAAA,IAAC,CAAC,CAAA;AACtB,IAAA,OAAO,EAAC;AAAA,EACV;AAEA,EAAA,MAAM,GAAA,GAAM,OAAA,CAAQ,UAAA,CAAW,MAAA,CAAO,IAAI,CAAA;AAC1C,EAAA,MAAA,CAAO,OAAO,MAAM,GAAA,CAAI,EAAE,MAAA,EAAQ,IAAA,EAAM,CAAC,CAAA;AAEzC,EAAA,OAAO;AAAA,IACL,OAAA,GAAU;AAAA,IAEV;AAAA,GACF;AACF;;;AC/EO,SAAS,SAAS,IAAA,EAAyB;AAChD,EAAA,UAAA,EAAW,CAAE,QAAQ,IAAI,CAAA;AAC3B;AASO,SAAS,SAAA,GAAkB;AAChC,EAAA,UAAA,GAAa,SAAA,EAAU;AACzB;;;ACZO,SAAS,aAAA,CAAc,KAAa,GAAA,EAA4B;AACrE,EAAA,OAAO,UAAA,EAAW,CAAE,SAAA,CAAU,GAAA,EAAK,GAAG,CAAA;AACxC;AAUO,SAAS,cAAA,CAAe,KAAa,GAAA,EAA2B;AACrE,EAAA,OAAO,UAAA,EAAW,CAAE,UAAA,CAAW,GAAA,EAAK,GAAG,CAAA;AACzC","file":"index.js","sourcesContent":["// ─────────────────────────────────────────────────────────────────────────────\n// @watchupltd/svelte · context helpers\n// ─────────────────────────────────────────────────────────────────────────────\n\nimport { getContext, setContext } from 'svelte';\nimport type { Watchup } from '@watchupltd/browser';\n\nconst KEY = Symbol('watchup');\n\n/** Called internally by WatchupProvider. */\nexport function _setWatchupContext(instance: Watchup): void {\n setContext(KEY, instance);\n}\n\n/**\n * Returns the `Watchup` instance from the nearest `<WatchupProvider>`.\n * Call this at component initialisation time (not inside event handlers).\n *\n * @example\n * <script>\n * import { getWatchup } from '@watchupltd/svelte';\n * const watchup = getWatchup();\n * </script>\n * <button on:click={() => watchup.track('button.clicked')}>Click me</button>\n */\nexport function getWatchup(): Watchup {\n const instance = getContext<Watchup | undefined>(KEY);\n if (!instance) {\n throw new Error(\n '[watchup] getWatchup() must be called inside a component ' +\n 'that is a descendant of <WatchupProvider>.',\n );\n }\n return instance;\n}\n","// ─────────────────────────────────────────────────────────────────────────────\n// @watchupltd/svelte · Svelte actions\n// ─────────────────────────────────────────────────────────────────────────────\n\nimport type { Action } from 'svelte/action';\nimport type { Watchup } from '@watchupltd/browser';\nimport { getWatchup } from './context.js';\n\ninterface TrackClickParams {\n /** Event name sent to Watchup. */\n event: string;\n /** Optional properties merged into the event payload. */\n properties?: Record<string, unknown>;\n}\n\n/**\n * Svelte action that tracks a click event.\n *\n * @example\n * <script>\n * import { trackClick } from '@watchupltd/svelte';\n * </script>\n * <button use:trackClick={{ event: 'cta.clicked', properties: { variant: 'A' } }}>\n * Get started\n * </button>\n */\nexport const trackClick: Action<HTMLElement, TrackClickParams> = (\n node,\n params,\n) => {\n let watchup: Watchup;\n try {\n watchup = getWatchup();\n } catch {\n // No provider in tree — silently no-op\n return {};\n }\n\n const handler = () => {\n watchup.track(params.event, params.properties);\n };\n\n node.addEventListener('click', handler);\n\n return {\n update(newParams) {\n params = newParams;\n },\n destroy() {\n node.removeEventListener('click', handler);\n },\n };\n};\n\n/**\n * Svelte action that traces the time between `mount` and when `done()` is\n * called, emitting a trace span.\n *\n * @example\n * <script>\n * import { traceAction } from '@watchupltd/svelte';\n *\n * let done: () => void;\n *\n * async function load() {\n * const data = await fetchData();\n * done?.();\n * return data;\n * }\n * </script>\n * <div use:traceAction={{ span: 'dashboard load', onDone: (fn) => (done = fn) }}>\n * ...\n * </div>\n */\nexport const traceAction: Action<\n HTMLElement,\n { span: string; onDone: (endFn: () => void) => void }\n> = (node, params) => {\n let watchup: Watchup;\n try {\n watchup = getWatchup();\n } catch {\n params.onDone(() => {});\n return {};\n }\n\n const end = watchup.startTrace(params.span);\n params.onDone(() => end({ status: 'ok' }));\n\n return {\n destroy() {\n // If destroyed before done() was called, mark as cancelled\n },\n };\n};\n","// ─────────────────────────────────────────────────────────────────────────────\n// @watchupltd/svelte · user identification helpers\n// ─────────────────────────────────────────────────────────────────────────────\n\nimport type { WatchupUser } from '@watchupltd/browser';\nimport { getWatchup } from './context.js';\n\n/**\n * Attach a user to all subsequent errors and traces.\n * Call this after login, inside a Svelte component or store subscription.\n *\n * @example\n * import { identify } from '@watchupltd/svelte';\n * identify({ id: $user.id, email: $user.email, name: $user.name });\n */\nexport function identify(user: WatchupUser): void {\n getWatchup().setUser(user);\n}\n\n/**\n * Remove the current user context (e.g. after logout).\n *\n * @example\n * import { clearUser } from '@watchupltd/svelte';\n * clearUser();\n */\nexport function clearUser(): void {\n getWatchup().clearUser();\n}\n","// ─────────────────────────────────────────────────────────────────────────────\n// @watchupltd/svelte · feature flag helpers\n// ─────────────────────────────────────────────────────────────────────────────\n\nimport type { FlagContext } from '@watchupltd/browser';\nimport { getWatchup } from './context.js';\n\n/**\n * Check whether a feature flag is enabled for the current visitor/user.\n *\n * @example\n * import { isFlagEnabled } from '@watchupltd/svelte';\n * {#if isFlagEnabled('new-checkout')}\n * <NewCheckout />\n * {/if}\n */\nexport function isFlagEnabled(key: string, ctx?: FlagContext): boolean {\n return getWatchup().isEnabled(key, ctx);\n}\n\n/**\n * Get the variant key for a multivariate (A/B) flag.\n * Returns `\"control\"` if the flag is off or the visitor isn't in the rollout.\n *\n * @example\n * import { getFlagVariant } from '@watchupltd/svelte';\n * const variant = getFlagVariant('pricing-layout');\n */\nexport function getFlagVariant(key: string, ctx?: FlagContext): string {\n return getWatchup().getVariant(key, ctx);\n}\n"]}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
export { traceAction, trackClick } from './chunk-A275SBSC.mjs';
|
|
2
|
+
import { getWatchup } from './chunk-JOD5F3DS.mjs';
|
|
3
|
+
export { getWatchup } from './chunk-JOD5F3DS.mjs';
|
|
4
|
+
|
|
5
|
+
// src/identify.ts
|
|
6
|
+
function identify(user) {
|
|
7
|
+
getWatchup().setUser(user);
|
|
8
|
+
}
|
|
9
|
+
function clearUser() {
|
|
10
|
+
getWatchup().clearUser();
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
// src/flags.ts
|
|
14
|
+
function isFlagEnabled(key, ctx) {
|
|
15
|
+
return getWatchup().isEnabled(key, ctx);
|
|
16
|
+
}
|
|
17
|
+
function getFlagVariant(key, ctx) {
|
|
18
|
+
return getWatchup().getVariant(key, ctx);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export { clearUser, getFlagVariant, identify, isFlagEnabled };
|
|
22
|
+
//# sourceMappingURL=index.mjs.map
|
|
23
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/identify.ts","../src/flags.ts"],"names":[],"mappings":";;;;;AAeO,SAAS,SAAS,IAAA,EAAyB;AAChD,EAAA,UAAA,EAAW,CAAE,QAAQ,IAAI,CAAA;AAC3B;AASO,SAAS,SAAA,GAAkB;AAChC,EAAA,UAAA,GAAa,SAAA,EAAU;AACzB;;;ACZO,SAAS,aAAA,CAAc,KAAa,GAAA,EAA4B;AACrE,EAAA,OAAO,UAAA,EAAW,CAAE,SAAA,CAAU,GAAA,EAAK,GAAG,CAAA;AACxC;AAUO,SAAS,cAAA,CAAe,KAAa,GAAA,EAA2B;AACrE,EAAA,OAAO,UAAA,EAAW,CAAE,UAAA,CAAW,GAAA,EAAK,GAAG,CAAA;AACzC","file":"index.mjs","sourcesContent":["// ─────────────────────────────────────────────────────────────────────────────\n// @watchupltd/svelte · user identification helpers\n// ─────────────────────────────────────────────────────────────────────────────\n\nimport type { WatchupUser } from '@watchupltd/browser';\nimport { getWatchup } from './context.js';\n\n/**\n * Attach a user to all subsequent errors and traces.\n * Call this after login, inside a Svelte component or store subscription.\n *\n * @example\n * import { identify } from '@watchupltd/svelte';\n * identify({ id: $user.id, email: $user.email, name: $user.name });\n */\nexport function identify(user: WatchupUser): void {\n getWatchup().setUser(user);\n}\n\n/**\n * Remove the current user context (e.g. after logout).\n *\n * @example\n * import { clearUser } from '@watchupltd/svelte';\n * clearUser();\n */\nexport function clearUser(): void {\n getWatchup().clearUser();\n}\n","// ─────────────────────────────────────────────────────────────────────────────\n// @watchupltd/svelte · feature flag helpers\n// ─────────────────────────────────────────────────────────────────────────────\n\nimport type { FlagContext } from '@watchupltd/browser';\nimport { getWatchup } from './context.js';\n\n/**\n * Check whether a feature flag is enabled for the current visitor/user.\n *\n * @example\n * import { isFlagEnabled } from '@watchupltd/svelte';\n * {#if isFlagEnabled('new-checkout')}\n * <NewCheckout />\n * {/if}\n */\nexport function isFlagEnabled(key: string, ctx?: FlagContext): boolean {\n return getWatchup().isEnabled(key, ctx);\n}\n\n/**\n * Get the variant key for a multivariate (A/B) flag.\n * Returns `\"control\"` if the flag is off or the visitor isn't in the rollout.\n *\n * @example\n * import { getFlagVariant } from '@watchupltd/svelte';\n * const variant = getFlagVariant('pricing-layout');\n */\nexport function getFlagVariant(key: string, ctx?: FlagContext): string {\n return getWatchup().getVariant(key, ctx);\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,28 +1,41 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@watchupltd/svelte",
|
|
3
|
-
"version": "0.1
|
|
4
|
-
"
|
|
3
|
+
"version": "0.2.1",
|
|
4
|
+
"description": "Official Watchup SDK for Svelte / SvelteKit — provider, context, and actions",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"author": "Watchup Ltd",
|
|
5
7
|
"main": "./dist/index.js",
|
|
8
|
+
"module": "./dist/index.mjs",
|
|
6
9
|
"types": "./dist/index.d.ts",
|
|
7
10
|
"exports": {
|
|
8
11
|
".": {
|
|
9
12
|
"types": "./dist/index.d.ts",
|
|
10
|
-
"
|
|
11
|
-
|
|
13
|
+
"import": "./dist/index.mjs",
|
|
14
|
+
"require": "./dist/index.js"
|
|
15
|
+
},
|
|
16
|
+
"./WatchupProvider.svelte": "./src/WatchupProvider.svelte"
|
|
12
17
|
},
|
|
18
|
+
"files": [
|
|
19
|
+
"dist",
|
|
20
|
+
"src/WatchupProvider.svelte",
|
|
21
|
+
"README.md"
|
|
22
|
+
],
|
|
23
|
+
"sideEffects": [
|
|
24
|
+
"./src/WatchupProvider.svelte"
|
|
25
|
+
],
|
|
13
26
|
"scripts": {
|
|
14
|
-
"build": "
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
"@watchupltd/browser": "0.1.9",
|
|
18
|
-
"@watchupltd/core": "0.1.9"
|
|
27
|
+
"build": "tsup",
|
|
28
|
+
"typecheck": "tsc --noEmit",
|
|
29
|
+
"dev": "tsup --watch"
|
|
19
30
|
},
|
|
20
31
|
"peerDependencies": {
|
|
21
|
-
"
|
|
32
|
+
"@watchupltd/browser": "^0.2.0",
|
|
33
|
+
"svelte": ">=4.0.0"
|
|
22
34
|
},
|
|
23
|
-
"
|
|
24
|
-
"
|
|
25
|
-
|
|
26
|
-
|
|
35
|
+
"devDependencies": {
|
|
36
|
+
"@watchupltd/browser": "*",
|
|
37
|
+
"svelte": "^4.2.18",
|
|
38
|
+
"tsup": "^8.0.2",
|
|
39
|
+
"typescript": "^5.4.5"
|
|
27
40
|
}
|
|
28
41
|
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
// ─────────────────────────────────────────────────────────────────────────
|
|
3
|
+
// @watchupltd/svelte · WatchupProvider
|
|
4
|
+
//
|
|
5
|
+
// Mount this once near the root of your Svelte/SvelteKit app.
|
|
6
|
+
//
|
|
7
|
+
// @example
|
|
8
|
+
// <!-- +layout.svelte -->
|
|
9
|
+
// <script>
|
|
10
|
+
// import { WatchupProvider } from '@watchupltd/svelte';
|
|
11
|
+
// </script>
|
|
12
|
+
// <WatchupProvider apiKey="wup_live_xxx">
|
|
13
|
+
// <slot />
|
|
14
|
+
// </WatchupProvider>
|
|
15
|
+
// ─────────────────────────────────────────────────────────────────────────
|
|
16
|
+
|
|
17
|
+
import { onDestroy } from 'svelte';
|
|
18
|
+
import { Watchup, type WatchupOptions } from '@watchupltd/browser';
|
|
19
|
+
import { _setWatchupContext } from './context.js';
|
|
20
|
+
|
|
21
|
+
export let apiKey: string;
|
|
22
|
+
export let options: Omit<WatchupOptions, 'apiKey'> = {};
|
|
23
|
+
|
|
24
|
+
const instance = new Watchup({ apiKey, ...options });
|
|
25
|
+
_setWatchupContext(instance);
|
|
26
|
+
|
|
27
|
+
onDestroy(() => {
|
|
28
|
+
instance.shutdown();
|
|
29
|
+
});
|
|
30
|
+
</script>
|
|
31
|
+
|
|
32
|
+
<slot />
|
package/dist/index.d.ts.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAC7E,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,cAAc,eAAe,CAAC;AAC9B,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAE9B,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,GAAG,EAAE,CAAC,MAAM,EAAE,aAAa,GAAG,IAAI,KAAK,IAAI,GAAG,MAAM,IAAI,CAAC;CACpE;AAKD,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,qBAAqB,GAAG,aAAa,CAI/E;AAED,wBAAgB,gBAAgB,IAAI,aAAa,CAKhD;AAED,wBAAgB,YAAY,IAAI,oBAAoB,CAUnD;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAQ3F"}
|
package/src/index.ts
DELETED
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { initBrowserWatchUp, BrowserWatchUpOptions } from "@watchup/browser";
|
|
2
|
-
import { WatchUpClient } from "@watchup/core";
|
|
3
|
-
export * from "@watchup/core";
|
|
4
|
-
export { initBrowserWatchUp };
|
|
5
|
-
|
|
6
|
-
export interface ReadableWatchUpStore {
|
|
7
|
-
subscribe(run: (client: WatchUpClient | null) => void): () => void;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
let client: WatchUpClient | null = null;
|
|
11
|
-
const subscribers = new Set<(client: WatchUpClient | null) => void>();
|
|
12
|
-
|
|
13
|
-
export function initSvelteWatchUp(options: BrowserWatchUpOptions): WatchUpClient {
|
|
14
|
-
client = initBrowserWatchUp(options);
|
|
15
|
-
notify();
|
|
16
|
-
return client;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
export function getSvelteWatchUp(): WatchUpClient {
|
|
20
|
-
if (!client) {
|
|
21
|
-
throw new Error("WatchUp Svelte client has not been initialized");
|
|
22
|
-
}
|
|
23
|
-
return client;
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
export function watchUpStore(): ReadableWatchUpStore {
|
|
27
|
-
return {
|
|
28
|
-
subscribe(run) {
|
|
29
|
-
subscribers.add(run);
|
|
30
|
-
run(client);
|
|
31
|
-
return () => {
|
|
32
|
-
subscribers.delete(run);
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
|
-
};
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
export function captureSvelteError(error: unknown, metadata?: Record<string, unknown>): void {
|
|
39
|
-
if (!client) {
|
|
40
|
-
return;
|
|
41
|
-
}
|
|
42
|
-
void client.captureException(error, {
|
|
43
|
-
service: "svelte",
|
|
44
|
-
metadata
|
|
45
|
-
});
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
function notify(): void {
|
|
49
|
-
subscribers.forEach((run) => run(client));
|
|
50
|
-
}
|