Skip to content

Commit 24161e7

Browse files
sis0k0sis0k0
committed
refactor: move NgView, NgElement and similar to separate module
1 parent 7a86de7 commit 24161e7

16 files changed

+104
-90
lines changed

Diff for: ‎nativescript-angular/animations/animation-driver.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { AnimationPlayer } from "@angular/animations";
2-
import { NgView } from "../element-registry";
32

3+
import { NgView } from "../element-types";
44
import { NativeScriptAnimationPlayer } from "./animation-player";
55
import { Keyframe } from "./utils";
66

Diff for: ‎nativescript-angular/animations/animation-engine.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { ɵDomAnimationEngine as DomAnimationEngine } from "@angular/animations/browser";
22
import { AnimationEvent, AnimationPlayer } from "@angular/animations";
33

4-
import { NgView } from "../element-registry";
4+
import { NgView } from "../element-types";
55
import {
66
copyArray,
77
cssClasses,

Diff for: ‎nativescript-angular/animations/animation-player.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import {
44
KeyframeAnimationInfo,
55
} from "tns-core-modules/ui/animation/keyframe-animation";
66

7-
import { NgView } from "../element-registry";
7+
import { NgView } from "../element-types";
88
import { Keyframe, getAnimationCurve, parseAnimationKeyframe } from "./utils";
99

1010
export class NativeScriptAnimationPlayer implements AnimationPlayer {

Diff for: ‎nativescript-angular/animations/dom-utils.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
} from "@angular/animations";
88
import { unsetValue } from "tns-core-modules/ui/core/view";
99

10-
import { NgView } from "../element-registry";
10+
import { NgView } from "../element-types";
1111

1212
// overriden to use the default 'unsetValue'
1313
// instead of empty string ''

Diff for: ‎nativescript-angular/directives/action-bar.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
import { Directive, Component, ElementRef, Optional, OnDestroy } from "@angular/core";
22
import { ActionItem, ActionBar, NavigationButton } from "tns-core-modules/ui/action-bar";
3-
import { isBlank } from "../lang-facade";
43
import { Page } from "tns-core-modules/ui/page";
54
import { View } from "tns-core-modules/ui/core/view";
6-
import { registerElement, ViewClassMeta, NgView } from "../element-registry";
5+
6+
import { isBlank } from "../lang-facade";
7+
import { registerElement } from "../element-registry";
8+
import { ViewClassMeta, NgView } from "../element-types";
79

810
const actionBarMeta: ViewClassMeta = {
911
skipAddToDom: true,

Diff for: ‎nativescript-angular/directives/list-view-comp.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import { View, KeyedTemplate } from "tns-core-modules/ui/core/view";
2424
import { ObservableArray } from "tns-core-modules/data/observable-array";
2525
import { LayoutBase } from "tns-core-modules/ui/layouts/layout-base";
2626

27-
import { DetachedElement } from "../element-registry";
27+
import { CommentNode } from "../element-types";
2828
import { isListLikeIterable } from "../collection-facade";
2929
import { listViewLog, listViewError } from "../trace";
3030

@@ -214,7 +214,7 @@ export class ListViewComponent implements DoCheck, OnDestroy, AfterContentInit {
214214
}
215215

216216
function getSingleViewRecursive(nodes: Array<any>, nestLevel: number): View {
217-
const actualNodes = nodes.filter(node => !(node instanceof DetachedElement));
217+
const actualNodes = nodes.filter(node => !(node instanceof CommentNode));
218218

219219
if (actualNodes.length === 0) {
220220
throw new Error(`No suitable views found in list template! ` +

Diff for: ‎nativescript-angular/directives/tab-view.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
} from "@angular/core";
1010
import { TabView, TabViewItem } from "tns-core-modules/ui/tab-view";
1111

12-
import { DetachedElement } from "../element-registry";
12+
import { CommentNode } from "../element-types";
1313
import { convertToInt } from "../common/utils";
1414
import { rendererLog } from "../trace";
1515
import { isBlank } from "../lang-facade";
@@ -106,7 +106,7 @@ export class TabViewItemDirective implements OnInit {
106106
const viewRef = this.viewContainer.createEmbeddedView(this.templateRef);
107107
// Filter out text nodes and comments
108108
const realViews = viewRef.rootNodes.filter(node =>
109-
!(node instanceof DetachedElement));
109+
!(node instanceof CommentNode));
110110

111111
if (realViews.length > 0) {
112112
this.item.view = realViews[0];

Diff for: ‎nativescript-angular/element-registry.ts

+4-34
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,10 @@
1-
import { View } from "tns-core-modules/ui/core/view";
1+
import { ViewClass, ViewClassMeta } from "./element-types";
22

33
export type ViewResolver = () => ViewClass;
4-
export type NgView = (View & ViewExtensions);
5-
export type NgElement = NgView | DetachedElement;
6-
export interface ViewClassMeta {
7-
skipAddToDom?: boolean;
8-
insertChild?: (parent: NgView, child: NgView, atIndex: number) => void;
9-
removeChild?: (parent: NgView, child: NgView) => void;
10-
}
11-
12-
export interface ViewExtensions {
13-
nodeType: number;
14-
nodeName: string;
15-
templateParent: NgView;
16-
ngCssClasses: Map<string, boolean>;
17-
meta: ViewClassMeta;
18-
}
19-
20-
export interface ViewClass {
21-
new (): View;
22-
}
23-
24-
export class DetachedElement {
25-
templateParent: NgView;
26-
meta: { skipAddToDom: true };
27-
}
28-
29-
const defaultViewMeta: ViewClassMeta = {
30-
skipAddToDom: false,
31-
};
324

335
const elementMap = new Map<string, { resolver: ViewResolver, meta?: ViewClassMeta }>();
346
const camelCaseSplit = /([a-z0-9])([A-Z])/g;
7+
const defaultViewMeta: ViewClassMeta = { skipAddToDom: false };
358

369
export function registerElement(
3710
elementName: string,
@@ -54,6 +27,7 @@ export function getViewClass(elementName: string): ViewClass {
5427
if (!entry) {
5528
throw new TypeError(`No known component for element ${elementName}.`);
5629
}
30+
5731
try {
5832
return entry.resolver();
5933
} catch (e) {
@@ -62,12 +36,8 @@ export function getViewClass(elementName: string): ViewClass {
6236
}
6337

6438
export function getViewMeta(nodeName: string): ViewClassMeta {
65-
let meta = defaultViewMeta;
6639
const entry = elementMap.get(nodeName) || elementMap.get(nodeName.toLowerCase());
67-
if (entry && entry.meta) {
68-
meta = entry.meta;
69-
}
70-
return meta;
40+
return (entry && entry.meta) || defaultViewMeta;
7141
}
7242

7343
export function isKnownView(elementName: string): boolean {

Diff for: ‎nativescript-angular/element-types.ts

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { View } from "tns-core-modules/ui/core/view";
2+
3+
export type NgView = (View & ViewExtensions);
4+
export type NgElement = NgView | DetachedElement;
5+
6+
export class DetachedElement {
7+
meta: { skipAddToDom: true };
8+
}
9+
10+
export interface ViewExtensions {
11+
nodeType: number;
12+
nodeName: string;
13+
templateParent: NgView;
14+
ngCssClasses: Map<string, boolean>;
15+
meta: ViewClassMeta;
16+
}
17+
18+
export interface ViewClass {
19+
new (): View;
20+
}
21+
22+
// used for creating comments and text nodes in the renderer
23+
export class CommentNode extends DetachedElement {
24+
templateParent: NgView;
25+
}
26+
27+
export interface ViewClassMeta {
28+
skipAddToDom?: boolean;
29+
insertChild?: (parent: NgView, child: NgView, atIndex: number) => void;
30+
removeChild?: (parent: NgView, child: NgView) => void;
31+
}

Diff for: ‎nativescript-angular/index.ts

+8-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import "application";
1+
import "tns-core-modules/application";
22

33
export * from "./platform-common";
44
export * from "./platform";
@@ -15,13 +15,18 @@ export * from "./modal-dialog";
1515
export * from "./renderer";
1616
export * from "./view-util";
1717
export * from "./resource-loader";
18+
1819
export {
1920
ViewResolver,
20-
ViewClass,
21-
ViewClassMeta,
2221
registerElement,
2322
getViewClass,
2423
getViewMeta,
2524
isKnownView,
2625
} from "./element-registry";
26+
27+
export {
28+
ViewClass,
29+
ViewClassMeta,
30+
} from "./element-types";
31+
2732
export * from "./value-accessors/base-value-accessor";

Diff for: ‎nativescript-angular/renderer.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { topmost } from "tns-core-modules/ui/frame";
1212
import { APP_ROOT_VIEW, DEVICE, getRootPage } from "./platform-providers";
1313
import { isBlank } from "./lang-facade";
1414
import { ViewUtil } from "./view-util";
15-
import { NgView, DetachedElement } from "./element-registry";
15+
import { NgView, CommentNode } from "./element-types";
1616
import { rendererLog as traceLog } from "./trace";
1717

1818
// CONTENT_ATTR not exported from NativeScript_renderer - we need it for styles application.
@@ -111,7 +111,7 @@ export class NativeScriptRenderer extends Renderer2 {
111111
return this.viewUtil.nextSiblingIndex(node);
112112
}
113113

114-
createComment(_value: any): DetachedElement {
114+
createComment(_value: any): CommentNode {
115115
traceLog(`NativeScriptRenderer.createComment ${_value}`);
116116
return this.viewUtil.createComment();
117117
}
@@ -121,7 +121,7 @@ export class NativeScriptRenderer extends Renderer2 {
121121
return this.viewUtil.createView(name);
122122
}
123123

124-
createText(_value: string): DetachedElement {
124+
createText(_value: string): CommentNode {
125125
traceLog(`NativeScriptRenderer.createText ${_value}`);
126126
return this.viewUtil.createText();
127127
}

Diff for: ‎nativescript-angular/view-util.ts

+13-9
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,15 @@ import {
77
getViewClass,
88
getViewMeta,
99
isKnownView,
10-
ViewExtensions,
10+
} from "./element-registry";
11+
12+
import {
13+
CommentNode,
1114
DetachedElement,
15+
ViewExtensions,
1216
NgElement,
1317
NgView,
14-
} from "./element-registry";
18+
} from "./element-types";
1519
import { platformNames, Device } from "tns-core-modules/platform";
1620
import { rendererLog as traceLog } from "./trace";
1721

@@ -50,12 +54,12 @@ export class ViewUtil {
5054
}
5155

5256
public insertChild(parent: any, child: NgElement, atIndex: number = -1) {
53-
if (child instanceof DetachedElement) {
57+
if (child instanceof CommentNode) {
5458
child.templateParent = parent;
5559
return;
5660
}
5761

58-
if (!parent || child.meta.skipAddToDom) {
62+
if (!parent || child instanceof DetachedElement) {
5963
return;
6064
}
6165

@@ -83,7 +87,7 @@ export class ViewUtil {
8387
}
8488

8589
public removeChild(parent: any, child: NgElement) {
86-
if (!parent || child instanceof DetachedElement || child.meta.skipAddToDom) {
90+
if (!parent || child instanceof DetachedElement) {
8791
return;
8892
}
8993

@@ -112,12 +116,12 @@ export class ViewUtil {
112116
}
113117
}
114118

115-
public createComment(): DetachedElement {
116-
return new DetachedElement();
119+
public createComment(): CommentNode {
120+
return new CommentNode();
117121
}
118122

119-
public createText(): DetachedElement {
120-
return new DetachedElement();
123+
public createText(): CommentNode {
124+
return new CommentNode();
121125
}
122126

123127
public createView(name: string): NgView {

Diff for: ‎ng-sample/app/app.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -128,13 +128,13 @@ const customPageFactoryProvider = {
128128
// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(PageRouterOutletAppComponent));
129129
// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(PageRouterOutletNestedAppComponent));
130130
// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(ClearHistoryAppComponent));
131-
// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(LoginAppComponent));
131+
//platformNativeScriptDynamic().bootstrapModule(makeExampleModule(LoginAppComponent));
132132

133133
// animations
134134
// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationStatesTest));
135135
// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationNgClassTest));
136136
// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationKeyframesTest));
137-
platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationEnterLeaveTest));
137+
// platformNativeScriptDynamic().bootstrapModule(makeExampleModule(AnimationEnterLeaveTest));
138138

139139
// Livesync test
140140
let cachedUrl: string;

Diff for: ‎ng-sample/app/examples/renderer-test.html

+29-27
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,30 @@
1-
<StackLayout orientation='vertical'>
2-
<Label [text]='model.mydate | date:"fullDate"' [ngStyle]="{'background-color': 'lime'}"></Label>
3-
<Progress value="50" style="color: red"></Progress>
4-
<SearchBar [(ngModel)]='model.search'></SearchBar>
5-
<search-bar [(ngModel)]='model.search'></search-bar>
6-
<Label [text]='model.search' [style.backgroundColor]="'hotpink'"></Label>
7-
<Slider [(ngModel)]='model.sliderTest'></Slider>
8-
<Label [text]='model.sliderTest'></Label>
9-
<ListPicker [items]='model.listPickerItems' [(ngModel)]='model.selectedIndex'></ListPicker>
10-
<TextField [(ngModel)]='model.selectedIndex'></TextField>
11-
<SegmentedBar [items]='model.segmentedBarItems' [(ngModel)]='model.selectedIndex'></SegmentedBar>
12-
<Label [text]='model.selectedIndex'></Label>
13-
<Switch [(ngModel)]='model.testBoolean'></Switch>
14-
<Label [text]='model.testBoolean'></Label>
15-
<Label [text]='model.test'></Label>
16-
<TextView #name [ngModel]='model.test' (ngModelChange)="model.test=setUpperCase($event)" fontSize='20' padding='20'></TextView>
17-
<Label [class.valid]="isValid" [class.invalid]="!isValid" text='Name' fontSize='20' verticalAlignment='center' padding='20'></Label>
18-
<TextField #name text='John' fontSize='20' padding='20'></TextField>
19-
<Button [text]='buttonText' (tap)='onSave($event, name.text, $el)'></Button>
20-
<Button text='Toggle details' (tap)='onToggleDetails()'></Button>
21-
<TextView *ngIf='showDetails' [text]='detailsText'></TextView>
22-
<Label text='==============================' fontSize='20'></Label>
23-
<StackLayout #more *ngIf='showDetails' orientation='vertical'>
24-
<TextField *ngFor='let detailLine of detailLines' [text]='detailLine'></TextField>
1+
<ScrollView>
2+
<StackLayout orientation='vertical'>
3+
<Label [text]='model.mydate | date:"fullDate"' [ngStyle]="{'background-color': 'lime'}"></Label>
4+
<Progress value="50" style="color: red"></Progress>
5+
<SearchBar [(ngModel)]='model.search'></SearchBar>
6+
<search-bar [(ngModel)]='model.search'></search-bar>
7+
<Label [text]='model.search' [style.backgroundColor]="'hotpink'"></Label>
8+
<Slider [(ngModel)]='model.sliderTest'></Slider>
9+
<Label [text]='model.sliderTest'></Label>
10+
<ListPicker [items]='model.listPickerItems' [(ngModel)]='model.selectedIndex'></ListPicker>
11+
<TextField [(ngModel)]='model.selectedIndex'></TextField>
12+
<SegmentedBar [items]='model.segmentedBarItems' [(ngModel)]='model.selectedIndex'></SegmentedBar>
13+
<Label [text]='model.selectedIndex'></Label>
14+
<Switch [(ngModel)]='model.testBoolean'></Switch>
15+
<Label [text]='model.testBoolean'></Label>
16+
<Label [text]='model.test'></Label>
17+
<TextView #name [ngModel]='model.test' (ngModelChange)="model.test=setUpperCase($event)" fontSize='20' padding='20'></TextView>
18+
<Label [class.valid]="isValid" [class.invalid]="!isValid" text='Name' fontSize='20' verticalAlignment='center' padding='20'></Label>
19+
<TextField #name text='John' fontSize='20' padding='20'></TextField>
20+
<Button [text]='buttonText' (tap)='onSave($event, name.text, $el)'></Button>
21+
<Button text='Toggle details' (tap)='onToggleDetails()'></Button>
22+
<TextView *ngIf='showDetails' [text]='detailsText'></TextView>
23+
<Label text='==============================' fontSize='20'></Label>
24+
<StackLayout #more *ngIf='showDetails' orientation='vertical'>
25+
<TextField *ngFor='let detailLine of detailLines' [text]='detailLine'></TextField>
26+
</StackLayout>
27+
<Label text='==============================' fontSize='20'></Label>
28+
<templated-component [renderChild]="true"></templated-component>
2529
</StackLayout>
26-
<Label text='==============================' fontSize='20'></Label>
27-
<templated-component [renderChild]="true"></templated-component>
28-
</StackLayout>
30+
</ScrollView>

Diff for: ‎tests/app/tests/property-sets.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import {assert} from "./test-config";
33
import {View} from "ui/core/view";
44
import {ViewUtil} from "nativescript-angular/view-util";
5-
import {NgView, ViewExtensions, ViewClassMeta} from "nativescript-angular/element-registry";
5+
import {NgView, ViewExtensions, ViewClassMeta} from "nativescript-angular/element-types";
66
import {Red} from "color/known-colors";
77
import {device, platformNames} from "platform";
88
import {createDevice} from "./test-utils";

Diff for: ‎tests/app/tests/renderer-tests.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { LayoutBase } from "ui/layouts/layout-base";
99
import { StackLayout } from "ui/layouts/stack-layout";
1010
import { ContentView } from "ui/content-view";
1111
import { Button } from "ui/button";
12-
import { NgView } from "nativescript-angular/element-registry";
12+
import { NgView } from "nativescript-angular/element-types";
1313

1414
@Component({
1515
template: `<StackLayout><Label text="Layout"></Label></StackLayout>`

0 commit comments

Comments
 (0)