Note to users of the old fo-library-manager

fo-library-manager was originally published as a VueJS component, which didn't work very well and added some un-needed complexity. (Don't get me wrong, I absolutely love VueJS!) It has been re-formulated as a pure TypeScript NPM package. I apologize for changing in mid-stream, but I think you'll find this works a lot better and can be used in a wider variety of circumstances.

fo-library-manager

fo-library-manager is an NPM package that can be used to manage a large number of libraries used by a web page. It allows a web page developer to have more "hands-on" control of library loading. When a library load is requested, FoLibraryManager will determine whether the library has already been loaded, and ask the web browser to load it only if necessary. Library load requests can have a callback function that executes after the library has finished loading. FoLibraryManager is appropriate in situations where libraries need to be loaded any time during a session and not just when the page is loaded.

fo-library-manager was developed using TypeScript and is intended to be used in a TypeScript project.

Getting fo-library-manager

fo-library-manager is distributed using Node Package Manager (NPM). Install it into your project using the following command:

npm install fo-library-manager

Using fo-library-manager

To include fo-library-manager in your project, include an import statement at the top of your TypeScript code. The form of the import statement depends on the context in which you are using the library.

For a TypeScript project that you compile using tsc, you can use a non-relative import reference:

import LibraryManager from 'fo-library-manager'

If you are using fo-library-manager in a VueJS project, you must use a relative reference that specifies the full path relative to your project root:

import { LibraryManager } from '../node_modules/fo-library-manager/lib/FoLibraryManager'

There seems to be a bug in vue-cli-service build that it can't resolve non-relative imports in TypeScript. The TypeScript compiler by itself works just fine with the non-relative syntax, but the Vue CLI 3 build task will throw a dependency not found error. See https://www.typescriptlang.org/docs/handbook/module-resolution.html for more information on TypeScript module resolution rules.

After importing LibraryManager, instantiate it like this:

const lm LibraryManager = new LibraryManager()
 

Loading a library

To load a library, use the createNewManagedLibrary() method:

const url: string = 'https://code.jquery.com/jquery-3.3.1.min.js'
const integrity: string = 'sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8='
 
lm.createNewManagedLibrary(
    url,
    integrity,
    () => {
        // constructorCallback
        console.log('constructorCallbak fired!')
    },
    () => {
        // afterLoadCallback
        console.log('afterLoadCallbak fired!')
    }
)

Running the demo application

A VueJS demo application for fo-library-manager can be found on GitHub at https://github.com/findingorder/fo-library-manager-ts-demo. It has some good code examples of how to work with fo-library-manager.

Full Documentation

Complete documentation for fo-library-manager can be found at fo-library-manager Documentation.

Acknowledgements

Scaffolding for this project was designed by Carl-Johan Kihl and taken from his Medium article Step by step: Building and publishing an NPM Typescript package.