refactor: split code to improve readability

Author: sebtiz13

.eslintrc.cjs

@@ -1,3 +1,4 @@
+'use strict';
 /* eslint-disable sort-keys */
 module.exports = {
   root: true,
@@ -6,5 +7,33 @@ module.exports = {
     node: true,
   },
   plugins: ['kuzzle'],
-  extends: ['plugin:kuzzle/default', 'plugin:kuzzle/typescript'],
+  extends: ['plugin:kuzzle/default', 'plugin:kuzzle/node'],
+  ignorePatterns: ['dist'],
+  overrides: [
+    {
+      files: ['*.ts'],
+      extends: ['plugin:kuzzle/typescript'],
+      parserOptions: {
+        project: ['./tsconfig.json'],
+      },
+      rules: {
+        '@typescript-eslint/prefer-nullish-coalescing': [
+          'error',
+          { ignoreConditionalTests: false, ignoreMixedLogicalExpressions: false },
+        ],
+        '@typescript-eslint/strict-boolean-expressions': [
+          'error',
+          {
+            allowString: false,
+            allowNumber: false,
+            allowNullableObject: false,
+            allowNullableBoolean: false,
+            allowNullableString: false,
+            allowNullableNumber: false,
+            allowAny: false,
+          },
+        ],
+      },
+    },
+  ],
 };

.gitignore

@@ -1,4 +1,3 @@
 node_modules
-index.js
-index.js.map
-index.d.ts
+dist
+*.tgz

index.ts

@@ -2,13 +2,15 @@
   "name": "vue-plugin-kuzzle",
   "version": "4.4.0",
   "description": "A Vuejs plugin shipping the Kuzzle SDK in your components",
-  "main": "index.js",
-  "types": "./index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "scripts": {
     "build": "tsc",
     "prepack": "npm run build",
     "test": "npm run test:lint && npm run test:types",
     "test:lint": "eslint . --ext .ts",
+    "test:lint:fix": "npm run test:lint -- --fix",
     "test:types": "tsc --noEmit"
   },
   "repository": {
@@ -27,15 +29,21 @@
   },
   "homepage": "https://github.com/kuzzleio/vue-plugin-kuzzle#readme",
   "peerDependencies": {
-    "kuzzle-sdk": "~7.x"
+    "kuzzle-sdk": "~7.x",
+    "typescript": ">= 5.1",
+    "vue": "2.7.*"
   },
   "dependencies": {
-    "kuzzle-sdk": "^7.7.6",
-    "vue": "^2.6.14"
+    "kuzzle-sdk": "~7.x",
+    "vue": "2.7.*"
   },
   "devDependencies": {
     "@types/node": "^16.10.1",
     "eslint-plugin-kuzzle": "^0.0.8",
-    "typescript": "^4.4.3"
-  }
+    "typescript": "5.1.*"
+  },
+  "files": [
+    "dist",
+    "vue-kuzzle.d.ts"
+  ]
 }

package-lock.json

@@ -0,0 +1,62 @@
+import { Backends, Backend, KuzzleProtocol } from '../types';
+
+const LS_KEY = 'kuzzle-backend';
+const GLOBAL_NAME = 'kuzzleBackend';
+
+export function getBackendFromConf(backendsConfig: Backends = {}): Backend | null {
+  /* eslint-disable sort-keys */
+  const backends: Backends = {
+    default: {
+      host: process.env.VUE_APP_BACKEND_HOST ?? 'localhost',
+      protocol:
+        (process.env.VUE_APP_BACKEND_PROTO as KuzzleProtocol | undefined) ??
+        KuzzleProtocol.WEBSOCKET,
+      options: {
+        port: parseInt(process.env.VUE_APP_BACKEND_PORT ?? '7512'),
+        sslConnection: process.env.VUE_APP_BACKEND_SSL === 'true' || false,
+      },
+    },
+    ...backendsConfig,
+  };
+  /* eslint-enable sort-keys */
+
+  const backendName = process.env.VUE_APP_BACKEND ?? 'default';
+
+  if (backends[backendName] === undefined) {
+    throw new Error(`Unable to find backend ${backendName} in configuration.`);
+  }
+
+  return backends[backendName] ?? null;
+}
+
+export function getBackendFromLocalStorage(): Backend | null {
+  const lsItem = localStorage.getItem(LS_KEY);
+  if (lsItem === null) {
+    return null;
+  }
+  const backend = JSON.parse(lsItem);
+
+  if (typeof backend !== 'object') {
+    throw new Error(
+      `Item found in localStorage (${LS_KEY}) is malformed. Expected an object, found ${backend}`,
+    );
+  }
+
+  return backend;
+}
+
+export function getBackendFromWindow(): Backend | null {
+  if ((window as any)[GLOBAL_NAME] === undefined) {
+    return null;
+  }
+
+  const backend = JSON.parse((window as any)[GLOBAL_NAME]);
+
+  if (typeof backend !== 'object') {
+    throw new Error(
+      `Item found in global (${GLOBAL_NAME}) is malformed. Expected an object, found ${backend}`,
+    );
+  }
+
+  return backend;
+}

package.json

@@ -0,0 +1,2 @@
+export * from './getConfig';
+export * from './instantiateKuzzleSDK';

src/helpers/getConfig.ts

@@ -0,0 +1,35 @@
+import { Kuzzle, KuzzleAbstractProtocol, Http, WebSocket } from 'kuzzle-sdk';
+import { Backends, Backend, KuzzleProtocol, SDKOptions } from '../types';
+import { getBackendFromLocalStorage, getBackendFromWindow, getBackendFromConf } from './getConfig';
+
+function protocolFactory(backend: Backend): KuzzleAbstractProtocol {
+  switch (backend.protocol) {
+    case KuzzleProtocol.HTTP:
+      return new Http(backend.host, backend.options);
+
+    case KuzzleProtocol.WEBSOCKET:
+    default:
+      return new WebSocket(backend.host, backend.options);
+  }
+}
+
+/**
+ * Instantiates the Kuzzle SDK by resolving the backend from the given config.
+ *
+ * @param backendsConfig
+ * @param sdkOptions
+ */
+export function instantiateKuzzleSDK(backendsConfig?: Backends, sdkOptions?: SDKOptions): Kuzzle {
+  const backend: Backend | null =
+    getBackendFromLocalStorage() ?? getBackendFromWindow() ?? getBackendFromConf(backendsConfig);
+
+  if (backend === null) {
+    throw new Error('No backend resolved.');
+  }
+
+  if (backend.host === undefined) {
+    throw new Error(`Backend is malformed (missing host)`);
+  }
+
+  return new Kuzzle(protocolFactory(backend), sdkOptions);
+}

src/helpers/index.ts

@@ -0,0 +1,4 @@
+import '../vue-kuzzle.d';
+export * from './types';
+export * from './helpers';
+export * from './plugin';

src/helpers/instantiateKuzzleSDK.ts

@@ -0,0 +1,22 @@
+import { PluginFunction } from 'vue';
+import { instantiateKuzzleSDK } from './helpers';
+import { Backends, SDKOptions } from './types';
+
+export interface VueKuzzleOptions {
+  backends: Backends;
+  sdkOptions: SDKOptions;
+}
+
+/**
+ * The VueKuzzle plugin. Makes the Kuzzle SDK available in Vue components as
+ * `this.$kuzzle`.
+ *
+ * @param Vue The Vue application to apply the plugin to
+ * @param options Options passed to the Kuzzle SDK constructor
+ *
+ * @see https://docs.kuzzle.io/sdk/js/7/core-classes/kuzzle/constructor/#options
+ */
+export const VueKuzzle: PluginFunction<VueKuzzleOptions> = (Vue, options) => {
+  const sdkOptions = options?.sdkOptions ?? {};
+  Vue.prototype.$kuzzle = instantiateKuzzleSDK(options?.backends, sdkOptions);
+};