@n1k1t/mock-server 0.1.59 → 0.1.61

package/src/gui/app/context.ts

@@ -0,0 +1,76 @@
+import EventEmitter from 'events';
+import io from 'socket.io-client';
+
+import type { IIoExchangeSchema } from '../../server';
+import type { PopupsComponent } from './components';
+import type { TEndpoints } from '../../client';
+import type { TFunction } from '../../../types';
+
+import type config from '../../config';
+
+import { Context } from './models';
+import { cast } from '../../utils';
+
+type ExtractWsEndpointPath<K extends keyof TEndpoints> = TEndpoints[K]['io'] extends { path: infer R }
+  ? R extends string ? R : never
+  : never;
+
+type TWsEndpoints = { [K in keyof TEndpoints as ExtractWsEndpointPath<K>]-?: TEndpoints[K] };
+
+interface IEvents {
+  'group:register': [string];
+}
+
+class MainContext extends Context<{
+  popups: PopupsComponent;
+  groups: Set<string>;
+}> {
+  public config = cast<Pick<typeof config['storage'], 'history'>>({
+    history: {
+      limit: 100,
+    },
+  });
+
+  public instances = {
+    io: io(window.DEV?.io.origin ?? location.origin, {
+      path: window.DEV?.io.path ?? `${location.pathname.split('/').slice(0, -3).join('/')}/socket.io/`
+    }),
+  };
+
+  public services = {
+    io: {
+      exec: <K extends keyof TWsEndpoints & string>(
+        path: K,
+        body?: TWsEndpoints[K]['incoming']['data']
+      ): Promise<TWsEndpoints[K]['outgoing']> => new Promise((resolve) => this.instances.io.emit(path, body, resolve)),
+
+      subscribe: <
+        K extends keyof IIoExchangeSchema,
+        T extends IIoExchangeSchema[K]
+      >(channel: K, handler: (payload: T) => unknown) => this.instances.io.on(<string>channel, handler)
+    },
+  };
+
+  private events = new EventEmitter();
+
+  public on<K extends keyof IEvents>(event: K, handler: TFunction<unknown, IEvents[K]>) {
+    this.events.on(event, handler);
+    return this;
+  }
+
+  public once<K extends keyof IEvents>(event: K, handler: TFunction<unknown, IEvents[K]>) {
+    this.events.once(event, handler);
+    return this;
+  }
+
+  public emit<K extends keyof IEvents>(event: K, ...args: IEvents[K]) {
+    this.events.emit(event, ...args);
+    return this;
+  }
+
+  public assignConfig(config: MainContext['config']) {
+    return Object.assign(this, { config });
+  }
+}
+
+export default new MainContext();

package/src/gui/app/handlebars/helpers.ts

@@ -0,0 +1,32 @@
+import _ from 'lodash';
+
+import { buildHandlebarsHelper } from './utils';
+import { calculateColor } from '../utils';
+
+type TCompareMethod = 'eq' | 'neq' | 'lt' | 'lte' | 'gt' | 'gte';
+
+export const compare = buildHandlebarsHelper<[string, TCompareMethod, string]>(
+  (context) =>
+  (arg1, operator, arg2, { fn, inverse }) => {
+    const check = () => {
+      switch(operator) {
+        case 'eq': return arg1 === arg2;
+        case 'neq': return arg1 !== arg2;
+        case 'lt': return arg1 < arg2;
+        case 'lte': return arg1 <= arg2;
+        case 'gt': return arg1 > arg2;
+        case 'gte': return arg1 >= arg2;
+        default: return false;
+      }
+    }
+
+    const result = check();
+    return result ? fn ? fn(context) : inverse ? inverse(context) : result : null;
+  }
+);
+
+export const truncate = buildHandlebarsHelper<[string, number]>(() => (text, length) => _.truncate(text, { length }));
+
+export const toLocaleTime = buildHandlebarsHelper<[number]>(() => (timestamp) => new Date(timestamp).toLocaleTimeString());
+export const toSeconds = buildHandlebarsHelper<[number]>(() => (ms) => (ms / 1000).toFixed(3));
+export const toColor = buildHandlebarsHelper<[string]>(() => (text) => calculateColor(text));

package/src/gui/app/handlebars/index.ts

@@ -0,0 +1,11 @@
+import hbs from 'handlebars';
+
+import * as helpers from './helpers';
+import * as partials from './partials';
+
+export default {
+  init: () => {
+    Object.entries(helpers).forEach(([name, helper]) => hbs.registerHelper(name, helper));
+    Object.entries(partials).forEach(([name, partial]) => hbs.registerPartial(name, partial));
+  },
+}

package/src/gui/app/handlebars/partials/expectation-meta.hbs

@@ -0,0 +1,53 @@
+export default `
+  <div class="segment">
+    {{#compare format 'neq' 'short'}}
+      <button class="activity">
+        {{#if isEnabled}}
+          <i class="fas fa-plug"></i>
+        {{else}}
+          <i class="fas fa-power-off"></i>
+        {{/if}}
+      </button>
+
+      <span class="calls-count {{#compare meta.executionsCount 'gt' 0}}active{{/compare}}">
+        <i class="fas fa-undo-alt"></i>{{meta.executionsCount}}
+      </span>
+    {{/compare}}
+
+    <span class="name"><b style="color: {{toColor group}};">{{group}}</b> {{name}}</span>
+  </div>
+
+  {{#compare format 'neq' 'short'}}
+    {{#compare meta.tags.length 'gt' 0}}<span class="arrow"><i class="fas fa-chevron-right"></i></span>{{/compare}}
+
+    <div class="segment">
+      {{#each transports}}<span class="transport">{{this}}</span>{{/each}}
+
+      {{#each meta.tags}}
+        {{#compare @index 'lte' 5}}
+          {{#if (compare location 'eq' 'outgoing.status')}}
+            <span class="status
+              {{#compare value 'lt' 400}}green{{/compare}}
+              {{#compare value 'gte' 400}}red{{/compare}}
+            "><b>{{value}}</b></span>
+          {{else if (compare location 'eq' 'method')}}
+            <span class="method" style="color: {{toColor value}};">{{value}}</span>
+          {{else}}
+            <span class="{{location}}">{{> truncated this length=45}}</span>
+          {{/if}}
+        {{/compare}}
+      {{/each}}
+    </div>
+  {{/compare}}
+
+  {{#with schema.forward}}
+    <span class="arrow"><i class="fas fa-chevron-right"></i></span>
+
+    <div class="segment">
+      {{#if baseUrl}}<span class="forward">{{> truncated value=baseUrl length=45}}</span>{{/if}}
+      {{#if url}}<span class="forward">{{> truncated value=url length=45}}</span>{{/if}}
+
+      {{#if ../isCached}}<span class="cache"><i class="fas fa-database"></i></span>{{/if}}
+    </div>
+  {{/with}}
+`

package/src/gui/app/handlebars/partials/index.ts

@@ -0,0 +1,2 @@
+export const expectationMeta = require('./expectation-meta.hbs');
+export const truncated = require('./truncated.hbs');

package/src/gui/app/handlebars/partials/truncated.hbs

@@ -0,0 +1,10 @@
+export default `
+  {{#if (compare value.length 'gt' length)}}
+    <span class="truncated">
+      <span class="full">{{value}}</span>
+      <span class="short">{{truncate value length}}</span>
+    </span>
+  {{else}}
+    {{value}}
+  {{/if}}
+`

package/src/gui/app/handlebars/utils.ts

@@ -0,0 +1,9 @@
+import { HelperOptions } from 'handlebars';
+
+export const buildHandlebarsHelper = <T extends unknown[]>(
+  handler: (context: object) => (...args: [...T, HelperOptions]) => unknown
+) => {
+  return function(this: object, ...args: [...T, HelperOptions]) {
+    return handler(this)(...args);
+  }
+}

package/src/gui/app/main.ts

@@ -0,0 +1,38 @@
+import * as components from './components';
+import * as sections from './sections';
+
+import context from './context';
+
+const loader = components.LoaderComponent.build().show();
+const header = components.HeaderComponent.build([
+  { type: 'section', entity: sections.settings.hide() },
+  { type: 'section', entity: sections.analytics.hide() },
+  { type: 'separator' },
+  { type: 'section', entity: sections.expectations },
+  { type: 'section', entity: sections.history.hide() },
+]);
+
+context.switchStorage(sections.expectations.storage).share({
+  popups: components.PopupsComponent.build(),
+  groups: new Set(),
+});
+
+document.body.prepend(header.element);
+document.body.append(loader.element);
+document.body.append(context.shared.popups.element);
+
+Object.values(sections).forEach((section) => document.body.append(section.element));
+
+context.instances.io.on('connect', async () => {
+  console.log('WebSocket has connected');
+
+  await context.services.io.exec('ping');
+
+  const { data } = await context.services.io.exec('config:get');
+
+  context.assignConfig(data);
+  context.shared.popups.push('Connected!');
+
+  Object.values(sections).forEach((container) => container.initialize());
+  loader.hide();
+});

package/src/gui/app/models/button.ts

@@ -0,0 +1,41 @@
+import { TFunction } from '../../../../types';
+
+export class Button {
+  private handlers: TFunction<Promise<unknown>, [Event]>[] = [];
+
+  constructor(public element?: Element | null) {
+    if (!element) {
+      throw new Error('Provided element is not valid');
+    }
+
+    element.addEventListener('click', (event) => this.trigger(event));
+  }
+
+  public handle(handler: TFunction<Promise<unknown> | unknown, [Event]>) {
+    if (!this.element) {
+      return this;
+    }
+
+    this.handlers.push(async (event) => {
+      this.element!.classList.add('processed');
+
+      try {
+        await handler(event);
+      } finally {
+        this.element!.classList.remove('processed');
+      }
+    });
+
+    return this;
+  }
+
+  async trigger(event = new Event('manual')) {
+    for (const handler of this.handlers) {
+      await handler(event)
+    }
+  }
+
+  static build(element?: Button['element']) {
+    return new Button(element);
+  }
+}

package/src/gui/app/models/client-storage.ts

@@ -0,0 +1,21 @@
+export class ClientStorage<T extends object = object> {
+  constructor(public key: string) {}
+
+  public extract(): T | null {
+    return JSON.parse(localStorage.getItem(this.key) ?? 'null');
+  }
+
+  public store(value: T): this {
+    localStorage.setItem(this.key, JSON.stringify(value));
+    return this;
+  }
+
+  public clear(): this {
+    localStorage.removeItem(this.key);
+    return this;
+  }
+
+  static build<T extends object>(key: string) {
+    return new ClientStorage<T>(key);
+  }
+}

package/src/gui/app/models/component.ts

@@ -0,0 +1,79 @@
+export type TElementPredicate = Component | Element | string | null;
+
+export class Component {
+  public element: Element = document.createElement('div');
+
+  constructor(predicate?: TElementPredicate) {
+    if (predicate) {
+      this.element = this.compilePredicateToElement(predicate);
+    }
+  }
+
+  public get isHidden(): boolean {
+    return this.element.classList.contains('hidden');
+  }
+
+  public get id(): string {
+    return this.element.id;
+  }
+
+  public assignId(id: string): this {
+    this.element.id = id;
+    return this;
+  }
+
+  public show(): this {
+    this.element.classList.remove('hidden');
+    return this;
+  }
+
+  public hide(): this {
+    this.element.classList.add('hidden');
+    return this;
+  }
+
+  public append(predicate: TElementPredicate): this {
+    this.element.append(this.compilePredicateToElement(predicate));
+    return this;
+  }
+
+  public prepend(predicate: TElementPredicate): this {
+    this.element.prepend(this.compilePredicateToElement(predicate));
+    return this;
+  }
+
+  public replace(predicate: TElementPredicate): this {
+    const element = this.compilePredicateToElement(predicate);
+    this.element.after(element);
+
+    if (this.isHidden) {
+      element.classList.add('hidden');
+    }
+
+    return Object.assign(this.delete(), { element });
+  }
+
+  public clear(): this {
+    this.element.innerHTML = '';
+    return this;
+  }
+
+  public delete(): this {
+    this.element.remove();
+    return this;
+  }
+
+  protected compilePredicateToElement(predicate: TElementPredicate): Element {
+    return predicate instanceof Component
+      ? predicate.element
+      : typeof predicate === 'string'
+      ? this.compileHtmlStringToElement(predicate)
+      : predicate === null
+      ? document.createElement('div')
+      : predicate;
+  }
+
+  protected compileHtmlStringToElement(content: string): Element {
+    return new DOMParser().parseFromString(content, 'text/html').body.firstElementChild!;
+  }
+}

package/src/gui/app/models/context.ts

@@ -0,0 +1,14 @@
+import { DynamicStorage } from './dynamic-storage';
+
+export class Context<TShared extends object = {}> {
+  public storage = DynamicStorage.build('void', document.body);
+  public shared = <TShared>{};
+
+  public share(shared: TShared) {
+    return Object.assign(this, { shared });
+  }
+
+  public switchStorage(storage: DynamicStorage<any>) {
+    return Object.assign(this, { storage });
+  }
+}

package/src/gui/app/models/dynamic-storage.ts

@@ -0,0 +1,36 @@
+import _ from 'lodash';
+
+import { convertObjectToKeyValueCouples } from '../utils';
+import { Component, TElementPredicate } from './component';
+import { ClientStorage } from './client-storage';
+import { Form } from './form';
+
+export class DynamicStorage<T extends object = object> extends Component {
+  public client = ClientStorage.build<[string, unknown][]>(this.key);
+  public form = Form.build<T>(this.element);
+
+  constructor(public key: string, predicate: TElementPredicate) {
+    super(predicate);
+  }
+
+  public sync(): this {
+    const stored: [string, unknown][] = this.client.extract() ?? [];
+    this.form.assign(stored.reduce((acc, [path, value]) => _.set(acc, path, value), {}));
+
+    return this;
+  }
+
+  public save(): this {
+    this.client.store(convertObjectToKeyValueCouples(this.form.extract(), this.form.paths));
+    return this;
+  }
+
+  public clear(): this {
+    this.client.clear();
+    return this;
+  }
+
+  static build<T extends object>(key: string, predicate: TElementPredicate) {
+    return new DynamicStorage<T>(key, predicate);
+  }
+}

package/src/gui/app/models/form.ts

@@ -0,0 +1,75 @@
+import _ from 'lodash';
+
+import { convertObjectToKeyValueCouples } from '../utils';
+import { Component, TElementPredicate } from './component';
+import { PartialDeep } from '../../../../types';
+
+type TInputType = 'text' | 'number' | 'password' | 'checkbox';
+
+const castInputValue = (() => {
+  const map = {
+    password: String,
+    number: Number,
+    text: String,
+  };
+
+  return (type: TInputType, value: string): null | string | number => {
+    if (type === 'checkbox') {
+      return value || null;
+    }
+
+    const trimed = value.trim();
+    return trimed.length ? (map[type] ?? String)(trimed) : null;
+  };
+})();
+
+export class Form<T extends object = object> extends Component {
+  public get paths(): string[] {
+    return <string[]>[...this.element.querySelectorAll('*[data-key]')]
+      .map((input) => input.getAttribute('data-key'))
+      .filter(Boolean);
+  }
+
+  public extract(): PartialDeep<T> {
+    return [...this.element.querySelectorAll('*[data-key]')].reduce((acc, input) => {
+      const key = input.getAttribute('data-key');
+      const type = <TInputType>(input.getAttribute('cast') ?? input.getAttribute('type') ?? 'text');
+
+      if (!key || 'value' in input === false || typeof input.value !== 'string') {
+        return acc;
+      }
+
+      if (input.hasAttribute('list')) {
+        const delimiter = input.getAttribute('list') ?? ',';
+        const value = input.value
+          .split(delimiter)
+          .map((nested) => castInputValue(type, nested))
+          .filter((nested) => nested !== null);
+
+        return value.length ? _.set(acc, key, value) : acc;
+      }
+
+      const value = castInputValue(type, input.value);
+
+      if (type === 'checkbox' && 'checked' in input) {
+        return input.checked ? _.set(acc, key, value ?? true) : acc;
+      }
+
+      return value !== null ? _.set(acc, key, value) : acc;
+    }, <T>{});
+  }
+
+  public assign(payload: PartialDeep<T>) {
+    convertObjectToKeyValueCouples(payload, this.paths)
+      .map(([path, value]) => <const>[path, value, this.element.querySelector(`*[data-key="${path}"]`)!])
+      .forEach(([path, value, input]) =>
+        _.set(input, 'value', Array.isArray(value) ? value.join(input.getAttribute('list') ?? ',') : (value ?? ''))
+      );
+
+    return this;
+  }
+
+  static build<T extends object>(predicate: TElementPredicate) {
+    return new Form<T>(predicate);
+  }
+}

package/src/gui/app/models/index.ts

@@ -0,0 +1,7 @@
+export * from './dynamic-storage';
+export * from './client-storage';
+export * from './component';
+export * from './section';
+export * from './context';
+export * from './button';
+export * from './form';

package/src/gui/app/models/section.ts

@@ -0,0 +1,82 @@
+import EventEmitter from 'events';
+
+import { Component, TElementPredicate } from './component';
+import { DynamicStorage } from './dynamic-storage';
+import { TFunction } from '../../../../types';
+import { Button } from './button';
+
+interface IEvents {
+  initialize: [Section];
+  refresh: [Section];
+  select: [Section];
+}
+
+export class Section extends Component {
+  public content = new Component(this.element.querySelector('div.content'));
+  public isInitialized = false;
+
+  public controls = {
+    main: new Component(this.element.querySelector('div.controls div.main')),
+    additional: new Component(this.element.querySelector('div.controls div.additional')),
+  };
+
+  public storage = DynamicStorage.build(`config:${this.element.id}`, this.element.querySelector('div.storage'));
+  public meta: { name?: string, icon?: string } = {};
+
+  private events = new EventEmitter();
+  private expander = this.element.querySelector('div.controls button#expand');
+
+  constructor(predicate: TElementPredicate) {
+    super(predicate);
+
+    if (this.expander) {
+      Button.build(this.expander).handle(() => {
+        if (this.controls.additional.isHidden) {
+          this.controls.additional.show();
+          return this.expander!.classList.add('toggled');
+        }
+
+        this.controls.additional.hide();
+        return this.expander!.classList.remove('toggled');
+      });
+    }
+  }
+
+  public assignMeta(meta: Section['meta']) {
+    return Object.assign(this, { meta });
+  }
+
+  public initialize() {
+    this.isInitialized = true;
+    this.storage.sync();
+
+    return this.emit('initialize', this);
+  }
+
+  public refresh() {
+    return this.emit('refresh', this);
+  }
+
+  public select() {
+    return this.emit('select', this);
+  }
+
+  public on<K extends keyof IEvents>(event: K, handler: TFunction<unknown, IEvents[K]>) {
+    this.events.on(event, handler);
+    return this;
+  }
+
+  public once<K extends keyof IEvents>(event: K, handler: TFunction<unknown, IEvents[K]>) {
+    this.events.once(event, handler);
+    return this;
+  }
+
+  private emit<K extends keyof IEvents>(event: K, ...args: IEvents[K]) {
+    this.events.emit(event, ...args);
+    return this;
+  }
+
+  static build(predicate: TElementPredicate) {
+    return new Section(predicate);
+  }
+}