@tugitark/react-widget 1.4.5 → 1.4.6

package/index.md

@@ -186,7 +186,7 @@ return (
 	);
 ```
 
-[Click here](using-library.md) to see how this component wraps the underlying [@tugitark/declarative-widget](https://gitlab.com/tugitark/integration/libraries/javascript/declarative-widget) library in a react component.
+[Click here](implementation.md) to see how this component wraps the underlying [@tugitark/declarative-widget](https://gitlab.com/tugitark/integration/libraries/javascript/declarative-widget) library in a react component.
 
-[Click here](from-scratch.md) to get a better understanding of everything that that library is doing behind the scenes to inject the main widget script in to a page and initialise it.
+[Click here](https://gitlab.com/tugitark/integration/libraries/javascript/declarative-widget/implementation.md) to get a better understanding of everything that that library is doing behind the scenes to inject the main widget script in to a page and initialise it.
 

package/package.json

@@ -1,11 +1,9 @@
 {
 	"name": "@tugitark/react-widget",
-	"version": "1.4.5",
+	"version": "1.4.6",
 	"description": "Wraps the tugitark widget in a React component.",
 	"scripts": {
-		"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",
-		"release": "npm publish --access public",
-		"prerelease": "npm run build"
+		"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"
 	},
 	"files": [
 		"index.d.ts",
@@ -15,7 +13,7 @@
 		"from-scratch.md"
 	],
 	"dependencies": {
-		"@tugitark/declarative-widget": "^1.2.3"
+		"@tugitark/declarative-widget": "^1.2.4"
 	},
 	"peerDependencies": {
 		"react": ">=0.0.0"

package/from-scratch.md

@@ -1,86 +0,0 @@
- Reimplementing The Widget From Scratch
-========================================
-
-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.
-
-The code below demonstrates the basics of what is going on behind the scenes within that library.  As detailed in [the original integration guide](https://www.tugitark.com/chat-setup), at some point the widget implementation must be imported using `<script>` and initialised via `window.tugiWidget.initialize()`.  This example handles those operations by dynamically loading the script via javascript, then calling the API method once the loading is completed.  The full version also handles unloading of the script for updates that cannot be applied after initialisation.  However, unloading the widget was never an intended operation and so how it is done uses several internal details that should not be replicated in your code, and will not br replicated here.
-
- Steps
-=======
-
-* *Load the script*
-  
-  Create a `<script>` tag dynamically and inject it in to the page (if required):
-  
-  ```javascript
-  function loadScript() {
-      if (window.tugiWidget) {
-          // The script already exists.
-          initialise();
-          return;
-      }
-      const script = document.createElement('script');
-      // This attribute is recommended in the integration guide but may not work on `http` (testing).
-      //script.crossOrigin = 'anonymous';
-      script.async = true;
-      script.src = 'https://app.tugi.ai/tugi.widget/script';
-      script.onload = initialise;
-      script.onerror = (e) => console.error(e);
-      script.setAttribute('tugi-widget-script', 'true');
-      document.head.appendChild(script);
-  }
-  ```
-
-* *Initialise the widget*
-  
-  The details here are partially supplied by Tugi Tark (e.g. the `brandId`), and otherwise customisable by you:
-  
-  ```javascript
-  function initialise() {
-      window.tugiWidget.initialize({
-          jwtFn: getUserToken,
-          tenantId: 'gb-casinos-ltd',
-          brandId: 'a040050697fc4b2db16acfbbad1d0da4',
-          brandName: 'Super Casino',
-          httpUrl: 'https://app.tugi.ai/tugi.widget',
-          wsUrl: 'wss://ws.tugi.ai',
-          customize: {
-              title: 'Super Casino Chat',
-              showTitle: true,
-              fontColor: PRIMARY_COLOUR,
-              primaryColor: PRIMARY_COLOUR,
-              secondaryColor: 'hsla(36, 100%, 50%, 1)',
-              homePageBackgroundColor: 'hsla(36, 100%, 37%, 0.2)',
-              homePageTextColor: PRIMARY_COLOUR,
-          },
-      });
-  }
-  ```
-
-* *Request the JWT*
-  
-  This requires a user that is logged in:
-  
-  ```javascript
-  async function getUserToken() {
-      const response = await fetch('/users/current/tugi-token');
-      if (response.ok) {
-          const jwt = await response.text();
-          if (jwt !== '') return jwt;
-      }
-      return null;
-  }
-  ```
-  
-  Note that the standard endpoint for getting JWTs is `/.tugi/jwt/issue?id=<user-id>`.  The default code will use this endpoint if no `jwtFn` is supplied.
-
-* *Refesh the widget*
-  
-  If a user logs in after loading the widget tell it so it can update the JWT:
-  
-  ```javascript
-  if (window.tugiWidget?.isInitialized()) {
-      window.tugiWidget.refresh();
-  }
-  ```
-

package/using-library.md

@@ -1,18 +0,0 @@
- Reimplementing The Widget With A Library
-==========================================
-
-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.
-
-The code below, while unoptimised, demonstrates how this compoment wraps that library.  See [the source code](index.ts) for more details.
-
-```typescript
-import render, { type Props } from '@tugitark/declarative-widget';
-
-export default function TugiWidget(props: Props) {
-	render(props);
-	return null;
-}
-```
-
-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.
-