Skip to content

Commit 3119bbb

Browse files
manucorporatmanucorporat
committed
perf(styles): remove logic for modes
1 parent 9b18a97 commit 3119bbb

6 files changed

Lines changed: 55 additions & 41 deletions

File tree

‎src/core/host-snapshot.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as d from '../declarations';
2-
import { ENCAPSULATION, SSR_VNODE_ID } from '../util/constants';
2+
import { DEFAULT_STYLE_MODE, ENCAPSULATION, SSR_VNODE_ID } from '../util/constants';
33

44

55
export const initHostSnapshot = (domApi: d.DomApi, cmpMeta: d.ComponentMeta, hostElm: d.HostElement, hostSnapshot?: d.HostSnapshot, attribName?: string) => {
@@ -8,11 +8,13 @@ export const initHostSnapshot = (domApi: d.DomApi, cmpMeta: d.ComponentMeta, hos
88
// have finished adding attributes and child nodes to the host
99
// before we go all out and hydrate this beast
1010
// let's first take a snapshot of its original layout before render
11-
if (!hostElm.mode) {
11+
if (_BUILD_.hasMode && !hostElm.mode) {
1212
// looks like mode wasn't set as a property directly yet
1313
// first check if there's an attribute
1414
// next check the app's global
1515
hostElm.mode = domApi.$getMode(hostElm);
16+
} else {
17+
hostElm.mode = DEFAULT_STYLE_MODE;
1618
}
1719

1820
if (_BUILD_.slotPolyfill) {

‎src/core/styles.ts‎

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -83,17 +83,19 @@ export const attachStyles = (plt: d.PlatformApi, domApi: d.DomApi, cmpMeta: d.Co
8383
// and add the scope attribute to the host
8484

8585
// create the style id w/ the host element's mode
86-
let styleId = cmpMeta.tagNameMeta + hostElm.mode;
86+
let styleId = cmpMeta.tagNameMeta + (_BUILD_.hasMode ? hostElm.mode : DEFAULT_STYLE_MODE);
8787
let styleTemplate = (cmpMeta as any)[styleId];
8888

89-
const shouldScopeCss = (cmpMeta.encapsulationMeta === ENCAPSULATION.ScopedCss || (cmpMeta.encapsulationMeta === ENCAPSULATION.ShadowDom && !plt.domApi.$supportsShadowDom));
90-
if (shouldScopeCss) {
91-
hostElm['s-sc'] = styleTemplate
92-
? getScopeId(cmpMeta, hostElm.mode)
93-
: getScopeId(cmpMeta);
94-
}
89+
// if (_BUILD_.scoped || _BUILD_.shadowDom) {
90+
const shouldScopeCss = (cmpMeta.encapsulationMeta === ENCAPSULATION.ScopedCss || (cmpMeta.encapsulationMeta === ENCAPSULATION.ShadowDom && !plt.domApi.$supportsShadowDom));
91+
if (shouldScopeCss) {
92+
hostElm['s-sc'] = styleTemplate
93+
? getScopeId(cmpMeta, hostElm.mode)
94+
: getScopeId(cmpMeta);
95+
}
96+
// }
9597

96-
if (!styleTemplate) {
98+
if (_BUILD_.hasMode && !styleTemplate) {
9799
// doesn't look like there's a style template with the mode
98100
// create the style id using the default style mode and try again
99101
styleId = cmpMeta.tagNameMeta + DEFAULT_STYLE_MODE;
@@ -114,14 +116,9 @@ export const attachStyles = (plt: d.PlatformApi, domApi: d.DomApi, cmpMeta: d.Co
114116

115117
} else {
116118
// climb up the dom and see if we're in a shadow dom
117-
let root: d.HostElement = hostElm;
118-
while (root = domApi.$parentNode(root) as d.HostElement) {
119-
if (root.host && root.host.shadowRoot) {
120-
// looks like we are in shadow dom, let's use
121-
// this shadow root as the container for these styles
122-
styleContainerNode = (root.host.shadowRoot) as any;
123-
break;
124-
}
119+
const rootEl = (hostElm as any).getRootNode();
120+
if (rootEl.host) {
121+
styleContainerNode = rootEl;
125122
}
126123
}
127124
}
@@ -138,7 +135,7 @@ export const attachStyles = (plt: d.PlatformApi, domApi: d.DomApi, cmpMeta: d.Co
138135
if (!appliedStyles[styleId]) {
139136
let styleElm: HTMLStyleElement;
140137
if (_BUILD_.es5) {
141-
// es5 builds are not usig <template> because of ie11 issues
138+
// es5 builds are not using <template> because of ie11 issues
142139
// instead the "template" is just the style text as a string
143140
// create a new style element and add as innerHTML
144141

‎src/renderer/dom-api.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -238,6 +238,10 @@ export const createDomApi = (App: AppGlobal, win: any, doc: Document): DomApi =>
238238
elm.setAttributeNS(namespaceURI, qualifiedName, val);
239239
}
240240

241+
if (_BUILD_.shadowDom) {
242+
domApi.$attachShadow = (elm, shadowRootInit) => elm.attachShadow(shadowRootInit);
243+
}
244+
241245
if (_BUILD_.es5) {
242246
if (typeof win.CustomEvent !== 'function') {
243247
// CustomEvent polyfill
@@ -259,9 +263,6 @@ export const createDomApi = (App: AppGlobal, win: any, doc: Document): DomApi =>
259263
}
260264
}
261265

262-
if (_BUILD_.shadowDom) {
263-
domApi.$attachShadow = (elm, shadowRootInit) => elm.attachShadow(shadowRootInit);
264-
}
265266

266267
if (!App.ael) {
267268
App.ael = (elm, eventName, cb, opts) => elm.addEventListener(eventName, cb, opts);

‎src/util/build-conditionals.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ export async function setBuildConditionals(
6868
}
6969

7070
// figure out which sections of the core code this build doesn't even need
71-
const coreBuild = {
71+
const coreBuild: d.BuildConditionals = {
7272
coreId: coreId,
7373
clientSide: true,
7474
isDev: !!config.devMode,
@@ -229,7 +229,7 @@ export function setBuildFromComponentMeta(coreBuild: d.BuildConditionals, cmpMet
229229
if (modeNames.length > 0) {
230230
coreBuild.styles = true;
231231

232-
if (!coreBuild.hasMode && modeNames.length > 1) {
232+
if (!coreBuild.hasMode) {
233233
coreBuild.hasMode = modeNames.filter(m => m !== DEFAULT_STYLE_MODE).length > 0;
234234
}
235235
}
@@ -282,7 +282,7 @@ export function setBuildFromComponentMeta(coreBuild: d.BuildConditionals, cmpMet
282282
});
283283
}
284284

285-
coreBuild.updatable = coreBuild.updatable || (coreBuild.prop || coreBuild.state);
285+
coreBuild.updatable = (coreBuild.updatable || !!(coreBuild.prop || coreBuild.state));
286286
}
287287

288288

‎src/util/test/build-conditionals.spec.ts‎

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,8 @@ describe('build conditionals', () => {
181181
scoped: false,
182182
event: false,
183183
listener: false,
184-
hostTheme: true
184+
hostTheme: true,
185+
updatable: false
185186
});
186187
});
187188

@@ -197,7 +198,9 @@ describe('build conditionals', () => {
197198
event: false,
198199
listener: false,
199200
styles: true,
200-
hostTheme: false
201+
hostTheme: false,
202+
hasMode: false,
203+
updatable: false
201204
});
202205
});
203206

@@ -215,7 +218,8 @@ describe('build conditionals', () => {
215218
listener: false,
216219
styles: true,
217220
hasMode: true,
218-
hostTheme: false
221+
hostTheme: false,
222+
updatable: false
219223
});
220224
});
221225

@@ -228,7 +232,8 @@ describe('build conditionals', () => {
228232
scoped: false,
229233
event: false,
230234
listener: false,
231-
hostTheme: false
235+
hostTheme: false,
236+
updatable: false
232237
});
233238
});
234239

@@ -241,7 +246,8 @@ describe('build conditionals', () => {
241246
scoped: true,
242247
event: false,
243248
listener: false,
244-
hostTheme: false
249+
hostTheme: false,
250+
updatable: false
245251
});
246252
});
247253

@@ -254,7 +260,8 @@ describe('build conditionals', () => {
254260
scoped: false,
255261
event: false,
256262
listener: false,
257-
hostTheme: false
263+
hostTheme: false,
264+
updatable: false
258265
});
259266
});
260267

@@ -268,7 +275,8 @@ describe('build conditionals', () => {
268275
scoped: false,
269276
event: false,
270277
listener: true,
271-
hostTheme: false
278+
hostTheme: false,
279+
updatable: false
272280
});
273281
});
274282

@@ -281,7 +289,8 @@ describe('build conditionals', () => {
281289
scoped: false,
282290
event: true,
283291
listener: false,
284-
hostTheme: false
292+
hostTheme: false,
293+
updatable: false
285294
});
286295
});
287296

@@ -298,7 +307,8 @@ describe('build conditionals', () => {
298307
event: false,
299308
listener: false,
300309
hostTheme: false,
301-
element: true
310+
element: true,
311+
updatable: false
302312
});
303313
});
304314

@@ -314,7 +324,8 @@ describe('build conditionals', () => {
314324
event: false,
315325
listener: false,
316326
hostTheme: false,
317-
method: true
327+
method: true,
328+
updatable: false
318329
});
319330
});
320331

@@ -330,7 +341,8 @@ describe('build conditionals', () => {
330341
event: false,
331342
listener: false,
332343
hostTheme: false,
333-
propContext: true
344+
propContext: true,
345+
updatable: false
334346
});
335347
});
336348

@@ -346,7 +358,8 @@ describe('build conditionals', () => {
346358
propConnect: true,
347359
event: false,
348360
listener: false,
349-
hostTheme: false
361+
hostTheme: false,
362+
updatable: false
350363
});
351364
});
352365

@@ -363,7 +376,7 @@ describe('build conditionals', () => {
363376
event: false,
364377
listener: false,
365378
hostTheme: false,
366-
updatable: true
379+
updatable: true,
367380
});
368381
});
369382

@@ -486,7 +499,8 @@ describe('build conditionals', () => {
486499
scoped: false,
487500
event: false,
488501
listener: false,
489-
hostTheme: false
502+
hostTheme: false,
503+
updatable: false
490504
});
491505
});
492506

‎test/apps/readme.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
| File | Brotli | Gzipped | Minified |
55
|----------------------------|----------|----------|----------|
66
| hello-world.entry.js | 78B | 96B | 98B |
7-
| app.core.js | 3.30KB | 3.67KB | 7.84KB |
7+
| app.core.js | 3.30KB | 3.66KB | 7.82KB |
88

99

1010

@@ -13,6 +13,6 @@
1313
| File | Brotli | Gzipped | Minified |
1414
|----------------------------|----------|----------|----------|
1515
| my-todo.entry.js | 1.39KB | 1.68KB | 4.81KB |
16-
| app.core.js | 5.36KB | 5.90KB | 13.00KB |
16+
| app.core.js | 5.35KB | 5.89KB | 12.96KB |
1717
| app.css | 143B | 188B | 233B |
1818

0 commit comments

Comments
 (0)