@naturalcycles/js-lib 14.256.0 → 14.258.0

package/src/browser/imageFitter.ts

@@ -0,0 +1,128 @@
+export interface FitImagesCfg {
+  /**
+   * Container of the images
+   */
+  containerElement: HTMLElement
+
+  /**
+   * Array of image metadatas (most notably: aspectRatio).
+   */
+  images: FitImage[]
+
+  /**
+   * Will be called on each layout change.
+   * Should be listened to to update the width/height of the images in your DOM.
+   */
+  onChange: (images: FitImage[]) => any
+
+  /**
+   * Max image height in pixels.
+   *
+   * @default 300
+   */
+  maxHeight?: number
+
+  /**
+   * Margin between images.
+   *
+   * @default 8
+   */
+  margin?: number
+}
+
+export interface FitImage {
+  src: string
+
+  /**
+   * width divided by height
+   */
+  aspectRatio: number
+
+  /**
+   * Calculated image width to fit the layout.
+   */
+  fitWidth?: number
+  /**
+   * Calculated image height to fit the layout.
+   */
+  fitHeight?: number
+}
+
+/**
+ * Calculates the width/height of the images to fit in the layout.
+ *
+ * Currently does not mutate the cfg.images array, but DOES mutate individual images with .fitWidth, .fitHeight properties.
+ *
+ * @experimental
+ */
+export class ImageFitter {
+  constructor(cfg: FitImagesCfg) {
+    this.cfg = {
+      maxHeight: 300,
+      margin: 8,
+      ...cfg,
+    }
+    this.resizeObserver = new ResizeObserver(entries => this.update(entries))
+    this.resizeObserver.observe(cfg.containerElement)
+  }
+
+  cfg!: Required<FitImagesCfg>
+  resizeObserver: ResizeObserver
+  containerWidth = -1
+
+  stop(): void {
+    this.resizeObserver.disconnect()
+  }
+
+  private update(entries: ResizeObserverEntry[]): void {
+    const width = Math.floor(entries[0]!.contentRect.width)
+    if (width === this.containerWidth) return // we're only interested in width changes
+    this.containerWidth = width
+
+    console.log(`resize ${width}`)
+    this.doLayout(this.cfg.images)
+    this.cfg.onChange(this.cfg.images)
+  }
+
+  private doLayout(imgs: readonly FitImage[]): void {
+    if (imgs.length === 0) return // nothing to do
+    const { maxHeight } = this.cfg
+
+    let imgNodes = imgs.slice(0)
+
+    w: while (imgNodes.length > 0) {
+      let slice: FitImage[]
+      let h: number
+
+      for (let i = 1; i <= imgNodes.length; i++) {
+        slice = imgNodes.slice(0, i)
+        h = this.getHeigth(slice)
+
+        if (h < maxHeight) {
+          this.setHeight(slice, h)
+          imgNodes = imgNodes.slice(i)
+          continue w
+        }
+      }
+
+      this.setHeight(slice!, Math.min(maxHeight, h!))
+      break
+    }
+  }
+
+  private getHeigth(images: readonly FitImage[]): number {
+    const width = this.containerWidth - images.length * this.cfg.margin
+    let r = 0
+    images.forEach(img => (r += img.aspectRatio))
+
+    return width / r // have to round down because Firefox will automatically roundup value with number of decimals > 3
+  }
+
+  // mutates/sets images' fitWidth, fitHeight properties
+  private setHeight(images: readonly FitImage[], height: number): void {
+    images.forEach(img => {
+      img.fitWidth = Math.floor(height * img.aspectRatio)
+      img.fitHeight = Math.floor(height)
+    })
+  }
+}

package/src/browser/script.util.ts

@@ -0,0 +1,52 @@
+import { isServerSide } from '../env'
+import { _objectAssign } from '../types'
+
+export type LoadScriptOptions = Partial<HTMLScriptElement>
+export type LoadCSSOptions = Partial<HTMLLinkElement>
+
+/**
+ * opt.async defaults to `true`.
+ * No other options are set by default.
+ */
+export async function loadScript(src: string, opt?: LoadScriptOptions): Promise<void> {
+  if (isServerSide()) return
+
+  return await new Promise<void>((resolve, reject) => {
+    const s = _objectAssign(document.createElement('script'), {
+      src,
+      async: true,
+      ...opt,
+      onload: resolve as any,
+      onerror: (_event, _source, _lineno, _colno, err) => {
+        reject(err || new Error(`loadScript failed: ${src}`))
+      },
+    })
+    document.head.append(s)
+  })
+}
+
+/**
+ * Default options:
+ * rel: 'stylesheet'
+ *
+ * No other options are set by default.
+ */
+export async function loadCSS(href: string, opt?: LoadCSSOptions): Promise<void> {
+  if (isServerSide()) return
+
+  return await new Promise<void>((resolve, reject) => {
+    const link = _objectAssign(document.createElement('link'), {
+      href,
+      rel: 'stylesheet',
+      // type seems to be unnecessary: https://stackoverflow.com/a/5409146/4919972
+      // type: 'text/css',
+      ...opt,
+      onload: resolve as any,
+      onerror: (_event, _source, _lineno, _colno, err) => {
+        reject(err || new Error(`loadCSS failed: ${href}`))
+      },
+    })
+
+    document.head.append(link)
+  })
+}

package/src/browser/topbar.ts

@@ -0,0 +1,147 @@
+// Modified version of topbar:
+// http://buunguyen.github.io/topbar
+/* eslint-disable */
+
+export interface TopBarOptions {
+  /**
+   * @default true
+   */
+  autoRun?: boolean
+
+  /**
+   * @default 5
+   */
+  barThickness?: number
+
+  barColors?: any
+  shadowColor?: any
+
+  /**
+   * @default 10
+   */
+  shadowBlur?: number
+}
+
+const browser = typeof window !== 'undefined'
+
+let canvas: any
+let progressTimerId: any
+let fadeTimerId: any
+let currentProgress: any
+let showing: any
+const addEvent = (elem: any, type: any, handler: any) => {
+  if (elem.addEventListener) elem.addEventListener(type, handler, false)
+  else if (elem.attachEvent) elem.attachEvent('on' + type, handler)
+  else elem['on' + type] = handler
+}
+const options = {
+  autoRun: true,
+  barThickness: 5,
+  barColors: {
+    '0': 'rgba(26,  188, 156, .9)',
+    '.25': 'rgba(52,  152, 219, .9)',
+    '.50': 'rgba(241, 196, 15,  .9)',
+    '.75': 'rgba(230, 126, 34,  .9)',
+    '1.0': 'rgba(211, 84,  0,   .9)',
+  },
+  shadowBlur: 10,
+  shadowColor: 'rgba(0,   0,   0,   .6)',
+}
+const repaint = () => {
+  canvas.width = window.innerWidth
+  canvas.height = options.barThickness * 5 // need space for shadow
+
+  const ctx = canvas.getContext('2d')
+  ctx.shadowBlur = options.shadowBlur
+  ctx.shadowColor = options.shadowColor
+
+  const lineGradient = ctx.createLinearGradient(0, 0, canvas.width, 0)
+  for (const stop in options.barColors) {
+    // @ts-ignore
+    lineGradient.addColorStop(stop, options.barColors[stop])
+  }
+  ctx.lineWidth = options.barThickness
+  ctx.beginPath()
+  ctx.moveTo(0, options.barThickness / 2)
+  ctx.lineTo(Math.ceil(currentProgress * canvas.width), options.barThickness / 2)
+  ctx.strokeStyle = lineGradient
+  ctx.stroke()
+}
+const createCanvas = () => {
+  canvas = document.createElement('canvas')
+  const style = canvas.style
+  style.position = 'fixed'
+  style.top = style.left = style.right = style.margin = style.padding = 0
+  style.zIndex = 100001
+  style.display = 'none'
+  document.body.appendChild(canvas)
+  addEvent(window, 'resize', repaint)
+}
+
+export const topbar = {
+  config(opts: TopBarOptions) {
+    for (const key in opts) {
+      if (options.hasOwnProperty(key)) {
+        // @ts-ignore
+        options[key] = opts[key]
+      }
+    }
+  },
+  set(show: boolean, opts?: TopBarOptions) {
+    if (show) {
+      topbar.show(opts)
+    } else {
+      topbar.hide()
+    }
+  },
+  show(opts?: TopBarOptions) {
+    if (!browser) return // ssr protection
+    if (opts) topbar.config(opts)
+    if (showing) return
+    showing = true
+    if (fadeTimerId !== null) {
+      window.cancelAnimationFrame(fadeTimerId)
+    }
+    if (!canvas) createCanvas()
+    canvas.style.opacity = 1
+    canvas.style.display = 'block'
+    topbar.progress(0)
+    if (options.autoRun) {
+      ;(function loop() {
+        progressTimerId = window.requestAnimationFrame(loop)
+        topbar.progress('+' + 0.05 * (1 - Math.sqrt(currentProgress)) ** 2)
+      })()
+    }
+  },
+  progress(to: number | string) {
+    if (!browser) return // ssr protection
+    if (typeof to === 'undefined') {
+      return currentProgress
+    }
+    if (typeof to === 'string') {
+      to = (to.indexOf('+') >= 0 || to.indexOf('-') >= 0 ? currentProgress : 0) + parseFloat(to)
+    }
+    currentProgress = (to as number) > 1 ? 1 : to
+    repaint()
+    return currentProgress
+  },
+  hide() {
+    if (!showing || !browser) return
+    showing = false
+    if (progressTimerId != null) {
+      window.cancelAnimationFrame(progressTimerId)
+      progressTimerId = null
+    }
+    ;(function loop() {
+      if (topbar.progress('+.1') >= 1) {
+        canvas.style.opacity -= 0.05
+        if (canvas.style.opacity <= 0.05) {
+          canvas.style.display = 'none'
+          fadeTimerId = null
+          return
+        }
+      }
+      fadeTimerId = window.requestAnimationFrame(loop)
+    })()
+  },
+}

package/src/datetime/localDate.ts

@@ -57,9 +57,11 @@ export class LocalDate {
   setYear(v: number): LocalDate {
     return this.set('year', v)
   }
+
   setMonth(v: number): LocalDate {
     return this.set('month', v)
   }
+
   setDay(v: number): LocalDate {
     return this.set('day', v)
   }
@@ -143,15 +145,19 @@ export class LocalDate {
   isToday(): boolean {
     return this.isSame(localDate.today())
   }
+
   isAfterToday(): boolean {
     return this.isAfter(localDate.today())
   }
+
   isSameOrAfterToday(): boolean {
     return this.isSameOrAfter(localDate.today())
   }
+
   isBeforeToday(): boolean {
     return this.isBefore(localDate.today())
   }
+
   isSameOrBeforeToday(): boolean {
     return this.isSameOrBefore(localDate.today())
   }
@@ -159,12 +165,15 @@ export class LocalDate {
   getAgeInYears(today?: LocalDateInput): number {
     return this.getAgeIn('year', today)
   }
+
   getAgeInMonths(today?: LocalDateInput): number {
     return this.getAgeIn('month', today)
   }
+
   getAgeInDays(today?: LocalDateInput): number {
     return this.getAgeIn('day', today)
   }
+
   getAgeIn(unit: LocalDateUnit, today?: LocalDateInput): number {
     return localDate.fromInput(today || new Date()).diff(this, unit)
   }
@@ -264,24 +273,31 @@ export class LocalDate {
   plusDays(num: number): LocalDate {
     return this.plus(num, 'day')
   }
+
   plusWeeks(num: number): LocalDate {
     return this.plus(num, 'week')
   }
+
   plusMonths(num: number): LocalDate {
     return this.plus(num, 'month')
   }
+
   plusYears(num: number): LocalDate {
     return this.plus(num, 'year')
   }
+
   minusDays(num: number): LocalDate {
     return this.plus(-num, 'day')
   }
+
   minusWeeks(num: number): LocalDate {
     return this.plus(-num, 'week')
   }
+
   minusMonths(num: number): LocalDate {
     return this.plus(-num, 'month')
   }
+
   minusYears(num: number): LocalDate {
     return this.plus(-num, 'year')
   }

package/src/datetime/localTime.ts

@@ -212,42 +212,55 @@ export class LocalTime {
   get year(): number {
     return this.$date.getFullYear()
   }
+
   setYear(v: number): LocalTime {
     return this.set('year', v)
   }
+
   get month(): number {
     return this.$date.getMonth() + 1
   }
+
   setMonth(v: number): LocalTime {
     return this.set('month', v)
   }
+
   get week(): number {
     return getWeek(this.$date)
   }
+
   setWeek(v: number): LocalTime {
     return this.set('week', v)
   }
+
   get day(): number {
     return this.$date.getDate()
   }
+
   setDay(v: number): LocalTime {
     return this.set('day', v)
   }
+
   get hour(): number {
     return this.$date.getHours()
   }
+
   setHour(v: number): LocalTime {
     return this.set('hour', v)
   }
+
   get minute(): number {
     return this.$date.getMinutes()
   }
+
   setMinute(v: number): LocalTime {
     return this.set('minute', v)
   }
+
   get second(): number {
     return this.$date.getSeconds()
   }
+
   setSecond(v: number): LocalTime {
     return this.set('second', v)
   }
@@ -258,6 +271,7 @@ export class LocalTime {
   get dayOfWeek(): ISODayOfWeek {
     return (this.$date.getDay() || 7) as ISODayOfWeek
   }
+
   setDayOfWeek(v: ISODayOfWeek): LocalTime {
     _assert(VALID_DAYS_OF_WEEK.has(v), `Invalid dayOfWeek: ${v}`)
     const dow = this.$date.getDay() || 7
@@ -292,42 +306,55 @@ export class LocalTime {
   plusSeconds(num: number): LocalTime {
     return this.plus(num, 'second')
   }
+
   plusMinutes(num: number): LocalTime {
     return this.plus(num, 'minute')
   }
+
   plusHours(num: number): LocalTime {
     return this.plus(num, 'hour')
   }
+
   plusDays(num: number): LocalTime {
     return this.plus(num, 'day')
   }
+
   plusWeeks(num: number): LocalTime {
     return this.plus(num, 'week')
   }
+
   plusMonths(num: number): LocalTime {
     return this.plus(num, 'month')
   }
+
   plusYears(num: number): LocalTime {
     return this.plus(num, 'year')
   }
+
   minusSeconds(num: number): LocalTime {
     return this.plus(-num, 'second')
   }
+
   minusMinutes(num: number): LocalTime {
     return this.plus(-num, 'minute')
   }
+
   minusHours(num: number): LocalTime {
     return this.plus(-num, 'hour')
   }
+
   minusDays(num: number): LocalTime {
     return this.plus(-num, 'day')
   }
+
   minusWeeks(num: number): LocalTime {
     return this.plus(-num, 'week')
   }
+
   minusMonths(num: number): LocalTime {
     return this.plus(-num, 'month')
   }
+
   minusYears(num: number): LocalTime {
     return this.plus(-num, 'year')
   }
@@ -452,20 +479,25 @@ export class LocalTime {
   isSame(d: LocalTimeInput): boolean {
     return this.compare(d) === 0
   }
+
   isBefore(d: LocalTimeInput, inclusive = false): boolean {
     const r = this.compare(d)
     return r === -1 || (r === 0 && inclusive)
   }
+
   isSameOrBefore(d: LocalTimeInput): boolean {
     return this.compare(d) <= 0
   }
+
   isAfter(d: LocalTimeInput, inclusive = false): boolean {
     const r = this.compare(d)
     return r === 1 || (r === 0 && inclusive)
   }
+
   isSameOrAfter(d: LocalTimeInput): boolean {
     return this.compare(d) >= 0
   }
+
   isBetween(min: LocalTimeInput, max: LocalTimeInput, incl: Inclusiveness = '[)'): boolean {
     let r = this.compare(min)
     // eslint-disable-next-line @typescript-eslint/prefer-string-starts-ends-with
@@ -518,21 +550,27 @@ export class LocalTime {
   getAgeInYears(now?: LocalTimeInput): number {
     return this.getAgeIn('year', now)
   }
+
   getAgeInMonths(now?: LocalTimeInput): number {
     return this.getAgeIn('month', now)
   }
+
   getAgeInDays(now?: LocalTimeInput): number {
     return this.getAgeIn('day', now)
   }
+
   getAgeInHours(now?: LocalTimeInput): number {
     return this.getAgeIn('hour', now)
   }
+
   getAgeInMinutes(now?: LocalTimeInput): number {
     return this.getAgeIn('minute', now)
   }
+
   getAgeInSeconds(now?: LocalTimeInput): number {
     return this.getAgeIn('second', now)
   }
+
   getAgeIn(unit: LocalTimeUnit, now?: LocalTimeInput): number {
     return localTime.fromInput(now ?? new Date()).diff(this, unit)
   }
@@ -540,6 +578,7 @@ export class LocalTime {
   isAfterNow(): boolean {
     return this.$date.valueOf() > Date.now()
   }
+
   isBeforeNow(): boolean {
     return this.$date.valueOf() < Date.now()
   }

package/src/decorators/debounce.ts

@@ -161,6 +161,7 @@ export function _debounce<T extends AnyFunction>(
     }
     return result
   }
+
   debounced.cancel = cancel
   debounced.flush = flush
   debounced.pending = pending

package/src/decorators/memo.util.ts

@@ -1,4 +1,7 @@
-import { _isPrimitive, MISS, pDelay, UnixTimestampNumber } from '..'
+import { _isPrimitive } from '../is.util'
+import { pDelay } from '../promise/pDelay'
+import type { UnixTimestampNumber } from '../types'
+import { MISS } from '../types'
 
 export type MemoSerializer = (args: any[]) => any
 

package/src/decorators/swarmSafe.decorator.ts

@@ -0,0 +1,47 @@
+import { AnyObject } from '../types'
+import { _getTargetMethodSignature } from './decorator.util'
+
+/**
+ * Prevents "swarm" of async calls to the same method.
+ * Allows max 1 in-flight promise to exist.
+ * If more calls appear, while Promise is not resolved yet - same Promise is returned.
+ *
+ * Does not support `cacheKey`.
+ * So, the same Promise is returned, regardless of the arguments.
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const _SwarmSafe = (): MethodDecorator => (target, key, descriptor) => {
+  if (typeof descriptor.value !== 'function') {
+    throw new TypeError('@_SwarmSafe can be applied only to methods')
+  }
+
+  const originalFn = descriptor.value
+  const keyStr = String(key)
+  const methodSignature = _getTargetMethodSignature(target, keyStr)
+  const instanceCache = new Map<AnyObject, Promise<any>>()
+
+  console.log('SwarmSafe constructor called', { key, methodSignature })
+
+  // eslint-disable-next-line @typescript-eslint/promise-function-async
+  descriptor.value = function (this: typeof target, ...args: any[]): Promise<any> {
+    console.log('SwarmSafe method called', { key, methodSignature, args })
+    const ctx = this
+
+    let inFlightPromise = instanceCache.get(ctx)
+    if (inFlightPromise) {
+      console.log(`SwarmSafe: returning in-flight promise`)
+      return inFlightPromise
+    }
+
+    console.log(`SwarmSafe: first-time call, creating in-flight promise`)
+
+    inFlightPromise = originalFn.apply(ctx, args) as Promise<any>
+    instanceCache.set(ctx, inFlightPromise)
+    void inFlightPromise.finally(() => {
+      console.log(`SwarmSafe: in-flight promise resolved`)
+      instanceCache.delete(ctx)
+    })
+
+    return inFlightPromise
+  } as any
+}