@windwalker-io/unicorn-next 0.1.0

package/src/module/list-dependent.ts

@@ -0,0 +1,321 @@
+
+import type { CancelTokenSource } from 'axios';
+import { useHttpClient, useUniDirective } from '../composable';
+import { getBoundedInstance, html, selectOne } from '../service';
+import { mergeDeep } from '../utilities';
+
+const nope = () => {};
+
+export interface ListDependentOptions {
+  ajax: {
+    url: string | null | ((self: ListDependent) => string);
+    value_field: string;
+    data: Record<string, any> | ((data: Record<string, any>, self: ListDependent) => Record<string, any>);
+  };
+  source?: Record<string, any>;
+  text_field: string;
+  value_field: string;
+  first_option?: Record<string, any>;
+  default_value: any;
+  initial_load: boolean;
+  empty_mark: string;
+  hooks: {
+    before_request: (value: any, element: HTMLSelectElement, dependent: HTMLSelectElement) => any;
+    after_request: (value: any, element: HTMLSelectElement, dependent: HTMLSelectElement) => any;
+  };
+}
+
+const defaultOptions: ListDependentOptions = {
+  ajax: {
+    url: null,
+    value_field: 'value',
+    data: {},
+  },
+  source: undefined,
+  text_field: 'title',
+  value_field: 'id',
+  first_option: undefined,
+  default_value: null,
+  initial_load: true,
+  empty_mark: '__EMPTY__',
+  hooks: {
+    before_request: nope,
+    after_request: nope
+  }
+};
+
+type ListItems = Record<string, any>[];
+type MaybeGroupedListItems = Record<string, ListItems> | ListItems;
+
+export class ListDependent {
+  element: HTMLSelectElement;
+  dependent: HTMLSelectElement;
+  options: ListDependentOptions;
+  abortController: AbortController | null = null;
+
+  static handle(el: string | HTMLSelectElement, dependent?: string | HTMLSelectElement, options: Partial<ListDependentOptions> = {}): ListDependent {
+    return getBoundedInstance(el, 'list-dependent', () => {
+      return new this(el, dependent, options);
+    });
+  }
+
+  constructor(element: string | HTMLSelectElement, dependent?: string | HTMLSelectElement, options: Partial<ListDependentOptions> = {}) {
+    this.options = this.mergeOptions(options);
+
+    this.element = selectOne<HTMLSelectElement>(element)!;
+
+    if (!dependent) {
+      dependent = this.element.dataset.dependent || '';
+    }
+
+    this.dependent = selectOne<HTMLSelectElement>(dependent)!;
+
+    this.bindEvents();
+
+    if (this.options.initial_load) {
+      this.changeList(this.dependent.value, true);
+    }
+  }
+
+  /**
+   * Bind events.
+   */
+  bindEvents() {
+    this.dependent.addEventListener('change', (event) => {
+      this.changeList((event.currentTarget as HTMLSelectElement)?.value);
+    });
+  }
+
+  /**
+   * Update the list elements.
+   *
+   * @param {*}    value
+   * @param {bool} initial
+   */
+  changeList(value: string, initial = false) {
+    value = value || this.dependent.value;
+
+    // Empty mark
+    if (value === '') {
+      value = this.options.empty_mark;
+    }
+
+    if (this.options.ajax.url) {
+      this.ajaxUpdate(value);
+    } else if (this.options.source) {
+      this.sourceUpdate(value, initial);
+    }
+  }
+
+  /**
+   * Update list by source.
+   */
+  sourceUpdate(value: string, initial = false) {
+    const source = this.options.source;
+
+    if (!source) {
+      return;
+    }
+
+    this.beforeHook(value, this.element, this.dependent);
+
+    if (source[value]) {
+      this.updateListElements(source[value]);
+    } else {
+      this.updateListElements([]);
+
+      if (!initial && value !== '' && parseInt(value) !== 0) {
+        console.log('List for value: ' + value + ' not found.');
+      }
+    }
+
+    this.afterHook(value, this.element, this.dependent);
+  }
+
+  /**
+   * Do ajax.
+   *
+   * @param {string} value
+   */
+  async ajaxUpdate(value: string) {
+    let data: Record<string, any> = {};
+
+    data[this.options.ajax.value_field] = value;
+
+    if (typeof this.options.ajax.data === 'object') {
+      data = { ...data, ...this.options.ajax.data };
+    } else if (typeof this.options.ajax.data === 'function') {
+      data = this.options.ajax.data(data, this) || data;
+    }
+
+    this.beforeHook(value, this.element, this.dependent);
+
+    this.abort();
+
+    let url = this.options.ajax.url;
+
+    if (typeof url === 'function') {
+      url = url(this);
+    }
+
+    if (!url) {
+      throw new Error('Ajax URL is not set.');
+    }
+
+    const http = await useHttpClient();
+
+    this.abortController = new AbortController();
+
+    try {
+      const res = await http.get<{
+        success: boolean;
+        data: any;
+      }>(url, {
+        params: data,
+        signal: this.abortController.signal
+      });
+
+      const { success, data: returnData } = res.data;
+
+      if (success) {
+        this.updateListElements(returnData);
+      } else {
+        console.error(returnData);
+      }
+
+    } catch (e) {
+      console.error(e);
+    } finally {
+      this.afterHook(value, this.element, this.dependent);
+      this.abortController = null;
+    }
+  }
+
+  abort() {
+    if (this.abortController) {
+      this.abortController.abort();
+      this.abortController = null;
+    }
+  }
+
+  updateListElements(items: MaybeGroupedListItems) {
+    const textField = this.options.text_field;
+    const valueField = this.options.value_field;
+    this.element.innerHTML = '';
+
+    if (this.options.first_option && Array.isArray(items)) {
+      items.unshift({});
+      items[0][textField] = this.options.first_option[textField];
+      items[0][valueField] = this.options.first_option[valueField];
+    }
+
+    for (const i in items) {
+      const item = items[i as keyof typeof items] as Record<string, any> | ListItems;
+
+      if (Array.isArray(item)) {
+        const group = html(`<optgroup label="${i}"></optgroup>`);
+
+        for (const k in item) {
+          const child = item[k];
+          this.appendOptionTo({
+            value: child[valueField],
+            text: child[textField],
+            attributes: child.attributes,
+          }, group);
+        }
+
+        this.element.appendChild(group);
+        continue;
+      }
+
+      this.appendOptionTo({
+        value: item[valueField],
+        text: item[textField],
+        attributes: item.attributes,
+      }, this.element);
+    }
+
+    this.element.dispatchEvent(new CustomEvent('change'));
+    this.element.dispatchEvent(new CustomEvent('list:updated'));
+  }
+
+  appendOptionTo(item: any, parent: any) {
+    const value = item.value;
+    const option = html('<option>' + item.text + '</option>');
+    option.setAttribute('value', value);
+
+    if (item.attributes) {
+      for (const index in item.attributes) {
+        const val = item.attributes[index];
+        option.setAttribute(index, val);
+      }
+    }
+
+    if (this.isSelected(value)) {
+      option.setAttribute('selected', 'selected');
+    }
+
+    parent.appendChild(option);
+  }
+
+  isSelected(value: string) {
+    let defaultValues: any[] = [];
+
+    // Convert all types to array
+    let defValue = this.element.dataset.selected ?? this.options.default_value;
+
+    if (typeof defValue === 'function') {
+      defValue = defValue(value, this);
+    }
+
+    if (Array.isArray(defValue)) {
+      defaultValues = defValue;
+    } else if (defValue && typeof defValue === 'object') {
+      defaultValues = Object.keys(defValue);
+    } else {
+      defaultValues = [defValue];
+    }
+
+    return defaultValues.indexOf(value) !== -1;
+  }
+
+  /**
+   * Before hook.
+   */
+  beforeHook(value: string, element: HTMLSelectElement, dependent: HTMLSelectElement) {
+    const before = this.options.hooks.before_request;
+
+    return before.call(this, value, element, dependent);
+  }
+
+  /**
+   * After hook.
+   */
+  afterHook(value: string, element: HTMLSelectElement, dependent: HTMLSelectElement) {
+    const after = this.options.hooks.after_request;
+
+    return after.call(this, value, element, dependent);
+  }
+
+  mergeOptions(options: Partial<ListDependentOptions>): ListDependentOptions {
+    return mergeDeep<ListDependentOptions>({}, defaultOptions, options);
+  }
+}
+
+export const ready = useUniDirective<HTMLSelectElement>('list-dependent', {
+  mounted(el, binding) {
+    const options = JSON.parse(binding.value);
+
+    ListDependent.handle(el, options.dependent, options);
+  },
+  updated(el, binding) {
+    const options = JSON.parse(binding.value);
+
+    ListDependent.handle(el).mergeOptions(options);
+  }
+});
+
+export type ListDependentModule = {
+  ListDependent: typeof ListDependent;
+  ready: typeof ready;
+};

package/src/module/s3-multipart-uploader.ts

@@ -0,0 +1,300 @@
+import { AxiosProgressEvent, AxiosResponseHeaders } from 'axios';
+import { Mixin } from 'ts-mixer';
+import { createQueue, useHttpClient } from '../composable';
+import { EventHandler, EventMixin } from '../events';
+import type { MaybePromise } from '../types';
+import { mergeDeep } from '../utilities';
+import { ApiReturn } from './http-client';
+
+declare type RoutingOptions = {
+  init: string;
+  sign: string;
+  complete: string;
+  abort: string;
+} | ((action: RouteActions) => MaybePromise<string>);
+
+declare type RouteActions = 'init' | 'sign' | 'complete' | 'abort';
+declare type RequestHandler = <T = Record<string, any>>(action: RouteActions, data: Record<string, any>) => Promise<T>;
+
+export interface S3MultipartUploaderOptions {
+  profile?: string;
+  chunkSize: number;
+  concurrency: number;
+  routes: RoutingOptions;
+  requestHandler?: RequestHandler;
+  onProgress?: ProgressEventHandler;
+  ACL?: string;
+  extra?: Record<string, any>;
+
+  // maxRetries?: number;
+  // endpoint: string;
+  // subfolder?: string;
+}
+
+const defaultOptions: Partial<S3MultipartUploaderOptions> = {
+  chunkSize: 5 * 1024 * 1024, // 5MB
+  concurrency: 2,
+};
+
+export interface S3MultipartUploaderRequestOptions {
+  onProgress?: ProgressEventHandler;
+  filename?: string;
+  ContentType?: string;
+  ContentDisposition?: string;
+  ACL?: string;
+  extra?: Record<string, any>;
+}
+
+export class S3MultipartUploader extends Mixin(EventMixin) {
+  options: S3MultipartUploaderOptions;
+
+  constructor(options: Partial<S3MultipartUploaderOptions>) {
+    super();
+    this.options = mergeDeep({}, defaultOptions, options);
+  }
+
+  async upload(
+    file: string | File | Blob,
+    path: string,
+    options: S3MultipartUploaderRequestOptions = {}
+  ): Promise<{ url: string; }> {
+    const extra: Record<string, any> = { ...(this.options.extra ?? {}), ...(options.extra ?? {}) };
+
+    if (typeof file === 'string') {
+      file = new Blob([file], { type: options['ContentType'] || 'text/plain' });
+    }
+
+    if (file instanceof Blob && !(file instanceof File)) {
+      if (path.endsWith('.{ext}')) {
+        throw new Error('If using Blob or file data string, you must provide a valid file extension in the path.');
+      }
+
+      file = new File([file], 'blob', { type: file.type });
+    }
+
+    if (file instanceof File) {
+      extra['ContentType'] = options['ContentType'] || file.type;
+    }
+
+    if (options.ACL || this.options.ACL) {
+      extra.ACL = options.ACL || this.options.ACL;
+    }
+
+    path = this.replaceExt(path, file);
+
+    const initData: Record<string, any> = { extra, path, profile: this.options.profile };
+
+    if (options['filename']) {
+      initData['filename'] = options['filename'];
+    }
+
+    this.trigger('start', file, initData);
+
+    // @Request sign
+    const { id } = await this.request<{ id: string; }>(
+      'init',
+      initData
+    );
+
+    try {
+      const chunkSize = this.options.chunkSize;
+      const chunks = Math.ceil(file.size / chunkSize);
+
+      let uploadedBytes = 0;
+      let parts: { ETag: string, PartNumber: number }[] = [];
+      let currentPart = 1;
+      const queue = createQueue(this.options.concurrency);
+      const promises = [];
+      const partsUploaded: Record<number, number> = {};
+
+      // Loop from 1 to chunks
+      while (currentPart <= chunks) {
+        const partNumber = currentPart;
+
+        // Push to queue
+        const p = queue.push(async () => {
+          const { blob, etag } = await this.uploadPart(
+            file as File,
+            {
+              id,
+              path,
+              partNumber,
+              chunkSize,
+              onUploadProgress: (e) => {
+                partsUploaded[partNumber] = e.loaded;
+
+                const uploaded = Object.values(partsUploaded).reduce((sum, a) => sum + a, 0);
+
+                this.updateProgress(uploaded, file.size, options);
+              }
+            }
+          );
+
+          uploadedBytes += blob.size;
+
+          this.updateProgress(uploadedBytes, file.size, options);
+
+          parts.push({ ETag: etag, PartNumber: partNumber });
+        });
+
+        promises.push(p);
+
+        currentPart++;
+      }
+
+      await Promise.all(promises);
+
+      // @Request sign
+      const { url } = await this.request<{ url: string }>(
+        'complete',
+        {
+          id,
+          path,
+          parts: parts.sort((a, b) => a.PartNumber - b.PartNumber),
+          profile: this.options.profile,
+        },
+      );
+
+      this.trigger('success', url);
+
+      return { url };
+    } catch (e) {
+      await this.abort(id, path);
+
+      throw e;
+    }
+  }
+
+  protected async uploadPart(
+    file: File,
+    payload: {
+      id: string;
+      path: string;
+      partNumber: number;
+      chunkSize: number;
+      onUploadProgress: (e: AxiosProgressEvent) => void;
+    }
+  ) {
+    const http = await useHttpClient();
+    const { id, path, partNumber, chunkSize, onUploadProgress } = payload;
+
+    const start = (partNumber - 1) * chunkSize;
+    const end = Math.min(partNumber * chunkSize, file.size);
+
+    const blob = file.slice(start, end);
+
+    // @Request sign
+    const { url } = await this.request<{ url: string; }>(
+      'sign',
+      {
+        id,
+        path,
+        partNumber,
+        profile: this.options.profile,
+      }
+    );
+
+    // PUT to S3
+    const res = await http.put(
+      url,
+      blob,
+      {
+        onUploadProgress,
+      }
+    );
+
+    const etag = String((res.headers as AxiosResponseHeaders).get('ETag') || '');
+
+    return { blob, etag };
+  }
+
+  protected async request<T = Record<string, any>>(action: RouteActions, body: Record<string, any>): Promise<T> {
+    if (this.options.requestHandler) {
+      return this.options.requestHandler<T>(action, body);
+    }
+
+    const http = await useHttpClient();
+
+    const res = await http.post<ApiReturn<T>>(await this.resolveRoute(action), body);
+
+    return res.data.data;
+  }
+
+  async abort(id: string, path: string) {
+    await this.request(
+      'abort',
+      {
+        id,
+        path,
+        profile: this.options.profile,
+      }
+    );
+  }
+
+  updateProgress(loaded: number, total: number, options: S3MultipartUploaderRequestOptions) {
+    const percentage = (loaded / total) * 100;
+
+    const event: ProgressEvent = { percentage, loaded, total };
+
+    this.trigger('progress', event);
+
+    this.options.onProgress?.(event);
+
+    if (options.onProgress) {
+      options.onProgress(event);
+    }
+  }
+
+  async resolveRoute(action: RouteActions): Promise<string> {
+    if (typeof this.options.routes === 'function') {
+      return this.options.routes(action);
+    }
+
+    return this.options.routes[action];
+  }
+
+  setChunkSize(size: number): this {
+    this.options.chunkSize = size;
+
+    return this;
+  }
+
+  setChunkSizeInMiB(size: number): this {
+    this.options.chunkSize = size * 1024 * 1024;
+
+    return this;
+  }
+
+  replaceExt(path: string, file: File | Blob): string {
+    if (file instanceof File) {
+      const fileExt = file.name.split('.').pop();
+
+      if (path.endsWith('.{ext}')) {
+        return path.replace(/\.{ext}$/, fileExt ? '.' + fileExt : '');
+      }
+    }
+
+    return path;
+  }
+
+  on(
+    event: 'start',
+    handler: (file: File, data: { path: string; extra: Record<string, any>; [name: string]: any; }) => void
+  ): this;
+  on(event: 'success', handler: (url: string) => void): this;
+  on(event: 'progress', handler: (event: ProgressEvent) => void): this;
+  on(event: string | string[], handler: EventHandler): this {
+    return super.on(event, handler);
+  }
+}
+
+type ProgressEvent = {
+  percentage: number;
+  loaded: number;
+  total: number;
+};
+type ProgressEventHandler = (e: ProgressEvent) => void;
+
+export interface S3MultipartUploaderModule {
+  S3MultipartUploader: typeof S3MultipartUploader;
+}