@nemme/js-sdk 0.2.0 → 0.2.2
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/README.md +114 -3
- package/dist/browser.d.ts +9 -3
- package/dist/index.cjs +5 -47
- package/dist/index.cjs.map +1 -1
- package/dist/index.esm.js +1801 -2984
- package/dist/index.esm.js.map +1 -1
- package/dist/nemme-sdk.umd.js +5 -47
- package/dist/nemme-sdk.umd.js.map +1 -1
- package/package.json +6 -7
package/README.md
CHANGED
|
@@ -1,8 +1,119 @@
|
|
|
1
1
|
# Nemme SDK
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Client-side SDK for integrating Nemme into websites and React apps.
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
## 1) Use via script tag (CDN)
|
|
8
|
+
|
|
9
|
+
Add React/ReactDOM UMD, then the SDK and CSS, and initialize.
|
|
10
|
+
|
|
11
|
+
```html
|
|
12
|
+
<!doctype html>
|
|
13
|
+
<html>
|
|
14
|
+
<head>
|
|
15
|
+
<!-- React globals required by SDK UMD build -->
|
|
16
|
+
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
|
|
17
|
+
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
|
|
18
|
+
|
|
19
|
+
<!-- Nemme SDK UMD -->
|
|
20
|
+
<script src="https://unpkg.com/@nemme/js-sdk@0.2.1/dist/nemme-sdk.umd.js"></script>
|
|
21
|
+
<link rel="stylesheet" href="https://unpkg.com/@nemme/js-sdk@0.2.1/dist/assets/js-sdk.css" />
|
|
22
|
+
</head>
|
|
23
|
+
<body>
|
|
24
|
+
<script>
|
|
25
|
+
// Option A: callable + chained init
|
|
26
|
+
NemmeSDK('YOUR_CLIENT_KEY')
|
|
27
|
+
.init({ userIdentifier: 'user-123', debug: true })
|
|
28
|
+
.then(client => {
|
|
29
|
+
window.nemme = client;
|
|
30
|
+
client.track({ eventKey: 'page_view' });
|
|
31
|
+
});
|
|
32
|
+
</script>
|
|
33
|
+
</body>
|
|
34
|
+
</html>
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
Notes:
|
|
38
|
+
|
|
39
|
+
- The UMD bundle externalizes React, so `React` and `ReactDOM` globals must be present.
|
|
40
|
+
- CSS is scoped under `#nm`. Wrap Nemme UI inside an element with `id="nm"`.
|
|
41
|
+
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
## 2) Install with npm/yarn/pnpm
|
|
4
45
|
|
|
5
46
|
```bash
|
|
6
|
-
npm install
|
|
7
|
-
|
|
47
|
+
npm install @nemme/js-sdk
|
|
48
|
+
# or: yarn add @nemme/js-sdk
|
|
49
|
+
# or: pnpm add @nemme/js-sdk
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Quick start (any bundler)
|
|
53
|
+
|
|
54
|
+
```ts
|
|
55
|
+
import NemmeSDK from '@nemme/js-sdk';
|
|
56
|
+
|
|
57
|
+
async function start() {
|
|
58
|
+
const client = NemmeSDK('YOUR_CLIENT_KEY');
|
|
59
|
+
await client.init({ userIdentifier: 'user-123', debug: true });
|
|
60
|
+
await client.track({ eventKey: 'button_clicked', data: { id: 'cta' } });
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
start();
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
Types:
|
|
67
|
+
|
|
68
|
+
```ts
|
|
69
|
+
import type { ClientConfigType, TrackEventOptions } from '@nemme/js-sdk';
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
---
|
|
73
|
+
|
|
74
|
+
## 3) React integration
|
|
75
|
+
|
|
76
|
+
The package exports a provider and hooks.
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
import React from 'react';
|
|
80
|
+
import ReactDOM from 'react-dom/client';
|
|
81
|
+
import NemmeSDK, { NemmeProvider, useNemme } from '@nemme/js-sdk';
|
|
82
|
+
|
|
83
|
+
const client = NemmeSDK('YOUR_CLIENT_KEY');
|
|
84
|
+
|
|
85
|
+
function App() {
|
|
86
|
+
const nemme = useNemme();
|
|
87
|
+
return (
|
|
88
|
+
<div id="nm">
|
|
89
|
+
<button onClick={() => nemme.track({ eventKey: 'button_clicked', data: { id: 'cta' } })}>Track CTA</button>
|
|
90
|
+
</div>
|
|
91
|
+
);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
async function bootstrap() {
|
|
95
|
+
await client.init({ userIdentifier: 'user-123', debug: true });
|
|
96
|
+
const root = ReactDOM.createRoot(document.getElementById('root')!);
|
|
97
|
+
root.render(
|
|
98
|
+
<NemmeProvider client={client}>
|
|
99
|
+
<App />
|
|
100
|
+
</NemmeProvider>
|
|
101
|
+
);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
bootstrap();
|
|
8
105
|
```
|
|
106
|
+
|
|
107
|
+
- `NemmeProvider` expects an initialized client.
|
|
108
|
+
- `useNemme()` returns the `NemmeClient` from context.
|
|
109
|
+
|
|
110
|
+
---
|
|
111
|
+
|
|
112
|
+
## API (brief)
|
|
113
|
+
|
|
114
|
+
- `NemmeSDK(clientKey: string): NemmeClient`
|
|
115
|
+
- `NemmeSDK.init({ clientKey, ...config }): Promise<NemmeClient>`
|
|
116
|
+
- `nemme.init(config): Promise<void>`
|
|
117
|
+
- `nemme.track({ eventKey, data? }: TrackEventOptions): Promise<void>`
|
|
118
|
+
|
|
119
|
+
Examples: see `examples/browser-usage.html` and `examples/simple-example.html`.
|
package/dist/browser.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { NemmeClient, ClientConfigType } from './client';
|
|
2
2
|
declare global {
|
|
3
3
|
interface Window {
|
|
4
|
-
NemmeSDK: {
|
|
4
|
+
NemmeSDK: ((clientKey: string) => NemmeClient) & {
|
|
5
5
|
NemmeClient: typeof NemmeClient;
|
|
6
6
|
init: (config: ClientConfigType & {
|
|
7
7
|
clientKey: string;
|
|
@@ -9,6 +9,12 @@ declare global {
|
|
|
9
9
|
};
|
|
10
10
|
}
|
|
11
11
|
}
|
|
12
|
-
declare const
|
|
13
|
-
|
|
12
|
+
declare const NemmeSDKCallable: ((clientKey: string) => NemmeClient) & {
|
|
13
|
+
NemmeClient: typeof NemmeClient;
|
|
14
|
+
init: (config: ClientConfigType & {
|
|
15
|
+
clientKey: string;
|
|
16
|
+
}) => Promise<NemmeClient>;
|
|
17
|
+
};
|
|
18
|
+
export { NemmeClient, NemmeSDKCallable as default, NemmeSDKCallable as NemmeSDK };
|
|
14
19
|
export { NemmeProvider, useNemme, useNemmeContext } from './react';
|
|
20
|
+
export type { ClientConfigType, TrackEventOptions } from './client';
|