Dynamic-import-assets NPM

dynamic-import-assets

Dynamic Import Assets like JavaScript and CSS.

Feature

Dynamic load JavaScript and CSS from URL
Support Promises
Work with ES modules registry like UNPKG and Pika CDN

Install

Install with npm:

npm install dynamic-import-assets

Usage

Provide these APIs

dynamicImportScript: Load JavaScript Script and resolve with loaded <script>
dynamicImportCSS: Load CSS Script and resolve with <link>

export declare type Loader<T extends HTMLElement> = (url: string) => Promise<T>;
export declare function createDynamicImportAssetsLoader<T extends HTMLElement>(loader: Loader<T>): (url: string) => Promise<T>;
export declare const dynamicImportScript: (url: string) => Promise<HTMLScriptElement>;
export declare const dynamicImportCSS: (url: string) => Promise<HTMLLinkElement>;

Examples

For example, you want to load https://toast.evila.me/'s js and css using UNPKG, do following:

(async function main(){
    const { dynamicImportCSS } = await import("https://unpkg.com/dynamic-import-assets@^1.0.0?module");
    const { createToast } = await import("https://unpkg.com/@evillt/toast@1.1.3?module");
    // inject <link rel="stylesheet">
    await dynamicImportCSS("https://unpkg.com/@evillt/toast@1.1.3/dist/toast.min.css", { type: "css" });
    // use toast after loaded 
    createToast("Hello world");
})();

Also support JavaScript as script loading:

(async function main(){
    const { dynamicImportJS, dynamicImportCSS } = await import("https://unpkg.com/dynamic-import-assets@^1.0.0?module");
    await Promise.all([
        // inject <link rel="stylesheet">
        dynamicImportCSS("https://unpkg.com/@evillt/toast@1.1.3/dist/toast.min.css", { type: "css" }),
        // inject <script>
        dynamicImportJS("https://unpkg.com/@evillt/toast@1.1.3", { type: "js" })
    ]);
    // use toast after loaded 
    toast.createToast("Hello world");
})();