Skip to content

Commit 1cbb1e8

Browse files
PanayotCankovsis0k0
PanayotCankov
authored and
sis0k0
committed
feat(webpack): mark the CSS type for stylable views explicitly (NativeScript#5257)
We want webpack's uglification to mangle function and class names but that's what the current implementation of the CSS in {N} relys on to get the CSS type for each view when targeted by CSS type selectors. The implementation is changed a little so now the CSS type can be set directly on the prototype of each View class or for TS, through decorator. BREAKING CHANGES: Extending classes requires marking the derived class with @csstype The root classes are not marked with CSSType and classes derived from ViewBase and View will continue to work as expected. More concrete view classes (Button, Label, etc.) are marked with @csstype now and store their cssType on the prototype suppressing the previous implementation that looked up the class function name. So clien classes that derive from one of our @csstype decorated classes will now have to be marked with @csstype.
1 parent fa80355 commit 1cbb1e8

File tree

36 files changed

+111
-48
lines changed

36 files changed

+111
-48
lines changed

‎tns-core-modules/ui/action-bar/action-bar-common.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,20 @@
22
ActionBar as ActionBarDefinition,
33
ActionItems as ActionItemsDefinition,
44
ActionItem as ActionItemDefinition,
5-
NavigationButton, IOSActionItemSettings, AndroidActionItemSettings, AndroidActionBarSettings
5+
NavigationButton, IOSActionItemSettings, AndroidActionItemSettings, AndroidActionBarSettings,
66
} from ".";
77

88
import { profile } from "../../profiling";
99

1010
export * from "../core/view";
1111

12-
import { View, ViewBase, Property, unsetValue, booleanConverter, horizontalAlignmentProperty, verticalAlignmentProperty } from "../core/view";
12+
import { View, ViewBase, Property, unsetValue, booleanConverter, horizontalAlignmentProperty, verticalAlignmentProperty, CSSType } from "../core/view";
1313

1414
export module knownCollections {
1515
export var actionItems = "actionItems";
1616
}
1717

18+
@CSSType("ActionBar")
1819
export class ActionBarBase extends View implements ActionBarDefinition {
1920
private _actionItems: ActionItems;
2021
private _navigationButton: NavigationButton;

‎tns-core-modules/ui/activity-indicator/activity-indicator-common.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { ActivityIndicator as ActivityIndicatorDefinition } from ".";
2-
import { View, Property, booleanConverter } from "../core/view";
2+
import { View, Property, booleanConverter, CSSType } from "../core/view";
33

44
export * from "../core/view";
55

6+
@CSSType("ActivityIndicator")
67
export class ActivityIndicatorBase extends View implements ActivityIndicatorDefinition {
78
public busy: boolean;
89
}

‎tns-core-modules/ui/border/border.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { Border as BorderDefinition } from ".";
2-
import { ContentView, View, layout } from "../content-view";
2+
import { ContentView, View, layout, CSSType } from "../content-view";
33

44
@Deprecated
5+
@CSSType("Border")
56
export class Border extends ContentView implements BorderDefinition {
67
get cornerRadius(): number {
78
if (typeof this.borderRadius === "number") {

‎tns-core-modules/ui/button/button-common.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { Button as ButtonDefinition } from ".";
2-
import { TextBase, booleanConverter } from "../text-base";
2+
import { TextBase, booleanConverter, CSSType } from "../text-base";
33

44
export * from "../text-base";
55

6+
@CSSType("Button")
67
export abstract class ButtonBase extends TextBase implements ButtonDefinition {
78
public static tapEvent = "tap";
89

‎tns-core-modules/ui/core/view/view-common.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,12 @@ function ensureAnimationModule() {
3333
}
3434
}
3535

36+
export function CSSType(type: string): ClassDecorator {
37+
return (cls) => {
38+
cls.prototype.cssType = type;
39+
};
40+
}
41+
3642
export function PseudoClassHandler(...pseudoClasses: string[]): MethodDecorator {
3743
const stateEventNames = pseudoClasses.map(s => ":" + s);
3844
const listeners = Symbol("listeners");
@@ -580,6 +586,9 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
580586
}
581587
return this._cssType;
582588
}
589+
set cssType(type: string) {
590+
this._cssType = type.toLowerCase();
591+
}
583592

584593
get isLayoutRequired(): boolean {
585594
return true;

‎tns-core-modules/ui/core/view/view.d.ts‎

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,22 @@ export * from "../../styling/style-properties";
1313

1414
export function PseudoClassHandler(...pseudoClasses: string[]): MethodDecorator;
1515

16+
/**
17+
* Specifies the type name for the instances of this View class,
18+
* that is used when matching CSS type selectors.
19+
*
20+
* Usage:
21+
* ```
22+
* @CSSType("Button")
23+
* class Button extends View {
24+
* }
25+
* ```
26+
*
27+
* Internally the decorator set `Button.prototype.cssType = "Button"`.
28+
* @param type The type name, e. g. "Button", "Label", etc.
29+
*/
30+
export function CSSType(type: string): ClassDecorator;
31+
1632
/**
1733
* Denotes a length number that is in device independent pixel units.
1834
*/
@@ -339,8 +355,8 @@ export abstract class View extends ViewBase {
339355
/**
340356
* This is called to find out how big a view should be. The parent supplies constraint information in the width and height parameters.
341357
* The actual measurement work of a view is performed in onMeasure(int, int), called by this method. Therefore, only onMeasure(int, int) can and must be overridden by subclasses.
342-
* @param widthMeasureSpec Horizontal space requirements as imposed by the parent
343-
* @param heightMeasureSpec Vertical space requirements as imposed by the parent
358+
* @param widthMeasureSpec Horizontal space requirements as imposed by the parent
359+
* @param heightMeasureSpec Vertical space requirements as imposed by the parent
344360
*/
345361
public measure(widthMeasureSpec: number, heightMeasureSpec: number): void;
346362

@@ -370,8 +386,8 @@ export abstract class View extends ViewBase {
370386
/**
371387
* Measure the view and its content to determine the measured width and the measured height. This method is invoked by measure(int, int) and should be overriden by subclasses to provide accurate and efficient measurement of their contents.
372388
* When overriding this method, you must call setMeasuredDimension(int, int) to store the measured width and height of this view. Failure to do so will trigger an exception, thrown by measure(int, int).
373-
* @param widthMeasureSpec horizontal space requirements as imposed by the parent. The requirements are encoded with View.MeasureSpec.
374-
* @param heightMeasureSpec vertical space requirements as imposed by the parent. The requirements are encoded with View.MeasureSpec.
389+
* @param widthMeasureSpec horizontal space requirements as imposed by the parent. The requirements are encoded with View.MeasureSpec.
390+
* @param heightMeasureSpec vertical space requirements as imposed by the parent. The requirements are encoded with View.MeasureSpec.
375391
*/
376392
public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void;
377393

@@ -380,14 +396,14 @@ export abstract class View extends ViewBase {
380396
* @param left Left position, relative to parent
381397
* @param top Top position, relative to parent
382398
* @param right Right position, relative to parent
383-
* @param bottom Bottom position, relative to parent
399+
* @param bottom Bottom position, relative to parent
384400
*/
385401
public onLayout(left: number, top: number, right: number, bottom: number): void;
386402

387403
/**
388404
* This method must be called by onMeasure(int, int) to store the measured width and measured height. Failing to do so will trigger an exception at measurement time.
389-
* @param measuredWidth The measured width of this view. May be a complex bit mask as defined by MEASURED_SIZE_MASK and MEASURED_STATE_TOO_SMALL.
390-
* @param measuredHeight The measured height of this view. May be a complex bit mask as defined by MEASURED_SIZE_MASK and MEASURED_STATE_TOO_SMALL.
405+
* @param measuredWidth The measured width of this view. May be a complex bit mask as defined by MEASURED_SIZE_MASK and MEASURED_STATE_TOO_SMALL.
406+
* @param measuredHeight The measured height of this view. May be a complex bit mask as defined by MEASURED_SIZE_MASK and MEASURED_STATE_TOO_SMALL.
391407
*/
392408
public setMeasuredDimension(measuredWidth: number, measuredHeight: number): void;
393409

@@ -397,16 +413,16 @@ export abstract class View extends ViewBase {
397413
* @param left Left position, relative to parent
398414
* @param top Top position, relative to parent
399415
* @param right Right position, relative to parent
400-
* @param bottom Bottom position, relative to parent
416+
* @param bottom Bottom position, relative to parent
401417
*/
402418
public layoutNativeView(left: number, top: number, right: number, bottom: number): void;
403419

404420
/**
405421
* Measure a child by taking into account its margins and a given measureSpecs.
406422
* @param parent This parameter is not used. You can pass null.
407423
* @param child The view to be measured.
408-
* @param measuredWidth The measured width that the parent layout specifies for this view.
409-
* @param measuredHeight The measured height that the parent layout specifies for this view.
424+
* @param measuredWidth The measured width that the parent layout specifies for this view.
425+
* @param measuredHeight The measured height that the parent layout specifies for this view.
410426
*/
411427
public static measureChild(parent: View, child: View, widthMeasureSpec: number, heightMeasureSpec: number): { measuredWidth: number; measuredHeight: number };
412428

@@ -416,7 +432,7 @@ export abstract class View extends ViewBase {
416432
* @param left Left position, relative to parent
417433
* @param top Top position, relative to parent
418434
* @param right Right position, relative to parent
419-
* @param bottom Bottom position, relative to parent
435+
* @param bottom Bottom position, relative to parent
420436
*/
421437
public static layoutChild(parent: View, child: View, left: number, top: number, right: number, bottom: number): void;
422438

@@ -787,4 +803,4 @@ export namespace ios {
787803
export class UILayoutViewController {
788804
public static initWithOwner(owner: WeakRef<View>): UILayoutViewController;
789805
}
790-
}
806+
}

‎tns-core-modules/ui/date-picker/date-picker-common.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import { DatePicker as DatePickerDefinition } from ".";
2-
import { View, Property } from "../core/view";
2+
import { View, Property, CSSType } from "../core/view";
33

44
export * from "../core/view";
55

66
const defaultDate = new Date();
77
const dateComparer = (x: Date, y: Date): boolean => (x <= y && x >= y);
88

9+
@CSSType("DatePicker")
910
export class DatePickerBase extends View implements DatePickerDefinition {
1011
public year: number;
1112
public month: number;

‎tns-core-modules/ui/frame/frame-common.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Frame as FrameDefinition, NavigationEntry, BackstackEntry, NavigationTr
33
import { Page } from "../page";
44

55
// Types.
6-
import { View, CustomLayoutView, isIOS, isAndroid, traceEnabled, traceWrite, traceCategories, EventData, Property } from "../core/view";
6+
import { View, CustomLayoutView, isIOS, isAndroid, traceEnabled, traceWrite, traceCategories, EventData, Property, CSSType } from "../core/view";
77
import { resolveFileName } from "../../file-system/file-name-resolver";
88
import { knownFolders, path } from "../../file-system";
99
import { parse, createViewFromEntry } from "../builder";
@@ -35,6 +35,7 @@ export interface NavigationContext {
3535
isBackNavigation: boolean;
3636
}
3737

38+
@CSSType("Frame")
3839
export class FrameBase extends CustomLayoutView implements FrameDefinition {
3940
public static androidOptionSelectedEvent = "optionSelected";
4041

‎tns-core-modules/ui/html-view/html-view-common.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import { HtmlView as HtmlViewDefinition } from ".";
2-
import { View, Property } from "../core/view";
2+
import { View, Property, CSSType } from "../core/view";
33

44
export * from "../core/view";
55

6+
@CSSType("HtmlView")
67
export class HtmlViewBase extends View implements HtmlViewDefinition {
78
public html: string;
89
}

‎tns-core-modules/ui/image/image-common.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import { Image as ImageDefinition, Stretch } from ".";
2-
import { View, Property, InheritedCssProperty, Length, Style, Color, isIOS, booleanConverter } from "../core/view";
2+
import { View, Property, InheritedCssProperty, Length, Style, Color, isIOS, booleanConverter, CSSType } from "../core/view";
33
import { ImageAsset } from "../../image-asset";
44
import { ImageSource, fromAsset, fromNativeSource, fromUrl } from "../../image-source";
55
import { isDataURI, isFileOrResourcePath, RESOURCE_PREFIX } from "../../utils/utils";
66

77
export * from "../core/view";
88
export { ImageSource, ImageAsset, fromAsset, fromNativeSource, fromUrl, isDataURI, isFileOrResourcePath, RESOURCE_PREFIX };
99

10+
@CSSType("Image")
1011
export abstract class ImageBase extends View implements ImageDefinition {
1112
public imageSource: ImageSource;
1213
public src: string | ImageSource;

0 commit comments

Comments
 (0)