@tugitark/react-widget 1.4.6 → 1.4.7
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/implementation.md +18 -0
- package/package.json +5 -6
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
Reimplementing The Widget With A Library
|
|
2
|
+
==========================================
|
|
3
|
+
|
|
4
|
+
This library uses [@tugitark/declarative-widget](https://gitlab.com/tugitark/integration/libraries/javascript/declarative-widget) to handle the heavy lifting of detecting property changes, downloading the widget script, and (un)loading the actual widget tags on changes. Basically that library converts the imperative and static Tugi Tark chat widget in to a functional equivalent. All this library does is call that library from inside a component.
|
|
5
|
+
|
|
6
|
+
The code below, while unoptimised, demonstrates how this compoment wraps that library. See [the source code](index.ts) for more details.
|
|
7
|
+
|
|
8
|
+
```typescript
|
|
9
|
+
import render, { type Props } from '@tugitark/declarative-widget';
|
|
10
|
+
|
|
11
|
+
export default function TugiWidget(props: Props) {
|
|
12
|
+
render(props);
|
|
13
|
+
return null;
|
|
14
|
+
}
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
The full version contains a few additional checks to ensure that certain events are only triggered once per component instance. But other than that, this is essentially all there is to this wrapper. All the complexities of reloading and updating the actual widget implementation itself are handled in the *declarative-widget* library itself. See [the from-scratch example](from-scratch.md) for a deeper explanation of what is happening behind the scenes in that library.
|
|
18
|
+
|
package/package.json
CHANGED
|
@@ -1,16 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tugitark/react-widget",
|
|
3
|
-
"version": "1.4.
|
|
3
|
+
"version": "1.4.7",
|
|
4
4
|
"description": "Wraps the tugitark widget in a React component.",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "npx esbuild index.ts --target=es6 --outfile=index.js && sed -i 's/\\bconst\\b/var/g' index.js && sed -i 's/\\blet\\b/var/g' index.js && npx esbuild index.js --allow-overwrite --minify --target=es5 --outfile=index.js && npx tsc --noErrorTruncation --declaration --emitDeclarationOnly --target es6 --module nodenext --moduleResolution nodenext --outDir . index.ts"
|
|
7
7
|
},
|
|
8
8
|
"files": [
|
|
9
|
+
"implementation.md",
|
|
9
10
|
"index.d.ts",
|
|
10
11
|
"index.js",
|
|
11
|
-
"index.md"
|
|
12
|
-
"using-library.md",
|
|
13
|
-
"from-scratch.md"
|
|
12
|
+
"index.md"
|
|
14
13
|
],
|
|
15
14
|
"dependencies": {
|
|
16
15
|
"@tugitark/declarative-widget": "^1.2.4"
|
|
@@ -20,8 +19,8 @@
|
|
|
20
19
|
},
|
|
21
20
|
"devDependencies": {
|
|
22
21
|
"esbuild": "^0.27.2",
|
|
23
|
-
"
|
|
24
|
-
"
|
|
22
|
+
"typescript": "^5.9.3",
|
|
23
|
+
"react": "^19.2.3"
|
|
25
24
|
},
|
|
26
25
|
"keywords": [
|
|
27
26
|
"Typescript",
|