Merge pull request NativeScript#583 from NativeScript/hdeshev/reactive-forms-static

Value accessors using static selectors now.

Author: hdeshev

.travis.yml

@@ -22,7 +22,6 @@ before_cache:
 
 cache:
   directories:
-        - $HOME/.nvm
         - $HOME/.gradle/caches/
         - $HOME/.gradle/wrapper/
 

build/generate-value-accessor-selector.js

@@ -0,0 +1,23 @@
+// Usage:
+// node generate-value-accessor-selector TextField TextView
+
+function generateValueAccessorSelector(tagNames) {
+    const tags = [];
+    tagNames.forEach(tagName => {
+        tags.push(tagName); // regular tag
+        tags.push(tagName.charAt(0).toLowerCase() + tagName.slice(1)); // lowercase first char
+        tags.push(tagName.split(/(?=[A-Z])/).join("-").toLowerCase()); // kebab case
+    });
+
+    const selectors = [];
+    for (const tag of tags) {
+        for (const directive of ["ngModel", "formControlName"]) {
+            selectors.push(`${tag}[${directive}]`);
+        }
+    }
+    return selectors.join(", ");
+}
+
+process.argv.shift();
+process.argv.shift();
+console.log(generateValueAccessorSelector(process.argv));

nativescript-angular/value-accessors/base-value-accessor.ts

@@ -1,22 +1,5 @@
 import { ControlValueAccessor } from "@angular/forms";
 
-export function generateValueAccessorSelector(...tagNames: string[]): string {
-    const tags: string[] = [];
-    tagNames.forEach(tagName => {
-        tags.push(tagName); // regular tag
-        tags.push(tagName.charAt(0).toLowerCase() + tagName.slice(1)); // lowercase first char
-        tags.push(tagName.split(/(?=[A-Z])/).join("-").toLowerCase()); // kebab case
-    });
-
-    const selectors = [];
-    for (const tag of tags) {
-        for (const directive of ["ngModel", "formControlName"]) {
-            selectors.push(`${tag}[${directive}]`);
-        }
-    }
-    return selectors.join(", ");
-}
-
 export class BaseValueAccessor<TView> implements ControlValueAccessor {
     constructor(public view: TView) { }
 

nativescript-angular/value-accessors/checked-value-accessor.ts

@@ -1,7 +1,7 @@
 import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { isBlank } from "../lang-facade";
-import { BaseValueAccessor, generateValueAccessorSelector } from "./base-value-accessor";
+import { BaseValueAccessor } from "./base-value-accessor";
 import { Switch } from "ui/switch";
 
 const CHECKED_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
@@ -17,7 +17,8 @@ const CHECKED_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
  *  ```
  */
 @Directive({
-    selector: generateValueAccessorSelector("Switch"),
+    // tslint:disable-next-line:max-line-length directive-selector
+    selector: "Switch[ngModel], Switch[formControlName], switch[ngModel], switch[formControlName], switch[ngModel], switch[formControlName]",
     providers: [CHECKED_VALUE_ACCESSOR]
 })
 export class CheckedValueAccessor extends BaseValueAccessor<Switch> { // tslint:disable-line:directive-class-suffix

nativescript-angular/value-accessors/date-value-accessor.ts

@@ -1,7 +1,7 @@
 import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { isBlank, isDate } from "../lang-facade";
-import { BaseValueAccessor, generateValueAccessorSelector } from "./base-value-accessor";
+import { BaseValueAccessor } from "./base-value-accessor";
 import { DatePicker } from "ui/date-picker";
 
 const DATE_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
@@ -17,7 +17,8 @@ const DATE_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
  *  ```
  */
 @Directive({
-    selector: generateValueAccessorSelector("DatePicker"),
+    // tslint:disable-next-line:max-line-length directive-selector
+    selector: "DatePicker[ngModel], DatePicker[formControlName], datePicker[ngModel], datePicker[formControlName], date-picker[ngModel], date-picker[formControlName]",
     providers: [DATE_VALUE_ACCESSOR]
 })
 export class DateValueAccessor extends BaseValueAccessor<DatePicker> { // tslint:disable-line:directive-class-suffix

nativescript-angular/value-accessors/number-value-accessor.ts

@@ -1,7 +1,7 @@
 import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { isBlank, isNumber } from "../lang-facade";
-import { BaseValueAccessor, generateValueAccessorSelector } from "./base-value-accessor";
+import { BaseValueAccessor } from "./base-value-accessor";
 import { Slider } from "ui/slider";
 
 const NUMBER_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
@@ -17,7 +17,8 @@ const NUMBER_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
  *  ```
  */
 @Directive({
-    selector: generateValueAccessorSelector("Slider"),
+    // tslint:disable-next-line:max-line-length directive-selector
+    selector: "Slider[ngModel], Slider[formControlName], slider[ngModel], slider[formControlName], slider[ngModel], slider[formControlName]",
     providers: [NUMBER_VALUE_ACCESSOR]
 })
 export class NumberValueAccessor extends BaseValueAccessor<Slider> { // tslint:disable-line:directive-class-suffix

nativescript-angular/value-accessors/selectedIndex-value-accessor.ts

@@ -1,6 +1,6 @@
 import { Directive, ElementRef, forwardRef, AfterViewInit, HostListener } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
-import { BaseValueAccessor, generateValueAccessorSelector } from "./base-value-accessor";
+import { BaseValueAccessor } from "./base-value-accessor";
 import { View } from "ui/core/view";
 import { convertToInt } from "../common/utils";
 
@@ -19,7 +19,8 @@ export type SelectableView = {selectedIndex: number} & View;
  *  ```
  */
 @Directive({
-    selector: generateValueAccessorSelector("SegmentedBar", "ListPicker", "TabView"),
+    // tslint:disable-next-line:max-line-length directive-selector
+    selector: "SegmentedBar[ngModel], SegmentedBar[formControlName], segmentedBar[ngModel], segmentedBar[formControlName], segmented-bar[ngModel], segmented-bar[formControlName], ListPicker[ngModel], ListPicker[formControlName], listPicker[ngModel], listPicker[formControlName], list-picker[ngModel], list-picker[formControlName], TabView[ngModel], TabView[formControlName], tabView[ngModel], tabView[formControlName], tab-view[ngModel], tab-view[formControlName]",
     providers: [SELECTED_INDEX_VALUE_ACCESSOR]
 })
 export class SelectedIndexValueAccessor extends BaseValueAccessor<SelectableView> implements AfterViewInit { // tslint:disable-line:max-line-length directive-class-suffix

nativescript-angular/value-accessors/text-value-accessor.ts

@@ -1,7 +1,7 @@
 import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { isBlank } from "../lang-facade";
-import { BaseValueAccessor, generateValueAccessorSelector } from "./base-value-accessor";
+import { BaseValueAccessor } from "./base-value-accessor";
 import { View } from "ui/core/view";
 
 const TEXT_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
@@ -19,7 +19,8 @@ export type TextView = {text: string} & View;
  *  ```
  */
 @Directive({
-    selector: generateValueAccessorSelector("TextField", "TextView", "SearchBar"),
+    // tslint:disable-next-line:max-line-length directive-selector
+    selector: "TextField[ngModel], TextField[formControlName], textField[ngModel], textField[formControlName], text-field[ngModel], text-field[formControlName], TextView[ngModel], TextView[formControlName], textView[ngModel], textView[formControlName], text-view[ngModel], text-view[formControlName], SearchBar[ngModel], SearchBar[formControlName], searchBar[ngModel], searchBar[formControlName], search-bar[ngModel], search-bar[formControlName]",
     providers: [TEXT_VALUE_ACCESSOR]
 })
 export class TextValueAccessor extends BaseValueAccessor<TextView> { // tslint:disable-line:directive-class-suffix

nativescript-angular/value-accessors/time-value-accessor.ts

@@ -1,7 +1,7 @@
 import { Directive, ElementRef, forwardRef, HostListener } from "@angular/core";
 import { NG_VALUE_ACCESSOR } from "@angular/forms";
 import { isBlank, isDate } from "../lang-facade";
-import { BaseValueAccessor, generateValueAccessorSelector } from "./base-value-accessor";
+import { BaseValueAccessor } from "./base-value-accessor";
 import { TimePicker } from "ui/time-picker";
 
 const TIME_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
@@ -17,7 +17,8 @@ const TIME_VALUE_ACCESSOR = {provide: NG_VALUE_ACCESSOR,
  *  ```
  */
 @Directive({
-    selector: generateValueAccessorSelector("TimePicker"),
+    // tslint:disable-next-line:max-line-length directive-selector
+    selector: "TimePicker[ngModel], TimePicker[formControlName], timePicker[ngModel], timePicker[formControlName], time-picker[ngModel], time-picker[formControlName]",
     providers: [TIME_VALUE_ACCESSOR]
 })
 export class TimeValueAccessor extends BaseValueAccessor<TimePicker> { // tslint:disable-line:directive-class-suffix

tests/app/tests/value-accessor-tests.ts

@@ -8,7 +8,6 @@ import {TimePicker} from "ui/time-picker";
 import {ListPicker} from "ui/list-picker";
 import {TextField} from "ui/text-field";
 import {
-    generateValueAccessorSelector,
     NumberValueAccessor,
     CheckedValueAccessor,
     DateValueAccessor,
@@ -144,26 +143,6 @@ describe("two-way binding via ng-model", () => {
     });
 })
 
-describe("target selector registration", () => {
-    it("supports uppercase(unchanged) camel tags", () => {
-        assert.include(generateValueAccessorSelector("TextField"), "TextField[ngModel]");
-    });
-    it("supports lowercase camel tags", () => {
-        assert.include(generateValueAccessorSelector("TextField"), "textField[ngModel]");
-    });
-    it("supports kebab case tags", () => {
-        assert.include(generateValueAccessorSelector("TextField"), "text-field[ngModel]");
-    });
-    it("supports formControlName", () => {
-        assert.include(generateValueAccessorSelector("TextField"), "TextField[formControlName]");
-    });
-    it("supports multiple tags", () => {
-        const selector = generateValueAccessorSelector("TextField", "TextView");
-        assert.include(selector, "TextField[ngModel]");
-        assert.include(selector, "TextField[formControlName]");
-    });
-});
-
 function formatDate(date: Date) {
     return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
 }