|
1 | | -import observer from '@cocreate/observer'; |
| 1 | +import observer from "@cocreate/observer"; |
2 | 2 |
|
3 | 3 | function listen(name, callback, selector) { |
| 4 | + async function observerCallback({ target }) { |
| 5 | + if (!window.CoCreate) window.CoCreate = {}; |
4 | 6 |
|
5 | | -asyncfunctionobserverCallback({ target }){ |
6 | | -if(!window.CoCreate) |
7 | | -window.CoCreate={} |
| 7 | +if(window.CoCreate[name])return; |
| 8 | +window.CoCreate[name]={}; |
| 9 | +observer.uninit(observerCallback); |
8 | 10 |
|
9 | | - if (window.CoCreate[name]) |
10 | | - return |
11 | | - window.CoCreate[name] = {} |
12 | | - observer.uninit(observerCallback) |
| 11 | + const module = await callback(); |
| 12 | + observer.uninit(observerCallback); |
| 13 | + window.CoCreate[name] = module.default || module; |
13 | 14 |
|
14 | | - const module = await callback() |
15 | | - observer.uninit(observerCallback) |
16 | | - window.CoCreate[name] = module.default || module |
| 15 | + dispatchComponentLoaded(name); |
| 16 | + } |
17 | 17 |
|
18 | | - dispatchComponentLoaded(name) |
19 | | - } |
20 | | - |
21 | | - observer.init({ |
22 | | - name: 'lazyloadObserver', |
23 | | - observe: ['childList'], |
24 | | - selector, |
25 | | - callback: observerCallback |
26 | | - }) |
27 | | - |
28 | | - let selectorAttributes = []; |
29 | | - let attributes = selector.split(",") |
30 | | - for (let attribute of attributes) { |
31 | | - let attr = attribute.trim() |
32 | | - if (attr.startsWith("[")) { |
33 | | - let pos = attr.indexOf("*") |
34 | | - if (pos == -1) |
35 | | - pos = attr.indexOf("=") |
36 | | - if (pos !== -1) { |
37 | | - attr = attr.slice(1, pos) |
38 | | - } else { |
39 | | - attr = attr.slice(1, -1) |
40 | | - } |
41 | | - selectorAttributes.push(attr) |
42 | | - } |
43 | | - |
44 | | - } |
45 | | - if (selectorAttributes.length > 0) |
46 | | - observer.init({ |
47 | | - name: 'lazyloadAttributeObserver', |
48 | | - observe: ['attributes'], |
49 | | - attributeName: selectorAttributes, |
50 | | - selector, |
51 | | - callback: observerCallback |
52 | | - }); |
| 18 | + observer.init({ |
| 19 | + name: "lazyloadObserver", |
| 20 | + observe: ["childList"], |
| 21 | + selector, |
| 22 | + callback: observerCallback |
| 23 | + }); |
53 | 24 |
|
| 25 | + let selectorAttributes = []; |
| 26 | + let attributes = selector.split(","); |
| 27 | + for (let attribute of attributes) { |
| 28 | + let attr = attribute.trim(); |
| 29 | + if (attr.startsWith("[")) { |
| 30 | + let pos = attr.indexOf("*"); |
| 31 | + if (pos == -1) pos = attr.indexOf("="); |
| 32 | + if (pos !== -1) { |
| 33 | + attr = attr.slice(1, pos); |
| 34 | + } else { |
| 35 | + attr = attr.slice(1, -1); |
| 36 | + } |
| 37 | + selectorAttributes.push(attr); |
| 38 | + } |
| 39 | + } |
| 40 | + if (selectorAttributes.length > 0) |
| 41 | + observer.init({ |
| 42 | + name: "lazyloadAttributeObserver", |
| 43 | + observe: ["attributes"], |
| 44 | + attributeName: selectorAttributes, |
| 45 | + selector, |
| 46 | + callback: observerCallback |
| 47 | + }); |
54 | 48 | } |
55 | 49 |
|
56 | 50 | export async function lazyLoad(name, selector, callback) { |
57 | | - if (document.querySelector(selector)) |
58 | | - await dependency(name, await callback()) |
59 | | - else |
60 | | - listen(name, callback, selector) |
| 51 | + if (document.querySelector(selector)) |
| 52 | + await dependency(name, await callback()); |
| 53 | + else listen(name, callback, selector); |
61 | 54 | } |
62 | 55 |
|
63 | 56 | export async function dependency(name, promise) { |
64 | | -try { |
65 | | -let component = await promise; |
66 | | -if (!window.CoCreate) |
67 | | -window.CoCreate={} |
68 | | - |
69 | | -window.CoCreate[name]=component.default||component |
70 | | -dispatchComponentLoaded(name) |
71 | | -} catch (error) { |
72 | | -console.error('error loading chunck: ', error) |
73 | | -} |
| 57 | +try { |
| 58 | +let component = await promise; |
| 59 | +if (!window.CoCreate)window.CoCreate={}; |
| 60 | +if(!window.CoCreate[name]){ |
| 61 | +window.CoCreate[name]=component.default||component; |
| 62 | +dispatchComponentLoaded(name); |
| 63 | +} |
| 64 | +} catch (error) { |
| 65 | +console.error("error loading chunck: ", error); |
| 66 | +} |
74 | 67 | } |
75 | 68 |
|
76 | 69 | function dispatchComponentLoaded(name) { |
77 | | - document.dispatchEvent(new CustomEvent(name + 'Loaded', { |
78 | | - detail: { name } |
79 | | - })); |
| 70 | + document.dispatchEvent( |
| 71 | + new CustomEvent(name + "Loaded", { |
| 72 | + detail: { name } |
| 73 | + }) |
| 74 | + ); |
80 | 75 | } |
0 commit comments