Skip to content

Commit 2079b51

Browse files
vakrilovvakrilov
committed
Merge pull request NativeScript#171 from NativeScript/kebab-case
Support for kebab-case-component-tags
2 parents bab26bb + 76e9f65 commit 2079b51

File tree

3 files changed

+47
-11
lines changed

3 files changed

+47
-11
lines changed

‎src/nativescript-angular/element-registry.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,12 @@ export interface ViewClass {
2020
new (): View
2121
}
2222

23-
var defaultViewMeta: ViewClassMeta = {
23+
const defaultViewMeta: ViewClassMeta = {
2424
skipAddToDom: false,
2525
}
2626

27-
var elementMap: Map<string, { resolver: ViewResolver, meta?: ViewClassMeta }> = new Map<string, { resolver: ViewResolver, meta?: ViewClassMeta }>();
27+
const elementMap: Map<string, { resolver: ViewResolver, meta?: ViewClassMeta }> = new Map<string, { resolver: ViewResolver, meta?: ViewClassMeta }>();
28+
const camelCaseSplit = /([a-z0-9])([A-Z])/g;
2829

2930
export function registerElement(elementName: string, resolver: ViewResolver, meta?: ViewClassMeta): void {
3031
if (elementMap.has(elementName)) {
@@ -33,6 +34,7 @@ export function registerElement(elementName: string, resolver: ViewResolver, met
3334
const entry = { resolver: resolver, meta: meta };
3435
elementMap.set(elementName, entry);
3536
elementMap.set(elementName.toLowerCase(), entry);
37+
elementMap.set(elementName.replace(camelCaseSplit, "$1-$2").toLowerCase(), entry);
3638
}
3739
}
3840

@@ -102,4 +104,4 @@ registerElement("WrapLayout", () => require("ui/layouts/wrap-layout").WrapLayout
102104
registerElement("FormattedString", () => require("text/formatted-string").FormattedString);
103105
registerElement("Span", () => require("text/span").Span);
104106

105-
registerElement("DetachedContainer", () => require("ui/proxy-view-container").ProxyViewContainer, { skipAddToDom: true });
107+
registerElement("DetachedContainer", () => require("ui/proxy-view-container").ProxyViewContainer, { skipAddToDom: true });

‎tests/app/tests/renderer-tests.ts

Lines changed: 39 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
//make sure you import mocha-config before angular2/core
22
import {assert} from "./test-config";
3-
import {
4-
Component,
5-
ElementRef,
6-
} from "angular2/core";
3+
import { Component, ElementRef, Renderer } from "angular2/core";
74
import {ProxyViewContainer} from "ui/proxy-view-container";
85
import {Red} from "color/known-colors";
96
import {dumpView} from "./test-utils";
107
import {TestApp} from "./test-app";
11-
import {LayoutBase} from "ui/layouts/layout-base"
8+
import {LayoutBase} from "ui/layouts/layout-base";
9+
import {StackLayout} from "ui/layouts/stack-layout";
1210

1311
@Component({
1412
template: `<StackLayout><Label text="Layout"></Label></StackLayout>`
@@ -105,7 +103,6 @@ export class NgForLabel {
105103
}
106104
}
107105

108-
109106
describe('Renderer E2E', () => {
110107
let testApp: TestApp = null;
111108

@@ -217,3 +214,39 @@ describe('Renderer E2E', () => {
217214
});
218215
})
219216
})
217+
218+
describe('Renderer createElement', () => {
219+
let testApp: TestApp = null;
220+
let renderer: Renderer = null;
221+
222+
before(() => {
223+
return TestApp.create().then((app) => {
224+
testApp = app;
225+
renderer = testApp.renderer;
226+
})
227+
});
228+
229+
after(() => {
230+
testApp.dispose();
231+
});
232+
233+
it("creates element from CamelCase", () => {
234+
const result = renderer.createElement(null, "StackLayout");
235+
assert.instanceOf(result, StackLayout, "Renderer should create StackLayout form 'StackLayout'")
236+
});
237+
238+
it("creates element from lowercase", () => {
239+
const result = renderer.createElement(null, "stacklayout");
240+
assert.instanceOf(result, StackLayout, "Renderer should create StackLayout form 'stacklayout'")
241+
});
242+
243+
it("creates element from kebab-case", () => {
244+
const result = renderer.createElement(null, "stack-layout");
245+
assert.instanceOf(result, StackLayout, "Renderer should create StackLayout form 'stack-layout'")
246+
});
247+
248+
it("creates ProxyViewContainer for unknownTag", () => {
249+
const result = renderer.createElement(null, "unknown-tag");
250+
assert.instanceOf(result, ProxyViewContainer, "Renderer should create ProxyViewContainer form 'unknown-tag'")
251+
});
252+
})

‎tests/app/tests/test-app.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
//make sure you import mocha-config before angular2/core
22
import {bootstrap, ProviderArray} from "nativescript-angular/application";
33
import {Type, Component, ComponentRef, DynamicComponentLoader,
4-
ViewChild, ElementRef, provide, ApplicationRef
4+
ViewChild, ElementRef, provide, ApplicationRef, Renderer
55
} from "angular2/core";
66

77
import {View} from "ui/core/view";
@@ -20,7 +20,8 @@ export class TestApp {
2020

2121
constructor(public loader: DynamicComponentLoader,
2222
public elementRef: ElementRef,
23-
public appRef: ApplicationRef) {
23+
public appRef: ApplicationRef,
24+
public renderer: Renderer) {
2425
}
2526

2627
public loadComponent(type: Type): Promise<ComponentRef> {

0 commit comments

Comments
 (0)