@vuu-ui/vuu-utils 0.0.27

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@vuu-ui/vuu-utils",
+  "version": "0.0.27",
+  "author": "heswell",
+  "main": "src/index.ts",
+  "license": "Apache-2.0",
+  "files": [
+    "index.js",
+    "index.js.map",
+    "/src"
+  ],
+  "types": "src/index.ts",
+  "scripts": {
+    "build": "node ../../scripts/run-build.mjs",
+    "test": "vitest run",
+    "type-defs": "node ../../scripts/build-type-defs.mjs"
+  },
+  "devDependencies": {},
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}

package/src/DataWindow.ts

@@ -0,0 +1,110 @@
+import { WindowRange } from "./range-utils";
+import { metadataKeys } from "./column-utils";
+
+export type DataItem = string | number | boolean;
+export type DataRow = [
+  /** index */
+  number,
+  /** render index */
+  number,
+  /** isLeaf */
+  boolean,
+  /** isExpanded */
+  boolean,
+  /** depth  */
+  number,
+  /** child count */
+  number,
+  /** key  */
+  string,
+  /** selected */
+  number,
+  /** data values  */
+  ...DataItem[]
+];
+export type RangeLike = { from: number; to: number };
+
+const { KEY } = metadataKeys;
+
+// const log = (message: string) =>
+//   console.log(`%c[DataWindow] ${message}`, "color: purple;font-weight: bold;");
+export class DataWindow {
+  private range: WindowRange;
+  public data: DataRow[];
+  public rowCount = 0;
+  constructor({ from, to }: RangeLike) {
+    this.range = new WindowRange(from, to);
+    //internal data is always 0 based, we add range.from to determine an offset
+    this.data = new Array(to - from);
+    // window.dataWindow = this.data;
+    // log(`constructor initial range ${from} - ${to}`);
+  }
+
+  setRowCount = (rowCount: number) => {
+    // log(`rowCount => ${rowCount}`);
+    if (rowCount < this.data.length) {
+      this.data.length = rowCount;
+    }
+    this.rowCount = rowCount;
+  };
+
+  // return true if existing row was updated
+  add(data: DataRow) {
+    const [index] = data;
+    if (this.isWithinRange(index)) {
+      const internalIndex = index - this.range.from;
+      const isUpdate = this.data[internalIndex] !== undefined;
+      this.data[internalIndex] = data;
+      return isUpdate;
+    } else {
+      return false;
+    }
+  }
+
+  getAtIndex(index: number) {
+    return this.range.isWithin(index) &&
+      this.data[index - this.range.from] != null
+      ? this.data[index - this.range.from]
+      : undefined;
+  }
+
+  getByKey(key: string) {
+    return this.data.find((row) => row[KEY] === key);
+  }
+
+  isWithinRange(index: number) {
+    return this.range.isWithin(index) && index <= this.rowCount;
+  }
+
+  setRange(from: number, to: number) {
+    // log(`setRange ${from} ${to}`);
+    if (from !== this.range.from || to !== this.range.to) {
+      const [overlapFrom, overlapTo] = this.range.overlap(from, to);
+      const newData = new Array(to - from);
+      for (let i = overlapFrom; i < overlapTo; i++) {
+        const data = this.getAtIndex(i);
+        if (data) {
+          const index = i - from;
+          newData[index] = data;
+        }
+      }
+      this.data = newData;
+      this.range.from = from;
+      this.range.to = to;
+    }
+  }
+
+  hasData(from: number, to: number) {
+    const offset = this.range.from;
+    const start = from - offset;
+    const end = Math.min(to - offset - 1, this.rowCount - 1);
+    return this.data[start] !== undefined && this.data[end] !== undefined;
+  }
+
+  getData(from: number, to: number): any[] {
+    const { from: clientFrom, to: clientTo } = this.range;
+    const startOffset = Math.max(0, from - clientFrom);
+    const endOffset = Math.min(to - clientFrom, this.rowCount ?? to);
+    return this.data.slice(startOffset, endOffset);
+  }
+}

package/src/array-utils.ts

@@ -0,0 +1,22 @@
+export function arrayOfIndices(length: number): number[] {
+  // not the neatest, but far and away the fastest way to do this ...
+  const result = Array(length);
+  for (let i = 0; i < length; i++) {
+    result[i] = i;
+  }
+  return result;
+}
+
+export type PartitionTest<T> = (value: T, index: number) => boolean;
+
+export function partition<T>(
+  array: T[],
+  test: PartitionTest<T>,
+  pass: T[] = [],
+  fail: T[] = []
+): [T[], T[]] {
+  for (let i = 0, len = array.length; i < len; i++) {
+    (test(array[i], i) ? pass : fail).push(array[i]);
+  }
+  return [pass, fail];
+}

package/src/column-utils.ts

@@ -0,0 +1,133 @@
+import {
+  ColumnDescriptor,
+  KeyedColumnDescriptor,
+} from "@vuu-ui/vuu-datagrid/src/grid-model/gridModelTypes";
+import { Row } from "./row-utils";
+
+export interface ColumnMap {
+  [columnName: string]: number;
+}
+
+const SORT_ASC = "asc";
+
+export type SortCriteriaItem = string | [string, "asc"]; // TODO where is 'desc'?
+
+export function mapSortCriteria(
+  sortCriteria: SortCriteriaItem[],
+  columnMap: ColumnMap,
+  metadataOffset = 0
+): [number, "asc"][] {
+  return sortCriteria.map((s) => {
+    if (typeof s === "string") {
+      return [columnMap[s] + metadataOffset, "asc"];
+    } else if (Array.isArray(s)) {
+      const [columnName, sortDir] = s;
+      return [columnMap[columnName] + metadataOffset, sortDir || SORT_ASC];
+    } else {
+      throw Error("columnUtils.mapSortCriteria invalid input");
+    }
+  });
+}
+
+export function isKeyedColumn(
+  column: ColumnDescriptor
+): column is KeyedColumnDescriptor {
+  return typeof (column as KeyedColumnDescriptor).key === "number";
+}
+
+export const toColumnDescriptor = (name: string): ColumnDescriptor => ({
+  name,
+});
+
+export const toKeyedColumn = (
+  column: string | ColumnDescriptor,
+  key: number
+): KeyedColumnDescriptor => {
+  if (typeof column === "string") {
+    return { key, name: column };
+  }
+  if (isKeyedColumn(column)) {
+    return column;
+  }
+  return { ...column, key };
+};
+
+const EMPTY_COLUMN_MAP = {} as const;
+
+export function buildColumnMap(columns?: (Column | string)[]): ColumnMap {
+  const start = metadataKeys.count;
+  if (columns) {
+    return columns.reduce((map, column, i) => {
+      if (typeof column === "string") {
+        map[column] = start + i;
+      } else if (typeof column.key === "number") {
+        map[column.name] = column.key;
+      } else {
+        map[column.name] = start + i;
+      }
+      return map;
+    }, {} as ColumnMap);
+  } else {
+    return EMPTY_COLUMN_MAP;
+  }
+}
+
+export function projectUpdates(updates: number[]): number[] {
+  const results: number[] = [];
+  const metadataOffset = metadataKeys.count - 2;
+  for (let i = 0; i < updates.length; i += 3) {
+    results[i] = updates[i] + metadataOffset;
+    results[i + 1] = updates[i + 1];
+    results[i + 2] = updates[i + 2];
+  }
+  return results;
+}
+
+export function projectColumns(
+  tableRowColumnMap: ColumnMap,
+  columns: ColumnDescriptor[]
+) {
+  const columnCount = columns.length;
+  const { IDX, RENDER_IDX, DEPTH, COUNT, KEY, SELECTED, count } = metadataKeys;
+  return (startIdx: number, offset: number, selectedRows: Row[] = []) =>
+    (row: Row, i: number) => {
+      // selectedRows are indices of rows within underlying dataset (not sorted or filtered)
+      // row is the original row from this set, with original index in IDX pos, which might
+      // be overwritten with a different value below if rows are sorted/filtered
+      const baseRowIdx: any = row[IDX]; // TODO
+      const out = [];
+      for (let i = 0; i < columnCount; i++) {
+        const colIdx = tableRowColumnMap[columns[i].name];
+        out[count + i] = row[colIdx];
+      }
+
+      out[IDX] = startIdx + i + offset;
+      out[RENDER_IDX] = 0;
+      out[DEPTH] = 0;
+      out[COUNT] = 0;
+      out[KEY] = row[tableRowColumnMap.KEY];
+      out[SELECTED] = selectedRows.includes(baseRowIdx) ? 1 : 0;
+      return out;
+    };
+}
+
+export type Meta = {
+  [key: string]: any;
+} & any[];
+
+export const metadataKeys = {
+  IDX: 0,
+  RENDER_IDX: 1,
+  IS_LEAF: 2,
+  IS_EXPANDED: 3,
+  DEPTH: 4,
+  COUNT: 5,
+  KEY: 6,
+  SELECTED: 7,
+  count: 8,
+  // TODO following only used in datamodel
+  PARENT_IDX: "parent_idx",
+  IDX_POINTER: "idx_pointer",
+  FILTER_COUNT: "filter_count",
+  NEXT_FILTER_IDX: "next_filter_idx",
+} as const;

package/src/constants.ts

@@ -0,0 +1,8 @@
+export const DataTypes = {
+  ROW_DATA: 'rowData',
+  FILTER_DATA: 'filterData',
+  FILTER_BINS: 'filterBins'
+};
+
+export const ASC = 'asc';
+export const DSC = 'dsc';

package/src/date-utils.ts

@@ -0,0 +1,4 @@
+//TODO
+export const formatDate = (date: Date, format: string) => {
+  return date.toUTCString();
+};

package/src/event-emitter.ts

@@ -0,0 +1,139 @@
+export interface Event {}
+
+export type EventListener = (evtName: string, ...args: any[]) => void;
+
+export type EventListenerMap = {
+  [eventName: string]: EventListener[] | EventListener;
+};
+
+function isArrayOfListeners(
+  listeners: EventListener | EventListener[]
+): listeners is EventListener[] {
+  return Array.isArray(listeners);
+}
+
+function isOnlyListener(
+  listeners: EventListener | EventListener[]
+): listeners is EventListener {
+  return !Array.isArray(listeners);
+}
+
+export interface IEventEmitter {
+  emit: (type: string, ...args: unknown[]) => void;
+}
+
+export class EventEmitter implements IEventEmitter {
+  private _events?: EventListenerMap;
+
+  constructor() {
+    this._events = {};
+  }
+
+  addListener(type: string, listener: EventListener) {
+    if (!this._events) {
+      this._events = {};
+    }
+
+    const listeners = this._events[type];
+
+    if (!listeners) {
+      this._events[type] = listener;
+    } else if (isArrayOfListeners(listeners)) {
+      listeners.push(listener);
+    } else if (isOnlyListener(listeners)) {
+      this._events[type] = [listeners, listener];
+    }
+  }
+
+  removeListener(type: string, listener: EventListener) {
+    if (!this._events || !this._events[type]) {
+      return;
+    }
+
+    const listenerOrListeners = this._events[type];
+    let position = -1;
+
+    if (listenerOrListeners === listener) {
+      delete this._events[type];
+    } else if (Array.isArray(listenerOrListeners)) {
+      for (let i = length; i-- > 0; ) {
+        if (listenerOrListeners[i] === listener) {
+          position = i;
+          break;
+        }
+      }
+
+      if (position < 0) {
+        return;
+      }
+
+      if (listenerOrListeners.length === 1) {
+        listenerOrListeners.length = 0;
+        delete this._events[type];
+      } else {
+        listenerOrListeners.splice(position, 1);
+      }
+    }
+  }
+
+  removeAllListeners(type: string) {
+    if (!this._events) {
+      return;
+    } else if (type === undefined) {
+      delete this._events;
+    } else {
+      delete this._events[type];
+    }
+  }
+
+  emit(type: string, ...args: unknown[]) {
+    if (this._events) {
+      const handler = this._events[type];
+      if (handler) {
+        invokeHandler(handler, type, args);
+      }
+      const wildcardHandler = this._events["*"];
+      if (wildcardHandler) {
+        invokeHandler(wildcardHandler, type, args);
+      }
+    }
+  }
+
+  once(type: string, listener: EventListener) {
+    const handler = (evtName: string, message: unknown) => {
+      this.removeListener(evtName, handler);
+      listener(evtName, message);
+    };
+
+    this.on(type, handler);
+  }
+
+  on(type: string, listener: EventListener) {
+    return this.addListener(type, listener);
+  }
+}
+
+function invokeHandler(
+  handler: EventListener | EventListener[],
+  type: string,
+  args: unknown[]
+) {
+  if (isArrayOfListeners(handler)) {
+    handler.slice().forEach((listener) => invokeHandler(listener, type, args));
+  } else {
+    switch (args.length) {
+      case 0:
+        handler(type);
+        break;
+      case 1:
+        handler(type, args[0]);
+        break;
+      case 2:
+        handler(type, args[0], args[1]);
+        break;
+      // slower
+      default:
+        handler.call(null, type, ...args);
+    }
+  }
+}

package/src/getUniqueId.ts

@@ -0,0 +1 @@
+export const getUniqueId = () => `hw-${Math.round(Math.random() * 1e5)}`;

package/src/index.ts

@@ -0,0 +1,14 @@
+export { EventEmitter } from "./event-emitter";
+export * from "./column-utils";
+export * from "./DataWindow";
+export * from "./date-utils";
+export * from "./getUniqueId";
+export * from "./input-utils";
+export * from "./invariant";
+export * from "./nanoid";
+export * from "./array-utils";
+export * from "./constants";
+export * from "./range-utils";
+export * from "./row-utils";
+export * from "./simple-store";
+export * from "./text-utils";

package/src/input-utils.ts

@@ -0,0 +1,50 @@
+const actionKeys = {
+  Enter: 'Enter',
+  Delete: 'Delete'
+};
+
+const navigationKeys = {
+  Home: 'Home',
+  End: 'End',
+  ArrowRight: 'ArrowRight',
+  ArrowLeft: 'ArrowLeft',
+  ArrowDown: 'ArrowDown',
+  ArrowUp: 'ArrowUp',
+  Tab: 'Tab'
+};
+const functionKeys = {
+  F1: 'F1',
+  F2: 'F2',
+  F3: 'F3',
+  F4: 'F4',
+  F5: 'F5',
+  F6: 'F6',
+  F7: 'F7',
+  F8: 'F8',
+  F9: 'F9',
+  F10: 'F10',
+  F11: 'F11',
+  F12: 'F12'
+};
+
+const specialKeys = {
+  ...actionKeys,
+  ...navigationKeys,
+  ...functionKeys
+};
+type specialKey = keyof typeof specialKeys;
+
+const isSpecialKey = (key: string): key is specialKey => key in specialKeys;
+
+export const isCharacterKey = (evt: KeyboardEvent) => {
+  if (isSpecialKey(evt.key)) {
+    return false;
+  }
+  if (typeof evt.which === 'number' && evt.which > 0) {
+    return !evt.ctrlKey && !evt.metaKey && !evt.altKey && evt.which !== 8;
+  }
+};
+
+export const isQuoteKey = (evt: KeyboardEvent) => {
+  return evt.key === '"' || evt.key === "'";
+};

package/src/invariant.ts

@@ -0,0 +1,10 @@
+export function invariant(condition: boolean, message: string) {
+  if (!condition) {
+    const error = new Error(message);
+    error.name = 'Invariant Violation';
+    // TODO what is framesToPop?
+    // @ts-ignore
+    error.framesToPop = 1; // we don't care about invariant's own frame
+    throw error;
+  }
+}

package/src/nanoid/index.ts

@@ -0,0 +1,30 @@
+// This is the index.browser.js file from nanoid
+// couldn't get original code to work as npm import without crypro warnings -
+// seemed to be picking up node version, not browser version
+
+export const uuid = (size: number = 21): string => {
+  let id: string = '';
+  let bytes = crypto.getRandomValues(new Uint8Array(size));
+
+  // A compact alternative for `for (var i = 0; i < step; i++)`.
+  while (size--) {
+    // It is incorrect to use bytes exceeding the alphabet size.
+    // The following mask reduces the random byte in the 0-255 value
+    // range to the 0-63 value range. Therefore, adding hacks, such
+    // as empty string fallback or magic numbers, is unneccessary because
+    // the bitmask trims bytes down to the alphabet size.
+    let byte = bytes[size] & 63;
+    if (byte < 36) {
+      // `0-9a-z`
+      id += byte.toString(36);
+    } else if (byte < 62) {
+      // `A-Z`
+      id += (byte - 26).toString(36).toUpperCase();
+    } else if (byte < 63) {
+      id += '_';
+    } else {
+      id += '-';
+    }
+  }
+  return id;
+};

package/src/range-utils.ts

@@ -0,0 +1,72 @@
+export interface VuuRange {
+  from: number;
+  to: number;
+  bufferSize?: number;
+  reset?: boolean;
+}
+
+interface FromToRange {
+  from: number;
+  to: number;
+}
+
+export function getFullRange(
+  { from, to }: VuuRange,
+  bufferSize: number = 0,
+  rowCount: number = Number.MAX_SAFE_INTEGER
+): FromToRange {
+  if (bufferSize === 0) {
+    return { from, to: Math.min(to, rowCount) };
+  } else if (from === 0) {
+    return { from, to: Math.min(to + bufferSize, rowCount) };
+  } else {
+    const rangeSize = to - from;
+    const buff = Math.round(bufferSize / 2);
+    const shortfallBefore = from - buff < 0;
+    const shortFallAfter = rowCount - (to + buff) < 0;
+
+    if (shortfallBefore && shortFallAfter) {
+      return { from: 0, to: rowCount };
+    } else if (shortfallBefore) {
+      return { from: 0, to: rangeSize + bufferSize };
+    } else if (shortFallAfter) {
+      return { from: Math.max(0, rowCount - (rangeSize + bufferSize)), to: rowCount };
+    } else {
+      return { from: from - buff, to: to + buff };
+    }
+  }
+}
+
+export function resetRange({ from, to, bufferSize = 0 }: VuuRange): VuuRange {
+  return {
+    from: 0,
+    to: to - from,
+    bufferSize,
+    reset: true
+  };
+}
+
+export class WindowRange {
+  public from: number;
+  public to: number;
+
+  constructor(from: number, to: number) {
+    this.from = from;
+    this.to = to;
+  }
+
+  public isWithin(index: number) {
+    return index >= this.from && index < this.to;
+  }
+
+  //find the overlap of this range and a new one
+  public overlap(from: number, to: number): [number, number] {
+    return from >= this.to || to < this.from
+      ? [0, 0]
+      : [Math.max(from, this.from), Math.min(to, this.to)];
+  }
+
+  public copy(): WindowRange {
+    return new WindowRange(this.from, this.to);
+  }
+}

package/src/row-utils.ts

@@ -0,0 +1,44 @@
+export type RowIndex = {
+  [field: string]: number;
+}
+
+// TODO
+export type Row = {
+  [strKey: string]: any;
+} & any[];
+
+export function addRowsToIndex(rows: Row[], index: RowIndex, indexField: string) {
+  for (let idx = 0, len = rows.length; idx < len; idx++) {
+    index[rows[idx][indexField]] = idx;
+  }
+  return index;
+}
+
+export function indexRows(rows: Row[], indexField: string) {
+  return addRowsToIndex(rows, {}, indexField);
+}
+
+export function isEmptyRow(row: Row) {
+  return row[0] === undefined;
+}
+
+// TODO rename
+export function update(rows: Row[], updates: any) { // TODO
+  const results = rows.slice();
+  const [[offsetIdx]] = rows;
+  for (let i = 0; i < updates.length; i++) {
+    const idx = updates[i][0] - offsetIdx;
+    // slow, refactor for performance
+    if (rows[idx]) {
+      const row = rows[idx].slice();
+      for (let j = 1; j < updates[i].length; j += 3) {
+        row[updates[i][j]] = updates[i][j + 2];
+      }
+      results[idx] = row;
+    } else {
+      console.log(`row not found in rows`);
+    }
+  }
+
+  return results;
+}

package/src/simple-store.ts

@@ -0,0 +1,33 @@
+// intended use is singleton storage atom within a hook, see useViewserver for examples
+import { EventEmitter } from "./event-emitter";
+
+type StoreStatus = "" | "ready" | "loaded" | "loading";
+
+export class SimpleStore<T = unknown> extends EventEmitter {
+  private _value: T;
+  private _status: StoreStatus = "";
+
+  constructor(value: T, status: StoreStatus = "") {
+    super();
+    this._value = value;
+    this._status = status;
+  }
+
+  set value(value: T) {
+    this._value = value;
+    this._status = "ready";
+    this.emit("loaded", value);
+  }
+
+  get value(): T {
+    return this._value;
+  }
+
+  set status(status: StoreStatus) {
+    this._status = status;
+  }
+
+  get status() {
+    return this._status;
+  }
+}

package/src/text-utils.ts

@@ -0,0 +1,9 @@
+export const lastWord = (text: string): string => {
+  const trimmedText = text.trim();
+  const pos = trimmedText.lastIndexOf(' ');
+  if (pos === -1) {
+    return trimmedText;
+  } else {
+    return trimmedText.slice(pos + 1);
+  }
+};