Skip to content

Commit 5dac86b

Browse files
committed
✨ Added lazier CSS loading - Closes #2
1 parent 1bbfd9c commit 5dac86b

File tree

4 files changed

+35
-7
lines changed

4 files changed

+35
-7
lines changed

lazy-loader.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ export type LazyLoaderSettings = {
44
cssDir?: string;
55
jsDir?: string;
66
default?: "eager" | "lazy";
7+
lazierCSS?: boolean;
78
};
89

910
declare const configure: (settings?:Partial<LazyLoaderSettings>) => void;

src/lazy-loader.ts

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ class LazyLoader {
99
cssDir: "css",
1010
jsDir: "js",
1111
default: "lazy",
12+
lazierCSS: false,
1213
};
1314
this.io = new IntersectionObserver(this.intersectionCallback);
1415
}
@@ -18,7 +19,7 @@ class LazyLoader {
1819
// @ts-ignore
1920
this.settings.cssDir = this.settings.cssDir.replace(/^\/|\/$/g, "").trim();
2021
// @ts-ignore
21-
this.settings.jsDir = this.settings.jsDir.replace(/^\/|\/$/g, "").trim()
22+
this.settings.jsDir = this.settings.jsDir.replace(/^\/|\/$/g, "").trim();
2223
this.main();
2324
}
2425

@@ -160,10 +161,24 @@ class LazyLoader {
160161

161162
private async upgrade(element:HTMLElement):Promise<void>{
162163
try{
164+
const promises: Array<Promise<any>> = new Array(2);
163165
const tagName = element.tagName.toLowerCase().trim();
164166
const url = this.getModuleUrl(element, tagName);
165-
const constructor = await this.loadModule(url);
166-
this.mount(tagName, constructor);
167+
promises[0] = this.loadModule(url);
168+
if (this.settings.lazierCSS && element.hasAttribute("css")){
169+
// @ts-ignore
170+
const attrValue = element.getAttribute("css").trim().replace(/\s+/, " ");
171+
const files = attrValue.split(" ");
172+
element.removeAttribute("css");
173+
if (files.length){
174+
promises[1] = this.css(files);
175+
}
176+
}
177+
const results = await Promise.allSettled(promises);
178+
if (results[0].status === "fulfilled"){
179+
const constructor = results[0].value as CustomElementConstructor;
180+
this.mount(tagName, constructor);
181+
}
167182
} catch (e) {
168183
console.error(e);
169184
}
@@ -189,8 +204,10 @@ class LazyLoader {
189204
}
190205

191206
private async main(){
192-
const files = this.collectLazyCSS();
193-
await this.css(files);
207+
if (!this.settings.lazierCSS){
208+
const files = this.collectLazyCSS();
209+
await this.css(files);
210+
}
194211
const elements = this.collectCustomElements();
195212
this.upgradeOrTrack(elements);
196213
}

test/index.html

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,15 +37,19 @@
3737
</head>
3838
<body class="m-0 bg-grey-200 w-screen block">
3939
<main>
40-
<example-component web-component loading="eager"></example-component>
40+
<example-component css="test" web-component></example-component>
41+
<div style="height:150vh;"></div>
42+
<second-example-component css="test" web-component></second-example-component>
4143
</main>
4244

4345
<script type="module">
4446
import { configure, mount } from "/lazy-loader.min.mjs";
4547
configure({
4648
jsDir: "/",
4749
cssDir: "/",
50+
//default: "eager",
51+
lazierCSS: true,
4852
});
4953
</script>
5054
</body>
51-
</html>
55+
</html>

test/second-example-component.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export class SecodnExampleComponent extends HTMLElement{
2+
constructor(){
3+
super();
4+
this.innerHTML = "Hello world 2";
5+
}
6+
}

0 commit comments

Comments
 (0)