Dynamic Imports for JavaScript and CSS.
MIT License
Dynamic Import Assets like JavaScript and CSS.
Install with npm:
npm install dynamic-import-assets
Provide these APIs
dynamicImportJS
: 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 dynamicImportJS: (url: string) => Promise<HTMLScriptElement>;
export declare const dynamicImportCSS: (url: string) => Promise<HTMLLinkElement>;
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/[email protected]?module");
// inject <link rel="stylesheet">
await dynamicImportCSS("https://unpkg.com/@evillt/[email protected]/dist/toast.min.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/[email protected]/dist/toast.min.css"),
// inject <script>
dynamicImportJS("https://unpkg.com/@evillt/[email protected]")
]);
// use toast after loaded
toast.createToast("Hello world");
})();
See Releases page.
Install devDependencies and Run npm test
:
npm test
Pull requests and stars are always welcome.
For bugs and feature requests, please create an issue.
git checkout -b my-new-feature
git commit -am 'Add some feature'
git push origin my-new-feature
MIT azu