@pexip-engage-public/plugin-react 0.0.7 → 1.0.3
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/CHANGELOG.md +47 -0
- package/README.md +8 -8
- package/dist/index.mjs +97 -73
- package/package.json +12 -15
- package/src/PexipEngageContext.ts +19 -0
- package/src/PexipEngagePlugin.tsx +30 -0
- package/src/index.tsx +4 -3
- package/src/usePexipEngagePlugin.ts +86 -0
- package/src/{usePluginOptions.ts → usePluginConfiguration.ts} +7 -8
- package/typings/PexipEngageContext.d.ts +12 -0
- package/typings/PexipEngageContext.d.ts.map +1 -0
- package/typings/PexipEngagePlugin.d.ts +9 -0
- package/typings/PexipEngagePlugin.d.ts.map +1 -0
- package/typings/index.d.ts +4 -3
- package/typings/index.d.ts.map +1 -1
- package/typings/tsconfig.tsbuildinfo +1 -1
- package/typings/usePexipEngagePlugin.d.ts +5 -0
- package/typings/usePexipEngagePlugin.d.ts.map +1 -0
- package/typings/usePluginConfiguration.d.ts +3 -0
- package/typings/usePluginConfiguration.d.ts.map +1 -0
- package/dist/index.js +0 -171
- package/src/SkedifyPlugin.tsx +0 -35
- package/src/SkedifyPluginContext.ts +0 -16
- package/src/types.ts +0 -296
- package/src/useSkedifyPlugin.ts +0 -66
- package/typings/SkedifyPlugin.d.ts +0 -8
- package/typings/SkedifyPlugin.d.ts.map +0 -1
- package/typings/SkedifyPluginContext.d.ts +0 -12
- package/typings/SkedifyPluginContext.d.ts.map +0 -1
- package/typings/types.d.ts +0 -284
- package/typings/types.d.ts.map +0 -1
- package/typings/usePluginOptions.d.ts +0 -3
- package/typings/usePluginOptions.d.ts.map +0 -1
- package/typings/useSkedifyPlugin.d.ts +0 -5
- package/typings/useSkedifyPlugin.d.ts.map +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,52 @@
|
|
|
1
1
|
# @pexip-engage-public/plugin-react
|
|
2
2
|
|
|
3
|
+
## 1.0.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- 5074ca228: chore: fix npm deploy
|
|
8
|
+
- Updated dependencies [5074ca228]
|
|
9
|
+
- @pexip-engage-public/plugin-configuration-parser@1.0.3
|
|
10
|
+
- @pexip-engage-public/plugin-instance@1.0.3
|
|
11
|
+
|
|
12
|
+
## 1.0.2
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- f60e86f22: chore: fix npm deploy
|
|
17
|
+
- Updated dependencies [f60e86f22]
|
|
18
|
+
- @pexip-engage-public/plugin-configuration-parser@1.0.2
|
|
19
|
+
- @pexip-engage-public/plugin-instance@1.0.2
|
|
20
|
+
|
|
21
|
+
## 1.0.1
|
|
22
|
+
|
|
23
|
+
### Patch Changes
|
|
24
|
+
|
|
25
|
+
- Updated dependencies [f8a00497c]
|
|
26
|
+
- @pexip-engage-public/plugin-configuration-parser@1.0.1
|
|
27
|
+
- @pexip-engage-public/plugin-instance@1.0.1
|
|
28
|
+
|
|
29
|
+
## 1.0.0
|
|
30
|
+
|
|
31
|
+
### Major Changes
|
|
32
|
+
|
|
33
|
+
- 17f29c6e4: **BREAKING**: setup `@pexip-engage-public/plugin-react` package for v2 compatibility of the actual plugin only.
|
|
34
|
+
|
|
35
|
+
- Dropped V1 (Skedify) plugin support
|
|
36
|
+
Users are advised to stay on 0.x version of this package until they fully migrate to the new version of the plugin, which will be backwards compatible. Only use this package if you're only using V2 version of the (Pexip Engage) plugin.
|
|
37
|
+
- Dropped CRA4 hacks
|
|
38
|
+
- Renamed exports, see updated README.md
|
|
39
|
+
|
|
40
|
+
### Patch Changes
|
|
41
|
+
|
|
42
|
+
- bdd45aa1a: [Hackathon] Plugin CSS editor in Web-Admin
|
|
43
|
+
- Updated dependencies [17f29c6e4]
|
|
44
|
+
- Updated dependencies [85be36ba9]
|
|
45
|
+
- Updated dependencies [bdd45aa1a]
|
|
46
|
+
- Updated dependencies [f67ee95f5]
|
|
47
|
+
- @pexip-engage-public/plugin-configuration-parser@1.0.0
|
|
48
|
+
- @pexip-engage-public/plugin-instance@1.0.0
|
|
49
|
+
|
|
3
50
|
## 0.0.7
|
|
4
51
|
|
|
5
52
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -4,10 +4,10 @@ Wrapper around the Skedify Plugin, to integrate it more conveniently inside Reac
|
|
|
4
4
|
|
|
5
5
|
There are 2 exports:
|
|
6
6
|
|
|
7
|
-
- `<
|
|
7
|
+
- `<PexipEngagePlugin configuration={configuration} />`:
|
|
8
8
|
React Component that renders the plugin inside a `div`. You can pass plugin options to it using the `configuration` prop. All other props are passed through to the underlying `div` element.
|
|
9
9
|
|
|
10
|
-
- `<
|
|
10
|
+
- `<PexipEngagePluginProvider value={configuration}>`:
|
|
11
11
|
This is a React Context Provider, that allows you to set certain default values. The interface is the same as the `configuration` prop.
|
|
12
12
|
|
|
13
13
|
This component is **not** required, but can be useful to populate some shared configuration for each plugin instance, eg:
|
|
@@ -29,16 +29,16 @@ const defaultConfig = {
|
|
|
29
29
|
|
|
30
30
|
function App() {
|
|
31
31
|
return (
|
|
32
|
-
<
|
|
33
|
-
{/* All <
|
|
34
|
-
<
|
|
35
|
-
</
|
|
32
|
+
<PexipEngagePluginProvider value={defaultConfig}>
|
|
33
|
+
{/* All <PexipEngagePlugin /> components will now merge their own passed configuration with the defaultConfig value */}
|
|
34
|
+
<PexipEngagePlugin configuration={{ config: { subjects: { ids: "1" } }}}>
|
|
35
|
+
</PexipEngagePluginProvider>
|
|
36
36
|
);
|
|
37
37
|
}
|
|
38
38
|
```
|
|
39
39
|
|
|
40
|
-
The `
|
|
40
|
+
The `PexipEngagePlugin` reads the current context value, and merges it with its own passed props.
|
|
41
41
|
|
|
42
42
|
Required props:
|
|
43
43
|
|
|
44
|
-
- `scriptSrc`: The plugin entry point URL. eg: `https://plugin.skedify.io/{ENTERPRISE_NAME}/skedify-plugin.js`
|
|
44
|
+
- `scriptSrc`: The plugin entry point URL. eg: `https://{ENTERPRISE_NAME}.plugin.skedify.io/{ENTERPRISE_NAME}/skedify-plugin.js`
|
package/dist/index.mjs
CHANGED
|
@@ -1,25 +1,91 @@
|
|
|
1
|
-
// src/
|
|
2
|
-
import
|
|
1
|
+
// src/PexipEngageContext.ts
|
|
2
|
+
import { createContext, useContext } from "react";
|
|
3
|
+
var PexipEngagePluginContext = createContext({});
|
|
4
|
+
function usePluginContext() {
|
|
5
|
+
const ctx = useContext(PexipEngagePluginContext);
|
|
6
|
+
return ctx;
|
|
7
|
+
}
|
|
8
|
+
var PexipEngagePluginProvider = PexipEngagePluginContext.Provider;
|
|
3
9
|
|
|
4
|
-
// src/
|
|
5
|
-
import
|
|
6
|
-
import deepmerge from "deepmerge";
|
|
10
|
+
// src/PexipEngagePlugin.tsx
|
|
11
|
+
import { useEffect as useEffect3, useRef as useRef2 } from "react";
|
|
7
12
|
|
|
8
|
-
// src/
|
|
9
|
-
import
|
|
10
|
-
|
|
11
|
-
|
|
13
|
+
// src/usePexipEngagePlugin.ts
|
|
14
|
+
import { useEffect, useReducer } from "react";
|
|
15
|
+
import {
|
|
16
|
+
PEXIP_ENGAGE_PLUGIN_EVENT
|
|
17
|
+
} from "@pexip-engage-public/plugin-instance";
|
|
18
|
+
function createPlugin(src) {
|
|
19
|
+
if (!document.getElementById(src)) {
|
|
20
|
+
const script = document.createElement("script");
|
|
21
|
+
script.src = src;
|
|
22
|
+
script.async = true;
|
|
23
|
+
script.defer = true;
|
|
24
|
+
script.id = src;
|
|
25
|
+
document.body.appendChild(script);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
var initialState = { PluginStatic: null, status: "pending" };
|
|
29
|
+
function reducer(state, action) {
|
|
30
|
+
switch (action.type) {
|
|
31
|
+
case "success":
|
|
32
|
+
return { PluginStatic: action.instance, status: "success" };
|
|
33
|
+
case "failed":
|
|
34
|
+
return { PluginStatic: null, status: "failed" };
|
|
35
|
+
default:
|
|
36
|
+
throw new Error();
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
function usePexipEngagePlugin(scriptSrc) {
|
|
40
|
+
const ctx = usePluginContext();
|
|
41
|
+
const [state, dispatch] = useReducer(reducer, initialState);
|
|
42
|
+
const src = scriptSrc ?? ctx.scriptSrc;
|
|
43
|
+
useEffect(() => {
|
|
44
|
+
if (!src) {
|
|
45
|
+
console.warn(
|
|
46
|
+
"No scriptSrc was provided to PexipEngagePluginContext, or as prop to <PexipEngagePlugin />, skipping plugin initialization..."
|
|
47
|
+
);
|
|
48
|
+
dispatch({ type: "failed" });
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
if (window && document) {
|
|
52
|
+
if (window.PexipEngage?.Plugin) {
|
|
53
|
+
dispatch({ type: "success", instance: window.PexipEngage.Plugin });
|
|
54
|
+
} else {
|
|
55
|
+
let listener2 = function(event) {
|
|
56
|
+
const pluginEvent = event;
|
|
57
|
+
if (!window.PexipEngage)
|
|
58
|
+
return;
|
|
59
|
+
if (pluginEvent.detail.type === window.PexipEngage.Plugin.EVENT_INIT) {
|
|
60
|
+
dispatch({ type: "success", instance: window.PexipEngage.Plugin });
|
|
61
|
+
} else if (pluginEvent.detail.type === window.PexipEngage?.Plugin.EVENT_MISCONFIGURED) {
|
|
62
|
+
dispatch({ type: "failed" });
|
|
63
|
+
} else if (pluginEvent.detail.type === window.PexipEngage?.Plugin.EVENT_ERROR) {
|
|
64
|
+
dispatch({ type: "failed" });
|
|
65
|
+
}
|
|
66
|
+
};
|
|
67
|
+
var listener = listener2;
|
|
68
|
+
document.addEventListener(PEXIP_ENGAGE_PLUGIN_EVENT, listener2);
|
|
69
|
+
createPlugin(src);
|
|
70
|
+
return () => document.removeEventListener(PEXIP_ENGAGE_PLUGIN_EVENT, listener2);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
}, [src]);
|
|
74
|
+
return state;
|
|
75
|
+
}
|
|
12
76
|
|
|
13
|
-
// src/
|
|
77
|
+
// src/usePluginConfiguration.ts
|
|
78
|
+
import { useEffect as useEffect2, useRef } from "react";
|
|
79
|
+
import deepmerge from "deepmerge";
|
|
14
80
|
function usePluginConfiguration(overrideConfiguration) {
|
|
15
|
-
const defaultConfiguration =
|
|
81
|
+
const defaultConfiguration = usePluginContext();
|
|
16
82
|
const resolvedConfiguration = deepmerge(defaultConfiguration, overrideConfiguration);
|
|
17
83
|
return useMemoizedObject(resolvedConfiguration);
|
|
18
84
|
}
|
|
19
85
|
function useMemoizedObject(currentObj) {
|
|
20
|
-
const prevResult =
|
|
86
|
+
const prevResult = useRef(currentObj);
|
|
21
87
|
const memoizedObj = replaceEqualDeep(prevResult.current, currentObj);
|
|
22
|
-
|
|
88
|
+
useEffect2(() => {
|
|
23
89
|
prevResult.current = memoizedObj;
|
|
24
90
|
});
|
|
25
91
|
return memoizedObj;
|
|
@@ -67,71 +133,29 @@ function hasObjectPrototype(o) {
|
|
|
67
133
|
return Object.prototype.toString.call(o) === "[object Object]";
|
|
68
134
|
}
|
|
69
135
|
|
|
70
|
-
// src/
|
|
71
|
-
import
|
|
72
|
-
function
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
});
|
|
77
|
-
const
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
);
|
|
83
|
-
return;
|
|
84
|
-
}
|
|
85
|
-
if (window && document) {
|
|
86
|
-
const id = scriptId ?? src;
|
|
87
|
-
if (!document.getElementById(id)) {
|
|
88
|
-
const script = document.createElement("script");
|
|
89
|
-
script.src = src;
|
|
90
|
-
script.async = true;
|
|
91
|
-
script.defer = true;
|
|
92
|
-
script.id = id;
|
|
93
|
-
window.document.body.appendChild(script);
|
|
94
|
-
}
|
|
95
|
-
if (window.Skedify && window.Skedify.Plugin) {
|
|
96
|
-
setPlugin({ Plugin: window.Skedify.Plugin });
|
|
97
|
-
} else {
|
|
98
|
-
const intervalId = window.setInterval(() => {
|
|
99
|
-
if (window.Skedify && window.Skedify.Plugin) {
|
|
100
|
-
window.clearInterval(intervalId);
|
|
101
|
-
setPlugin({ Plugin: window.Skedify.Plugin });
|
|
102
|
-
}
|
|
103
|
-
}, 200);
|
|
104
|
-
return () => window.clearInterval(intervalId);
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
}, [src, scriptId]);
|
|
108
|
-
return pluginInstance;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
// src/SkedifyPlugin.tsx
|
|
112
|
-
function SkedifyPlugin({ configuration, ...props }) {
|
|
113
|
-
const { Plugin } = useSkedifyPlugin(configuration == null ? void 0 : configuration.scriptSrc);
|
|
114
|
-
const options = usePluginConfiguration(configuration);
|
|
115
|
-
const containerRef = React4.useRef(null);
|
|
116
|
-
React4.useEffect(() => {
|
|
117
|
-
if (Plugin && containerRef.current) {
|
|
118
|
-
const instance = new Plugin(containerRef.current, options);
|
|
136
|
+
// src/PexipEngagePlugin.tsx
|
|
137
|
+
import { jsx } from "react/jsx-runtime";
|
|
138
|
+
function PexipEngagePlugin({
|
|
139
|
+
config: { scriptSrc, ...config } = {},
|
|
140
|
+
...props
|
|
141
|
+
}) {
|
|
142
|
+
const { PluginStatic: PluginStatic2 } = usePexipEngagePlugin(scriptSrc);
|
|
143
|
+
const options = usePluginConfiguration(config);
|
|
144
|
+
const containerRef = useRef2(null);
|
|
145
|
+
useEffect3(() => {
|
|
146
|
+
if (PluginStatic2 && containerRef.current) {
|
|
147
|
+
const instance = new PluginStatic2(containerRef.current, { config: options });
|
|
119
148
|
return () => instance.dispose();
|
|
120
149
|
}
|
|
121
|
-
}, [
|
|
122
|
-
|
|
123
|
-
var _a;
|
|
124
|
-
const preInitClassName = (_a = props.className) == null ? void 0 : _a.replace("skedify-plugin", "").trim();
|
|
125
|
-
const postInitClassName = `${preInitClassName ?? ""} skedify-plugin`.trim();
|
|
126
|
-
return Plugin ? postInitClassName : preInitClassName;
|
|
127
|
-
}, [Plugin, props.className]);
|
|
128
|
-
return /* @__PURE__ */ React4.createElement("div", {
|
|
150
|
+
}, [PluginStatic2, options]);
|
|
151
|
+
return /* @__PURE__ */ jsx("div", {
|
|
129
152
|
...props,
|
|
130
|
-
|
|
153
|
+
"data-pexip-auto-init": "false",
|
|
131
154
|
ref: containerRef
|
|
132
155
|
});
|
|
133
156
|
}
|
|
134
157
|
export {
|
|
135
|
-
|
|
136
|
-
|
|
158
|
+
PexipEngagePlugin,
|
|
159
|
+
PexipEngagePluginProvider,
|
|
160
|
+
usePexipEngagePlugin
|
|
137
161
|
};
|
package/package.json
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pexip-engage-public/plugin-react",
|
|
3
|
-
"version": "
|
|
4
|
-
"description": "React wrapper component for the
|
|
5
|
-
"homepage": "https://github.com/skedify/frontend-mono/tree/develop/packages/plugin-react#readme",
|
|
3
|
+
"version": "1.0.3",
|
|
4
|
+
"description": "React wrapper component for the Pexip Engage Plugin",
|
|
5
|
+
"homepage": "https://github.com/skedify/frontend-mono/tree/develop/apps/plugin-remix/packages/plugin-react#readme",
|
|
6
6
|
"bugs": {
|
|
7
7
|
"url": "https://github.com/skedify/frontend-mono/issues"
|
|
8
8
|
},
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
11
11
|
"url": "git+https://github.com/skedify/frontend-mono.git",
|
|
12
|
-
"directory": "packages/plugin-react"
|
|
12
|
+
"directory": "apps/plugin-remix/packages/plugin-react"
|
|
13
13
|
},
|
|
14
14
|
"license": "UNLICENSED",
|
|
15
15
|
"author": {
|
|
@@ -20,14 +20,13 @@
|
|
|
20
20
|
"sideEffects": false,
|
|
21
21
|
"exports": {
|
|
22
22
|
".": {
|
|
23
|
-
"
|
|
24
|
-
"
|
|
23
|
+
"types": "./typings/index.d.ts",
|
|
24
|
+
"import": "./dist/index.mjs"
|
|
25
25
|
},
|
|
26
26
|
"./src/index.tsx": {
|
|
27
27
|
"import": "./src/index.tsx"
|
|
28
28
|
}
|
|
29
29
|
},
|
|
30
|
-
"main": "./dist/index.js",
|
|
31
30
|
"module": "./dist/index.mjs",
|
|
32
31
|
"types": "./typings/index.d.ts",
|
|
33
32
|
"files": [
|
|
@@ -36,21 +35,20 @@
|
|
|
36
35
|
"typings",
|
|
37
36
|
"src"
|
|
38
37
|
],
|
|
39
|
-
"jest": {
|
|
40
|
-
"preset": "@pexip-engage/scripts/jest/node"
|
|
41
|
-
},
|
|
42
38
|
"dependencies": {
|
|
43
|
-
"deepmerge": "4.2.2"
|
|
39
|
+
"deepmerge": "4.2.2",
|
|
40
|
+
"@pexip-engage-public/plugin-configuration-parser": "1.0.3",
|
|
41
|
+
"@pexip-engage-public/plugin-instance": "1.0.3"
|
|
44
42
|
},
|
|
45
43
|
"devDependencies": {
|
|
46
|
-
"@pexip-engage/
|
|
47
|
-
"
|
|
44
|
+
"@pexip-engage/tsconfig": "0.0.7",
|
|
45
|
+
"eslint-config-pexip-engage": "0.0.9"
|
|
48
46
|
},
|
|
49
47
|
"peerDependencies": {
|
|
50
48
|
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
|
51
49
|
},
|
|
52
50
|
"volta": {
|
|
53
|
-
"extends": "
|
|
51
|
+
"extends": "../../../../package.json"
|
|
54
52
|
},
|
|
55
53
|
"publishConfig": {
|
|
56
54
|
"access": "public",
|
|
@@ -62,7 +60,6 @@
|
|
|
62
60
|
"dev": "concurrently \"tsc -w\" \"tsup --watch\"",
|
|
63
61
|
"lint": "cross-env TIMING=1 eslint .",
|
|
64
62
|
"lint:fix": "pnpm lint --fix",
|
|
65
|
-
"test": "jest --passWithNoTests",
|
|
66
63
|
"typecheck": "tsc"
|
|
67
64
|
}
|
|
68
65
|
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { createContext, useContext } from "react";
|
|
2
|
+
import type { JSConfig } from "@pexip-engage-public/plugin-configuration-parser";
|
|
3
|
+
|
|
4
|
+
export interface PexipEngagePluginContextProps extends NonNullable<JSConfig["config"]> {
|
|
5
|
+
/**
|
|
6
|
+
* The plugin entry point URL.
|
|
7
|
+
* eg: `https://{ENTERPRISE_NAME}plugin.skedify.io/{ENTERPRISE_NAME}/skedify-plugin.js`
|
|
8
|
+
*/
|
|
9
|
+
scriptSrc?: string;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
const PexipEngagePluginContext = createContext<PexipEngagePluginContextProps>({});
|
|
13
|
+
|
|
14
|
+
export function usePluginContext() {
|
|
15
|
+
const ctx = useContext(PexipEngagePluginContext);
|
|
16
|
+
|
|
17
|
+
return ctx;
|
|
18
|
+
}
|
|
19
|
+
export const PexipEngagePluginProvider = PexipEngagePluginContext.Provider;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { useEffect, useRef } from "react";
|
|
2
|
+
import type { HTMLConfig } from "@pexip-engage-public/plugin-configuration-parser";
|
|
3
|
+
|
|
4
|
+
import { PexipEngagePluginContextProps } from "./PexipEngageContext";
|
|
5
|
+
import { usePexipEngagePlugin } from "./usePexipEngagePlugin";
|
|
6
|
+
import { usePluginConfiguration } from "./usePluginConfiguration";
|
|
7
|
+
interface PexipEngagePluginProps
|
|
8
|
+
extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
|
|
9
|
+
HTMLConfig {
|
|
10
|
+
config?: PexipEngagePluginContextProps;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export function PexipEngagePlugin({
|
|
14
|
+
config: { scriptSrc, ...config } = {},
|
|
15
|
+
...props
|
|
16
|
+
}: PexipEngagePluginProps) {
|
|
17
|
+
const { PluginStatic } = usePexipEngagePlugin(scriptSrc);
|
|
18
|
+
const options = usePluginConfiguration(config);
|
|
19
|
+
const containerRef = useRef<HTMLDivElement>(null);
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
if (PluginStatic && containerRef.current) {
|
|
22
|
+
// plugin initialized
|
|
23
|
+
const instance = new PluginStatic(containerRef.current, { config: options });
|
|
24
|
+
|
|
25
|
+
return () => instance.dispose();
|
|
26
|
+
}
|
|
27
|
+
}, [PluginStatic, options]);
|
|
28
|
+
|
|
29
|
+
return <div {...props} data-pexip-auto-init="false" ref={containerRef} />;
|
|
30
|
+
}
|
package/src/index.tsx
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export
|
|
3
|
-
export {
|
|
1
|
+
export type { PexipEngagePluginContextProps } from "./PexipEngageContext";
|
|
2
|
+
export { PexipEngagePluginProvider } from "./PexipEngageContext";
|
|
3
|
+
export { PexipEngagePlugin } from "./PexipEngagePlugin";
|
|
4
|
+
export { usePexipEngagePlugin } from "./usePexipEngagePlugin";
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import { useEffect, useReducer } from "react";
|
|
2
|
+
import {
|
|
3
|
+
PEXIP_ENGAGE_PLUGIN_EVENT,
|
|
4
|
+
PluginCustomEvent,
|
|
5
|
+
PluginStatic,
|
|
6
|
+
} from "@pexip-engage-public/plugin-instance";
|
|
7
|
+
|
|
8
|
+
import { usePluginContext } from "./PexipEngageContext";
|
|
9
|
+
|
|
10
|
+
function createPlugin(src: string) {
|
|
11
|
+
if (!document.getElementById(src)) {
|
|
12
|
+
const script = document.createElement("script");
|
|
13
|
+
script.src = src;
|
|
14
|
+
script.async = true;
|
|
15
|
+
script.defer = true;
|
|
16
|
+
script.id = src;
|
|
17
|
+
document.body.appendChild(script);
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
const initialState: {
|
|
22
|
+
PluginStatic: typeof PluginStatic | null;
|
|
23
|
+
status: "pending" | "success" | "failed";
|
|
24
|
+
} = { PluginStatic: null, status: "pending" };
|
|
25
|
+
|
|
26
|
+
type Action = { type: "success"; instance: typeof PluginStatic } | { type: "failed" };
|
|
27
|
+
function reducer(state: typeof initialState, action: Action): typeof initialState {
|
|
28
|
+
switch (action.type) {
|
|
29
|
+
case "success":
|
|
30
|
+
return { PluginStatic: action.instance, status: "success" };
|
|
31
|
+
case "failed":
|
|
32
|
+
return { PluginStatic: null, status: "failed" };
|
|
33
|
+
default:
|
|
34
|
+
throw new Error();
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
export function usePexipEngagePlugin(scriptSrc?: string) {
|
|
39
|
+
const ctx = usePluginContext();
|
|
40
|
+
const [state, dispatch] = useReducer(reducer, initialState);
|
|
41
|
+
|
|
42
|
+
const src = scriptSrc ?? ctx.scriptSrc;
|
|
43
|
+
|
|
44
|
+
useEffect(() => {
|
|
45
|
+
if (!src) {
|
|
46
|
+
console.warn(
|
|
47
|
+
"No scriptSrc was provided to PexipEngagePluginContext, or as prop to <PexipEngagePlugin />, skipping plugin initialization..."
|
|
48
|
+
);
|
|
49
|
+
|
|
50
|
+
dispatch({ type: "failed" });
|
|
51
|
+
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
if (window && document) {
|
|
56
|
+
// only load entry code once
|
|
57
|
+
|
|
58
|
+
if (window.PexipEngage?.Plugin) {
|
|
59
|
+
// If Skedify.Plugin is already available, use that instance.
|
|
60
|
+
dispatch({ type: "success", instance: window.PexipEngage.Plugin });
|
|
61
|
+
} else {
|
|
62
|
+
function listener(event: Event) {
|
|
63
|
+
const pluginEvent: PluginCustomEvent = event as any;
|
|
64
|
+
|
|
65
|
+
if (!window.PexipEngage) return;
|
|
66
|
+
|
|
67
|
+
if (pluginEvent.detail.type === window.PexipEngage.Plugin.EVENT_INIT) {
|
|
68
|
+
dispatch({ type: "success", instance: window.PexipEngage.Plugin });
|
|
69
|
+
} else if (pluginEvent.detail.type === window.PexipEngage?.Plugin.EVENT_MISCONFIGURED) {
|
|
70
|
+
dispatch({ type: "failed" });
|
|
71
|
+
} else if (pluginEvent.detail.type === window.PexipEngage?.Plugin.EVENT_ERROR) {
|
|
72
|
+
dispatch({ type: "failed" });
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
document.addEventListener(PEXIP_ENGAGE_PLUGIN_EVENT, listener);
|
|
77
|
+
|
|
78
|
+
createPlugin(src);
|
|
79
|
+
|
|
80
|
+
return () => document.removeEventListener(PEXIP_ENGAGE_PLUGIN_EVENT, listener);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}, [src]);
|
|
84
|
+
|
|
85
|
+
return state;
|
|
86
|
+
}
|
|
@@ -1,23 +1,22 @@
|
|
|
1
|
-
|
|
2
|
-
import React from "react";
|
|
1
|
+
import { useEffect, useRef } from "react";
|
|
3
2
|
import deepmerge from "deepmerge";
|
|
4
3
|
|
|
5
|
-
import {
|
|
4
|
+
import { type PexipEngagePluginContextProps, usePluginContext } from "./PexipEngageContext";
|
|
6
5
|
|
|
7
6
|
export function usePluginConfiguration(
|
|
8
|
-
overrideConfiguration:
|
|
9
|
-
):
|
|
10
|
-
const defaultConfiguration =
|
|
7
|
+
overrideConfiguration: PexipEngagePluginContextProps
|
|
8
|
+
): PexipEngagePluginContextProps {
|
|
9
|
+
const defaultConfiguration = usePluginContext();
|
|
11
10
|
const resolvedConfiguration = deepmerge(defaultConfiguration, overrideConfiguration);
|
|
12
11
|
|
|
13
12
|
return useMemoizedObject(resolvedConfiguration);
|
|
14
13
|
}
|
|
15
14
|
|
|
16
15
|
function useMemoizedObject<T>(currentObj: T) {
|
|
17
|
-
const prevResult =
|
|
16
|
+
const prevResult = useRef(currentObj);
|
|
18
17
|
const memoizedObj = replaceEqualDeep(prevResult.current, currentObj);
|
|
19
18
|
|
|
20
|
-
|
|
19
|
+
useEffect(() => {
|
|
21
20
|
prevResult.current = memoizedObj;
|
|
22
21
|
});
|
|
23
22
|
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { JSConfig } from "@pexip-engage-public/plugin-configuration-parser";
|
|
3
|
+
export interface PexipEngagePluginContextProps extends NonNullable<JSConfig["config"]> {
|
|
4
|
+
/**
|
|
5
|
+
* The plugin entry point URL.
|
|
6
|
+
* eg: `https://{ENTERPRISE_NAME}plugin.skedify.io/{ENTERPRISE_NAME}/skedify-plugin.js`
|
|
7
|
+
*/
|
|
8
|
+
scriptSrc?: string;
|
|
9
|
+
}
|
|
10
|
+
export declare function usePluginContext(): PexipEngagePluginContextProps;
|
|
11
|
+
export declare const PexipEngagePluginProvider: import("react").Provider<PexipEngagePluginContextProps>;
|
|
12
|
+
//# sourceMappingURL=PexipEngageContext.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PexipEngageContext.d.ts","sourceRoot":"","sources":["../src/PexipEngageContext.ts"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kDAAkD,CAAC;AAEjF,MAAM,WAAW,6BAA8B,SAAQ,WAAW,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IACpF;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID,wBAAgB,gBAAgB,kCAI/B;AACD,eAAO,MAAM,yBAAyB,yDAAoC,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { HTMLConfig } from "@pexip-engage-public/plugin-configuration-parser";
|
|
3
|
+
import { PexipEngagePluginContextProps } from "./PexipEngageContext";
|
|
4
|
+
interface PexipEngagePluginProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, HTMLConfig {
|
|
5
|
+
config?: PexipEngagePluginContextProps;
|
|
6
|
+
}
|
|
7
|
+
export declare function PexipEngagePlugin({ config: { scriptSrc, ...config }, ...props }: PexipEngagePluginProps): JSX.Element;
|
|
8
|
+
export {};
|
|
9
|
+
//# sourceMappingURL=PexipEngagePlugin.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PexipEngagePlugin.d.ts","sourceRoot":"","sources":["../src/PexipEngagePlugin.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kDAAkD,CAAC;AAEnF,OAAO,EAAE,6BAA6B,EAAE,MAAM,sBAAsB,CAAC;AAGrE,UAAU,sBACR,SAAQ,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,cAAc,CAAC,EACnF,UAAU;IACZ,MAAM,CAAC,EAAE,6BAA6B,CAAC;CACxC;AAED,wBAAgB,iBAAiB,CAAC,EAChC,MAAM,EAAE,EAAE,SAAS,EAAE,GAAG,MAAM,EAAO,EACrC,GAAG,KAAK,EACT,EAAE,sBAAsB,eAcxB"}
|
package/typings/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
export {
|
|
2
|
-
export
|
|
3
|
-
export {
|
|
1
|
+
export type { PexipEngagePluginContextProps } from "./PexipEngageContext";
|
|
2
|
+
export { PexipEngagePluginProvider } from "./PexipEngageContext";
|
|
3
|
+
export { PexipEngagePlugin } from "./PexipEngagePlugin";
|
|
4
|
+
export { usePexipEngagePlugin } from "./usePexipEngagePlugin";
|
|
4
5
|
//# sourceMappingURL=index.d.ts.map
|
package/typings/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,YAAY,EAAE,6BAA6B,EAAE,MAAM,sBAAsB,CAAC;AAC1E,OAAO,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}
|