Проблема и Решение

Это логическое продолжение статьи Реактивность без React или как обойтись без id в html элементах (для погружения в контекст прошу прочитать сначала ее), но эта статья - ответ на ту "боль", которая описана в этом комментарии - опишу пример, демонстрирующий, насколько важна декларативность в вопросах управления поведением "аппки" (за этим стоят вопросы сохранения высокого уровня абстракции и, как следствие, масштабируемости приложения). Задача - сделать управление мутациями DOM более декларативным и, как заявлено в заголовке, использовать реактивность на примере управления состоянием (выводы - в конце).

Сначала обозначу результат

Итак, результатом успешного эксперимента предлагаю считать возможность декларативным описанием управлять поведением приложения (а точнее, его частью).

Это пример вызова модалки внутри которой инициирован поллинг, к примеру, для ожидания проведения всех транзакций после успешного сканирования штрих-кода в ней. Ожидается выполнение всех операций (в 1С и/или где-то еще о чем знает бэкенд, который будет этот поллинг отрабатывать), после чего модалка должна закрыться. Внутри модалки будет создан контекст для отслеживания счетчика запросов и описания поведения на успешный ответ (успех ответа описан в строке 13 в коде ниже ? функция conditionToRetry, получившая ответ API в аргументе, вернет необходимость продолжать поллинг).

modalsMagic.runPollingInModal({
  url: `${getAPIBaseUrl()}/PARTNER_API_EXAMPLE/wait_for/verified`,
  getData: () => {
    // -- NOTE: Можно целиком getData передать при вызове
    // Если мы говорим о динамических данных, главное ссылаться на мутабельный источник (не попадите в ловушку "замыканий")
    // Из списка прописных истин: Источник истины должен быть единственным
    const body = { id: tradeinId }
    // --
    body.odd_success = 5
    body.random_success = true
    return body
  },
  reqOpts: {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
  },
  conditionToRetry: (res) => res.ok && !!res.should_wait,
  interval: 1000,
  createContentFn: (content) => {
    // -- NOTE: Постепенно, декларативность становится привычкой,
    // которая толкает описывать создание рутинного переиспользуемого кода в других местах
    // а в целевом коде оставлять только то что позволит его читать как "хорошую книгу"
    const internalContent = modalsMagic.getBarcodeVerifyWaitingContent({
      specialText:
        'Отсканируйте данный штрих-код в 1С и дождитесь в этом окне сообщения об успешной выплате',
      barcodeUrl: 'https://example.com/TARGET_BARCODE_FOR_EXAMPLE',
    })
    // NOTE: В переменной content самый обычный DOM-элемент, который будет вмонтирован
    // --
    content.appendChild(internalContent)
  },
  onSuccess: ({ modalElm, response }) => {
    metrixAbstraction.ym('reachGoal', 'dkp_signed')
    // NOTE: Do something else...

    // NOTE: Здесь все-таки решил дать управление разработчику
    // В данном примере достаточно удалить элемент из DOM дерева
    modalElm.remove()
  },
  onError: (err) => {
    groupLog('payout_card', 'onError', [err])
    // NOTE: Do something else...
  },
  isDevModeEnabled: false,
})

☝️ Еще раз обозначу фокус: Декларативность - сестра таланта, для всего остального есть Garbage Collector (не злоупотреблять). В нашем случае декларативность заключается в понятном описании поведения в 40 строках кода выше.

Метод под капотом

Под капотом фокус на "чистоте" функций и достижении декларативности, которая должна поглощать код все больше (иначе, какой в ней смысл?)

// NOTE: Постараюсь добавить столько кода,
// сколько неоходимо для сохранения контекста
class DOMMagicSingletone {
  constructor(document) {
    // ...
  }
  static getInstance(document) {
    if (!DOMMagicSingletone.instance)
      DOMMagicSingletone.instance = new DOMMagicSingletone(document)

    return DOMMagicSingletone.instance
  }
  createProxiedState({ initialState, opts }) {
    return new this.DeepProxy(initialState, opts)
  }
  createDOMElement({ tag, className, id, attrs = {}, nativeHandlers = {}, style = {}, innerHTML }) {
    const elm = document.createElement(tag)

    switch (tag) {
      case 'button':
        // NOTE: Не обращайте внимания,
        // у меня привычка задавать явно все что требует разметка
        elm.type = 'button'
        break
      default:
        break
    }
    if (!!id) elm.id = id

    const addClassNameIfString = (elm, className) => {
      if (typeof className === 'string')
        elm.classList.add(className)
    }
    if (!!className) {
      if (typeof className === 'string')
        addClassNameIfString(elm, className)
      else if (Array.isArray(className))
        for (const cn of className)
          addClassNameIfString(elm, cn)
    }
    if (!!attrs && Object.keys(attrs).length > 0) {
      for (const key in attrs)
        elm.setAttribute(key, attrs[key])
    }
    if (!!nativeHandlers && Object.keys(nativeHandlers).length > 0) {
      for (const key in nativeHandlers)
        elm[key] = nativeHandlers[key]
    }
    if (!!style && Object.keys(style).length > 0) {
      for (const key in style)
        elm.style[key] = style[key]
    }
    if (!!innerHTML)
      elm.innerHTML = innerHTML

    return elm
  }
}

const domMagic = DOMMagicSingletone.getInstance(document)

// NOTE: Написанный однажды код должен быть переиспользуем на сколько это взможно
class ModalsMagic extends DOMMagicSingletone {
  constructor(ps) {
    super(ps)
    // ...
  }
  __getModalElm(arg) {
    const {
      createContentFn,
      wrapperId,
      controls,
      _addContentAfterActions,
      isCenteredVertical,
      size,
      verticalControlsOnly,
    } = arg
    const requiredParams = [
      'wrapperId',
    ]
    const errs = []
    for (const param of requiredParams)
      if (!arg[param])
        errs.push(`Missing required param: ${param}`)

    if (errs.length > 0)
      throw new Error(`modalsMagic._getModalElm ERR! ${errs.join('; ')}`)

    const wrapper = this.createDOMElement({
      tag: 'div',
      style: {
        boxSizing: 'border-box',
        // NOTE: centered & fixed
        display: 'flex',
        justifyContent: 'center',
        alignItems: isCenteredVertical ? 'center' : 'flex-start',
        position: 'fixed',
        overflowY: 'auto',
        top: '0px',
        right: '0px',
        left: '0px',
        bottom: '0px',
        padding: 'var(--std-m-6-swal-like) var(--std-m-2-swal-like) var(--std-m-6-swal-like) var(--std-m-2-swal-like)',
        background: 'rgba(255, 255, 255, 1)',
        height: '100dvh',
        animation: 'fade-in 0.6s',
      },
      id: wrapperId,
    })

    const _maxSize = {
      md: 600,
      lg: 1000,
    }
    const container = this.createDOMElement({
      tag: 'div',
      style: {
        boxSizing: 'border-box',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'flex-start',
        borderRadius: '16px',
        animation: 'scale-in 0.6s',
        maxWidth: !!size && !!_maxSize[size] ? `${_maxSize[size]}px` : `${_maxSize.md}px`,
        marginBottom: 'var(--std-m-1)',
      },
      className: ['extra-step-wrapper', 'box-shadow-1', 'stack-1'],
    })

    // -- 1. Content
    if (!!createContentFn) {
      const content = this.createDOMElement({
        tag: 'div',
      })
      createContentFn(content)
      container.appendChild(content)
    }
    // --

    // -- 2. Controls
    if (!!controls && Array.isArray(controls) && controls.length > 0) {
      const controlsWrapper = this.createDOMElement({
        tag: 'div',
        style: {
          boxSizing: 'border-box',
          display: 'flex',
          justifyContent: 'flex-end',
          alignItems: 'center',
          width: '100%',
        },
      })

      let c = 0
      for (const btnData of controls) {
        const btn = this.createDOMElement({
          tag: 'button',
          innerHTML: btnData.label,
          className: [
            'sp-button',
            ...(btnData.classNames || []),
          ],
          style: {
            animation: 'fade-in 0.1s, scale-in 0.2s',
          },
          id: btnData.id || `btn-${c}-${this._getRandomString(5)}`,
        })
        
        btn.onclick = () => {
          // NOTE: fade-out animation exp
          if (btnData.noStepOutAnimation) {
            btnData.cb(wrapper, { btnElm: btn, originalLabel: btnData.label })
          } else {
            wrapper.style.animation = 'fade-out 0.2s, scale-out 0.2s'
            setTimeout(() => {
              btnData.cb(wrapper, { btnElm: btn, originalLabel: btnData.label })
            }, 0)
          }
        }
        controlsWrapper.appendChild(btn)
        c += 1
      }

      container.appendChild(controlsWrapper)
    }
    // --

    if (!!_addContentAfterActions) _addContentAfterActions(container)

    wrapper.appendChild(container)

    return wrapper
  }

  // NOTE: С каждой абстракцией декларативность должна повышаться
  runPollingInModal(props) {
    const {
      interval,
      url,
      getData,
      reqOpts,
      createContentFn,
      conditionToRetry,
      onSuccess,
      onEachResponse,
      onError,
      isDevModeEnabled,
      isCenteredVertical,
    } = props
    const state = this.createProxiedState({
      initialState: {
        counter: 0,
        isPollingEnabled: false,
        isAborted: false,
        lastResponse: {
          ok: false,
          message: 'Ответ не получен',
        },
      },
      opts: {
        set(target, path, value, _receiver) {
          switch (path.join('.')) {
            case 'counter':
              if (!!groupLog)
                groupLog('[DEBUG] poll', `poll: ${value}`, ['target:', target, 'path:', path])
              break
            case 'lastResponse':
              if (typeof onEachResponse === 'function')
                onEachResponse({ response: value })
              break
            default:
              break
          }
        },
        deleteProperty(_target, _path) {
          throw new Error('Cant delete prop')
        },
      },
    })
    const elm = this.__getModalElm({
      isCenteredVertical,
      createContentFn,
      wrapperId: `polling-elm-${Math.random()}`,
      // onClose: isClosable ? (w) => {} : null,
      controls: isDevModeEnabled
        ? [
            {
              label: 'Stop & Close',
              cb: (w) => {
                state.isPollingEnabled = false
                state.isAborted = true
                w.remove()
              },
            },
            {
              label: 'Stop polling',
              classNames: ['sp-button_blue'],
              cb: (_w) => {
                state.isPollingEnabled = false
                state.isAborted = true
                // w.remove()
              },
            },
          ]
        : null,
    })

    if (!!elm) this.document.body.appendChild(elm)

    state.isPollingEnabled = true

    // NOTE: Еще одна абстракция (опустим, чтоб не перегружать эту статью)
    // Как говорится в одной умной книге,
    // "Код должен читаться как хорошая книга" (Роберт «Дядя Боб» Мартин)
    poll({
      fn: async () => {
        // NOTE: Особо фанатичным могу предложить прикрутить signal
        // Для отмены "лишних" запросов
        // Но делать этого я не буду, т.к. это выйдет за рамки данной статьи
        const res = await fetch(url, {
          body: JSON.stringify(getData()),
          ...reqOpts,
        })
          .then((response) => response.json())
          .catch((err) => ({ ok: false, message: err.message || 'No msg', isErrored: err instanceof Error }))

        switch (true) {
          case !conditionToRetry(res) && !res.isErrored:
            state.isPollingEnabled = false
            break
          default:
            state.counter += 1
            break
        }
        state.lastResponse = res
        return res
      },
      validate: () => !state.isPollingEnabled,
      interval,
    })
      .then((res) => {
        if (state.isAborted) throw new Error('isAborted')
        if (!!onSuccess) onSuccess({ modalElm: elm, response: res })
      })
      .catch((err) => {
        if (!!onError) onError({ modalElm: elm, error: err })
      })
  }
}

DeepProxy (гвоздь программы)

К слову о реактивности. Решил воспользоваться тем, что есть в JS под капотом ? Proxy объект. И тулза для быстрого создания сложных проксированных состояний. Я когда нахожу такие штуки, пишу коммент, где я это нашел (вдруг будет интересно туда вернуться).

// NOTE: https://es6console.com/

class DeepProxy {
  constructor(target, handler) {
    this._preproxy = new WeakMap()
    this._handler = handler
    return this.proxify(target, [])
  }
  makeHandler(path) {
    const dp = this
    return {
      set(target, key, value, receiver) {
        if (typeof value === 'object') value = dp.proxify(value, [...path, key])
        target[key] = value

        if (dp._handler.set) dp._handler.set(target, [...path, key], value, receiver)
        return true
      },
      deleteProperty(target, key) {
        if (Reflect.has(target, key)) {
          dp.unproxy(target, key)
          const deleted = Reflect.deleteProperty(target, key)
          if (deleted && dp._handler.deleteProperty) dp._handler.deleteProperty(target, [...path, key])
          return deleted
        }
        return false
      },
    }
  }
  unproxy(obj, key) {
    if (this._preproxy.has(obj[key])) {
      obj[key] = this._preproxy.get(obj[key])
      this._preproxy.delete(obj[key])
    }
    for (const k of Object.keys(obj[key]))
      if (typeof obj[key][k] === 'object')
        this.unproxy(obj[key], k)
  }
  proxify(obj, path) {
    // NOTE: obj will be mutated anyway
    if (Array.isArray(obj)) {
      obj.forEach((item, i) => {
        if (typeof item === 'object') obj[i] = this.proxify(obj[i], [...path, obj[i]]) // ? TODO: debug
      })
    } else {
      for (const key of Object.keys(obj)) {
        try {
          if (typeof obj[key] === 'object' && !!obj[key]) {
            obj[key] = this.proxify(obj[key], [...path, key])
          }
        } catch (err) {
          console.log(err)
        }
      }
    }
    const p = new Proxy(obj, this.makeHandler(path))
    this._preproxy.set(p, obj)
    return p
  }
}

window.DeepProxy = DeepProxy
window.createProxiedState = ({ initialState, opts }) => new DeepProxy(initialState, opts)

Выводы

По привычке я оставлял комментарии в коде. Если их собрать в один список, можно в целом резюмировать то что я хотел донести в этой статье:

• Постепенно, декларативность становится привычкой, которая толкает описывать создание рутинного переиспользуемого кода в других местах (выносите вспомогательный код в разряд утилит);

• Написанный однажды код должен быть переиспользуем на сколько это возможно. Это позволит с течением времени писать его меньше;

• С каждой абстракцией декларативность должна повышаться; С ростом количества решенных типовых задач, любая нишевая задача не должна составлять проблем для быстрого решения новой бизнес-задачи; Как следствие - любая проблемная нишевая задача должна быть решена как типовая с возможностью повторного использования написанного однажды кода;