8000 refactor(upgrade): create a helper for cleaning jqLite/jQuery data (#… · angular/angular@d082221 · GitHub
[go: up one dir, main page]
Skip to content

Commit d082221

Browse files
gkalpakalxhub
gkalpak
authored and
alxhub
committed
refactor(upgrade): create a helper for cleaning jqLite/jQuery data (#40045)
This commit moves the code for cleaning jqLite/jQuery data on an element to a re-usable helper function. This way it is easier to keep the code consistent across all places where we need to clean data (now and in the future). PR Close #40045
1 parent 61376d5 commit d082221

File tree

3 files changed

+29
-19
lines changed

3 files changed

+29
-19
lines changed

‎packages/upgrade/src/common/src/downgrade_component_adapter.ts

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88

99
import {ApplicationRef, ChangeDetectorRef, ComponentFactory, ComponentRef, EventEmitter, Injector, OnChanges, SimpleChange, SimpleChanges, StaticProvider, Testability, TestabilityRegistry, Type} from '@angular/core';
1010

11-
import {element as angularElement, IAttributes, IAugmentedJQuery, ICompileService, INgModelController, IParseService, IScope} from './angular1';
11+
import {IAttributes, IAugmentedJQuery, ICompileService, INgModelController, IParseService, IScope} from './angular1';
1212
import {PropertyBinding} from './component_info';
1313
import {$SCOPE} from './constants';
14-
import {getTypeName, hookupNgModel, strictEquals} from './util';
14+
import {cleanData, getTypeName, hookupNgModel, strictEquals} from './util';
1515

1616
const INITIAL_VALUE = {
1717
__UNINITIALIZED__: true
@@ -241,12 +241,7 @@ export class DowngradeComponentAdapter {
241241
//
242242
// To ensure the element is always properly cleaned up, we manually call `cleanData()` on
243243
// this element and its descendants before destroying the `ComponentRef`.
244-
//
245-
// NOTE:
246-
// `cleanData()` also will invoke the AngularJS `$destroy` event on the element:
247-
// https://github.com/angular/angular.js/blob/2e72ea13fa98bebf6ed4b5e3c45eaf5f990ed16f/src/Angular.js#L1932-L1945
248-
angularElement.cleanData(this.element);
249-
angularElement.cleanData((this.element[0] as Element).querySelectorAll('*'));
244+
cleanData(this.element[0]);
250245

251246
destroyComponentRef();
252247
}

‎packages/upgrade/src/common/src/upgrade_helper.ts

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {ElementRef, Injector, SimpleChanges} from '@angular/core';
1010

1111
import {DirectiveRequireProperty, element as angularElement, IAugmentedJQuery, ICloneAttachFunction, ICompileService, IController, IControllerService, IDirective, IHttpBackendService, IInjectorService, ILinkFn, IScope, ITemplateCacheService, SingleOrListOrMap} from './angular1';
1212
import {$COMPILE, $CONTROLLER, $HTTP_BACKEND, $INJECTOR, $TEMPLATE_CACHE} from './constants';
13-
import {controllerKey, directiveNormalize, isFunction} from './util';
13+
import {cleanData, controllerKey, directiveNormalize, isFunction} from './util';
1414

1515

1616

@@ -125,15 +125,7 @@ export class UpgradeHelper {
125125
controllerInstance.$onDestroy();
126126
}
127127
$scope.$destroy();
128-
129-
// Clean the jQuery/jqLite data on the component+child elements.
130-
// Equivelent to how jQuery/jqLite invoke `cleanData` on an Element (this.element)
131-
// https://github.com/jquery/jquery/blob/e743cbd28553267f955f71ea7248377915613fd9/src/manipulation.js#L223
132-
// https://github.com/angular/angular.js/blob/26ddc5f830f902a3d22f4b2aab70d86d4d688c82/src/jqLite.js#L306-L312
133-
// `cleanData` will invoke the AngularJS `$destroy` DOM event
134-
// https://github.com/angular/angular.js/blob/26ddc5f830f902a3d22f4b2aab70d86d4d688c82/src/Angular.js#L1911-L1924
135-
angularElement.cleanData([this.element]);
136-
angularElement.cleanData(this.element.querySelectorAll('*'));
128+
cleanData(this.element);
137129
}
138130

139131
prepareTransclusion(): ILinkFn|undefined {

‎packages/upgrade/src/common/src/util.ts

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
import {Injector, Type} from '@angular/core';
1010

11-
import {IInjectorService, INgModelController} from './angular1';
11+
import {element as angularElement, IInjectorService, INgModelController} from './angular1';
1212
import {DOWNGRADED_MODULE_COUNT_KEY, UPGRADE_APP_TYPE_KEY} from './constants';
1313

1414
const DIRECTIVE_PREFIX_REGEXP = /^(?:x|data)[:\-_]/i;
@@ -25,6 +25,25 @@ export function onError(e: any) {
2525
throw e;
2626
}
2727

28+
/**
29+
* Clean the jqLite/jQuery data on the element and all its descendants.
30+
* Equivalent to how jqLite/jQuery invoke `cleanData()` on an Element when removed:
31+
* https://github.com/angular/angular.js/blob/2e72ea13fa98bebf6ed4b5e3c45eaf5f990ed16f/src/jqLite.js#L349-L355
32+
* https://github.com/jquery/jquery/blob/6984d1747623dbc5e87fd6c261a5b6b1628c107c/src/manipulation.js#L182
33+
*
34+
* NOTE:
35+
* `cleanData()` will also invoke the AngularJS `$destroy` DOM event on the element:
36+
* https://github.com/angular/angular.js/blob/2e72ea13fa98bebf6ed4b5e3c45eaf5f990ed16f/src/Angular.js#L1932-L1945
37+
*
38+
* @param node The DOM node whose data needs to be cleaned.
39+
*/
40+
export function cleanData(node: Node): void {
41+
angularElement.cleanData([node]);
42+
if (isParentNode(node)) {
43+
angularElement.cleanData(node.querySelectorAll('*'));
44+
}
45+
}
46+
2847
export function controllerKey(name: string): string 6D47 {
2948
return '$' + name + 'Controller';
3049
}
@@ -53,6 +72,10 @@ export function isFunction(value: any): value is Function {
5372
return typeof value === 'function';
5473
}
5574

75+
function isParentNode(node: Node|ParentNode): node is ParentNode {
76+
return isFunction((node as unknown as ParentNode).querySelectorAll);
77+
}
78+
5679
export function validateInjectionKey(
5780
$injector: IInjectorService, downgradedModule: string, injectionKey: string,
5881
attemptedAction: string): void {

0 commit comments

Comments
 (0)
0