Использование внешней библиотеки с HyperHTML

Question

Мы стремимся интегрировать HyperHTML в приложение чата.

В настоящее время мы используем момент.js и timeago для удобочитаемых временных отметок времени последнего опубликования чата. Также последний превью сообщений в списке чатов обновляется часто, но не так часто, как отметка времени. Все эти компоненты являются индивидуальными, но также каждый из них, обернутый в li для чата.

Итак, используя hyperHTML с внешними библиотеками (такими как TimeAgo), которые прикрепляют метку времени к DOM и выполняют рендеринг из DOM, мы задаемся вопросом о наилучшей практике? Как я могу использовать функцию timeago() в литерале шаблона hyperHTML?

 hyperHTML.bind(document.querySelector('#txtra_chatMessages'))
   <li class="chatEl their-msg" id="i_${results.addedon}">${results.searchResults}${results.sidebar}<\/li>
   //$('#txtra_chatMessages').append(results);
   //$('time.t-ago').timeago();

Answer 1

Извините за ожидание. Прежде чем ответить на ваш вопрос, я хотел бы подчеркнуть фундаментальную проблему в вашем примере: атрибут частичного идентификатора:

id="i_${results.addedon}"
// should be (with or without quotes)
id=${'i_' + results.addedon}

В текущем hyperHTML нет поддержки частичных атрибутов по простым причинам, это просто ненужные логические издержки.

Теперь, когда я прояснил этот важный момент, я могу ответить на ваш вопрос.

Внешние библиотеки и гипер HTML

Вы можете легко интегрировать HyperHTML с любым проектом, который хотите, если вы понимаете, " кому что принадлежит ".

Это означает, что как только вы создаете контент с помощью HyperHTML, либо через связывание, либо через провод, таким контентом не должны манипулировать навязчивые библиотеки 3-х частей.

Как пример, JQuery slider() является навязчивым плагином, потому что он очищает, заменяет и загрязняет дополнительным контентом узел, мешая логике hyperHTML.

Чтобы заставить его работать без проблем, вы можете создать целевой контейнерный узел вместо того, чтобы изменять непосредственно узлы, используемые в качестве интерполированных значений.

Вы можете увидеть живой пример здесь.

Плагин Timeago

В этом случае плагин не обязательно является навязчивым, и вы можете использовать его следующим образом:

const chat = hyperHTML.bind(
  document.querySelector('#txtra_chatMessages')
)`
  <li
    class="chatEl their-msg"
    id="${'i_' + results.addedon}"
  >
    ${results.searchResults}
    ${results.sidebar}
  <\/li>`;

$('time.t-ago', chat).timeago();

Тем не менее, идеальным использованием этого плагина было бы создание текстовой информации непосредственно в результатах.

const {bind, wire} = hyperHTML;
const chat = bind(
  document.querySelector('#txtra_chatMessages')
)`
  <li
    class="chatEl their-msg"
    id="${'i_' + results.addedon}"
  >
    ${results.searchResults.map(result => wire(result)`
      <span>
        ${result.text}
        (${$.timeago(result.date)})
      </span>`)}
    ${results.sidebar}
  <\/li>`;

В этом случае вы уверены, что весь контент обрабатывается HyperHTML, и это делается сразу, без необходимости каждый раз проходить через чат и обновлять текст каждого узла.

В целом, это идеальный сценарий, поскольку право собственности на контент все еще остается гипертекстовым, а функции плагинов полностью интегрированы.

Другой способ интеграции плагинов в качестве генератора контента через bind или wire может быть следующим:

hyperHTML(document.body)`
  <div>${
    $.magicContent(happen)
  }</div>`;

Я надеюсь, что этот ответ был как-то полезен.

С уважением