TeqFW: Wrappers for Libraries

Publication date: 2021-12-03

Applications often use third-party libraries, especially in the browser, that are not ES6 modules. This article explains how to connect such libraries so that they can be used inside TeqFW.

Take tweetnacl as an example. Its authors expect the package to be loaded in the browser as one bundle:

<script type="application/javascript" src="nacl-fast.min.js"></script>

It then becomes available as a global browser object:

window.nacl

TeqFW addresses code through namespaces. Its dependency-injection container can also replace one dependency with another, for example an interface with its implementation. A TeqFW-compatible wrapper is therefore needed to access global objects.

TeqFW applications are primarily PWAs. They cache all required resources in the browser so they can work offline, including external libraries. The application shell loads and mounts such libraries into globals in the conventional way:

<!-- These scripts are not ESM ready for loading with ES6 'import'. -->
<script type="application/javascript" src="./src/tweetnacl/nacl-fast.min.js"></script>

To expose the contents of the tweetnacl npm package to the frontend, add static-resource instructions for @teqfw/web to ./teqfw.json:

{
  "@teqfw/web": {
    "statics": { "/tweetnacl/": "/tweetnacl/" }
  }
}

Files from ./node_modules/tweetnacl/… then become available to the frontend at https://…/src/tweetnacl/…. The package itself is installed normally through package.json:

{ "dependencies": { "tweetnacl": "*" } }

Once the library is loaded in the frontend, create an ES6 module such as ./src/Front/Lib/Nacl.mjs to expose it through TeqFW DI:

if (window.nacl === undefined) {
  throw new Error("Add TweetNaCl to your startup HTML to use it.");
}

export const {
  box, hash, lowlevel, randomBytes, scalarMult,
  secretbox, setPRNG, sign, verify,
} = window.nacl;

The wrapper exports functionality from the global object in a form that an ES6 module can consume. A dependent module can then obtain the required functions through TeqFW DI:

class Vnd_Plugin_Mod {
  constructor(spec) {
    const {box, secretbox} = spec['Fl32_Dup_Front_Lib_Nacl'];
  }
}

Additional source-code excerpts

}
export const {

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

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