92 lines
2.9 KiB
JavaScript
92 lines
2.9 KiB
JavaScript
|
(function (global, factory) {
|
||
|
|
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('riot'), require('@riotjs/util/dom')) :
|
||
|
|
typeof define === 'function' && define.amd ? define(['riot', '@riotjs/util/dom'], factory) :
|
||
|
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.lazy = factory(global.riot, global.dom));
|
||
|
|
})(this, (function (riot, dom) { 'use strict';
|
||
|
|
|
||
|
|
const cache = new WeakMap(); // expose the cache as static property
|
||
|
|
|
||
|
|
lazy.cache = cache; // static attribute in case we want to just export a lazy riot component
|
||
|
|
|
||
|
|
lazy.export = function lazyExport(Loader, Component) {
|
||
|
|
// it could be that the user don't want to use a loader for whatever reason
|
||
|
|
const hasLoader = Loader && Component;
|
||
|
|
const LazyComponent = hasLoader ? Component : Loader;
|
||
|
|
|
||
|
|
const load = () => typeof LazyComponent === 'function' ? LazyComponent() : Promise.resolve(LazyComponent);
|
||
|
|
|
||
|
|
const cachedComponent = cache.get(LazyComponent);
|
||
|
|
return riot.pure(_ref => {
|
||
|
|
let {
|
||
|
|
slots,
|
||
|
|
attributes,
|
||
|
|
props
|
||
|
|
} = _ref;
|
||
|
|
return {
|
||
|
|
mount(el, parentScope) {
|
||
|
|
this.el = el;
|
||
|
|
this.isMounted = true;
|
||
|
|
|
||
|
|
const mount = () => {
|
||
|
|
this.mountLazyComponent(parentScope);
|
||
|
|
this.el.dispatchEvent(new Event('load'));
|
||
|
|
};
|
||
|
|
|
||
|
|
if (cachedComponent) {
|
||
|
|
mount();
|
||
|
|
} else {
|
||
|
|
if (hasLoader) this.createManagedComponent(Loader, parentScope);
|
||
|
|
load().then(data => {
|
||
|
|
cache.set(LazyComponent, data.default || data);
|
||
|
|
mount();
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
createManagedComponent(Child, parentScope) {
|
||
|
|
this.component = riot.component(Child)(this.el, props, {
|
||
|
|
attributes,
|
||
|
|
slots,
|
||
|
|
parentScope
|
||
|
|
});
|
||
|
|
},
|
||
|
|
|
||
|
|
mountLazyComponent(parentScope) {
|
||
|
|
// if this component was unmounted just return here
|
||
|
|
if (!this.isMounted) return; // unmount the loader if it was previously created
|
||
|
|
|
||
|
|
if (this.component) {
|
||
|
|
// unmount the bindings (keeping the root node)
|
||
|
|
this.component.unmount(true); // clean the DOM
|
||
|
|
|
||
|
|
if (this.el.children.length) dom.cleanNode(this.el);
|
||
|
|
} // replace the old component instance with the new lazy loaded component
|
||
|
|
|
||
|
|
|
||
|
|
this.createManagedComponent(cache.get(LazyComponent), parentScope);
|
||
|
|
},
|
||
|
|
|
||
|
|
update(parentScope) {
|
||
|
|
if (this.isMounted && this.component) this.component.update({}, parentScope);
|
||
|
|
},
|
||
|
|
|
||
|
|
unmount() {
|
||
|
|
this.isMounted = false;
|
||
|
|
if (this.component) this.component.unmount(...arguments);
|
||
|
|
}
|
||
|
|
|
||
|
|
};
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
function lazy(Loader, Component) {
|
||
|
|
return {
|
||
|
|
name: 'lazy',
|
||
|
|
exports: lazy.export(Loader, Component)
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
return lazy;
|
||
|
|
|
||
|
|
}));
|