diff --git a/README.md b/README.md index 69ffe2c..e028c7b 100644 --- a/README.md +++ b/README.md @@ -65,6 +65,20 @@ For example, you can build your up to connect the Websocket to `wss://kuzzle.myd VUE_APP_BACKEND_HOST=kuzzle.mydomain.com VUE_APP_BACKEND_PORT=443 VUE_APP_BACKEND_SSL=true npm run build ``` +## Specify the backend via a global variable + +You can also specify the backend config as a JSON-stringified POJO living in a global variable called `kuzzleBackend`. This variable must be available _before_ the Vue app is started, specifically before the `instantiateKuzzleSDK` public function is called. Here is an example of how to declare it + +```javascript +const kuzzleBackend = JSON.stringify({ + host: 'myhost.mydomain.com', + options: { + port: 443, + ssl: true + } +}) +``` + ## Specify the backend via localStorage _Purely for debug purposes_, you can override all the backend configuration by setting your backend as stringified JSON in the `kuzzle-backend` Local Storage item, e.g. @@ -75,6 +89,15 @@ _Purely for debug purposes_, you can override all the backend configuration by s **Beware that Local Storage is persistent and it is fairly easy to forget you set this item.** Use it consciously and keep in mind it is a good practice to unset it as soon as your debug session is over. +## Backend declaration precedence order + +The plugin makes a choice of the available backend declaration by setting a preference order. + +* Local storage (`kuzzle-backend`) +* Global variable (`kuzzleBackend`) +* Environment variables +* Options passed to `Vue.use` + ## Accessing the Kuzzle SDK instance within the app You'll be able to access the Kuzzle SDK instance from the components as diff --git a/index.ts b/index.ts index 554bcf3..1e21103 100644 --- a/index.ts +++ b/index.ts @@ -2,6 +2,7 @@ import { Kuzzle, WebSocket } from 'kuzzle-sdk'; import _Vue from 'vue'; const LS_KEY = 'kuzzle-backend' +const GLOBAL_NAME = 'kuzzleBackend' interface Backend { host: string; @@ -52,8 +53,22 @@ export function getBackendFromLocalStorage() { return backend; } +export function getBackendFromWindow() { + if (!window[GLOBAL_NAME]) { + return null + } + + const backend = JSON.parse(window[GLOBAL_NAME]) + + if (typeof backend !== 'object') { + throw new Error(`Item found in global (${GLOBAL_NAME}) is malformed. Expected an object, found ${backend}`) + } + + return backend; +} + export const instantiateKuzzleSDK = (backendsConfig: Backends, sdkOptions: any): Kuzzle => { - const backend:Backend | null = getBackendFromLocalStorage() || getBackendFromConf(backendsConfig) + const backend:Backend | null = getBackendFromLocalStorage() || getBackendFromWindow() || getBackendFromConf(backendsConfig) if (!backend) { throw new Error('No backend resolved.'); diff --git a/package.json b/package.json index 142eef7..54f2782 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-plugin-kuzzle", - "version": "4.2.0", + "version": "4.3.0", "description": "A Vuejs plugin shipping the Kuzzle SDK in your components", "main": "index.js", "types": "./index.d.ts",