Skip to content

Commit ddb48ed

Browse files
cotes2020cotes2020
authored
perf: lean bootstrap javascript (#1734)
1 parent c17fba4 commit ddb48ed

File tree

11 files changed

+89
-55
lines changed

11 files changed

+89
-55
lines changed

‎_data/origin/basic.yml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ webfonts: /assets/lib/fonts/main.css
66

77
bootstrap:
88
css: /assets/lib/bootstrap/bootstrap.min.css
9-
js: /assets/lib/bootstrap/bootstrap.bundle.min.js
109

1110
toc:
1211
css: /assets/lib/tocbot/tocbot.min.css

‎_data/origin/cors.yml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ webfonts: https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Sour
2121

2222
bootstrap:
2323
css: https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css
24-
js: https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js
2524

2625
toc:
2726
css: https://cdn.jsdelivr.net/npm/tocbot@4.25.0/dist/tocbot.min.css

‎_includes/js-selector.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,7 @@
22

33
<!-- commons -->
44

5-
{%- capture urls -%}
6-
{{ site.data.origin[type].bootstrap.js }},{{ site.data.origin[type].search.js }}
7-
{%- endcapture -%}
5+
{% assign urls = site.data.origin[type].search.js %}
86

97
<!-- layout specified -->
108

‎_javascript/modules/components/category-collapse.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
/**
22
* Tab 'Categories' expand/close effect.
33
*/
4+
5+
import 'bootstrap/js/src/collapse.js';
6+
47
const childPrefix = 'l_';
58
const parentPrefix = 'h_';
69
const children = document.getElementsByClassName('collapse');

‎_javascript/modules/components/clipboard.js‎

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,11 @@
22
* Clipboard functions
33
*
44
* Dependencies:
5-
* - popper.js (https://github.com/popperjs/popper-core)
6-
* - clipboard.js (https://github.com/zenorocha/clipboard.js)
5+
* clipboard.js (https://github.com/zenorocha/clipboard.js)
76
*/
87

8+
import Tooltip from 'bootstrap/js/src/tooltip';
9+
910
const clipboardSelector = '.code-header>button';
1011

1112
const ICON_DEFAULT = 'far fa-clipboard';
@@ -38,11 +39,11 @@ function unlock(node) {
3839
function showTooltip(btn) {
3940
const succeedTitle = btn.getAttribute(ATTR_TITLE_SUCCEED);
4041
btn.setAttribute(ATTR_TITLE_ORIGIN, succeedTitle);
41-
bootstrap.Tooltip.getInstance(btn).show();
42+
Tooltip.getInstance(btn).show();
4243
}
4344

4445
function hideTooltip(btn) {
45-
bootstrap.Tooltip.getInstance(btn).hide();
46+
Tooltip.getInstance(btn).hide();
4647
btn.removeAttribute(ATTR_TITLE_ORIGIN);
4748
}
4849

@@ -56,7 +57,7 @@ function resumeIcon(btn) {
5657
icon.setAttribute('class', ICON_DEFAULT);
5758
}
5859

59-
export function initClipboard() {
60+
function setCodeClipboard() {
6061
const clipboardList = document.querySelectorAll(clipboardSelector);
6162

6263
if (clipboardList.length === 0) {
@@ -73,7 +74,7 @@ export function initClipboard() {
7374

7475
[...clipboardList].map(
7576
(elem) =>
76-
new bootstrap.Tooltip(elem, {
77+
new Tooltip(elem, {
7778
placement: 'left'
7879
})
7980
);
@@ -97,11 +98,15 @@ export function initClipboard() {
9798
unlock(trigger);
9899
}, TIMEOUT);
99100
});
101+
}
100102

101-
/* --- Post link sharing --- */
102-
103+
function setLinkClipboard() {
103104
const btnCopyLink = document.getElementById('copy-link');
104105

106+
if (btnCopyLink === null) {
107+
return;
108+
}
109+
105110
btnCopyLink.addEventListener('click', (e) => {
106111
const target = e.target;
107112

@@ -116,7 +121,7 @@ export function initClipboard() {
116121

117122
// Switch tooltip title
118123
target.setAttribute(ATTR_TITLE_ORIGIN, succeedTitle);
119-
bootstrap.Tooltip.getInstance(target).show();
124+
Tooltip.getInstance(target).show();
120125

121126
lock(target);
122127

@@ -128,6 +133,11 @@ export function initClipboard() {
128133
});
129134

130135
btnCopyLink.addEventListener('mouseleave', (e) => {
131-
bootstrap.Tooltip.getInstance(e.target).hide();
136+
Tooltip.getInstance(e.target).hide();
132137
});
133138
}
139+
140+
export function initClipboard() {
141+
setCodeClipboard();
142+
setLinkClipboard();
143+
}

‎_javascript/modules/components/tooltip-loader.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
/**
2-
* Initial Bootstrap Tooltip.
3-
*/
1+
import Tooltip from 'bootstrap/js/src/tooltip';
2+
43
export function loadTooptip() {
54
const tooltipTriggerList = document.querySelectorAll(
65
'[data-bs-toggle="tooltip"]'
76
);
87

98
[...tooltipTriggerList].map(
10-
(tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl)
9+
(tooltipTriggerEl) => new Tooltip(tooltipTriggerEl)
1110
);
1211
}

‎_javascript/pwa/_frontmatter‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
---
2+
permalink: /:basename
3+
---

assets/js/pwa/app.js renamed to _javascript/pwa/app.js

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,15 @@
1-
---
2-
layout: compress
3-
permalink: /assets/js/dist/:basename.min.js
4-
---
1+
import { pwa, baseurl } from '../../_config.yml';
2+
import Toast from 'bootstrap/js/src/toast';
53

64
if ('serviceWorker' in navigator) {
7-
const isEnabled = '{{ site.pwa.enabled }}' === 'true';
8-
9-
if (isEnabled) {
10-
const swUrl = '{{ '/sw.min.js' | relative_url }}';
5+
if (pwa.enabled) {
6+
const swUrl = `${baseurl}/sw.min.js`;
117
const notification = document.getElementById('notification');
128
const btnRefresh = notification.querySelector('.toast-body>button');
13-
const popupWindow = bootstrap.Toast.getOrCreateInstance(notification);
9+
const popupWindow = Toast.getOrCreateInstance(notification);
1410

1511
navigator.serviceWorker.register(swUrl).then((registration) => {
16-
{% comment %}In case the user ignores the notification{% endcomment %}
12+
// In case the user ignores the notification
1713
if (registration.waiting) {
1814
popupWindow.show();
1915
}
@@ -32,14 +28,13 @@ if ('serviceWorker' in navigator) {
3228
if (registration.waiting) {
3329
registration.waiting.postMessage('SKIP_WAITING');
3430
}
35-
3631
popupWindow.hide();
3732
});
3833
});
3934

4035
let refreshing = false;
4136

42-
{% comment %}Detect controller change and refresh all the opened tabs{% endcomment %}
37+
// Detect controller change and refresh all the opened tabs
4338
navigator.serviceWorker.addEventListener('controllerchange', () => {
4439
if (!refreshing) {
4540
window.location.reload();

assets/js/pwa/sw.js renamed to _javascript/pwa/sw.js

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
1-
---
2-
layout: compress
3-
permalink: /:basename.min.js
4-
# PWA service worker
5-
---
1+
import { baseurl } from '../../_config.yml';
62

7-
const swconfUrl = '{{ '/assets/js/data/swconf.js' | relative_url }}';
3+
importScripts(`${baseurl}/assets/js/data/swconf.js`);
84

9-
importScripts(swconfUrl);
105
const purge = swconf.purge;
116

127
function verifyUrl(url) {
@@ -74,7 +69,7 @@ self.addEventListener('fetch', (event) => {
7469
return response;
7570
}
7671

77-
{% comment %}See: <https://developers.google.com/web/fundamentals/primers/service-workers#cache_and_return_requests>{% endcomment %}
72+
// See: <https://developers.google.com/web/fundamentals/primers/service-workers#cache_and_return_requests>
7873
let responseToCache = response.clone();
7974

8075
caches.open(swconf.cacheName).then((cache) => {

‎package.json‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,16 @@
1313
},
1414
"homepage": "https://github.com/cotes2020/jekyll-theme-chirpy/",
1515
"scripts": {
16-
"prebuild": "npx rimraf assets/js/dist",
17-
"build": "NODE_ENV=production npx rollup -c --bundleConfigAsCjs",
18-
"prewatch": "npx rimraf assets/js/dist",
19-
"watch": "npx rollup -c --bundleConfigAsCjs -w",
20-
"test": "npx stylelint _sass/**/*.scss",
21-
"fixlint": "npm run test -- --fix"
16+
"build": "npm run build:js",
17+
"build:js": "rollup -c --bundleConfigAsCjs --environment BUILD:production",
18+
"watch:js": "rollup -c --bundleConfigAsCjs -w",
19+
"lint:style": "stylelint _sass/**/*.scss",
20+
"lint:fix:style": "npm run lint:style -- --fix",
21+
"test": "npm run lint:scss"
22+
},
23+
"dependencies": {
24+
"@popperjs/core": "^2.11.8",
25+
"bootstrap": "^5.3.3"
2226
},
2327
"devDependencies": {
2428
"@babel/core": "^7.24.4",
@@ -27,13 +31,14 @@
2731
"@commitlint/cli": "^19.2.2",
2832
"@commitlint/config-conventional": "^19.2.2",
2933
"@rollup/plugin-babel": "^6.0.4",
34+
"@rollup/plugin-node-resolve": "^15.2.3",
3035
"@rollup/plugin-terser": "^0.4.4",
36+
"@rollup/plugin-yaml": "^4.1.2",
3137
"@semantic-release/changelog": "^6.0.3",
3238
"@semantic-release/exec": "^6.0.3",
3339
"@semantic-release/git": "^10.0.1",
3440
"conventional-changelog-conventionalcommits": "^7.0.2",
3541
"husky": "^9.0.11",
36-
"rimraf": "^5.0.5",
3742
"rollup": "^4.15.0",
3843
"rollup-plugin-license": "^3.3.1",
3944
"semantic-release": "^23.0.8",

0 commit comments

Comments
 (0)