@patternfly/chatbot 2.2.0-prerelease.43 → 2.2.0-prerelease.45
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/cjs/SourcesCard/SourcesCard.d.ts +6 -1
- package/dist/cjs/SourcesCard/SourcesCard.js +14 -9
- package/dist/cjs/SourcesCard/SourcesCard.test.js +25 -11
- package/dist/cjs/tracking/console_tracking_provider.d.ts +4 -5
- package/dist/cjs/tracking/console_tracking_provider.js +22 -15
- package/dist/cjs/tracking/posthog_tracking_provider.d.ts +2 -2
- package/dist/cjs/tracking/posthog_tracking_provider.js +21 -12
- package/dist/cjs/tracking/segment_tracking_provider.d.ts +2 -2
- package/dist/cjs/tracking/segment_tracking_provider.js +21 -12
- package/dist/cjs/tracking/trackingProviderProxy.d.ts +1 -1
- package/dist/cjs/tracking/trackingProviderProxy.js +2 -2
- package/dist/cjs/tracking/tracking_api.d.ts +1 -1
- package/dist/cjs/tracking/tracking_registry.js +46 -12
- package/dist/cjs/tracking/tracking_spi.d.ts +15 -5
- package/dist/cjs/tracking/tracking_spi.js +9 -0
- package/dist/cjs/tracking/umami_tracking_provider.d.ts +6 -2
- package/dist/cjs/tracking/umami_tracking_provider.js +66 -22
- package/dist/css/main.css +3 -7
- package/dist/css/main.css.map +1 -1
- package/dist/esm/SourcesCard/SourcesCard.d.ts +6 -1
- package/dist/esm/SourcesCard/SourcesCard.js +15 -10
- package/dist/esm/SourcesCard/SourcesCard.test.js +25 -11
- package/dist/esm/tracking/console_tracking_provider.d.ts +4 -5
- package/dist/esm/tracking/console_tracking_provider.js +22 -15
- package/dist/esm/tracking/posthog_tracking_provider.d.ts +2 -2
- package/dist/esm/tracking/posthog_tracking_provider.js +21 -12
- package/dist/esm/tracking/segment_tracking_provider.d.ts +2 -2
- package/dist/esm/tracking/segment_tracking_provider.js +21 -12
- package/dist/esm/tracking/trackingProviderProxy.d.ts +1 -1
- package/dist/esm/tracking/trackingProviderProxy.js +2 -2
- package/dist/esm/tracking/tracking_api.d.ts +1 -1
- package/dist/esm/tracking/tracking_registry.js +46 -12
- package/dist/esm/tracking/tracking_spi.d.ts +15 -5
- package/dist/esm/tracking/tracking_spi.js +8 -1
- package/dist/esm/tracking/umami_tracking_provider.d.ts +6 -2
- package/dist/esm/tracking/umami_tracking_provider.js +66 -22
- package/package.json +1 -1
- package/patternfly-docs/content/extensions/chatbot/examples/Analytics/Analytics.md +18 -14
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithSources.tsx +34 -5
- package/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md +1 -1
- package/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.tsx +4 -3
- package/src/SourcesCard/SourcesCard.scss +3 -7
- package/src/SourcesCard/SourcesCard.test.tsx +30 -17
- package/src/SourcesCard/SourcesCard.tsx +41 -11
- package/src/tracking/console_tracking_provider.ts +21 -17
- package/src/tracking/posthog_tracking_provider.ts +20 -13
- package/src/tracking/segment_tracking_provider.ts +20 -13
- package/src/tracking/trackingProviderProxy.ts +2 -2
- package/src/tracking/tracking_api.ts +1 -1
- package/src/tracking/tracking_registry.ts +46 -13
- package/src/tracking/tracking_spi.ts +18 -7
- package/src/tracking/umami_tracking_provider.ts +76 -20
@@ -5,7 +5,7 @@ export interface SourcesCardProps extends CardProps {
|
|
5
5
|
className?: string;
|
6
6
|
/** Flag indicating if the pagination is disabled. */
|
7
7
|
isDisabled?: boolean;
|
8
|
-
/** Label for the English word "of"
|
8
|
+
/** @deprecated ofWord has been deprecated. Label for the English word "of." */
|
9
9
|
ofWord?: string;
|
10
10
|
/** Accessible label for the pagination component. */
|
11
11
|
paginationAriaLabel?: string;
|
@@ -15,6 +15,7 @@ export interface SourcesCardProps extends CardProps {
|
|
15
15
|
link: string;
|
16
16
|
body?: React.ReactNode | string;
|
17
17
|
isExternal?: boolean;
|
18
|
+
hasShowMore?: boolean;
|
18
19
|
}[];
|
19
20
|
/** Label for the English word "source" */
|
20
21
|
sourceWord?: string;
|
@@ -30,6 +31,10 @@ export interface SourcesCardProps extends CardProps {
|
|
30
31
|
onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void;
|
31
32
|
/** Function called when page is changed. */
|
32
33
|
onSetPage?: (event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => void;
|
34
|
+
/** Label for English words "show more" */
|
35
|
+
showMoreWords?: string;
|
36
|
+
/** Label for English words "show less" */
|
37
|
+
showLessWords?: string;
|
33
38
|
}
|
34
39
|
declare const SourcesCard: React.FunctionComponent<SourcesCardProps>;
|
35
40
|
export default SourcesCard;
|
@@ -22,8 +22,12 @@ const react_1 = __importDefault(require("react"));
|
|
22
22
|
const react_core_1 = require("@patternfly/react-core");
|
23
23
|
const react_icons_1 = require("@patternfly/react-icons");
|
24
24
|
const SourcesCard = (_a) => {
|
25
|
-
var { className, isDisabled,
|
25
|
+
var { className, isDisabled, paginationAriaLabel = 'Pagination', sources, sourceWord = 'source', sourceWordPlural = 'sources', toNextPageAriaLabel = 'Go to next page', toPreviousPageAriaLabel = 'Go to previous page', onNextClick, onPreviousClick, onSetPage, showMoreWords = 'show more', showLessWords = 'show less' } = _a, props = __rest(_a, ["className", "isDisabled", "paginationAriaLabel", "sources", "sourceWord", "sourceWordPlural", "toNextPageAriaLabel", "toPreviousPageAriaLabel", "onNextClick", "onPreviousClick", "onSetPage", "showMoreWords", "showLessWords"]);
|
26
26
|
const [page, setPage] = react_1.default.useState(1);
|
27
|
+
const [isExpanded, setIsExpanded] = react_1.default.useState(false);
|
28
|
+
const onToggle = (_event, isExpanded) => {
|
29
|
+
setIsExpanded(isExpanded);
|
30
|
+
};
|
27
31
|
const handleNewPage = (_evt, newPage) => {
|
28
32
|
setPage(newPage);
|
29
33
|
onSetPage && onSetPage(_evt, newPage);
|
@@ -39,7 +43,10 @@ const SourcesCard = (_a) => {
|
|
39
43
|
react_1.default.createElement(react_core_1.Card, Object.assign({ className: "pf-chatbot__sources-card" }, props),
|
40
44
|
react_1.default.createElement(react_core_1.CardTitle, { className: "pf-chatbot__sources-card-title" },
|
41
45
|
react_1.default.createElement(react_core_1.Button, { component: "a", variant: react_core_1.ButtonVariant.link, href: sources[page - 1].link, icon: sources[page - 1].isExternal ? react_1.default.createElement(react_icons_1.ExternalLinkSquareAltIcon, null) : undefined, iconPosition: "end", isInline: true, rel: sources[page - 1].isExternal ? 'noreferrer' : undefined, target: sources[page - 1].isExternal ? '_blank' : undefined }, renderTitle(sources[page - 1].title))),
|
42
|
-
sources[page - 1].body && (react_1.default.createElement(react_core_1.CardBody, { className: `pf-chatbot__sources-card-body
|
46
|
+
sources[page - 1].body && (react_1.default.createElement(react_core_1.CardBody, { className: `pf-chatbot__sources-card-body` }, sources[page - 1].hasShowMore ? (
|
47
|
+
// prevents extra VO announcements of button text - parent Message has aria-live
|
48
|
+
react_1.default.createElement("div", { "aria-live": "off" },
|
49
|
+
react_1.default.createElement(react_core_1.ExpandableSection, { variant: react_core_1.ExpandableSectionVariant.truncate, toggleText: isExpanded ? showLessWords : showMoreWords, onToggle: onToggle, isExpanded: isExpanded, truncateMaxLines: 2 }, sources[page - 1].body))) : (react_1.default.createElement("div", { className: "pf-chatbot__sources-card-body-text" }, sources[page - 1].body)))),
|
43
50
|
sources.length > 1 && (react_1.default.createElement(react_core_1.CardFooter, { className: "pf-chatbot__sources-card-footer-container" },
|
44
51
|
react_1.default.createElement("div", { className: "pf-chatbot__sources-card-footer" },
|
45
52
|
react_1.default.createElement("nav", { className: `pf-chatbot__sources-card-footer-buttons ${className}`, "aria-label": paginationAriaLabel },
|
@@ -51,6 +58,10 @@ const SourcesCard = (_a) => {
|
|
51
58
|
react_1.default.createElement(react_core_1.Icon, { iconSize: "lg" },
|
52
59
|
react_1.default.createElement("svg", { className: "pf-v6-svg", viewBox: "0 0 280 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em" },
|
53
60
|
react_1.default.createElement("path", { d: "M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z" })))),
|
61
|
+
react_1.default.createElement("span", { "aria-hidden": "true" },
|
62
|
+
page,
|
63
|
+
"/",
|
64
|
+
sources.length),
|
54
65
|
react_1.default.createElement(react_core_1.Button, { variant: react_core_1.ButtonVariant.plain, isDisabled: isDisabled || page === sources.length, "aria-label": toNextPageAriaLabel, "data-action": "next", onClick: (event) => {
|
55
66
|
const newPage = page + 1 <= sources.length ? page + 1 : sources.length;
|
56
67
|
onNextClick && onNextClick(event, newPage);
|
@@ -58,12 +69,6 @@ const SourcesCard = (_a) => {
|
|
58
69
|
} },
|
59
70
|
react_1.default.createElement(react_core_1.Icon, { isInline: true, iconSize: "lg" },
|
60
71
|
react_1.default.createElement("svg", { className: "pf-v6-svg", viewBox: "0 0 180 500", fill: "currentColor", "aria-hidden": "true", role: "img", width: "1em", height: "1em" },
|
61
|
-
react_1.default.createElement("path", { d: "M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" })))))
|
62
|
-
react_1.default.createElement("span", { "aria-hidden": "true" },
|
63
|
-
page,
|
64
|
-
" ",
|
65
|
-
ofWord,
|
66
|
-
" ",
|
67
|
-
sources.length)))))));
|
72
|
+
react_1.default.createElement("path", { d: "M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z" })))))))))));
|
68
73
|
};
|
69
74
|
exports.default = SourcesCard;
|
@@ -24,7 +24,7 @@ describe('SourcesCard', () => {
|
|
24
24
|
expect(react_2.screen.getByText('Source 1')).toBeTruthy();
|
25
25
|
// no buttons or navigation when there is only 1 source
|
26
26
|
expect(react_2.screen.queryByRole('button')).toBeFalsy();
|
27
|
-
expect(react_2.screen.queryByText('1
|
27
|
+
expect(react_2.screen.queryByText('1/1')).toBeFalsy();
|
28
28
|
});
|
29
29
|
it('should render card correctly if one source with a title is passed in', () => {
|
30
30
|
(0, react_2.render)(react_1.default.createElement(SourcesCard_1.default, { sources: [{ title: 'How to make an apple pie', link: '' }] }));
|
@@ -49,7 +49,7 @@ describe('SourcesCard', () => {
|
|
49
49
|
] }));
|
50
50
|
expect(react_2.screen.getByText('2 sources')).toBeTruthy();
|
51
51
|
expect(react_2.screen.getByText('How to make an apple pie')).toBeTruthy();
|
52
|
-
expect(react_2.screen.getByText('1
|
52
|
+
expect(react_2.screen.getByText('1/2')).toBeTruthy();
|
53
53
|
react_2.screen.getByRole('button', { name: /Go to previous page/i });
|
54
54
|
react_2.screen.getByRole('button', { name: /Go to next page/i });
|
55
55
|
});
|
@@ -59,12 +59,12 @@ describe('SourcesCard', () => {
|
|
59
59
|
{ title: 'How to make cookies', link: '' }
|
60
60
|
] }));
|
61
61
|
expect(react_2.screen.getByText('How to make an apple pie')).toBeTruthy();
|
62
|
-
expect(react_2.screen.getByText('1
|
62
|
+
expect(react_2.screen.getByText('1/2')).toBeTruthy();
|
63
63
|
expect(react_2.screen.getByRole('button', { name: /Go to previous page/i })).toBeDisabled();
|
64
64
|
yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Go to next page/i }));
|
65
65
|
expect(react_2.screen.queryByText('How to make an apple pie')).toBeFalsy();
|
66
66
|
expect(react_2.screen.getByText('How to make cookies')).toBeTruthy();
|
67
|
-
expect(react_2.screen.getByText('2
|
67
|
+
expect(react_2.screen.getByText('2/2')).toBeTruthy();
|
68
68
|
expect(react_2.screen.getByRole('button', { name: /Go to previous page/i })).toBeEnabled();
|
69
69
|
expect(react_2.screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled();
|
70
70
|
}));
|
@@ -84,13 +84,6 @@ describe('SourcesCard', () => {
|
|
84
84
|
expect(react_2.screen.getByRole('button', { name: /Go to previous page/i })).toBeDisabled();
|
85
85
|
expect(react_2.screen.getByRole('button', { name: /Go to next page/i })).toBeDisabled();
|
86
86
|
});
|
87
|
-
it('should change ofWord appropriately', () => {
|
88
|
-
(0, react_2.render)(react_1.default.createElement(SourcesCard_1.default, { sources: [
|
89
|
-
{ title: 'How to make an apple pie', link: '' },
|
90
|
-
{ title: 'How to make cookies', link: '' }
|
91
|
-
], ofWord: 'de' }));
|
92
|
-
expect(react_2.screen.getByText('1 de 2')).toBeTruthy();
|
93
|
-
});
|
94
87
|
it('should render navigation aria label appropriately', () => {
|
95
88
|
(0, react_2.render)(react_1.default.createElement(SourcesCard_1.default, { sources: [
|
96
89
|
{ title: 'How to make an apple pie', link: '' },
|
@@ -160,4 +153,25 @@ describe('SourcesCard', () => {
|
|
160
153
|
yield user_event_1.default.click(react_2.screen.getByRole('button', { name: /Go to previous page/i }));
|
161
154
|
expect(spy).toHaveBeenCalledTimes(2);
|
162
155
|
}));
|
156
|
+
it('should handle showMore appropriately', () => __awaiter(void 0, void 0, void 0, function* () {
|
157
|
+
(0, react_2.render)(react_1.default.createElement(SourcesCard_1.default, { sources: [
|
158
|
+
{
|
159
|
+
title: 'Getting started with Red Hat OpenShift',
|
160
|
+
link: '#',
|
161
|
+
body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud ...',
|
162
|
+
hasShowMore: true
|
163
|
+
},
|
164
|
+
{
|
165
|
+
title: 'Azure Red Hat OpenShift documentation',
|
166
|
+
link: '#',
|
167
|
+
body: 'Microsoft Azure Red Hat OpenShift allows you to deploy a production ready Red Hat OpenShift cluster in Azure ...'
|
168
|
+
},
|
169
|
+
{
|
170
|
+
title: 'OKD Documentation: Home',
|
171
|
+
link: '#',
|
172
|
+
body: 'OKD is a distribution of Kubernetes optimized for continuous application development and multi-tenant deployment. OKD also serves as the upstream code base upon ...'
|
173
|
+
}
|
174
|
+
] }));
|
175
|
+
expect(react_2.screen.getByRole('region')).toHaveAttribute('class', 'pf-v6-c-expandable-section__content');
|
176
|
+
}));
|
163
177
|
});
|
@@ -1,10 +1,9 @@
|
|
1
|
-
import { TrackingSpi } from './tracking_spi';
|
1
|
+
import { InitProps, TrackingSpi } from './tracking_spi';
|
2
2
|
import { TrackingApi, TrackingEventProperties } from './tracking_api';
|
3
3
|
export declare class ConsoleTrackingProvider implements TrackingSpi, TrackingApi {
|
4
|
+
private verbose;
|
4
5
|
trackPageView(url: string | undefined): void;
|
5
|
-
|
6
|
-
|
7
|
-
identify(userID: string): void;
|
6
|
+
initialize(props: InitProps): void;
|
7
|
+
identify(userID: string, userProperties?: TrackingEventProperties): void;
|
8
8
|
trackSingleItem(item: string, properties?: TrackingEventProperties): void;
|
9
|
-
getKey(): string;
|
10
9
|
}
|
@@ -2,26 +2,33 @@
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
3
3
|
exports.ConsoleTrackingProvider = void 0;
|
4
4
|
class ConsoleTrackingProvider {
|
5
|
+
constructor() {
|
6
|
+
this.verbose = false;
|
7
|
+
}
|
5
8
|
trackPageView(url) {
|
6
|
-
|
7
|
-
|
9
|
+
if (this.verbose) {
|
10
|
+
// eslint-disable-next-line no-console
|
11
|
+
console.log('ConsoleProvider pageView ', url);
|
12
|
+
}
|
8
13
|
}
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
+
initialize(props) {
|
15
|
+
this.verbose = props.verbose;
|
16
|
+
if (this.verbose) {
|
17
|
+
// eslint-disable-next-line no-console
|
18
|
+
console.log('ConsoleProvider initialize');
|
19
|
+
}
|
14
20
|
}
|
15
|
-
identify(userID) {
|
16
|
-
|
17
|
-
|
21
|
+
identify(userID, userProperties = {}) {
|
22
|
+
if (this.verbose) {
|
23
|
+
// eslint-disable-next-line no-console
|
24
|
+
console.log('ConsoleProvider identify ', userID, userProperties);
|
25
|
+
}
|
18
26
|
}
|
19
27
|
trackSingleItem(item, properties) {
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
return 'console';
|
28
|
+
if (this.verbose) {
|
29
|
+
// eslint-disable-next-line no-console
|
30
|
+
console.log('ConsoleProvider: ' + item, properties);
|
31
|
+
}
|
25
32
|
}
|
26
33
|
}
|
27
34
|
exports.ConsoleTrackingProvider = ConsoleTrackingProvider;
|
@@ -1,9 +1,9 @@
|
|
1
1
|
import { TrackingApi, TrackingEventProperties } from './tracking_api';
|
2
2
|
import { InitProps, TrackingSpi } from './tracking_spi';
|
3
3
|
export declare class PosthogTrackingProvider implements TrackingSpi, TrackingApi {
|
4
|
-
|
4
|
+
private verbose;
|
5
5
|
initialize(props: InitProps): void;
|
6
|
-
identify(userID: string): void;
|
6
|
+
identify(userID: string, userProperties?: TrackingEventProperties): void;
|
7
7
|
trackPageView(url: string | undefined): void;
|
8
8
|
trackSingleItem(item: string, properties?: TrackingEventProperties): void;
|
9
9
|
}
|
@@ -3,12 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.PosthogTrackingProvider = void 0;
|
4
4
|
const posthog_js_1 = require("posthog-js");
|
5
5
|
class PosthogTrackingProvider {
|
6
|
-
|
7
|
-
|
6
|
+
constructor() {
|
7
|
+
this.verbose = false;
|
8
8
|
}
|
9
9
|
initialize(props) {
|
10
|
-
|
11
|
-
|
10
|
+
this.verbose = props.verbose;
|
11
|
+
if (this.verbose) {
|
12
|
+
// eslint-disable-next-line no-console
|
13
|
+
console.log('PosthogProvider initialize');
|
14
|
+
}
|
12
15
|
const posthogKey = props.posthogKey;
|
13
16
|
posthog_js_1.posthog.init(posthogKey, {
|
14
17
|
// eslint-disable-next-line camelcase
|
@@ -17,20 +20,26 @@ class PosthogTrackingProvider {
|
|
17
20
|
person_profiles: 'identified_only' // or 'always' to create profiles for anonymous users as well
|
18
21
|
});
|
19
22
|
}
|
20
|
-
identify(userID) {
|
21
|
-
|
22
|
-
|
23
|
-
|
23
|
+
identify(userID, userProperties = {}) {
|
24
|
+
if (this.verbose) {
|
25
|
+
// eslint-disable-next-line no-console
|
26
|
+
console.log('PosthogProvider userID: ' + userID);
|
27
|
+
}
|
28
|
+
posthog_js_1.posthog.identify(userID, userProperties);
|
24
29
|
}
|
25
30
|
trackPageView(url) {
|
26
|
-
|
27
|
-
|
31
|
+
if (this.verbose) {
|
32
|
+
// eslint-disable-next-line no-console
|
33
|
+
console.log('PostHogProvider url ', url);
|
34
|
+
}
|
28
35
|
// TODO posthog seems to record that automatically.
|
29
36
|
// How to not clash with this here? Just leave as no-op?
|
30
37
|
}
|
31
38
|
trackSingleItem(item, properties) {
|
32
|
-
|
33
|
-
|
39
|
+
if (this.verbose) {
|
40
|
+
// eslint-disable-next-line no-console
|
41
|
+
console.log('PosthogProvider: trackSingleItem ' + item, properties);
|
42
|
+
}
|
34
43
|
posthog_js_1.posthog.capture(item, { properties });
|
35
44
|
}
|
36
45
|
}
|
@@ -2,9 +2,9 @@ import { TrackingApi, TrackingEventProperties } from './tracking_api';
|
|
2
2
|
import { InitProps, TrackingSpi } from './tracking_spi';
|
3
3
|
export declare class SegmentTrackingProvider implements TrackingSpi, TrackingApi {
|
4
4
|
private analytics;
|
5
|
-
|
5
|
+
private verbose;
|
6
6
|
initialize(props: InitProps): void;
|
7
|
-
identify(userID: string): void;
|
7
|
+
identify(userID: string, userProperties?: TrackingEventProperties): void;
|
8
8
|
trackPageView(url: string | undefined): void;
|
9
9
|
trackSingleItem(item: string, properties?: TrackingEventProperties): void;
|
10
10
|
}
|
@@ -3,12 +3,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
exports.SegmentTrackingProvider = void 0;
|
4
4
|
const analytics_next_1 = require("@segment/analytics-next");
|
5
5
|
class SegmentTrackingProvider {
|
6
|
-
|
7
|
-
|
6
|
+
constructor() {
|
7
|
+
this.verbose = false;
|
8
8
|
}
|
9
9
|
initialize(props) {
|
10
|
-
|
11
|
-
|
10
|
+
this.verbose = props.verbose;
|
11
|
+
if (this.verbose) {
|
12
|
+
// eslint-disable-next-line no-console
|
13
|
+
console.log('SegmentProvider initialize');
|
14
|
+
}
|
12
15
|
const segmentKey = props.segmentKey;
|
13
16
|
// We need to create an object here, as ts lint is unhappy otherwise
|
14
17
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
@@ -20,16 +23,20 @@ class SegmentTrackingProvider {
|
|
20
23
|
integrations: Object.assign({}, integrations)
|
21
24
|
});
|
22
25
|
}
|
23
|
-
identify(userID) {
|
24
|
-
|
25
|
-
|
26
|
+
identify(userID, userProperties = {}) {
|
27
|
+
if (this.verbose) {
|
28
|
+
// eslint-disable-next-line no-console
|
29
|
+
console.log('SegmentProvider userID: ' + userID);
|
30
|
+
}
|
26
31
|
if (this.analytics) {
|
27
|
-
this.analytics.identify(userID);
|
32
|
+
this.analytics.identify(userID, userProperties);
|
28
33
|
}
|
29
34
|
}
|
30
35
|
trackPageView(url) {
|
31
|
-
|
32
|
-
|
36
|
+
if (this.verbose) {
|
37
|
+
// eslint-disable-next-line no-console
|
38
|
+
console.log('SegmentProvider url ', url);
|
39
|
+
}
|
33
40
|
if (this.analytics) {
|
34
41
|
if (url) {
|
35
42
|
this.analytics.page(url);
|
@@ -40,8 +47,10 @@ class SegmentTrackingProvider {
|
|
40
47
|
}
|
41
48
|
}
|
42
49
|
trackSingleItem(item, properties) {
|
43
|
-
|
44
|
-
|
50
|
+
if (this.verbose) {
|
51
|
+
// eslint-disable-next-line no-console
|
52
|
+
console.log('SegmentProvider: trackSingleItem ' + item, properties);
|
53
|
+
}
|
45
54
|
if (this.analytics) {
|
46
55
|
this.analytics.track(item, { properties });
|
47
56
|
}
|
@@ -2,7 +2,7 @@ import { TrackingApi, TrackingEventProperties } from './tracking_api';
|
|
2
2
|
declare class TrackingProviderProxy implements TrackingApi {
|
3
3
|
providers: TrackingApi[];
|
4
4
|
constructor(providers: TrackingApi[]);
|
5
|
-
identify(userID: string): void;
|
5
|
+
identify(userID: string, userProperties?: TrackingEventProperties): void;
|
6
6
|
trackSingleItem(eventName: string, properties?: TrackingEventProperties): void;
|
7
7
|
trackPageView(url: string | undefined): void;
|
8
8
|
}
|
@@ -5,9 +5,9 @@ class TrackingProviderProxy {
|
|
5
5
|
this.providers = [];
|
6
6
|
this.providers = providers;
|
7
7
|
}
|
8
|
-
identify(userID) {
|
8
|
+
identify(userID, userProperties = {}) {
|
9
9
|
for (const provider of this.providers) {
|
10
|
-
provider.identify(userID);
|
10
|
+
provider.identify(userID, userProperties);
|
11
11
|
}
|
12
12
|
}
|
13
13
|
trackSingleItem(eventName, properties) {
|
@@ -2,7 +2,7 @@ export interface TrackingEventProperties {
|
|
2
2
|
[key: string]: string | number | boolean | undefined;
|
3
3
|
}
|
4
4
|
export interface TrackingApi {
|
5
|
-
identify: (userID: string) => void;
|
5
|
+
identify: (userID: string, userProperties: TrackingEventProperties) => void;
|
6
6
|
trackPageView: (url: string | undefined) => void;
|
7
7
|
trackSingleItem: (eventName: string, properties: TrackingEventProperties | undefined) => void;
|
8
8
|
}
|
@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4
4
|
};
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
6
6
|
exports.getTrackingProviders = void 0;
|
7
|
+
const tracking_spi_1 = require("./tracking_spi");
|
7
8
|
const trackingProviderProxy_1 = __importDefault(require("./trackingProviderProxy"));
|
8
9
|
const console_tracking_provider_1 = require("./console_tracking_provider");
|
9
10
|
const segment_tracking_provider_1 = require("./segment_tracking_provider");
|
@@ -11,23 +12,56 @@ const posthog_tracking_provider_1 = require("./posthog_tracking_provider");
|
|
11
12
|
const umami_tracking_provider_1 = require("./umami_tracking_provider");
|
12
13
|
const getTrackingProviders = (initProps) => {
|
13
14
|
const providers = [];
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
15
|
+
if (initProps.activeProviders) {
|
16
|
+
let tmpProps = initProps.activeProviders;
|
17
|
+
// Theoretically we get an array of provider names, but it could also be a CSV string...
|
18
|
+
if (!Array.isArray(initProps.activeProviders)) {
|
19
|
+
const tmpString = initProps.activeProviders;
|
20
|
+
if (tmpString && tmpString.indexOf(',') !== -1) {
|
21
|
+
tmpProps = tmpString.split(',');
|
22
|
+
}
|
23
|
+
else {
|
24
|
+
tmpProps = [tmpString];
|
25
|
+
}
|
26
|
+
}
|
27
|
+
tmpProps.forEach((provider) => {
|
28
|
+
switch (tracking_spi_1.Providers[provider]) {
|
29
|
+
case tracking_spi_1.Providers.Segment:
|
30
|
+
providers.push(new segment_tracking_provider_1.SegmentTrackingProvider());
|
31
|
+
break;
|
32
|
+
case tracking_spi_1.Providers.Umami:
|
33
|
+
providers.push(new umami_tracking_provider_1.UmamiTrackingProvider());
|
34
|
+
break;
|
35
|
+
case tracking_spi_1.Providers.Posthog:
|
36
|
+
providers.push(new posthog_tracking_provider_1.PosthogTrackingProvider());
|
37
|
+
break;
|
38
|
+
case tracking_spi_1.Providers.Console:
|
39
|
+
providers.push(new console_tracking_provider_1.ConsoleTrackingProvider());
|
40
|
+
break;
|
41
|
+
case tracking_spi_1.Providers.None: // Do nothing, just a placeholder
|
42
|
+
break;
|
43
|
+
default:
|
44
|
+
if (providers.length > 1) {
|
45
|
+
if (initProps.verbose) {
|
46
|
+
// eslint-disable-next-line no-console
|
47
|
+
console.error("Unknown provider '" + provider);
|
48
|
+
}
|
49
|
+
}
|
50
|
+
break;
|
51
|
+
}
|
52
|
+
});
|
53
|
+
}
|
18
54
|
// Initialize them
|
19
|
-
const enabledProviders = [];
|
20
55
|
for (const provider of providers) {
|
21
|
-
|
22
|
-
if (Object.keys(initProps).indexOf(key) > -1) {
|
56
|
+
try {
|
23
57
|
provider.initialize(initProps);
|
24
|
-
|
58
|
+
}
|
59
|
+
catch (e) {
|
60
|
+
// eslint-disable-next-line no-console
|
61
|
+
console.error(e);
|
25
62
|
}
|
26
63
|
}
|
27
|
-
|
28
|
-
const consoleTrackingProvider = new console_tracking_provider_1.ConsoleTrackingProvider();
|
29
|
-
enabledProviders.push(consoleTrackingProvider); // TODO noop- provider?
|
30
|
-
return new trackingProviderProxy_1.default(enabledProviders);
|
64
|
+
return new trackingProviderProxy_1.default(providers);
|
31
65
|
};
|
32
66
|
exports.getTrackingProviders = getTrackingProviders;
|
33
67
|
exports.default = exports.getTrackingProviders;
|
@@ -1,9 +1,19 @@
|
|
1
|
-
import { TrackingApi
|
2
|
-
export
|
3
|
-
|
1
|
+
import { TrackingApi } from './tracking_api';
|
2
|
+
export declare enum Providers {
|
3
|
+
None = 0,
|
4
|
+
Segment = 1,
|
5
|
+
Umami = 2,
|
6
|
+
Posthog = 3,
|
7
|
+
Console = 4
|
8
|
+
}
|
9
|
+
export type ProviderAsString = keyof typeof Providers;
|
10
|
+
export interface BaseProps {
|
11
|
+
verbose: boolean;
|
12
|
+
activeProviders: [ProviderAsString];
|
4
13
|
}
|
14
|
+
export type InitProps = {
|
15
|
+
[key: string]: string | number | boolean;
|
16
|
+
} & BaseProps;
|
5
17
|
export interface TrackingSpi extends TrackingApi {
|
6
|
-
getKey: () => string;
|
7
18
|
initialize: (props: InitProps) => void;
|
8
|
-
trackSingleItem: (item: string, properties?: TrackingEventProperties) => void;
|
9
19
|
}
|
@@ -1,2 +1,11 @@
|
|
1
1
|
"use strict";
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
3
|
+
exports.Providers = void 0;
|
4
|
+
var Providers;
|
5
|
+
(function (Providers) {
|
6
|
+
Providers[Providers["None"] = 0] = "None";
|
7
|
+
Providers[Providers["Segment"] = 1] = "Segment";
|
8
|
+
Providers[Providers["Umami"] = 2] = "Umami";
|
9
|
+
Providers[Providers["Posthog"] = 3] = "Posthog";
|
10
|
+
Providers[Providers["Console"] = 4] = "Console";
|
11
|
+
})(Providers || (exports.Providers = Providers = {}));
|
@@ -6,9 +6,13 @@ declare global {
|
|
6
6
|
}
|
7
7
|
}
|
8
8
|
export declare class UmamiTrackingProvider implements TrackingSpi, TrackingApi {
|
9
|
-
|
9
|
+
private verbose;
|
10
|
+
private websiteId;
|
11
|
+
private queue;
|
10
12
|
initialize(props: InitProps): void;
|
11
|
-
identify(userID: string): void;
|
13
|
+
identify(userID: string, userProperties?: TrackingEventProperties): void;
|
12
14
|
trackPageView(url: string | undefined): void;
|
13
15
|
trackSingleItem(item: string, properties?: TrackingEventProperties): void;
|
16
|
+
flushQueue(): void;
|
17
|
+
log(msg: string): void;
|
14
18
|
}
|
@@ -2,43 +2,87 @@
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
3
3
|
exports.UmamiTrackingProvider = void 0;
|
4
4
|
class UmamiTrackingProvider {
|
5
|
-
|
6
|
-
|
5
|
+
constructor() {
|
6
|
+
this.verbose = false;
|
7
|
+
this.queue = [];
|
7
8
|
}
|
8
9
|
initialize(props) {
|
9
|
-
|
10
|
-
|
11
|
-
|
10
|
+
this.verbose = props.verbose;
|
11
|
+
this.log('UmamiProvider initialize');
|
12
|
+
this.websiteId = props.umamiKey;
|
12
13
|
const hostUrl = props.umamiHostUrl;
|
13
14
|
const script = document.createElement('script');
|
14
15
|
script.src = hostUrl + '/script.js';
|
15
16
|
script.async = true;
|
16
17
|
script.defer = true;
|
17
18
|
// Configure Umami properties
|
18
|
-
script.setAttribute('data-website-id',
|
19
|
-
script.setAttribute('data-
|
19
|
+
script.setAttribute('data-website-id', this.websiteId);
|
20
|
+
script.setAttribute('data-host-url', hostUrl);
|
20
21
|
script.setAttribute('data-auto-track', 'false');
|
21
|
-
script.setAttribute('data-
|
22
|
-
|
22
|
+
script.setAttribute('data-exclude-search', 'false');
|
23
|
+
// Now get from config, which may override some of the above.
|
24
|
+
const UMAMI_PREFIX = 'umami-';
|
25
|
+
for (const prop in props) {
|
26
|
+
if (prop.startsWith(UMAMI_PREFIX)) {
|
27
|
+
const att = 'data-' + prop.substring(UMAMI_PREFIX.length);
|
28
|
+
const val = props[prop];
|
29
|
+
script.setAttribute(att, String(val));
|
30
|
+
}
|
31
|
+
}
|
32
|
+
script.onload = () => {
|
33
|
+
this.log('UmamiProvider script loaded');
|
34
|
+
this.flushQueue();
|
35
|
+
};
|
23
36
|
document.body.appendChild(script);
|
24
37
|
}
|
25
|
-
identify(userID) {
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
38
|
+
identify(userID, userProperties = {}) {
|
39
|
+
this.log('UmamiProvider userID: ' + userID + ' => ' + JSON.stringify(userProperties));
|
40
|
+
if (window.umami) {
|
41
|
+
window.umami.identify({ userID, userProperties });
|
42
|
+
}
|
43
|
+
else {
|
44
|
+
this.queue.push({ what: 'i', name: userID, payload: userProperties });
|
45
|
+
}
|
30
46
|
}
|
31
47
|
trackPageView(url) {
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
48
|
+
this.log('UmamiProvider url ' + url);
|
49
|
+
if (window.umami) {
|
50
|
+
window.umami.track({ url, website: this.websiteId });
|
51
|
+
}
|
52
|
+
else {
|
53
|
+
this.queue.push({ what: 'p', name: String(url) });
|
54
|
+
}
|
36
55
|
}
|
37
56
|
trackSingleItem(item, properties) {
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
57
|
+
this.log('UmamiProvider: trackSingleItem ' + item + JSON.stringify(properties));
|
58
|
+
if (window.umami) {
|
59
|
+
window.umami.track(item, properties);
|
60
|
+
}
|
61
|
+
else {
|
62
|
+
this.queue.push({ what: 't', name: item, payload: properties });
|
63
|
+
}
|
64
|
+
}
|
65
|
+
flushQueue() {
|
66
|
+
for (const item of this.queue) {
|
67
|
+
this.log('Queue flush ' + JSON.stringify(item));
|
68
|
+
switch (item.what) {
|
69
|
+
case 'i':
|
70
|
+
this.identify(item.name, item.payload);
|
71
|
+
break;
|
72
|
+
case 't':
|
73
|
+
this.trackSingleItem(item.name, item.payload);
|
74
|
+
break;
|
75
|
+
case 'p':
|
76
|
+
this.trackPageView(item.name);
|
77
|
+
break;
|
78
|
+
}
|
79
|
+
}
|
80
|
+
}
|
81
|
+
log(msg) {
|
82
|
+
if (this.verbose) {
|
83
|
+
// eslint-disable-next-line no-console
|
84
|
+
console.debug('UmamiProvider: ', msg);
|
85
|
+
}
|
42
86
|
}
|
43
87
|
}
|
44
88
|
exports.UmamiTrackingProvider = UmamiTrackingProvider;
|