commandbar 1.3.1 → 1.4.1

package/build/internal/src/middleware/helpers/commandTemplate.d.ts

@@ -0,0 +1,129 @@
+/*******************************************************************************/
+import * as t from 'io-ts';
+/*******************************************************************************/
+export declare const TemplateOptionsV: t.IntersectionC<[t.TypeC<{}>, t.PartialC<{
+    commandType: t.UnionC<[t.LiteralC<"independent">, t.LiteralC<"object">, t.LiteralC<"help">]>;
+    object: t.StringC;
+    hoverTooltip: t.BooleanC;
+    operation: t.UnionC<[t.LiteralC<"router">, t.LiteralC<"self">, t.LiteralC<"blank">, t.UndefinedC]>;
+}>]>;
+export declare const AdminTemplateV: t.IntersectionC<[t.TypeC<{
+    type: t.LiteralC<"admin">;
+    value: t.StringC;
+}>, t.IntersectionC<[t.TypeC<{}>, t.PartialC<{
+    commandType: t.UnionC<[t.LiteralC<"independent">, t.LiteralC<"object">, t.LiteralC<"help">]>;
+    object: t.StringC;
+    hoverTooltip: t.BooleanC;
+    operation: t.UnionC<[t.LiteralC<"router">, t.LiteralC<"self">, t.LiteralC<"blank">, t.UndefinedC]>;
+}>]>]>;
+export declare const CallbackTemplateV: t.IntersectionC<[t.TypeC<{
+    type: t.LiteralC<"callback">;
+    value: t.StringC;
+}>, t.IntersectionC<[t.TypeC<{}>, t.PartialC<{
+    commandType: t.UnionC<[t.LiteralC<"independent">, t.LiteralC<"object">, t.LiteralC<"help">]>;
+    object: t.StringC;
+    hoverTooltip: t.BooleanC;
+    operation: t.UnionC<[t.LiteralC<"router">, t.LiteralC<"self">, t.LiteralC<"blank">, t.UndefinedC]>;
+}>]>]>;
+export declare const LinkTemplateV: t.IntersectionC<[t.TypeC<{
+    type: t.LiteralC<"link">;
+    value: t.StringC;
+}>, t.IntersectionC<[t.TypeC<{}>, t.PartialC<{
+    commandType: t.UnionC<[t.LiteralC<"independent">, t.LiteralC<"object">, t.LiteralC<"help">]>;
+    object: t.StringC;
+    hoverTooltip: t.BooleanC;
+    operation: t.UnionC<[t.LiteralC<"router">, t.LiteralC<"self">, t.LiteralC<"blank">, t.UndefinedC]>;
+}>]>]>;
+export declare const ClickTemplateV: t.IntersectionC<[t.TypeC<{
+    type: t.UnionC<[t.LiteralC<"click">, t.LiteralC<"clickBySelector">, t.LiteralC<"clickByXpath">]>;
+    value: t.ArrayC<t.StringC>;
+}>, t.IntersectionC<[t.TypeC<{}>, t.PartialC<{
+    commandType: t.UnionC<[t.LiteralC<"independent">, t.LiteralC<"object">, t.LiteralC<"help">]>;
+    object: t.StringC;
+    hoverTooltip: t.BooleanC;
+    operation: t.UnionC<[t.LiteralC<"router">, t.LiteralC<"self">, t.LiteralC<"blank">, t.UndefinedC]>;
+}>]>]>;
+export declare const BuiltInTemplateV: t.IntersectionC<[t.TypeC<{
+    type: t.LiteralC<"builtin">;
+    value: t.StringC;
+}>, t.IntersectionC<[t.TypeC<{}>, t.PartialC<{
+    commandType: t.UnionC<[t.LiteralC<"independent">, t.LiteralC<"object">, t.LiteralC<"help">]>;
+    object: t.StringC;
+    hoverTooltip: t.BooleanC;
+    operation: t.UnionC<[t.LiteralC<"router">, t.LiteralC<"self">, t.LiteralC<"blank">, t.UndefinedC]>;
+}>]>]>;
+export declare const WebhookTemplateV: t.IntersectionC<[t.TypeC<{
+    type: t.LiteralC<"webhook">;
+    value: t.StringC;
+}>, t.IntersectionC<[t.TypeC<{}>, t.PartialC<{
+    commandType: t.UnionC<[t.LiteralC<"independent">, t.LiteralC<"object">, t.LiteralC<"help">]>;
+    object: t.StringC;
+    hoverTooltip: t.BooleanC;
+    operation: t.UnionC<[t.LiteralC<"router">, t.LiteralC<"self">, t.LiteralC<"blank">, t.UndefinedC]>;
+}>]>]>;
+export declare const ScriptTemplateV: t.IntersectionC<[t.TypeC<{
+    type: t.LiteralC<"script">;
+    value: t.StringC;
+}>, t.IntersectionC<[t.TypeC<{}>, t.PartialC<{
+    commandType: t.UnionC<[t.LiteralC<"independent">, t.LiteralC<"object">, t.LiteralC<"help">]>;
+    object: t.StringC;
+    hoverTooltip: t.BooleanC;
+    operation: t.UnionC<[t.LiteralC<"router">, t.LiteralC<"self">, t.LiteralC<"blank">, t.UndefinedC]>;
+}>]>]>;
+export declare const TemplateV: t.UnionC<[t.IntersectionC<[t.TypeC<{
+    type: t.LiteralC<"admin">;
+    value: t.StringC;
+}>, t.IntersectionC<[t.TypeC<{}>, t.PartialC<{
+    commandType: t.UnionC<[t.LiteralC<"independent">, t.LiteralC<"object">, t.LiteralC<"help">]>;
+    object: t.StringC;
+    hoverTooltip: t.BooleanC;
+    operation: t.UnionC<[t.LiteralC<"router">, t.LiteralC<"self">, t.LiteralC<"blank">, t.UndefinedC]>;
+}>]>]>, t.IntersectionC<[t.TypeC<{
+    type: t.LiteralC<"callback">;
+    value: t.StringC;
+}>, t.IntersectionC<[t.TypeC<{}>, t.PartialC<{
+    commandType: t.UnionC<[t.LiteralC<"independent">, t.LiteralC<"object">, t.LiteralC<"help">]>;
+    object: t.StringC;
+    hoverTooltip: t.BooleanC;
+    operation: t.UnionC<[t.LiteralC<"router">, t.LiteralC<"self">, t.LiteralC<"blank">, t.UndefinedC]>;
+}>]>]>, t.IntersectionC<[t.TypeC<{
+    type: t.LiteralC<"link">;
+    value: t.StringC;
+}>, t.IntersectionC<[t.TypeC<{}>, t.PartialC<{
+    commandType: t.UnionC<[t.LiteralC<"independent">, t.LiteralC<"object">, t.LiteralC<"help">]>;
+    object: t.StringC;
+    hoverTooltip: t.BooleanC;
+    operation: t.UnionC<[t.LiteralC<"router">, t.LiteralC<"self">, t.LiteralC<"blank">, t.UndefinedC]>;
+}>]>]>, t.IntersectionC<[t.TypeC<{
+    type: t.UnionC<[t.LiteralC<"click">, t.LiteralC<"clickBySelector">, t.LiteralC<"clickByXpath">]>;
+    value: t.ArrayC<t.StringC>;
+}>, t.IntersectionC<[t.TypeC<{}>, t.PartialC<{
+    commandType: t.UnionC<[t.LiteralC<"independent">, t.LiteralC<"object">, t.LiteralC<"help">]>;
+    object: t.StringC;
+    hoverTooltip: t.BooleanC;
+    operation: t.UnionC<[t.LiteralC<"router">, t.LiteralC<"self">, t.LiteralC<"blank">, t.UndefinedC]>;
+}>]>]>, t.IntersectionC<[t.TypeC<{
+    type: t.LiteralC<"builtin">;
+    value: t.StringC;
+}>, t.IntersectionC<[t.TypeC<{}>, t.PartialC<{
+    commandType: t.UnionC<[t.LiteralC<"independent">, t.LiteralC<"object">, t.LiteralC<"help">]>;
+    object: t.StringC;
+    hoverTooltip: t.BooleanC;
+    operation: t.UnionC<[t.LiteralC<"router">, t.LiteralC<"self">, t.LiteralC<"blank">, t.UndefinedC]>;
+}>]>]>, t.IntersectionC<[t.TypeC<{
+    type: t.LiteralC<"webhook">;
+    value: t.StringC;
+}>, t.IntersectionC<[t.TypeC<{}>, t.PartialC<{
+    commandType: t.UnionC<[t.LiteralC<"independent">, t.LiteralC<"object">, t.LiteralC<"help">]>;
+    object: t.StringC;
+    hoverTooltip: t.BooleanC;
+    operation: t.UnionC<[t.LiteralC<"router">, t.LiteralC<"self">, t.LiteralC<"blank">, t.UndefinedC]>;
+}>]>]>, t.IntersectionC<[t.TypeC<{
+    type: t.LiteralC<"script">;
+    value: t.StringC;
+}>, t.IntersectionC<[t.TypeC<{}>, t.PartialC<{
+    commandType: t.UnionC<[t.LiteralC<"independent">, t.LiteralC<"object">, t.LiteralC<"help">]>;
+    object: t.StringC;
+    hoverTooltip: t.BooleanC;
+    operation: t.UnionC<[t.LiteralC<"router">, t.LiteralC<"self">, t.LiteralC<"blank">, t.UndefinedC]>;
+}>]>]>]>;

package/build/internal/src/util/Disposable.d.ts

@@ -0,0 +1,17 @@
+import { _dispose, _disposed } from '../client/symbols';
+export declare type PublicDisposable = {
+    dispose: VoidFunction;
+    _disposed?: boolean;
+};
+export declare type PrivateDisposable = {
+    [_dispose]: VoidFunction;
+    [_disposed]?: boolean;
+};
+export declare type Disposable = undefined | PublicDisposable | PrivateDisposable;
+export declare const isDisposable: (x: unknown) => x is Disposable;
+/**
+ * Determines if the provided value is "disposed". A value is considered "disposed" if it is an object with the
+ * _disposed property or symbol symbol set to true, or if the actual value is undefined.
+ */
+export declare const isDisposed: (x: unknown) => boolean;
+export declare function dispose(x: Disposable): void;

package/package.json

@@ -1,27 +1,25 @@
 {
   "name": "commandbar",
-  "version": "1.3.1",
+  "version": "1.4.1",
   "description": "Javascript Utility for CommandBar",
-  "main": "build/index.js",
-  "types": "build/index.d.js",
+  "main": "build/commandbar-js/src/index.js",
+  "types": "build/commandbar-js/src/index.d.ts",
   "sideEffects": false,
   "scripts": {
     "clean": "rimraf build",
-    "build": "tsc -p tsconfig.json",
+    "build": "webpack build && tsc",
+    "minify-snippet": "ts-node scripts/minify-snippet.ts",
     "prepublishOnly": "yarn run clean && yarn run build",
     "test": "jest --runInBand",
-    "test:watch": "jest --watch --verbose false --silent false"
+    "test:watch": "jest --watch --verbose false --silent false",
+    "watch": "scripts/watch.ts"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
-  "dependencies": {},
-  "devDependencies": {
-    "@types/jest": "^26.0.22",
-    "jest": "^26.6.3",
-    "rimraf": "^3.0.2",
-    "ts-jest": "^26.5.4",
-    "ts-node": "^9.1.1",
-    "typescript": "^3.9"
-  }
+  "dependencies": {
+    "fp-ts": "2.10.5",
+    "io-ts": "2.2.13"
+  },
+  "devDependencies": {}
 }

package/scripts/minify-snippet.ts

@@ -0,0 +1,36 @@
+#!/usr/bin/env ts-node
+
+import * as ts from 'typescript';
+import { snippet } from '../src/snippet';
+import { minify } from 'terser';
+
+const result = ts.transpileModule(snippet.toString(), {
+  compilerOptions: {
+    alwaysStrict: false,
+    declaration: false,
+    lib: ['DOM', 'ES2015'],
+    module: ts.ModuleKind.None,
+    noEmitOnError: true,
+    removeComments: true,
+    sourceMap: false,
+    strict: true,
+    target: ts.ScriptTarget.ES5,
+  },
+});
+
+if (result.diagnostics && result.diagnostics.length > 0) {
+  result.diagnostics?.forEach((d) => console.error(d.messageText));
+  process.exit(1);
+}
+
+const lines = result.outputText.split('\n');
+const transpiled = ["var org = '<org_id>';"].concat(lines.slice(1, lines.length - 2)).join('\n');
+
+minify(transpiled, { mangle: { toplevel: true } })
+  .then((result) => {
+    console.log(result.code);
+  })
+  .catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });

package/scripts/watch.ts

@@ -0,0 +1,5 @@
+#!/usr/bin/env ts-node
+
+import orchestrate from '../../scripts/util/orchestrate';
+
+orchestrate([['webpack watch', 'tsc -w']], { killOthers: ['failure', 'success'] });

package/src/index.ts

@@ -1,3 +1,12 @@
-import init, { initProxy, presentSnippet } from './init';
+import { CommandBarClientSDK } from '../../internal/src/client/CommandBarClientSDK';
 
-export { init, initProxy, presentSnippet };
+export { default as init } from './init';
+export { initProxySDK as initProxy } from '../../internal/src/client/proxy';
+export { snippet } from './snippet';
+export { CommandBarClientSDK };
+
+declare global {
+  interface Window {
+    CommandBar: CommandBarClientSDK;
+  }
+}

package/src/init.ts

@@ -1,67 +1,14 @@
-import { snippet } from './snippet';
-import { CommandBarClientAPI } from './commandbar';
-
-declare global {
-  interface String {
-    interpolate(templates: { [k: string]: string }): string;
-  }
-}
-
-// eslint-disable-next-line no-extend-native
-String.prototype.interpolate = function (params) {
-  const names = Object.keys(params);
-  const vals = Object.values(params);
-  // eslint-disable-next-line no-new-func
-  return new Function(...names, `return \`${this}\`;`)(...vals);
-};
-
-const prepareSnippet = (snippetString: string, templates: { [k: string]: string }) => {
-  let s = snippetString.interpolate(templates);
-  s = '!(' + s + ')();';
-  return s;
-};
+import 'proxy-polyfill';
+import 'es6-object-assign/auto';
+import 'es6-symbol/implement';
+import { getProxySDK } from '../../internal/src/client/proxy';
+import { _configuration } from '../../internal/src/client/symbols';
 
 interface IInitOptions {
   debug?: boolean;
-  version?: string;
 }
 
-type CommandBarProxyApi = Partial<CommandBarClientAPI> & {
-  q: unknown[];
-};
-
-// eslint-disable-next-line @typescript-eslint/ban-types
-const hasProp = <T extends object>(target: T, prop: string | number | symbol): prop is keyof T => prop in target;
-
-export const initProxy = () => {
-  if (window.CommandBar === undefined || window.CommandBar._disposed === true) {
-    // @ts-expect-error: Temporarily ignore CommandBarProxy definition
-    let existingQueue = Array.isArray(window.CommandBar?.q) ? [...window.CommandBar.q] : [];
-    existingQueue = existingQueue.filter((item) => {
-      return item.length > 0 && item[0] !== 'dispose';
-    });
-
-    const cb: CommandBarProxyApi = {
-      q: existingQueue,
-    };
-
-    window.CommandBar = new Proxy(cb, {
-      get: function (_, prop) {
-        if (hasProp(cb, prop)) return cb[prop];
-        return function () {
-          // eslint-disable-next-line prefer-rest-params
-          const a = Array.prototype.slice.call(arguments);
-          a.unshift(prop);
-          cb.q.push(a);
-        };
-      },
-    }) as CommandBarClientAPI;
-  }
-
-  return window.CommandBar;
-};
-
-const getSrc = (org: string, version?: string) => {
+const getSrc = (org: string) => {
   let origin = 'https://api.commandbar.com';
   const params = [];
 
@@ -69,6 +16,8 @@ const getSrc = (org: string, version?: string) => {
   if (lc && lc.includes('local')) {
     // for debugging purposes
     origin = 'http://localhost:8000';
+  } else if (!lc && org === '10d7dc04') {
+    origin = 'https://api-cu.commandbar.com';
   }
 
   let src = origin + '/latest/' + org;
@@ -77,18 +26,20 @@ const getSrc = (org: string, version?: string) => {
     params.push('lc=' + lc);
   }
 
-  if (!!version) {
-    params.push('v=' + version);
-  }
+  const version = 2;
+  params.push('version=' + version);
 
   src = src + '?' + params.join('&');
   return src;
 };
 
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-let loadOrg = () => {};
-
 const loadLatest = (org: string) => {
+  if (document.readyState !== 'complete') {
+    // NOTE: `once` is not supported by IE11 and this will cause a (minor!) memory leak.
+    window.addEventListener('load', loadLatest.bind(null, org), { capture: false, once: true });
+    return;
+  }
+
   const src = getSrc(org);
 
   const el = document.createElement('script');
@@ -96,12 +47,19 @@ const loadLatest = (org: string) => {
   el.async = true;
   el.src = src;
   document.head.appendChild(el);
-
-  window.removeEventListener('load', loadOrg, false);
 };
 
-const DEFAULT_OPTS = { debug: false, version: '' };
-
+const DEFAULT_OPTS = { debug: false };
+
+/**
+ * Initializes CommandBar and injects the scripts required to load it into the <head> of the document. After calling
+ * this function it will be possible to access window.CommandBar and call the SDK methods, even if the scripts have not
+ * finished loading yet.
+ *
+ * @param {string} org Your organization ID, which can be found [here](https://app.commandbar.com/docs/getting-started/installation#option-b:-use-npm-or-yarn).
+ * @param {IInitOptions} [opts] Additional options to use for initialization: `debug` will enable additional logging
+ * output.
+ */
 const init = (org: string, opts: IInitOptions = DEFAULT_OPTS) => {
   const config = { ...DEFAULT_OPTS, ...opts };
 
@@ -112,25 +70,8 @@ const init = (org: string, opts: IInitOptions = DEFAULT_OPTS) => {
 
   config.debug && console.log('CommandBar init...');
 
-  initProxy();
-
-  loadOrg = () => loadLatest(org);
-
-  window.addEventListener('load', loadOrg, false);
-};
-
-export const presentSnippet = (org: string) => {
-  const snippetString = prepareSnippet(snippet.toString(), { org, version: '' });
-  const trimmedSnippet = snippetString
-    .split('\n')
-    .map((line: string) => {
-      return line.trim();
-    })
-    .join('');
-
-  return `<script>
-  ${trimmedSnippet}
-</script>`;
+  getProxySDK()[_configuration] = { uuid: org };
+  loadLatest(org);
 };
 
 export default init;

package/src/snippet.ts

@@ -1,57 +1,69 @@
-/* eslint-disable prefer-rest-params */
 /* eslint-disable no-template-curly-in-string */
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-export const snippet = () => {
-  const org = '${org}';
-  const cb = [];
-  cb.q = [];
-  window.CommandBar = new Proxy(cb, {
-    get: function (f, n) {
-      if (n in f) {
-        return f[n];
-      }
-      return function () {
-        const a = Array.prototype.slice.call(arguments);
-        a.unshift(n);
-        cb.q.push(a);
-      };
-    },
-  });
-
-  const load = function () {
-    let origin = 'https://api.commandbar.com';
-    const params = [];
+/* eslint-disable prefer-rest-params */
+/* eslint-disable @typescript-eslint/no-inferrable-types */
+export const snippet = (org: string) => {
+  const polyfills = ['Object.assign', 'Symbol', 'Symbol.for'].join('%2C');
+  const w = window as unknown as Record<string, unknown>;
 
-    const lc = localStorage.getItem('commandbar.lc');
-    if (lc && lc.includes('local')) {
-      // for debugging purposes
-      origin = 'http://localhost:8000';
+  function loadScript(src: string, async = false) {
+    if (document.readyState !== 'complete') {
+      window.addEventListener('load', loadScript.bind(null, src, async), { capture: false, once: true });
     }
+    const el = document.createElement('script');
+    el.type = 'text/javascript';
+    el.async = async;
+    el.src = src;
+    document.head.appendChild(el);
+  }
 
-    let src = origin + '/latest/' + org;
+  function bootstrap() {
+    if (w.CommandBar !== undefined) return;
+    delete w.__CommandBarBootstrap__;
 
-    if (lc) {
-      params.push('lc=' + lc);
-    }
+    const _configuration = Symbol.for('CommandBar::configuration');
+    const _orgConfig = Symbol.for('CommandBar::orgConfig');
+    const _disposed = Symbol.for('CommandBar::disposed');
+    const _isProxy = Symbol.for('CommandBar::isProxy');
+    const _queue = Symbol.for('CommandBar::queue');
+    const _unwrap = Symbol.for('CommandBar::unwrap');
+    const params = [];
+    const lc = localStorage.getItem('commandbar.lc');
+    const origin = lc && lc.includes('local') ? 'http://localhost:8000' : 'https://api.commandbar.com';
 
-    const v = '${version}';
-    if (!!v) {
-      params.push('v=' + v);
-    }
+    const proxy = Object.assign(
+      {
+        [_configuration]: { uuid: org },
+        [_orgConfig]: {},
+        [_disposed]: false,
+        [_isProxy]: true,
+        [_queue]: new Array<unknown>(),
+        [_unwrap]: () => proxy,
+      },
+      w.CommandBar,
+    );
+    w.CommandBar = new Proxy(proxy, {
+      get: function (_, prop: keyof typeof proxy) {
+        if (prop in proxy) return proxy[prop];
+        return function () {
+          const a = Array.prototype.slice.call(arguments);
+          a.unshift(prop);
+          (proxy[_queue] as Array<unknown>).push(a);
+        };
+      },
+    });
 
-    src = src + '?' + params.join('&');
+    if (lc !== null) params.push(`lc=${lc}`);
+    params.push('version=2');
 
-    const el = document.createElement('script');
-    el.type = 'text/javascript';
-    el.async = true;
-    el.src = src;
-    document.head.appendChild(el);
-  };
+    loadScript(`${origin}/latest/${org}?${params.join('&')}`, true);
+  }
 
-  if (window.attachEvent) {
-    window.attachEvent('onload', load);
+  if (typeof Object.assign === 'undefined' || typeof Symbol === 'undefined' || typeof Symbol.for === 'undefined') {
+    w.__CommandBarBootstrap__ = bootstrap;
+    loadScript(
+      'https://polyfill.io/v3/polyfill.min.js?version=3.101.0&callback=__CommandBarBootstrap__&features=' + polyfills,
+    );
   } else {
-    window.addEventListener('load', load, false);
+    bootstrap();
   }
 };

package/tsconfig.json

@@ -2,10 +2,11 @@
   "include": ["./src"],
   "compilerOptions": {
     "declaration": true,
-    "declarationMap": true,
+    "declarationMap": false,
+    "emitDeclarationOnly": true,
     "module": "CommonJS",
     "outDir": "build",
-    "rootDir": "src",
+    "rootDir": "..",
     "sourceMap": true,
     "target": "es5",
     "lib": ["dom", "esnext"],
@@ -17,6 +18,7 @@
 
     "forceConsistentCasingInFileNames": true,
     "stripInternal": true, // https://www.typescriptlang.org/tsconfig#stripInternal
-    "types": []
+    "types": ["node"],
+    "jsx": "react"
   }
 }

package/webpack.config.js

@@ -1,12 +1,11 @@
-const webpack = require('webpack')
-const path = require('path')
+const path = require('path');
 
 module.exports = {
   mode: 'production',
-  entry: './src/index.ts',
+  entry: path.resolve(__dirname, 'src', 'index.ts'),
   output: {
-    path: path.resolve(__dirname, 'dist/umd'),
-    filename: 'commandbar.js',
+    path: path.resolve(__dirname, 'build', 'commandbar-js', 'src'),
+    filename: 'index.js',
     library: {
       type: 'umd',
       name: 'commandbar',
@@ -15,7 +14,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.ts$/,
+        test: /\.tsx?$/,
         loader: 'ts-loader',
         options: {
           transpileOnly: true,
@@ -24,11 +23,7 @@ module.exports = {
     ],
   },
   resolve: {
-    extensions: ['.ts', '.js', '.json'],
+    extensions: ['.ts', '.js', '.json', '.tsx'],
   },
-  plugins: [
-    new webpack.DefinePlugin({
-      process: 'process/browser',
-    }),
-  ],
-}
+  stats: 'minimal',
+};