@croct/plug 0.16.2 โ 0.16.4
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 +27 -167
- package/constants.d.ts +1 -1
- package/constants.js +1 -1
- package/package.json +5 -5
package/README.md
CHANGED
|
@@ -1,196 +1,56 @@
|
|
|
1
1
|
<p align="center">
|
|
2
|
-
|
|
2
|
+
<a href="https://croct.com" target="_blank">
|
|
3
|
+
<picture>
|
|
4
|
+
<source media="(min-width: 769px) and (prefers-color-scheme: light)" srcset="https://github.com/croct-tech/plug-js/blob/master/.github/assets/header-light.svg">
|
|
5
|
+
<source media="(min-width: 769px) and (prefers-color-scheme: dark)" srcset="https://github.com/croct-tech/plug-js/blob/master/.github/assets/header-dark.svg">
|
|
6
|
+
<source media="(max-width: 768px) and (prefers-color-scheme: dark)" srcset="https://github.com/croct-tech/plug-js/blob/master/.github/assets/header-dark-mobile.svg">
|
|
7
|
+
<source media="(max-width: 768px) and (prefers-color-scheme: light)" srcset="https://github.com/croct-tech/plug-js/blob/master/.github/assets/header-light-mobile.svg">
|
|
8
|
+
<img src="https://github.com/croct-tech/plug-js/blob/master/.github/assets/header-light-mobile.svg" alt="Croct JavaScript SDK" title="Croct JavaScript SDK" width="100%">
|
|
9
|
+
</picture>
|
|
10
|
+
</a>
|
|
11
|
+
<br/>
|
|
12
|
+
<strong>Croct JavaScript SDK</strong><br/>
|
|
13
|
+
Bring dynamic, personalized content natively into your applications.
|
|
3
14
|
</p>
|
|
4
|
-
|
|
5
|
-
<
|
|
6
|
-
|
|
15
|
+
<div align="center">
|
|
16
|
+
<strong>๐ <a href="https://docs.croct.com/reference/sdk/javascript/installation">Quick start →</a></strong>
|
|
17
|
+
</div>
|
|
18
|
+
<br/>
|
|
7
19
|
<p align="center">
|
|
8
20
|
<a href="https://www.npmjs.com/package/@croct/plug"><img alt="Version" src="https://img.shields.io/npm/v/@croct/plug"/></a>
|
|
9
|
-
<a href="https://github.com/croct-tech/plug-js/actions?query=workflow%3AValidations"><img alt="Build" src="https://github.com/croct-tech/plug-js/workflows/Validations/badge.svg"/></a>
|
|
10
|
-
<a href="https://codeclimate.com/repos/5e7251a86589d75edf000f9e/maintainability"><img alt="Maintainability" src="https://api.codeclimate.com/v1/badges/2288af031dccbec256d9/maintainability"/></a>
|
|
11
|
-
<a href="https://codeclimate.com/repos/5e7251a86589d75edf000f9e/test_coverage"><img alt="Coverage" src="https://api.codeclimate.com/v1/badges/2288af031dccbec256d9/test_coverage"/></a>
|
|
12
21
|
<img alt="Gzipped bundle size" src="https://img.badgesize.io/https:/cdn.croct.io/js/v1/lib/plug.js?style=flat&compression=gzip" />
|
|
13
|
-
<
|
|
14
|
-
<a href="https://github.com/croct-tech/plug-js/releases">๐ฆ Releases</a>
|
|
15
|
-
ยท
|
|
16
|
-
<a href="https://github.com/croct-tech/plug-js/issues/new?labels=bug&template=bug-report.md">๐ Report Bug</a>
|
|
17
|
-
ยท
|
|
18
|
-
<a href="https://github.com/croct-tech/plug-js/issues/new?labels=enhancement&template=feature-request.md">โจ Request Feature</a>
|
|
22
|
+
<a href="https://codeclimate.com/repos/5e7251a86589d75edf000f9e/test_coverage"><img alt="Coverage" src="https://api.codeclimate.com/v1/badges/2288af031dccbec256d9/test_coverage"/></a>
|
|
19
23
|
</p>
|
|
20
24
|
|
|
21
|
-
##
|
|
25
|
+
## Introduction
|
|
22
26
|
|
|
23
|
-
|
|
24
|
-
A single line of code gives you a fully-featured devkit for building natively personalized applications.
|
|
25
|
-
|
|
26
|
-
- **Zero configuration.** No setup steps required.
|
|
27
|
-
- **No backend necessary.** Deliver personalized experiences from static sites.
|
|
28
|
-
- **Fast queries.** Double-digit millisecond latency for real-time evaluations.
|
|
29
|
-
- **Fully extensible API.** Easily add and share new features via plugins.
|
|
30
|
-
- **Type-Safe.** Typescript typings included.
|
|
31
|
-
- **Playground integration** One-click to connect, no configuration needed.
|
|
27
|
+
Croct is a headless CMS that helps you manage content, run AB tests, and personalize experiences without the hassle of complex integrations.
|
|
32
28
|
|
|
33
29
|
## Installation
|
|
34
30
|
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
### NPM
|
|
38
|
-
|
|
39
|
-
The recommended way to install the SDK is via [NPM](https://npmjs.com). It pairs nicely with module bundlers such as
|
|
40
|
-
Webpack or Browserify and includes Typescript typings.
|
|
41
|
-
|
|
42
|
-
In most cases, it should be as simple as running the following in your project:
|
|
31
|
+
Run this command to install the SDK:
|
|
43
32
|
|
|
44
33
|
```sh
|
|
45
34
|
npm install @croct/plug
|
|
46
35
|
```
|
|
47
|
-
|
|
48
|
-
Then, call [`croct.plug`](docs/plug.md#plug) passing the App ID to initialize the SDK:
|
|
49
|
-
|
|
50
|
-
```js
|
|
51
|
-
import croct from '@croct/plug';
|
|
52
|
-
|
|
53
|
-
croct.plug({appId: '<APP_ID>'});
|
|
54
|
-
```
|
|
55
|
-
|
|
56
|
-
### Script Tag
|
|
57
|
-
|
|
58
|
-
To install the SDK as a script tag, add the following line to the `<head>` tag of your site on any pages you plan to use the SDK to personalize or track events:
|
|
59
|
-
|
|
60
|
-
```html
|
|
61
|
-
<script src="https://cdn.croct.io/js/v1/lib/plug.js?appId=<APP_ID>"></script>
|
|
62
|
-
<script>croct.plug();</script>
|
|
63
|
-
```
|
|
64
|
-
|
|
65
|
-
You should replace the `<APP_ID>` placeholder with the respective App ID. For more information about the available options, see [`croct.plug`](docs/plug.md#plug).
|
|
66
|
-
|
|
67
|
-
## Getting Started
|
|
68
|
-
|
|
69
|
-
> ๐๏ธ **Just for your convenience**
|
|
70
|
-
> We will use CodePen throughout the tutorial to let you play with the examples right in your browser.
|
|
71
|
-
|
|
72
|
-
Follow the steps below to connect the playground with CodePen:
|
|
73
|
-
|
|
74
|
-
1. [Open the playground](http://play.croct.com/)
|
|
75
|
-
2. Click on the _"Don't have an API Key?"_ link to proceed in sandbox mode
|
|
76
|
-
3. Enter the URL `https://codepen.io/pen`
|
|
77
|
-
4. Click on _"Let's play!"_
|
|
78
|
-
|
|
79
|
-
<br />
|
|
80
|
-
|
|
81
|
-
<p align="center">
|
|
82
|
-
<img src="https://user-images.githubusercontent.com/943036/99390593-a8242780-28b7-11eb-8966-761aea2b3b3d.gif" alt="Connecting" title="Connecting" width="600" />
|
|
83
|
-
</p>
|
|
84
|
-
|
|
85
|
-
> ๐ก๏ธ **Hint**
|
|
86
|
-
> You will typically use an API key to connect to your development, staging, or production environments in real cases,
|
|
87
|
-
> but you can also use a local URL, such as `https://localhost/myapp`.
|
|
88
|
-
|
|
89
|
-
Now, try evaluating the expression below:
|
|
90
|
-
|
|
91
|
-
```
|
|
92
|
-
user is returning
|
|
93
|
-
```
|
|
94
|
-
|
|
95
|
-
After clicking on the _Evaluate_ button, you will see the result at the bottom of the page, which is either `true` or
|
|
96
|
-
`false` depending on whether it is the first time playing with this example.
|
|
97
|
-
|
|
98
|
-
Let's now implement our first personalization feature. Click on the three-dots icon on the editor's top right corner
|
|
99
|
-
and select _"Open in CodePen"_. Then, copy the code below and paste into the HTML panel:
|
|
100
|
-
|
|
101
|
-
```html
|
|
102
|
-
<button onclick="hey()">๐ Say hey</button>
|
|
103
|
-
|
|
104
|
-
<script>
|
|
105
|
-
function welcome() {
|
|
106
|
-
if (confirm('Welcome! Do you want to take a look at our quick start guide?')) {
|
|
107
|
-
window.open('https://croct.link/plug-js/quick-start');
|
|
108
|
-
}
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
function welcomeBack() {
|
|
112
|
-
if (confirm('Welcome back! How about joining us on Slack this time?')) {
|
|
113
|
-
window.open('https://croct.link/community');
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
function hey() {
|
|
118
|
-
croct.evaluate('user is returning')
|
|
119
|
-
.then(returning => returning ? welcomeBack() : welcome());
|
|
120
|
-
}
|
|
121
|
-
</script>
|
|
122
|
-
```
|
|
123
|
-
|
|
124
|
-
Try clicking _"๐ Say Hey"_, and you should see a personalized greeting.
|
|
125
|
-
|
|
126
|
-
๐ **Congratulations!** You have successfully implemented your first personalization feature using Croct. For a more
|
|
127
|
-
in-depth walk-through, check out our [quick start guide](docs/quick-start.md).
|
|
36
|
+
See our [quick start guide](https://docs.croct.com/reference/sdk/javascript/installation) for more details.
|
|
128
37
|
|
|
129
38
|
## Documentation
|
|
130
39
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
- [Quick Start Guide](docs/quick-start.md)
|
|
134
|
-
- [Plug Reference](docs/plug.md)
|
|
135
|
-
- [Tracker Reference](docs/tracker.md)
|
|
136
|
-
- [Evaluator Reference](docs/evaluator.md)
|
|
137
|
-
- [Event Reference](docs/events.md)
|
|
138
|
-
- [Patch Reference](docs/patch.md)
|
|
139
|
-
- [User Reference](docs/user.md)
|
|
140
|
-
- [Session Reference](docs/session.md)
|
|
141
|
-
- [Testing](docs/testing.md)
|
|
142
|
-
- [Troubleshooting](docs/troubleshooting.md)
|
|
143
|
-
|
|
144
|
-
If you are new to the Croct platform, the [quick start guide](docs/quick-start.md) is a good starting point for
|
|
145
|
-
application developers to begin learning the essential concepts.
|
|
40
|
+
Visit our [official documentation](https://docs.croct.com/reference/sdk/javascript/installation).
|
|
146
41
|
|
|
147
42
|
## Support
|
|
148
43
|
|
|
149
|
-
|
|
150
|
-
alternative ways to get help from the Croct community.
|
|
151
|
-
|
|
152
|
-
### Stack Overflow
|
|
153
|
-
|
|
154
|
-
Someone else from the community may have already asked a similar question or may be able to help with your problem.
|
|
155
|
-
|
|
156
|
-
The Croct team will also monitor posts with the "croct" tag. If there aren't any existing questions that help,
|
|
157
|
-
please [ask a new one](https://stackoverflow.com/questions/ask?tags=croct%20plugjs).
|
|
44
|
+
Join our official [Slack channel](https://croct.link/community) to get help from the Croct team and other developers.
|
|
158
45
|
|
|
159
|
-
|
|
46
|
+
## Contribution
|
|
160
47
|
|
|
161
|
-
|
|
162
|
-
[open a new issue on GitHub](https://github.com/croct-tech/plug-js/issues/new/choose).
|
|
163
|
-
|
|
164
|
-
Before you file an issue, a good practice is to search for issues to see whether others have the same or similar problems.
|
|
165
|
-
If you are unable to find an open issue addressing the problem, then feel free to open a new one.
|
|
166
|
-
|
|
167
|
-
### Slack Channel
|
|
168
|
-
|
|
169
|
-
Many people from the Croct community hang out on the Croct Slack Group.
|
|
170
|
-
Feel free to [join us and start a conversation](https://croct.link/community).
|
|
171
|
-
|
|
172
|
-
## Contributing
|
|
173
|
-
|
|
174
|
-
Contributions to the package are always welcome!
|
|
48
|
+
Contributions are always welcome!
|
|
175
49
|
|
|
176
50
|
- Report any bugs or issues on the [issue tracker](https://github.com/croct-tech/plug-js/issues).
|
|
177
51
|
- For major changes, please [open an issue](https://github.com/croct-tech/plug-js/issues) first to discuss what you would like to change.
|
|
178
|
-
- Please make sure to update tests as appropriate.
|
|
179
|
-
|
|
180
|
-
## Testing
|
|
181
|
-
|
|
182
|
-
Before running the test suites, the development dependencies must be installed:
|
|
183
|
-
|
|
184
|
-
```sh
|
|
185
|
-
npm install
|
|
186
|
-
```
|
|
187
|
-
|
|
188
|
-
Then, to run all tests:
|
|
189
|
-
|
|
190
|
-
```sh
|
|
191
|
-
npm test
|
|
192
|
-
```
|
|
52
|
+
- Please make sure to update tests as appropriate. Run tests with `npm test`.
|
|
193
53
|
|
|
194
54
|
## License
|
|
195
55
|
|
|
196
|
-
This
|
|
56
|
+
This library is licensed under the [MIT license](LICENSE).
|
package/constants.d.ts
CHANGED
|
@@ -2,4 +2,4 @@ export declare const CDN_URL = "https://cdn.croct.io/js/v1/lib/plug.js";
|
|
|
2
2
|
export declare const PLAYGROUND_ORIGIN = "https://play.croct.com";
|
|
3
3
|
export declare const PLAYGROUND_CONNECT_URL = "https://play.croct.com/connect.html";
|
|
4
4
|
export declare const PREVIEW_WIDGET_ORIGIN = "https://cdn.croct.io";
|
|
5
|
-
export declare const PREVIEW_WIDGET_URL = "https://cdn.croct.io/js/v1/lib/plug/widget-0.16.
|
|
5
|
+
export declare const PREVIEW_WIDGET_URL = "https://cdn.croct.io/js/v1/lib/plug/widget-0.16.4.html";
|
package/constants.js
CHANGED
|
@@ -5,5 +5,5 @@ exports.CDN_URL = 'https://cdn.croct.io/js/v1/lib/plug.js';
|
|
|
5
5
|
exports.PLAYGROUND_ORIGIN = 'https://play.croct.com';
|
|
6
6
|
exports.PLAYGROUND_CONNECT_URL = 'https://play.croct.com/connect.html';
|
|
7
7
|
exports.PREVIEW_WIDGET_ORIGIN = 'https://cdn.croct.io';
|
|
8
|
-
exports.PREVIEW_WIDGET_URL = 'https://cdn.croct.io/js/v1/lib/plug/widget-0.16.
|
|
8
|
+
exports.PREVIEW_WIDGET_URL = 'https://cdn.croct.io/js/v1/lib/plug/widget-0.16.4.html';
|
|
9
9
|
//# sourceMappingURL=constants.js.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@croct/plug",
|
|
3
|
-
"version": "0.16.
|
|
3
|
+
"version": "0.16.4",
|
|
4
4
|
"description": "A fully-featured devkit for building natively personalized applications.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": {
|
|
@@ -34,16 +34,16 @@
|
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@croct/json": "^2.1.0",
|
|
37
|
-
"@croct/sdk": "^0.17.
|
|
37
|
+
"@croct/sdk": "^0.17.6",
|
|
38
38
|
"tslib": "^2.7.0"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
41
|
"@croct/eslint-plugin": "^0.7.1",
|
|
42
|
-
"@rollup/plugin-commonjs": "^
|
|
42
|
+
"@rollup/plugin-commonjs": "^28.0.0",
|
|
43
43
|
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
44
|
-
"@rollup/plugin-replace": "^
|
|
44
|
+
"@rollup/plugin-replace": "^6.0.0",
|
|
45
45
|
"@rollup/plugin-terser": "^0.4.4",
|
|
46
|
-
"@rollup/plugin-typescript": "^
|
|
46
|
+
"@rollup/plugin-typescript": "^12.0.0",
|
|
47
47
|
"@types/jest": "^29.5.12",
|
|
48
48
|
"@typescript-eslint/parser": "^7.0.0",
|
|
49
49
|
"eslint": "^8.27.0",
|