TeqFW: Обёртки для библиотек

Дата публикации: 2021-12-03

В приложениях зачастую приходится использовать сторонние библиотеки (как правило — в браузере), которые не являются es6-модулями. В данной публикации описано, каким образом подключать сторонние библиотеки, чтобы их можно было использовать внутри платформы TeqFW.

Возьмём, например, пакет tweetnacl. Разработчики пакета предусматривают, что весь функционал пакета загружается в браузер в виде единого бандла:

После чего он становится доступным для использования в браузере в виде глобального объекта:

window.nacl В TeqFW обращение к элементам кода организуется через пространство имён, а использование контейнера для внедрения зависимостей позволяет подменять одни зависимости другими (например, интерфейсы их реализациями). Поэтому для доступа к глобальным объектам в teq-приложениях необходима обёртка, совместимая с TeqFW DI.

Teq-приложения — это прежде всего PWA. В PWA все необходимые ресурсы подгружаются в кэш браузера, чтобы обеспечить возможность работы приложения в offline. В том числе и внешние библиотеки. Загрузка внешних библиотек и их монтирование в globals производится в оболочке приложения (app shell) стандартными средствами:

<!DOCTYPE html>

…

Чтобы фронт получил доступ к содержимому npm-пакета tweetnacl, в файле ./teqfw.json (дескрипторе приложения или плагина) нужно добавить инструкции плагину @teqfw/web для обработки статики:

“@teqfw/web”: {

“statics”: {

“/tweetnacl/”: “/tweetnacl/”
}
}
}

После чего все файлы в каталоге ./node_modules/tweetnacl/… станут доступны с фронта по адресу https://…/src/tweetnacl/…. Сам npm-пакет подключается в приложение обычным способом, в package.json (приложения или плагина):

“dependencies”: {

“tweetnacl”: “*”
}
}

Если сделать всё указанное выше, то библиотека загружается на фронте. Чтобы сделать её функционал доступным через TeqFW DI, нужно создать примерно такой es6-модуль ./src/Front/Lib/Nacl.mjs:

/**

Wrap TweetNaCl library to use as ES6 module in TeqFW on the front.
@namespace Fl32_Dup_Front_Lib_Nacl

if (window.nacl === undefined) {

throw new Error(`

Add ’

’

to your startup HTML to use TweetNaCl.

`);

}
export const {

box,

hash,

lowlevel,

randomBytes,

scalarMult,

secretbox,

setPRNG,

sign,

verify,

} = window.nacl; Оболочка экспортирует функционал, находящийся в global, в виде, доступном для использования в качестве es6-модуля.

Теперь функционал библиотеки можно использовать через TeqFW DI:

class Vnd_Plugin_Mod {
constructor(spec) {
// EXTRACT DEPS
const {box, secretbox} = spec[‘Fl32_Dup_Front_Lib_Nacl’];
// …
}
}