Продолжая нашу серию, мы подошли к отдельному веб-компоненту, который я рассмотрю в следующих двух постах. Сначала простое улучшение текста, обобщенное для повторного использования (этот), затем добавление того же обобщенного тега, чтобы он отвечал уникальному случаю использования в HAXcms.
Ссылки
- Демонстрация Codepen с несколькими тегами
- Демонстрация (глоссарий в следующей части более впечатляющий)
- npm install @lrnwebcomponents/enhanced-text
- источник микросервиса
- источник веб-компонента
Какова цель?
Целью было создать элемент, который мог бы анализировать текст и дополнять его автоматически. Первым деревом принятия решений становится вопрос, будет ли это управляться Light Dom или данными/свойствами? Очевидно, я выбрал оба варианта ;). Нет, это микс.
Light Dom / узлы щелевого контента были выбраны для обеспечения текста, потому что:
- Контент для наших реализаций CMS уже существовал
- Обертывание тега на существующие
<p>/ обычные HTML-теги является высоко семантическим / прогрессивным улучшением - Мы могли бы поддерживать более высокий уровень SEO, используя по умолчанию существующий текстовый контент и просто обернув содержимое.
При этом мы также обсудили, что не все захотят «улучшать» текст с помощью запланированных нами опций, и что это должно быть опционально. Поэтому потребуется Boolean, а также поддержка нескольких форм «улучшения».
- vide — поддержка дополнения текста из этой конечной точки
- loading — статус для визуализации того, что что-то происходит.
Дополнительные соображения касались поддержки резервного копирования, чтобы в случае сбоя дополнения из микросервиса, он все равно продолжал бы отображать текст в слотах. CSS / HTML в этом элементе очень минималистичен, за исключением вращающегося загрузчика.
Демонстрация кодепена
Здесь показано несколько вариантов тега enhanced-text, включая vide, wikipedia, glossary и переключение булева auto для того, чтобы увеличить текст немедленно по событию (нажатие кнопки в случае с vide).
веб-компонент с улучшенным текстом
Веб-компонент почти полностью зависит от данных и опций, поэтому давайте сосредоточимся на том, как мы получаем данные из слота и принимаем решения о том, какие опции запрашивать.
firstUpdated(changedProperties) {
if (super.firstUpdated) {
super.firstUpdated(changedProperties);
}
// automatic enhancement if set, otherwise manual
if (this.auto) {
this.enhance();
}
}
Если у нас auto установлено в TRUE, то мы автоматически расширяем наш элемент, чтобы перейти к запросу на его обработку. Жизненный цикл firstUpdated похож на connectedCallback, но Lit async рендерит shadowRoots, так что это первый раз, когда безопасно запрашивать информацию там и работать с ней.
Давайте теперь посмотрим на enhancement, который делает всю тяжелую работу.
// apply enhancement to text. if not in auto user must invoke this.
async enhance() {
const body = this.innerHTML;
this.loading = true;
if (this.vide) {
await MicroFrontendRegistry.call('@enhancedText/textVide', {body: body, fixationPoint: this.fixationPoint}, this.enahncedTextResponse.bind(this));
}
if (this.haxcmsGlossary && (this.haxcmsSiteLocation || this.haxcmsSite)) {
if (this.haxcmsSite) {
await MicroFrontendRegistry.call('@haxcms/termsInPage', {body: body, type: 'site', site: this.haxcmsSite, wikipedia: this.wikipedia}, this.applyTermFromList.bind(this));
}
else {
await MicroFrontendRegistry.call('@haxcms/termsInPage', {body: body, type: 'link', site: this.haxcmsSiteLocation, wikipedia: this.wikipedia}, this.applyTermFromList.bind(this));
}
}
// all above will run in order
this.loading = false;
}
Здесь мы выполняем различные опции из наших свойств, используем this.innerHTML для получения содержимого тела для обработки, и позволяем вызовам MicroFrontendRegistry отправлять данные в микросервисы и из них.
Доверять пока слишком многому…
Не так много происходит с enhanceTextResponse, который является тем случаем, который запускает вызов, чтобы «расширить» текст.
enahncedTextResponse(data) {
if (data.status && data.data && data.data.length) {
let parser = new DOMParser();
let doc = parser.parseFromString(data.data, 'text/html');
this.innerHTML = doc.body.innerHTML;
}
}
Если наши данные из микро отравлены (каким-то образом), то DOMParser, по крайней мере, обработает тег script, хотя это очень минимальная форма XSS, и дальнейшая работа здесь по обеспечению конечной точки необходима для больших реализаций, которым потребуются дополнительные уровни гарантии безопасности.
конечная точка vide
TextVide — это попытка с открытым исходным кодом реализовать технику, известную как Bionic Reading — плагин для браузера, который улучшает блоки текста, чтобы помочь глазу пользователя сфокусироваться на достаточной части слова для эффективного чтения.
Конечная точка для этого микросервиса невероятно минимальна (13 строк минус комментарии) в результате всей работы, проделанной в пакете text-vide.
import { stdPostBody, stdResponse, invalidRequest } from "../../../utilities/requestHelpers.js";
import { textVide } from 'text-vide';
export default async function handler(req, res) {
// use this if POST data is what's being sent
const body = stdPostBody(req);
const text = body.body;
if (text) {
const highlightedText = textVide(text, { fixationPoint: body.fixationPoint ? parseInt(body.fixationPoint) : 4 });
res = stdResponse(res, highlightedText, {cache: 86400, methods: "OPTIONS, POST" });
}
else {
res = invalidRequest(res, 'missing `text` param');
}
}
Пока мы жестко кодируем точку фиксации (4), но она может принимать переменную для изменения. Нам все еще нужно опробовать это на конечных пользователях с реальным контентом, чтобы понять, насколько это ценно и какой метод улучшения точки фиксации лучше.
В следующей статье я расскажу, как этот же элемент может быть подключен к нашей системе HAXcms для обеспечения глоссария терминами, дополненными в контексте. Это наша основная цель — дать студентам возможность быстро получить ссылки на определения, если они забыли термин и то, как он используется в курсе. Однако мы не хотим, чтобы наши преподаватели (конечные пользователи, создающие контент) вспоминали все места, где используется термин, или чтобы им приходилось поддерживать и управлять определением после его написания.