Skip to content

Commit 8562667

Browse files
crisbetothePunderWoman
crisbeto
authored and
thePunderWoman
committed
refactor(core): separate out DOM logic from property (angular#60608)
Includes the following moves. * Moves the DOM-specific logic from `elementPropertyInternal` into a separate function so we can reuse it. * Uses the DOM-specific code for the `hostProperty` instruction. * Removes the `nativeOnly` parameter from `elementPropertyInternal`. * Renames `elementPropertyInternal` to `setPropertyAndInputs` so it's a bit more clear what the function is doing. PR Close angular#60608
1 parent 8144769 commit 8562667

File tree

7 files changed

+50
-138
lines changed

7 files changed

+50
-138
lines changed

‎packages/core/src/render3/i18n/i18n_apply.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import {
2121
} from '../../util/assert';
2222
import {assertIndexInExpandoRange, assertTIcu} from '../assert';
2323
import {attachPatchData} from '../context_discovery';
24-
import {elementPropertyInternal, setElementAttribute} from '../instructions/shared';
24+
import {setPropertyAndInputs, setElementAttribute} from '../instructions/shared';
2525
import {
2626
ELEMENT_MARKER,
2727
I18nCreateOpCode,
@@ -439,15 +439,13 @@ export function applyUpdateOpCodes(
439439
sanitizeFn,
440440
);
441441
} else {
442-
elementPropertyInternal(
443-
tView,
442+
setPropertyAndInputs(
444443
tNodeOrTagName,
445444
lView,
446445
propName,
447446
value,
448447
lView[RENDERER],
449448
sanitizeFn,
450-
false,
451449
);
452450
}
453451
break;

‎packages/core/src/render3/instructions/host_property.ts‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,7 @@ import {
1717
} from '../state';
1818
import {NO_CHANGE} from '../tokens';
1919

20-
import {
21-
elementPropertyInternal,
22-
loadComponentRenderer,
23-
storePropertyBindingMetadata,
24-
} from './shared';
20+
import {loadComponentRenderer, setDomProperty, storePropertyBindingMetadata} from './shared';
2521

2622
/**
2723
* Update a property on a host element. Only applies to native node properties, not inputs.
@@ -47,7 +43,7 @@ export function ɵɵhostProperty<T>(
4743
if (bindingUpdated(lView, bindingIndex, value)) {
4844
const tView = getTView();
4945
const tNode = getSelectedTNode();
50-
elementPropertyInternal(tView, tNode, lView, propName, value, lView[RENDERER], sanitizer, true);
46+
setDomProperty(tNode, lView, propName, value, lView[RENDERER], sanitizer);
5147
ngDevMode && storePropertyBindingMetadata(tView.data, tNode, propName, bindingIndex);
5248
}
5349
return ɵɵhostProperty;
@@ -86,7 +82,7 @@ export function ɵɵsyntheticHostProperty<T>(
8682
const tNode = getSelectedTNode();
8783
const currentDef = getCurrentDirectiveDef(tView.data);
8884
const renderer = loadComponentRenderer(currentDef, tNode, lView);
89-
elementPropertyInternal(tView, tNode, lView, propName, value, renderer, sanitizer, true);
85+
setDomProperty(tNode, lView, propName, value, renderer, sanitizer);
9086
ngDevMode && storePropertyBindingMetadata(tView.data, tNode, propName, bindingIndex);
9187
}
9288
return ɵɵsyntheticHostProperty;

‎packages/core/src/render3/instructions/property.ts‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {LView, RENDERER, TView} from '../interfaces/view';
1212
import {getLView, getSelectedTNode, getTView, nextBindingIndex} from '../state';
1313

1414
import {
15-
elementPropertyInternal,
15+
setPropertyAndInputs,
1616
setAllInputsForProperty,
1717
storePropertyBindingMetadata,
1818
} from './shared';
@@ -45,16 +45,7 @@ export function ɵɵproperty<T>(
4545
if (bindingUpdated(lView, bindingIndex, value)) {
4646
const tView = getTView();
4747
const tNode = getSelectedTNode();
48-
elementPropertyInternal(
49-
tView,
50-
tNode,
51-
lView,
52-
propName,
53-
value,
54-
lView[RENDERER],
55-
sanitizer,
56-
false,
57-
);
48+
setPropertyAndInputs(tNode, lView, propName, value, lView[RENDERER], sanitizer);
5849
ngDevMode && storePropertyBindingMetadata(tView.data, tNode, propName, bindingIndex);
5950
}
6051
return ɵɵproperty;

‎packages/core/src/render3/instructions/property_interpolation.ts‎

Lines changed: 10 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ import {
2121
interpolation8,
2222
interpolationV,
2323
} from './interpolation';
24-
import {elementPropertyInternal, storePropertyBindingMetadata} from './shared';
24+
import {setPropertyAndInputs, storePropertyBindingMetadata} from './shared';
2525

2626
/**
2727
*
@@ -101,16 +101,7 @@ export function ɵɵpropertyInterpolate1(
101101
if (interpolatedValue !== NO_CHANGE) {
102102
const tView = getTView();
103103
const tNode = getSelectedTNode();
104-
elementPropertyInternal(
105-
tView,
106-
tNode,
107-
lView,
108-
propName,
109-
interpolatedValue,
110-
lView[RENDERER],
111-
sanitizer,
112-
false,
113-
);
104+
setPropertyAndInputs(tNode, lView, propName, interpolatedValue, lView[RENDERER], sanitizer);
114105
ngDevMode &&
115106
storePropertyBindingMetadata(
116107
tView.data,
@@ -168,16 +159,7 @@ export function ɵɵpropertyInterpolate2(
168159
if (interpolatedValue !== NO_CHANGE) {
169160
const tView = getTView();
170161
const tNode = getSelectedTNode();
171-
elementPropertyInternal(
172-
tView,
173-
tNode,
174-
lView,
175-
propName,
176-
interpolatedValue,
177-
lView[RENDERER],
178-
sanitizer,
179-
false,
180-
);
162+
setPropertyAndInputs(tNode, lView, propName, interpolatedValue, lView[RENDERER], sanitizer);
181163
ngDevMode &&
182164
storePropertyBindingMetadata(
183165
tView.data,
@@ -241,16 +223,7 @@ export function ɵɵpropertyInterpolate3(
241223
if (interpolatedValue !== NO_CHANGE) {
242224
const tView = getTView();
243225
const tNode = getSelectedTNode();
244-
elementPropertyInternal(
245-
tView,
246-
tNode,
247-
lView,
248-
propName,
249-
interpolatedValue,
250-
lView[RENDERER],
251-
sanitizer,
252-
false,
253-
);
226+
setPropertyAndInputs(tNode, lView, propName, interpolatedValue, lView[RENDERER], sanitizer);
254227
ngDevMode &&
255228
storePropertyBindingMetadata(
256229
tView.data,
@@ -319,16 +292,7 @@ export function ɵɵpropertyInterpolate4(
319292
if (interpolatedValue !== NO_CHANGE) {
320293
const tView = getTView();
321294
const tNode = getSelectedTNode();
322-
elementPropertyInternal(
323-
tView,
324-
tNode,
325-
lView,
326-
propName,
327-
interpolatedValue,
328-
lView[RENDERER],
329-
sanitizer,
330-
false,
331-
);
295+
setPropertyAndInputs(tNode, lView, propName, interpolatedValue, lView[RENDERER], sanitizer);
332296
ngDevMode &&
333297
storePropertyBindingMetadata(
334298
tView.data,
@@ -415,16 +379,7 @@ export function ɵɵpropertyInterpolate5(
415379
if (interpolatedValue !== NO_CHANGE) {
416380
const tView = getTView();
417381
const tNode = getSelectedTNode();
418-
elementPropertyInternal(
419-
tView,
420-
tNode,
421-
lView,
422-
propName,
423-
interpolatedValue,
424-
lView[RENDERER],
425-
sanitizer,
426-
false,
427-
);
382+
setPropertyAndInputs(tNode, lView, propName, interpolatedValue, lView[RENDERER], sanitizer);
428383
ngDevMode &&
429384
storePropertyBindingMetadata(
430385
tView.data,
@@ -518,16 +473,7 @@ export function ɵɵpropertyInterpolate6(
518473
if (interpolatedValue !== NO_CHANGE) {
519474
const tView = getTView();
520475
const tNode = getSelectedTNode();
521-
elementPropertyInternal(
522-
tView,
523-
tNode,
524-
lView,
525-
propName,
526-
interpolatedValue,
527-
lView[RENDERER],
528-
sanitizer,
529-
false,
530-
);
476+
setPropertyAndInputs(tNode, lView, propName, interpolatedValue, lView[RENDERER], sanitizer);
531477
ngDevMode &&
532478
storePropertyBindingMetadata(
533479
tView.data,
@@ -628,16 +574,7 @@ export function ɵɵpropertyInterpolate7(
628574
if (interpolatedValue !== NO_CHANGE) {
629575
const tView = getTView();
630576
const tNode = getSelectedTNode();
631-
elementPropertyInternal(
632-
tView,
633-
tNode,
634-
lView,
635-
propName,
636-
interpolatedValue,
637-
lView[RENDERER],
638-
sanitizer,
639-
false,
640-
);
577+
setPropertyAndInputs(tNode, lView, propName, interpolatedValue, lView[RENDERER], sanitizer);
641578
ngDevMode &&
642579
storePropertyBindingMetadata(
643580
tView.data,
@@ -745,16 +682,7 @@ export function ɵɵpropertyInterpolate8(
745682
if (interpolatedValue !== NO_CHANGE) {
746683
const tView = getTView();
747684
const tNode = getSelectedTNode();
748-
elementPropertyInternal(
749-
tView,
750-
tNode,
751-
lView,
752-
propName,
753-
interpolatedValue,
754-
lView[RENDERER],
755-
sanitizer,
756-
false,
757-
);
685+
setPropertyAndInputs(tNode, lView, propName, interpolatedValue, lView[RENDERER], sanitizer);
758686
ngDevMode &&
759687
storePropertyBindingMetadata(
760688
tView.data,
@@ -815,16 +743,7 @@ export function ɵɵpropertyInterpolateV(
815743
if (interpolatedValue !== NO_CHANGE) {
816744
const tView = getTView();
817745
const tNode = getSelectedTNode();
818-
elementPropertyInternal(
819-
tView,
820-
tNode,
821-
lView,
822-
propName,
823-
interpolatedValue,
824-
lView[RENDERER],
825-
sanitizer,
826-
false,
827-
);
746+
setPropertyAndInputs(tNode, lView, propName, interpolatedValue, lView[RENDERER], sanitizer);
828747
if (ngDevMode) {
829748
const interpolationInBetween = [values[0]]; // prefix
830749
for (let i = 2; i < values.length; i += 2) {

‎packages/core/src/render3/instructions/shared.ts‎

Lines changed: 30 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ import {
5050
LViewFlags,
5151
RENDERER,
5252
TData,
53+
TVIEW,
5354
TView,
5455
} from '../interfaces/view';
5556
import {assertTNodeType} from '../node_assert';
@@ -236,35 +237,51 @@ function mapPropName(name: string): string {
236237
return name;
237238
}
238239

239-
export function elementPropertyInternal<T>(
240-
tView: TView,
240+
export function setPropertyAndInputs<T>(
241241
tNode: TNode,
242242
lView: LView,
243243
propName: string,
244244
value: T,
245245
renderer: Renderer,
246246
sanitizer: SanitizerFn | null | undefined,
247-
nativeOnly: boolean,
248247
): void {
249248
ngDevMode && assertNotSame(value, NO_CHANGE as any, 'Incoming value should never be NO_CHANGE.');
249+
const tView = lView[TVIEW];
250+
const hasSetInput = setAllInputsForProperty(tNode, tView, lView, propName, value);
250251

251-
if (!nativeOnly) {
252-
const hasSetInput = setAllInputsForProperty(tNode, tView, lView, propName, value);
253-
254-
if (hasSetInput) {
255-
isComponentHost(tNode) && markDirtyIfOnPush(lView, tNode.index);
256-
ngDevMode && setNgReflectProperties(lView, tView, tNode, propName, value);
257-
return; // Stop propcessing if we've matched at least one input.
258-
}
252+
if (hasSetInput) {
253+
isComponentHost(tNode) && markDirtyIfOnPush(lView, tNode.index);
254+
ngDevMode && setNgReflectProperties(lView, tView, tNode, propName, value);
255+
return; // Stop propcessing if we've matched at least one input.
259256
}
260257

258+
setDomProperty(tNode, lView, propName, value, renderer, sanitizer);
259+
}
260+
261+
/**
262+
* Sets a DOM property on a specific node.
263+
* @param tNode TNode on which to set the value.
264+
* @param lView View in which the node is located.
265+
* @param propName Name of the property.
266+
* @param value Value to set on the property.
267+
* @param renderer Renderer to use when setting the property.
268+
* @param sanitizer Function used to sanitize the value before setting it.
269+
*/
270+
export function setDomProperty<T>(
271+
tNode: TNode,
272+
lView: LView,
273+
propName: string,
274+
value: T,
275+
renderer: Renderer,
276+
sanitizer: SanitizerFn | null | undefined,
277+
) {
261278
if (tNode.type & TNodeType.AnyRNode) {
262279
const element = getNativeByTNode(tNode, lView) as RElement | RComment;
263280
propName = mapPropName(propName);
264281

265282
if (ngDevMode) {
266283
validateAgainstEventProperties(propName);
267-
if (!isPropertyValid(element, propName, tNode.value, tView.schemas)) {
284+
if (!isPropertyValid(element, propName, tNode.value, lView[TVIEW].schemas)) {
268285
handleUnknownPropertyError(propName, tNode.value, tNode.type, lView);
269286
}
270287
}
@@ -276,7 +293,7 @@ export function elementPropertyInternal<T>(
276293
} else if (tNode.type & TNodeType.AnyContainer) {
277294
// If the node is a container and the property didn't
278295
// match any of the inputs or schemas we should throw.
279-
if (ngDevMode && !matchingSchemas(tView.schemas, tNode.value)) {
296+
if (ngDevMode && !matchingSchemas(lView[TVIEW].schemas, tNode.value)) {
280297
handleUnknownPropertyError(propName, tNode.value, tNode.type, lView);
281298
}
282299
}

‎packages/core/src/render3/instructions/two_way.ts‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {getCurrentTNode, getLView, getSelectedTNode, getTView, nextBindingIndex}
1414
import {EventCallback} from '../view/listeners';
1515

1616
import {listenerInternal} from './listener';
17-
import {elementPropertyInternal, storePropertyBindingMetadata} from './shared';
17+
import {setPropertyAndInputs, storePropertyBindingMetadata} from './shared';
1818

1919
/**
2020
* Update a two-way bound property on a selected element.
@@ -44,16 +44,7 @@ export function ɵɵtwoWayProperty<T>(
4444
if (bindingUpdated(lView, bindingIndex, value)) {
4545
const tView = getTView();
4646
const tNode = getSelectedTNode();
47-
elementPropertyInternal(
48-
tView,
49-
tNode,
50-
lView,
51-
propName,
52-
value,
53-
lView[RENDERER],
54-
sanitizer,
55-
false,
56-
);
47+
setPropertyAndInputs(tNode, lView, propName, value, lView[RENDERER], sanitizer);
5748
ngDevMode && storePropertyBindingMetadata(tView.data, tNode, propName, bindingIndex);
5849
}
5950

‎packages/core/test/bundling/forms_template_driven/bundle.golden_symbols.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -318,7 +318,6 @@
318318
"detectChangesInternal",
319319
"diPublicInInjector",
320320
"elementEndFirstCreatePass",
321-
"elementPropertyInternal",
322321
"elementStartFirstCreatePass",
323322
"enterDI",
324323
"enterView",
@@ -590,6 +589,7 @@
590589
"setInjectImplementation",
591590
"setInputsFromAttrs",
592591
"setIsRefreshingViews",
592+
"setPropertyAndInputs",
593593
"setSelectedIndex",
594594
"setShadowStylingInputFlags",
595595
"setTStylingRangeNext",

0 commit comments

Comments
 (0)