Minor improvements (#22)

* Improve base64 decode perf. + add tests + fix code formatting

* Don't swallow exceptions in LocalStorageCache.get/set

* Send etag as query param (ccetag) when SDK runs in browser

* Exclude non-source files so they don't pollute autocompletion/intellisense

* Update to configcat-common v9.1.0

* Bump version

Author: adams85

Diff for: package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "configcat-js-chromium-extension",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "ConfigCat is a configuration as a service that lets you manage your features and configurations without actually deploying new code.",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -33,7 +33,7 @@
   "homepage": "https://configcat.com",
   "dependencies": {
     "@types/chrome": "0.0.193",
-    "configcat-common": "^9.0.0",
+    "configcat-common": "^9.1.0",
     "tslib": "^2.4.1"
   },
   "devDependencies": {

Diff for: package.json

@@ -1,37 +1,39 @@
-import type { IConfigCatCache } from "configcat-common";
+import type { IConfigCatCache, IConfigCatKernel } from "configcat-common";
+import { ExternalConfigCache } from "configcat-common";
 
 export class LocalStorageCache implements IConfigCatCache {
-  async set(key: string, value: string): Promise<void> {
-    try {
-      await chrome.storage.local.set({ [key]: this.b64EncodeUnicode(value) });
-    }
-    catch (ex) {
-      // chrome storage is unavailable
+  static setup(kernel: IConfigCatKernel, localStorageGetter?: () => chrome.storage.LocalStorageArea | null): IConfigCatKernel {
+    const localStorage = localStorageGetter?.() ?? window.chrome?.storage?.local;
+    if (localStorage) {
+      kernel.defaultCacheFactory = options => new ExternalConfigCache(new LocalStorageCache(localStorage), options.logger);
     }
+    return kernel;
   }
 
-  async get(key: string): Promise<string | undefined> {
-    try {
-      const cacheObj = await chrome.storage.local.get(key);
-      const configString = cacheObj[key];
-      if (configString) {
-        return this.b64DecodeUnicode(configString);
-      }
-    }
-    catch (ex) {
-      // chrome storage is unavailable or invalid cache value.
-    }
+  constructor(private readonly storage: chrome.storage.LocalStorageArea) {
   }
 
-  private b64EncodeUnicode(str: string): string {
-    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, function (_, p1) {
-      return String.fromCharCode(parseInt(p1, 16))
-    }));
+  async set(key: string, value: string): Promise<void> {
+    await this.storage.set({ [key]: toUtf8Base64(value) });
   }
 
-  private b64DecodeUnicode(str: string): string {
-    return decodeURIComponent(Array.prototype.map.call(atob(str), function (c: string) {
-      return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
-    }).join(''));
+  async get(key: string): Promise<string | undefined> {
+    const cacheObj = await this.storage.get(key);
+    const configString = cacheObj[key];
+    if (configString) {
+      return fromUtf8Base64(configString);
+    }
   }
 }
+
+export function toUtf8Base64(str: string): string {
+  str = encodeURIComponent(str);
+  str = str.replace(/%([0-9A-F]{2})/g, (_, p1) => String.fromCharCode(parseInt(p1, 16)));
+  return btoa(str);
+}
+
+export function fromUtf8Base64(str: string): string {
+  str = atob(str);
+  str = str.replace(/[%\x80-\xFF]/g, m => "%" + m.charCodeAt(0).toString(16));
+  return decodeURIComponent(str);
+}

Diff for: src/Cache.ts

@@ -18,9 +18,15 @@ export class HttpConfigFetcher implements IConfigFetcher {
     }
 
     try {
+      let url = options.getUrl();
+      if (lastEtag) {
+        // We are sending the etag as a query parameter so if the browser doesn't automatically adds the If-None-Match header, we can transform this query param to the header in our CDN provider.
+        url += "&ccetag=" + encodeURIComponent(lastEtag);
+      }
       // NOTE: It's intentional that we don't specify the If-None-Match header.
       // The browser automatically handles it, adding it manually would cause an unnecessary CORS OPTIONS request.
-      const response = await fetch(options.getUrl(), requestInit);
+      // In case the browser doesn't handle it, we are transforming the ccetag query parameter to the If-None-Match header 
+      const response = await fetch(url, requestInit);
 
       const { status: statusCode, statusText: reasonPhrase } = response;
       if (statusCode === 200) {

Diff for: src/ConfigFetcher.ts

@@ -1,5 +1,5 @@
 import type { IAutoPollOptions, IConfigCatClient, IConfigCatLogger, ILazyLoadingOptions, IManualPollOptions, LogLevel, OverrideBehaviour, SettingValue } from "configcat-common";
-import { ExternalConfigCache, FlagOverrides, MapOverrideDataSource, PollingMode } from "configcat-common";
+import { FlagOverrides, MapOverrideDataSource, PollingMode } from "configcat-common";
 import * as configcatcommon from "configcat-common";
 import { LocalStorageCache } from "./Cache";
 import { HttpConfigFetcher } from "./ConfigFetcher";
@@ -17,12 +17,11 @@ import CONFIGCAT_SDK_VERSION from "./Version";
  */
 export function getClient<TMode extends PollingMode | undefined>(sdkKey: string, pollingMode?: TMode, options?: OptionsForPollingMode<TMode>): IConfigCatClient {
   return configcatcommon.getClient(sdkKey, pollingMode ?? PollingMode.AutoPoll, options,
-    {
+    LocalStorageCache.setup({
       configFetcher: new HttpConfigFetcher(),
       sdkType: "ConfigCat-JS-Chromium",
       sdkVersion: CONFIGCAT_SDK_VERSION,
-      defaultCacheFactory: options => new ExternalConfigCache(new LocalStorageCache(), options.logger)
-    });
+    }));
 }
 
 /**

Diff for: src/index.ts

@@ -1,32 +1,94 @@
 import { assert } from "chai";
-import { LocalStorageCache } from "../lib/Cache";
-import { resolve } from "path";
-
-let localStorage = {}
-
-global.chrome = <any>{
-    storage: {
-        local: {
-            clear: () => {
-                localStorage = {}
-            },
-            set: (toMergeIntoStorage: any) => {
-                localStorage = { ...localStorage, ...toMergeIntoStorage }
-            },
-            get: () => {
-                return localStorage;
-            }
-        },
+import { LogLevel } from "configcat-common";
+import { LocalStorageCache, fromUtf8Base64, toUtf8Base64 } from "../src/Cache";
+import { FakeLogger } from "./helpers/fakes";
+import { createClientWithLazyLoad } from "./helpers/utils";
+
+describe("Base64 encode/decode test", () => {
+  let allBmpChars = "";
+  for (let i = 0; i <= 0xFFFF; i++) {
+    if (i < 0xD800 || 0xDFFF < i) { // skip lone surrogate chars
+      allBmpChars += String.fromCharCode(i);
     }
-}
+  }
+
+  for (const input of [
+    "",
+    "\n",
+    "äöüÄÖÜçéèñışğ⢙✓😀",
+    allBmpChars
+  ]) {
+    it(`Base64 encode/decode works - input: ${input.slice(0, Math.min(input.length, 128))}`, () => {
+      assert.strictEqual(fromUtf8Base64(toUtf8Base64(input)), input);
+    });
+  }
+});
 
 describe("LocalStorageCache cache tests", () => {
-    it("LocalStorageCache works with non latin 1 characters", async () => {
-        const cache = new LocalStorageCache();
-        const key = "testkey";
-        const text = "äöüÄÖÜçéèñışğ⢙✓😀";
-        await cache.set(key, text);
-        const retrievedValue = await cache.get(key);
-        assert.strictEqual(retrievedValue, text);
+  it("LocalStorageCache works with non latin 1 characters", async () => {
+
+    const fakeLocalStorage = createFakeLocalStorage();
+    const cache = new LocalStorageCache(fakeLocalStorage);
+    const key = "testkey";
+    const text = "äöüÄÖÜçéèñışğ⢙✓😀";
+    await cache.set(key, text);
+    const retrievedValue = await cache.get(key);
+    assert.strictEqual(retrievedValue, text);
+    assert.strictEqual((await fakeLocalStorage.get(key))[key], "w6TDtsO8w4TDlsOcw6fDqcOow7HEscWfxJ/DosKi4oSi4pyT8J+YgA==");
+  });
+
+  it("Error is logged when LocalStorageCache.get throws", async () => {
+    const errorMessage = "Something went wrong.";
+    const faultyLocalStorage = Object.assign(createFakeLocalStorage(), {
+      get() { return Promise.reject(new Error(errorMessage)); }
     });
+
+    const fakeLogger = new FakeLogger();
+
+    const client = createClientWithLazyLoad("configcat-sdk-1/PKDVCLf-Hq-h-kCzMp-L7Q/AG6C1ngVb0CvM07un6JisQ", { logger: fakeLogger },
+      kernel => LocalStorageCache.setup(kernel, () => faultyLocalStorage));
+
+    try { await client.getValueAsync("stringDefaultCat", ""); }
+    finally { client.dispose(); }
+
+    assert.isDefined(fakeLogger.events.find(([level, eventId, , err]) => level === LogLevel.Error && eventId === 2200 && err instanceof Error && err.message === errorMessage));
+  });
+
+  it("Error is logged when LocalStorageCache.set throws", async () => {
+    const errorMessage = "Something went wrong.";
+    const faultyLocalStorage = Object.assign(createFakeLocalStorage(), {
+      set() { return Promise.reject(new Error(errorMessage)); }
+    });
+
+    const fakeLogger = new FakeLogger();
+
+    const client = createClientWithLazyLoad("configcat-sdk-1/PKDVCLf-Hq-h-kCzMp-L7Q/AG6C1ngVb0CvM07un6JisQ", { logger: fakeLogger },
+      kernel => LocalStorageCache.setup(kernel, () => faultyLocalStorage));
+
+    try { await client.getValueAsync("stringDefaultCat", ""); }
+    finally { client.dispose(); }
+
+    assert.isDefined(fakeLogger.events.find(([level, eventId, , err]) => level === LogLevel.Error && eventId === 2201 && err instanceof Error && err.message === errorMessage));
+  });
 });
+
+function createFakeLocalStorage(): chrome.storage.LocalStorageArea {
+  let localStorage: { [key: string]: any } = {};
+
+  return <Partial<chrome.storage.LocalStorageArea>>{
+    set(items: { [key: string]: any }) {
+      localStorage = { ...localStorage, ...items };
+      return Promise.resolve();
+    },
+    get(keys?: string | string[] | { [key: string]: any } | null) {
+      let result = localStorage;
+      if (typeof keys === "string") {
+        result = { [keys]: localStorage[keys] };
+      }
+      else if (keys != null) {
+        throw new Error("Not implemented.");
+      }
+      return Promise.resolve(result);
+    }
+  } as chrome.storage.LocalStorageArea;
+}

Diff for: test/CacheTests.ts

@@ -31,7 +31,7 @@ describe("HTTP tests", () => {
         const defaultValue = "NOT_CAT";
         assert.strictEqual(defaultValue, await client.getValueAsync("stringDefaultCat", defaultValue));
 
-        assert.isDefined(logger.messages.find(([level, msg]) => level === LogLevel.Error && msg.startsWith("Request timed out while trying to fetch config JSON.")));
+        assert.isDefined(logger.events.find(([level, , msg]) => level === LogLevel.Error && msg.toString().startsWith("Request timed out while trying to fetch config JSON.")));
       }
       finally {
         fetchMock.reset();
@@ -56,7 +56,7 @@ describe("HTTP tests", () => {
       const defaultValue = "NOT_CAT";
       assert.strictEqual(defaultValue, await client.getValueAsync("stringDefaultCat", defaultValue));
 
-      assert.isDefined(logger.messages.find(([level, msg]) => level === LogLevel.Error && msg.startsWith("Your SDK Key seems to be wrong.")));
+      assert.isDefined(logger.events.find(([level, , msg]) => level === LogLevel.Error && msg.toString().startsWith("Your SDK Key seems to be wrong.")));
     }
     finally {
       fetchMock.reset();
@@ -80,7 +80,7 @@ describe("HTTP tests", () => {
       const defaultValue = "NOT_CAT";
       assert.strictEqual(defaultValue, await client.getValueAsync("stringDefaultCat", defaultValue));
 
-      assert.isDefined(logger.messages.find(([level, msg]) => level === LogLevel.Error && msg.startsWith("Unexpected HTTP response was received while trying to fetch config JSON:")));
+      assert.isDefined(logger.events.find(([level, , msg]) => level === LogLevel.Error && msg.toString().startsWith("Unexpected HTTP response was received while trying to fetch config JSON:")));
     }
     finally {
       fetchMock.reset();
@@ -105,9 +105,7 @@ describe("HTTP tests", () => {
       const defaultValue = "NOT_CAT";
       assert.strictEqual(defaultValue, await client.getValueAsync("stringDefaultCat", defaultValue));
 
-      console.log(logger.messages);
-
-      assert.isDefined(logger.messages.find(([level, msg]) => level === LogLevel.Error && msg.startsWith("Unexpected error occurred while trying to fetch config JSON.")));
+      assert.isDefined(logger.events.find(([level, , msg]) => level === LogLevel.Error && msg.toString().startsWith("Unexpected error occurred while trying to fetch config JSON.")));
     }
     finally {
       fetchMock.reset();

Diff for: test/HttpTests.ts

@@ -1,31 +1,31 @@
 import { assert } from "chai";
-import { IConfigCatClient, IEvaluationDetails, IOptions, LogLevel, PollingMode, SettingKeyValue, User } from "configcat-common";
+import { IConfigCatClient, IOptions, LogLevel, PollingMode, User } from "configcat-common";
 import * as configcatClient from "../src";
 import { createConsoleLogger } from "../src";
 
 const sdkKey = "configcat-sdk-1/PKDVCLf-Hq-h-kCzMp-L7Q/u28_1qNyZ0Wz-ldYHIU7-g";
 
 describe("Special characters test", () => {
 
-    const options: IOptions = { logger: createConsoleLogger(LogLevel.Off) };
+  const options: IOptions = { logger: createConsoleLogger(LogLevel.Off) };
 
-    let client: IConfigCatClient;
+  let client: IConfigCatClient;
 
-    beforeEach(function () {
-        client = configcatClient.getClient(sdkKey, PollingMode.AutoPoll, options);
-    });
+  beforeEach(function() {
+    client = configcatClient.getClient(sdkKey, PollingMode.AutoPoll, options);
+  });
 
-    afterEach(function () {
-        client.dispose();
-    });
+  afterEach(function() {
+    client.dispose();
+  });
 
-    it(`Special characters works - cleartext`, async () => {
-        const actual: string = await client.getValueAsync("specialCharacters", "NOT_CAT", new User("äöüÄÖÜçéèñışğ⢙✓😀"));
-        assert.strictEqual(actual, "äöüÄÖÜçéèñışğ⢙✓😀");
-    });
+  it("Special characters works - cleartext", async () => {
+    const actual: string = await client.getValueAsync("specialCharacters", "NOT_CAT", new User("äöüÄÖÜçéèñışğ⢙✓😀"));
+    assert.strictEqual(actual, "äöüÄÖÜçéèñışğ⢙✓😀");
+  });
 
-    it(`Special characters works - hashed`, async () => {
-        const actual: string = await client.getValueAsync("specialCharactersHashed", "NOT_CAT", new User("äöüÄÖÜçéèñışğ⢙✓😀"));
-        assert.strictEqual(actual, "äöüÄÖÜçéèñışğ⢙✓😀");
-    });
+  it("Special characters works - hashed", async () => {
+    const actual: string = await client.getValueAsync("specialCharactersHashed", "NOT_CAT", new User("äöüÄÖÜçéèñışğ⢙✓😀"));
+    assert.strictEqual(actual, "äöüÄÖÜçéèñışğ⢙✓😀");
+  });
 });

Diff for: test/SpecialCharacterTests.ts

@@ -1,13 +1,13 @@
 import { IConfigCatLogger, LogEventId, LogLevel, LogMessage } from "../../src";
 
 export class FakeLogger implements IConfigCatLogger {
-  messages: [LogLevel, string][] = [];
+  events: [LogLevel, LogEventId, LogMessage, any?][] = [];
 
   constructor(public level = LogLevel.Info) { }
 
-  reset(): void { this.messages.splice(0); }
+  reset(): void { this.events.splice(0); }
 
   log(level: LogLevel, eventId: LogEventId, message: LogMessage, exception?: any): void {
-    this.messages.push([level, message.toString()]);
+    this.events.push([level, eventId, message, exception]);
   }
-}
+}