Skip to content

Commit 96f7aef

Browse files
tomayactomayac
authored
Merge pull request #15 from GoogleChromeLabs/improve-minification
Improve minification, second attempt
2 parents aa9cc8d + 61ea085 commit 96f7aef

File tree

2 files changed

+53
-54
lines changed

2 files changed

+53
-54
lines changed

‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "dark-mode-toggle",
3-
"version": "0.4.7",
3+
"version": "0.4.8",
44
"description": "Web Component that toggles dark mode 🌒",
55
"main": "./src/dark-mode-toggle.mjs",
66
"browser": "src/dark-mode-toggle.mjs",
@@ -16,7 +16,7 @@
1616
"lint:js": "npx eslint \"./src/*.mjs\" --fix && npx eslint \"./demo/*.mjs\" --fix",
1717
"lint:css": "shx cp ./src/template-contents.tpl ./src/template-contents.html && npx stylelint \"./src/*.html\" --fix && shx cp ./src/template-contents.html ./src/template-contents.tpl && shx rm ./src/template-contents.html && npx stylelint \"./demo/*.css\" --fix",
1818
"lint": "npm run lint:js && npm run lint:css",
19-
"build": "npm run clean && npx terser ./src/dark-mode-toggle.mjs -m toplevel=true --comments /@license/ --ecma=8 -o ./dist/dark-mode-toggle.min.mjs",
19+
"build": "npm run clean && npx terser ./src/dark-mode-toggle.mjs --toplevel --mangle-props regex=\\\"^_\\\" --comments /@license/ --ecma=8 -o ./dist/dark-mode-toggle.min.mjs",
2020
"prepare": "npm run lint && npm run build"
2121
},
2222
"repository": {

‎src/dark-mode-toggle.mjs

+51-52
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,8 @@
1515
*/
1616

1717
// @license © 2019 Google LLC. Licensed under the Apache License, Version 2.0.
18-
const win = window;
1918
const doc = document;
20-
const store = win.localStorage;
19+
const store = localStorage;
2120
const PREFERS_COLOR_SCHEME = 'prefers-color-scheme';
2221
const MEDIA = 'media';
2322
const LIGHT = 'light';
@@ -107,7 +106,7 @@ export class DarkModeToggle extends HTMLElement {
107106

108107
doc.addEventListener(PERMANENT_COLOR_SCHEME, (event) => {
109108
this.permanent = event.detail.permanent;
110-
this.permanentCheckbox.checked = this.permanent;
109+
this._permanentCheckbox.checked = this.permanent;
111110
});
112111

113112
this._initializeDOM();
@@ -122,26 +121,26 @@ export class DarkModeToggle extends HTMLElement {
122121
// We need to support `media="(prefers-color-scheme: dark)"` (with space)
123122
// and `media="(prefers-color-scheme:dark)"` (without space)
124123
this._darkCSS = doc.querySelectorAll(`${LINK_REL_STYLESHEET}[${MEDIA}*=${PREFERS_COLOR_SCHEME}][${MEDIA}*="${DARK}"]`);
125-
this._lightCSS = document.querySelectorAll(`${LINK_REL_STYLESHEET}[${MEDIA}*=${PREFERS_COLOR_SCHEME}][${MEDIA}*="${LIGHT}"],${LINK_REL_STYLESHEET}[${MEDIA}*=${PREFERS_COLOR_SCHEME}][${MEDIA}*="${NO_PREFERENCE}"]`);
124+
this._lightCSS = doc.querySelectorAll(`${LINK_REL_STYLESHEET}[${MEDIA}*=${PREFERS_COLOR_SCHEME}][${MEDIA}*="${LIGHT}"],${LINK_REL_STYLESHEET}[${MEDIA}*=${PREFERS_COLOR_SCHEME}][${MEDIA}*="${NO_PREFERENCE}"]`);
126125

127126
// Get DOM references.
128-
this.lightRadio = shadowRoot.querySelector('#lightRadio');
129-
this.lightLabel = shadowRoot.querySelector('#lightLabel');
130-
this.darkRadio = shadowRoot.querySelector('#darkRadio');
131-
this.darkLabel = shadowRoot.querySelector('#darkLabel');
132-
this.darkCheckbox = shadowRoot.querySelector('#darkCheckbox');
133-
this.checkboxLabel = shadowRoot.querySelector('#checkboxLabel');
134-
this.legendLabel = shadowRoot.querySelector('legend');
135-
this.permanentAside = shadowRoot.querySelector('aside');
136-
this.permanentCheckbox = shadowRoot.querySelector('#permanentCheckbox');
137-
this.permanentLabel = shadowRoot.querySelector('#permanentLabel');
127+
this._lightRadio = shadowRoot.querySelector('#lightRadio');
128+
this._lightLabel = shadowRoot.querySelector('#lightLabel');
129+
this._darkRadio = shadowRoot.querySelector('#darkRadio');
130+
this._darkLabel = shadowRoot.querySelector('#darkLabel');
131+
this._darkCheckbox = shadowRoot.querySelector('#darkCheckbox');
132+
this._checkboxLabel = shadowRoot.querySelector('#checkboxLabel');
133+
this._legendLabel = shadowRoot.querySelector('legend');
134+
this._permanentAside = shadowRoot.querySelector('aside');
135+
this._permanentCheckbox = shadowRoot.querySelector('#permanentCheckbox');
136+
this._permanentLabel = shadowRoot.querySelector('#permanentLabel');
138137

139138
// Does the browser support native `prefers-color-scheme`?
140139
const hasNativePrefersColorScheme =
141-
win.matchMedia(MQ_DARK).media !== NOT_ALL;
140+
matchMedia(MQ_DARK).media !== NOT_ALL;
142141
// Listen to `prefers-color-scheme` changes, unless `permanent` is true.
143142
if (hasNativePrefersColorScheme) {
144-
win.matchMedia(MQ_DARK).addListener(({matches}) => {
143+
matchMedia(MQ_DARK).addListener(({matches}) => {
145144
if (!this.permanent) {
146145
this.mode = matches ? DARK : LIGHT;
147146
this._dispatchEvent(COLOR_SCHEME_CHANGE, {colorScheme: this.mode});
@@ -154,13 +153,13 @@ export class DarkModeToggle extends HTMLElement {
154153
const rememberedValue = store.getItem(NAME);
155154
if (rememberedValue && [DARK, LIGHT].includes(rememberedValue)) {
156155
this.mode = rememberedValue;
157-
this.permanentCheckbox.checked = true;
156+
this._permanentCheckbox.checked = true;
158157
this.permanent = true;
159158
} else if (hasNativePrefersColorScheme) {
160-
if ((win.matchMedia(MQ_LIGHT[0]).matches) ||
161-
(win.matchMedia(MQ_LIGHT[1]).matches)) {
159+
if ((matchMedia(MQ_LIGHT[0]).matches) ||
160+
(matchMedia(MQ_LIGHT[1]).matches)) {
162161
this.mode = LIGHT;
163-
} else if (win.matchMedia(MQ_DARK).matches) {
162+
} else if (matchMedia(MQ_DARK).matches) {
164163
this.mode = DARK;
165164
}
166165
}
@@ -186,22 +185,22 @@ export class DarkModeToggle extends HTMLElement {
186185
this._updateCheckbox();
187186

188187
// Synchronize the behavior of the radio and the checkbox.
189-
[this.lightRadio, this.darkRadio].forEach((input) => {
188+
[this._lightRadio, this._darkRadio].forEach((input) => {
190189
input.addEventListener('change', () => {
191-
this.mode = this.lightRadio.checked ? LIGHT : DARK;
190+
this.mode = this._lightRadio.checked ? LIGHT : DARK;
192191
this._updateCheckbox();
193192
this._dispatchEvent(COLOR_SCHEME_CHANGE, {colorScheme: this.mode});
194193
});
195194
});
196-
this.darkCheckbox.addEventListener('change', () => {
197-
this.mode = this.darkCheckbox.checked ? DARK : LIGHT;
195+
this._darkCheckbox.addEventListener('change', () => {
196+
this.mode = this._darkCheckbox.checked ? DARK : LIGHT;
198197
this._updateRadios();
199198
this._dispatchEvent(COLOR_SCHEME_CHANGE, {colorScheme: this.mode});
200199
});
201200

202201
// Make remembering the last mode optional
203-
this.permanentCheckbox.addEventListener('change', () => {
204-
this.permanent = this.permanentCheckbox.checked;
202+
this._permanentCheckbox.addEventListener('change', () => {
203+
this.permanent = this._permanentCheckbox.checked;
205204
this._dispatchEvent(PERMANENT_COLOR_SCHEME, {
206205
permanent: this.permanent,
207206
});
@@ -222,7 +221,7 @@ export class DarkModeToggle extends HTMLElement {
222221
}
223222
// Only show the dialog programmatically on devices not capable of hover
224223
// and only if there is a label
225-
if (win.matchMedia('(hover:none)').matches && this.remember) {
224+
if (matchMedia('(hover:none)').matches && this.remember) {
226225
this._showPermanentAside();
227226
}
228227
if (this.permanent) {
@@ -242,20 +241,20 @@ export class DarkModeToggle extends HTMLElement {
242241
} else {
243242
store.removeItem(NAME);
244243
}
245-
this.permanentCheckbox.checked = this.permanent;
244+
this._permanentCheckbox.checked = this.permanent;
246245
} else if (name === LEGEND) {
247-
this.legendLabel.textContent = newValue;
246+
this._legendLabel.textContent = newValue;
248247
} else if (name === REMEMBER) {
249-
this.permanentLabel.textContent = newValue;
248+
this._permanentLabel.textContent = newValue;
250249
} else if (name === LIGHT) {
251-
this.lightLabel.textContent = newValue;
250+
this._lightLabel.textContent = newValue;
252251
if (this.mode === LIGHT) {
253-
this.checkboxLabel.textContent = newValue;
252+
this._checkboxLabel.textContent = newValue;
254253
}
255254
} else if (name === DARK) {
256-
this.darkLabel.textContent = newValue;
255+
this._darkLabel.textContent = newValue;
257256
if (this.mode === DARK) {
258-
this.checkboxLabel.textContent = newValue;
257+
this._checkboxLabel.textContent = newValue;
259258
}
260259
}
261260
}
@@ -272,33 +271,33 @@ export class DarkModeToggle extends HTMLElement {
272271
// Hide or show the light-related affordances dependent on the appearance,
273272
// which can be "switch" or "toggle".
274273
const appearAsToggle = this.appearance === TOGGLE;
275-
this.lightRadio.hidden = appearAsToggle;
276-
this.lightLabel.hidden = appearAsToggle;
277-
this.darkRadio.hidden = appearAsToggle;
278-
this.darkLabel.hidden = appearAsToggle;
279-
this.darkCheckbox.hidden = !appearAsToggle;
280-
this.checkboxLabel.hidden = !appearAsToggle;
274+
this._lightRadio.hidden = appearAsToggle;
275+
this._lightLabel.hidden = appearAsToggle;
276+
this._darkRadio.hidden = appearAsToggle;
277+
this._darkLabel.hidden = appearAsToggle;
278+
this._darkCheckbox.hidden = !appearAsToggle;
279+
this._checkboxLabel.hidden = !appearAsToggle;
281280
}
282281

283282
_updateRadios() {
284283
if (this.mode === LIGHT) {
285-
this.lightRadio.checked = true;
284+
this._lightRadio.checked = true;
286285
} else {
287-
this.darkRadio.checked = true;
286+
this._darkRadio.checked = true;
288287
}
289288
}
290289

291290
_updateCheckbox() {
292291
if (this.mode === LIGHT) {
293-
this.checkboxLabel.style.setProperty(`--${NAME}-checkbox-icon`,
292+
this._checkboxLabel.style.setProperty(`--${NAME}-checkbox-icon`,
294293
`var(--${NAME}-light-icon,url("${DEFAULT_URL}moon.png"))`);
295-
this.checkboxLabel.textContent = this.light;
296-
this.darkCheckbox.checked = false;
294+
this._checkboxLabel.textContent = this.light;
295+
this._darkCheckbox.checked = false;
297296
} else {
298-
this.checkboxLabel.style.setProperty(`--${NAME}-checkbox-icon`,
297+
this._checkboxLabel.style.setProperty(`--${NAME}-checkbox-icon`,
299298
`var(--${NAME}-dark-icon,url("${DEFAULT_URL}sun.png"))`);
300-
this.checkboxLabel.textContent = this.dark;
301-
this.darkCheckbox.checked = true;
299+
this._checkboxLabel.textContent = this.dark;
300+
this._darkCheckbox.checked = true;
302301
}
303302
}
304303

@@ -325,11 +324,11 @@ export class DarkModeToggle extends HTMLElement {
325324
}
326325

327326
_showPermanentAside() {
328-
this.permanentAside.style.visibility = 'visible';
329-
win.setTimeout(() => {
330-
this.permanentAside.style.visibility = 'hidden';
327+
this._permanentAside.style.visibility = 'visible';
328+
setTimeout(() => {
329+
this._permanentAside.style.visibility = 'hidden';
331330
}, 3000);
332331
}
333332
}
334333

335-
win.customElements.define(NAME, DarkModeToggle);
334+
customElements.define(NAME, DarkModeToggle);

0 commit comments

Comments
 (0)