Skip to content

Compile Vue Page at build time to alleviate FOUC #1512

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ang-zeyu merged 69 commits into from
Mar 19, 2021
Merged

Compile Vue Page at build time to alleviate FOUC #1512

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
69 commits
Select commit Hold shift + click to select a range
4bf9691
test
wxwxwxwx9 Mar 8, 2021
2ce353e
Test out object
wxwxwxwx9 Mar 9, 2021
04c064d
Revert "Test out object"
wxwxwxwx9 Mar 9, 2021
c58f4b3
Prototype
wxwxwxwx9 Mar 9, 2021
b6ee286
Fix script tag redirect
wxwxwxwx9 Mar 9, 2021
1e64fa9
Proper fix of script tag
wxwxwxwx9 Mar 9, 2021
dfda0a8
Remove comments and improve file writing logic
wxwxwxwx9 Mar 9, 2021
d2c7e38
Update setup function
wxwxwxwx9 Mar 9, 2021
98a0a55
Update page route implementation
wxwxwxwx9 Mar 9, 2021
ad88665
Update implementation of page routes
wxwxwxwx9 Mar 9, 2021
04fb204
Remove temporary styles (that was used to mitigate FOUC)
wxwxwxwx9 Mar 9, 2021
e37b841
Fix eslint
wxwxwxwx9 Mar 9, 2021
c2f1e70
Minor changes
wxwxwxwx9 Mar 9, 2021
842b55f
Abstract page compile into function
wxwxwxwx9 Mar 9, 2021
54b3741
Format comments
wxwxwxwx9 Mar 9, 2021
c98d143
Delete VuePageRender.js
wxwxwxwx9 Mar 9, 2021
c7c4489
Add minification of output render js file
wxwxwxwx9 Mar 10, 2021
010ceec
Update package-lock.json
wxwxwxwx9 Mar 10, 2021
c0d4c16
Retain page content but clear it in browser using script
wxwxwxwx9 Mar 10, 2021
b62f9b9
Update naming for pageVueRender script and comments
wxwxwxwx9 Mar 10, 2021
8f3007b
Update core-web index variable namings
wxwxwxwx9 Mar 10, 2021
9fe3e2f
Comment out minification of js files
wxwxwxwx9 Mar 10, 2021
c561579
Fix styling for dev guide
wxwxwxwx9 Mar 10, 2021
2eae6ed
Minor changes
wxwxwxwx9 Mar 10, 2021
8534b69
Update tests
wxwxwxwx9 Mar 10, 2021
f5f631c
Update index.js
wxwxwxwx9 Mar 10, 2021
c489b6c
Merge branch 'master' of https://github.com/MarkBind/markbind into co…
wxwxwxwx9 Mar 10, 2021
cf48482
Update test
wxwxwxwx9 Mar 10, 2021
f413052
Update package.json
wxwxwxwx9 Mar 10, 2021
50e6dfb
Update index.js
wxwxwxwx9 Mar 13, 2021
9243b8c
Add comment
wxwxwxwx9 Mar 13, 2021
f1750e1
Fix bug for lazy loading
wxwxwxwx9 Mar 13, 2021
268f2ad
Update implementation to output render fn per file
wxwxwxwx9 Mar 13, 2021
c713d5b
Remove uglify-js
wxwxwxwx9 Mar 13, 2021
28fd442
Update render fn file name
wxwxwxwx9 Mar 13, 2021
225cec7
Update tests
wxwxwxwx9 Mar 13, 2021
378cc94
Update js file names
wxwxwxwx9 Mar 13, 2021
753529e
Update tests
wxwxwxwx9 Mar 13, 2021
f36bbef
Update .eslintignore
wxwxwxwx9 Mar 13, 2021
7ab614c
Update package-lock.json
wxwxwxwx9 Mar 13, 2021
f1c6cfa
Revert "Update package-lock.json"
wxwxwxwx9 Mar 13, 2021
08173e8
Update package-lock.json
wxwxwxwx9 Mar 13, 2021
93ff6ce
Remove initAppNode script
wxwxwxwx9 Mar 15, 2021
7f6bf15
Add back FOUC temporary styles
wxwxwxwx9 Mar 15, 2021
cfd26ff
Update script output file path
wxwxwxwx9 Mar 15, 2021
d64e9e3
Output directly usable js for render fns
wxwxwxwx9 Mar 15, 2021
fc1401f
Update test
wxwxwxwx9 Mar 15, 2021
c6905c6
Remove fsUtil
wxwxwxwx9 Mar 15, 2021
fcb638e
Update test
wxwxwxwx9 Mar 15, 2021
28b57d8
Implement fix for Vue compilation discard of style tags
wxwxwxwx9 Mar 15, 2021
0f63d87
Update test
wxwxwxwx9 Mar 15, 2021
1781c21
Fix eslint
wxwxwxwx9 Mar 15, 2021
8ab98b3
Remove unnecessary changes
wxwxwxwx9 Mar 15, 2021
f09468e
Update namings
wxwxwxwx9 Mar 15, 2021
8922469
Update test
wxwxwxwx9 Mar 15, 2021
b1289ac
Fix OS path issue
wxwxwxwx9 Mar 15, 2021
7b6a3f0
Update eslint for pageVueRenderFn for core-web
wxwxwxwx9 Mar 17, 2021
2376582
Fix <style> tag issue raised by Zeyu
wxwxwxwx9 Mar 18, 2021
bd4ec52
Remove no-longer-needed styling
wxwxwxwx9 Mar 18, 2021
b8291bb
Update eslint for pageVueRender globals to be readonly
wxwxwxwx9 Mar 18, 2021
8ad2ec6
Update test
wxwxwxwx9 Mar 18, 2021
3b605a9
Update comments
wxwxwxwx9 Mar 19, 2021
02c7d2b
Move processScript and processStyle to another file
wxwxwxwx9 Mar 19, 2021
144ba24
Fix jsBeautify beautifying placeholder script
wxwxwxwx9 Mar 19, 2021
2b2f5fb
Update test
wxwxwxwx9 Mar 19, 2021
58e7b61
Revert "Update test"
wxwxwxwx9 Mar 19, 2021
01edf73
Revert "Fix jsBeautify beautifying placeholder script"
wxwxwxwx9 Mar 19, 2021
64b20f1
Add jsBeautify content_unformatted fix for <script>
wxwxwxwx9 Mar 19, 2021
a8468dd
Update tests
wxwxwxwx9 Mar 19, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .eslintignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
*.min.*
*.page-vue-render.js
node_modules
packages/core/src/lib/markdown-it/patches/*
packages/core/src/lib/markdown-it/plugins/*
Expand Down
24 changes: 10 additions & 14 deletions packages/cli/test/functional/test_site/expected/bugs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<head>

<meta name="default-head-top">
<script src="/test_site/headFiles/customScriptTop.js"></script>
<script src="/test_site/headFiles/customScriptTop.js" type="application/javascript"></script>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Expand All @@ -21,13 +21,14 @@
<script src="../markbind/js/polyfill.min.js"></script>
<script src="../markbind/js/vue.min.js"></script>
<script src="../markbind/js/markbind.min.js"></script>
<script src="index.page-vue-render.js"></script>
<script src="../markbind/js/jquery.min.js"></script>
<link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
<link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">

<meta name="default-head-bottom">
<link rel="stylesheet" href="/test_site/stylesheets/styles.css">
<script src="/test_site/headFiles/customScriptBottom.js"></script>
<script src="/test_site/headFiles/customScriptBottom.js" type="application/javascript"></script>
<link rel="icon" href="/test_site/favicon.png">
</head>
<script>
Expand Down Expand Up @@ -211,21 +212,16 @@ <h1 id="heading-in-footer-should-not-be-indexed"><span id="heading-in-footer-sho
MarkBind.setupWithSearch()
</script>
<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
<script>
alert("Inline plugin script loaded!")
</script>
<script>alert("Inline plugin script loaded!")</script>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
<script>
window.dataLayer = window.dataLayer || [];

function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());

gtag('config', 'TRACKING-ID');
</script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'TRACKING-ID');
</script>

</html>
25 changes: 25 additions & 0 deletions packages/cli/test/functional/test_site/expected/bugs/index.page-vue-render.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

24 changes: 10 additions & 14 deletions packages/cli/test/functional/test_site/expected/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<head>

<meta name="default-head-top">
<script src="/test_site/headFiles/customScriptTop.js"></script>
<script src="/test_site/headFiles/customScriptTop.js" type="application/javascript"></script>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Expand All @@ -21,13 +21,14 @@
<script src="markbind/js/polyfill.min.js"></script>
<script src="markbind/js/vue.min.js"></script>
<script src="markbind/js/markbind.min.js"></script>
<script src="index.page-vue-render.js"></script>
<script src="markbind/js/jquery.min.js"></script>
<link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
<link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">

<meta name="default-head-bottom">
<link rel="stylesheet" href="/test_site/stylesheets/styles.css">
<script src="/test_site/headFiles/customScriptBottom.js"></script>
<script src="/test_site/headFiles/customScriptBottom.js" type="application/javascript"></script>
<link rel="icon" href="/test_site/favicon.png">
</head>
<script>
Expand Down Expand Up @@ -782,21 +783,16 @@ <h1 id="heading-in-footer-should-not-be-indexed"><span id="heading-in-footer-sho
MarkBind.setupWithSearch()
</script>
<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
<script>
alert("Inline plugin script loaded!")
</script>
<script>alert("Inline plugin script loaded!")</script>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
<script>
window.dataLayer = window.dataLayer || [];

function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());

gtag('config', 'TRACKING-ID');
</script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'TRACKING-ID');
</script>

</html>
304 changes: 304 additions & 0 deletions packages/cli/test/functional/test_site/expected/index.page-vue-render.js
View file
Open in desktop

Large diffs are not rendered by default.

24 changes: 10 additions & 14 deletions packages/cli/test/functional/test_site/expected/sub_site/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<head>

<meta name="default-head-top">
<script src="/test_site/headFiles/customScriptTop.js"></script>
<script src="/test_site/headFiles/customScriptTop.js" type="application/javascript"></script>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Expand All @@ -21,13 +21,14 @@
<script src="../markbind/js/polyfill.min.js"></script>
<script src="../markbind/js/vue.min.js"></script>
<script src="../markbind/js/markbind.min.js"></script>
<script src="index.page-vue-render.js"></script>
<script src="../markbind/js/jquery.min.js"></script>
<link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
<link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">

<meta name="default-head-bottom">
<link rel="stylesheet" href="/test_site/stylesheets/styles.css">
<script src="/test_site/headFiles/customScriptBottom.js"></script>
<script src="/test_site/headFiles/customScriptBottom.js" type="application/javascript"></script>
<link rel="icon" href="/test_site/favicon.png">
</head>
<script>
Expand Down Expand Up @@ -218,21 +219,16 @@ <h1 id="heading-in-footer-should-not-be-indexed"><span id="heading-in-footer-sho
MarkBind.setupWithSearch()
</script>
<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
<script>
alert("Inline plugin script loaded!")
</script>
<script>alert("Inline plugin script loaded!")</script>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
<script>
window.dataLayer = window.dataLayer || [];

function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());

gtag('config', 'TRACKING-ID');
</script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'TRACKING-ID');
</script>

</html>
Loading