Skip to content

Commit b3a889a

Browse files
bolt-botbolt-bot
committed
refactor: adjust how Pattern Lab's main UI gets loaded up / pieced together to allow for all CSS and JS assets to get async loaded (non-render blocking) WITHOUT having to do a full JS refactor in the process -- saving that for a separate PR!
1 parent 90e61ef commit b3a889a

3 files changed

Lines changed: 114 additions & 30 deletions

File tree

‎packages/uikit-workshop/gulpfile.js‎

Lines changed: 51 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ var args = require('yargs').argv;
33

44
/* load gulp */
55
var gulp = require('gulp');
6+
const inlinesource = require('gulp-inline-source');
7+
const path = require('path');
8+
const { buildCriticalCSS } = require('./penthouse');
69

710
/* load the plugins */
811
var gulpLoadPlugins = require('gulp-load-plugins');
@@ -63,10 +66,47 @@ gulp.task('build:css', ['clean'], function() {
6366
.pipe(copyPublic('styleguide/css'));
6467
});
6568

66-
gulp.task('build:html', ['clean:html'], function() {
69+
gulp.task(
70+
'criticalcss',
71+
['clean', 'build:js-pattern', 'build:css', 'prebuild:html'],
72+
function(cb) {
73+
return buildCriticalCSS(cb);
74+
}
75+
);
76+
77+
gulp.task('copy:js', ['clean'], function() {
6778
return gulp
68-
.src('src/html/index.html')
69-
.pipe(plugins.fileInclude({ prefix: '@@', basepath: '@file' }))
79+
.src([
80+
// @todo: remove once improved JS build is in place
81+
'node_modules/fg-loadcss/dist/cssrelpreload.min.js',
82+
'node_modules/whendefined/dist/whendefined.min.js',
83+
'node_modules/fg-loadjs/loadJS.js',
84+
])
85+
.pipe(gulp.dest('dist/styleguide/js'))
86+
.pipe(copyPublic(''));
87+
});
88+
89+
gulp.task(
90+
'prebuild:html',
91+
['clean', 'build:css', 'copy:js', 'build:js-pattern'],
92+
function() {
93+
return gulp
94+
.src('src/html/index.html')
95+
.pipe(plugins.fileInclude({ prefix: '@@', basepath: '@file' }))
96+
.pipe(gulp.dest('dist'))
97+
.pipe(copyPublic(''));
98+
}
99+
);
100+
101+
gulp.task('build:html', ['clean', 'criticalcss', 'prebuild:html'], function() {
102+
return gulp
103+
.src('dist/index.html')
104+
.pipe(
105+
inlinesource({
106+
rootpath: path.resolve('dist'),
107+
compress: true,
108+
})
109+
)
70110
.pipe(gulp.dest('dist'))
71111
.pipe(copyPublic(''));
72112
});
@@ -131,7 +171,14 @@ gulp.task('build:js-pattern', ['clean', 'build:js-viewer'], function() {
131171

132172
gulp.task(
133173
'default',
134-
['build:bower', 'build:css', 'build:html', 'build:js-pattern'],
174+
[
175+
'build:bower',
176+
'copy:js',
177+
'build:css',
178+
'build:js-pattern',
179+
'build:html',
180+
'prebuild:html',
181+
],
135182
function() {
136183
if (args.watch !== undefined) {
137184
gulp.watch(['src/bower_components/**/*'], ['build:bower']);

‎packages/uikit-workshop/package.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,16 @@
3737
"imagemin-pngcrush": "0.1.0",
3838
"main-bower-files": "1.0.2",
3939
"yargs": "1.2.6"
40+
"gulp-inline-source": "^3.2.0",
4041
"penthouse": "^1.6.2",
4142
},
4243
"publishConfig": {
4344
"access": "public"
4445
},
4546
"dependencies": {
47+
"fg-loadcss": "^2.0.1",
48+
"fg-loadjs": "^1.0.0",
49+
"whendefined": "^0.0.1",
4650
"bower": "1.8.2"
4751
}
4852
}

‎packages/uikit-workshop/src/html/index.html‎

Lines changed: 59 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,26 @@
44
<head>
55
<title id="title">Pattern Lab</title>
66
<meta charset="UTF-8">
7-
<meta name="viewport" content="width=device-width" />
8-
<link rel="stylesheet" href="styleguide/css/pattern-lab.css" media="all" />
7+
<meta name="viewport" content="width=device-width" />
8+
<meta name="theme-color" content="#ababab"/>
9+
10+
<link inline href="styleguide/css/pattern-lab.critical.css" />
11+
12+
<link rel="preload" as="script" href="styleguide/js/patternlab-viewer.js">
13+
<link rel="preload" href="styleguide/css/pattern-lab.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
14+
15+
<noscript>
16+
<link rel="stylesheet" href="styleguide/css/pattern-lab.css" media="all" />
17+
</noscript>
18+
19+
<script inline async src="styleguide/js/cssrelpreload.min.js"></script>
20+
921
</head>
1022

1123
<body class="pl-c-body">
1224

13-
@@include('./partials/header.html')
14-
15-
@@include('./partials/iframe.html')
16-
25+
@@include('./partials/header.html')
26+
@@include('./partials/iframe.html')
1727
@@include('./partials/modal.html')
1828

1929
<!-- mustache templates -->
@@ -36,19 +46,21 @@
3646
</script>
3747

3848
<!-- load Pattern Lab data -->
39-
<script src="styleguide/data/patternlab-data.js"></script>
49+
<script src="styleguide/data/patternlab-data.js" defer></script>
4050

4151
<!-- applying theme config to get classes on before PL renders so there's no flash of unstyled content -->
4252
<!-- @todo Consider moving this to own file -->
4353
<script>
44-
if (config && config.theme) {
45-
if (config.theme.color === 'light') {
54+
// need to make sure that window.config is defined first on acccount of us async loading everything ;)
55+
window.patternlab = window.patternlab || {};
56+
window.patternlab.applyTheme = function(){
57+
if (window.config.theme.color === 'light') {
4658
document.body.classList.add('pl-c-body--theme-light');
4759
}
48-
if (config.theme.layout === 'vertical') {
60+
if (window.config.theme.layout === 'vertical') {
4961
document.body.classList.add('pl-c-body--theme-sidebar');
5062
}
51-
switch (config.theme.density) {
63+
switch (window.config.theme.density) {
5264
case 'cozy':
5365
document.body.classList.add('pl-c-body--theme-density-cozy');
5466
break;
@@ -60,26 +72,47 @@
6072
document.body.classList.add('pl-c-body--theme-density-compact');
6173
}
6274
}
75+
76+
// check if config already exists, if so, try to apply theme config; otherwise wait till later just in case.
77+
if (window.config !== undefined) {
78+
if (window.config.theme !== undefined) {
79+
window.patternlab.applyTheme();
80+
}
81+
}
6382
</script>
6483

65-
<script src="annotations/annotations.js"></script>
84+
<script src="annotations/annotations.js" async></script>
6685

6786
<!-- load Pattern Lab external library js -->
68-
<script src="styleguide/bower_components/jquery.min.js"></script>
69-
<script src="styleguide/bower_components/hogan-3.0.2.min.js"></script>
70-
<script src="styleguide/bower_components/prism.min.js"></script>
71-
<script src="styleguide/bower_components/jwerty.min.js"></script>
72-
<script src="styleguide/bower_components/typeahead.bundle.min.js"></script>
73-
<script src="styleguide/bower_components/EventEmitter.min.js"></script>
74-
<script src="styleguide/bower_components/script.min.js"></script>
75-
76-
<!-- set-up the dispatcher -->
77-
<script>
78-
var Dispatcher = new EventEmitter();
79-
</script>
87+
<script src="styleguide/bower_components/jquery.min.js" defer></script>
88+
<script src="styleguide/bower_components/hogan-3.0.2.min.js" defer></script>
89+
<script src="styleguide/bower_components/prism.min.js" defer></script>
90+
<script src="styleguide/bower_components/jwerty.min.js" defer></script>
91+
<script src="styleguide/bower_components/typeahead.bundle.min.js" defer></script>
92+
<script src="styleguide/bower_components/EventEmitter.min.js" defer></script>
93+
<script src="styleguide/bower_components/script.min.js" defer></script>
8094

81-
<!-- load the Pattern Lab viewer js -->
82-
<script src="styleguide/js/patternlab-viewer.js"></script>
95+
96+
<script inline src="styleguide/js/whenDefined.min.js"></script>
97+
<script inline src="styleguide/js/loadJS.js"></script>
98+
99+
<!-- temp workaround to allow everything to be asynced / deffered with current setup. @todo: remove once refactored components + improved build process is in place. -->
100+
<script>
101+
window.Dispatcher;
102+
window.addEventListener('DOMContentLoaded', function () {
103+
window.Dispatcher = new EventEmitter();
104+
105+
// load the Pattern Lab viewer js -- preloaded earlier ^
106+
loadJS('styleguide/js/patternlab-viewer.js');
107+
});
108+
109+
whenDefined(window, 'config', function() {
110+
if (window.config.theme){
111+
window.patternlab.applyTheme();
112+
}
113+
});
114+
115+
</script>
83116

84117
</body>
85118

0 commit comments

Comments
 (0)