FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

feat(webpack): Mark the CSS type for stylable views explicitly · NativeScript/NativeScript@95f609a · GitHub

/ NativeScript Public

Commit 95f609a

Browse files
PanayotCankov
authored and
sis0k0
committed
feat(webpack): Mark the CSS type for stylable views explicitly
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 CHANGE: 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 5bae124 commit 95f609a

36 files changed

Lines changed: 110 additions & 47 deletions

‎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");
@@ -577,6 +583,9 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
577583
}
578584
return this._cssType;
579585
}
586+
set cssType(type: string) {
587+
this._cssType = type.toLowerCase();
588+
}
580589

581590
get isLayoutRequired(): boolean {
582591
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
*/
@@ -329,8 +345,8 @@ export abstract class View extends ViewBase {
329345
/**
330346
* This is called to find out how big a view should be. The parent supplies constraint information in the width and height parameters.
331347
* 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.
332-
* @param widthMeasureSpec Horizontal space requirements as imposed by the parent
333-
* @param heightMeasureSpec Vertical space requirements as imposed by the parent
348+
* @param widthMeasureSpec Horizontal space requirements as imposed by the parent
349+
* @param heightMeasureSpec Vertical space requirements as imposed by the parent
334350
*/
335351
public measure(widthMeasureSpec: number, heightMeasureSpec: number): void;
336352

@@ -360,8 +376,8 @@ export abstract class View extends ViewBase {
360376
/**
361377
* 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.
362378
* 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).
363-
* @param widthMeasureSpec horizontal space requirements as imposed by the parent. The requirements are encoded with View.MeasureSpec.
364-
* @param heightMeasureSpec vertical space requirements as imposed by the parent. The requirements are encoded with View.MeasureSpec.
379+
* @param widthMeasureSpec horizontal space requirements as imposed by the parent. The requirements are encoded with View.MeasureSpec.
380+
* @param heightMeasureSpec vertical space requirements as imposed by the parent. The requirements are encoded with View.MeasureSpec.
365381
*/
366382
public onMeasure(widthMeasureSpec: number, heightMeasureSpec: number): void;
367383

@@ -370,14 +386,14 @@ export abstract class View extends ViewBase {
370386
* @param left Left position, relative to parent
371387
* @param top Top position, relative to parent
372388
* @param right Right position, relative to parent
373-
* @param bottom Bottom position, relative to parent
389+
* @param bottom Bottom position, relative to parent
374390
*/
375391
public onLayout(left: number, top: number, right: number, bottom: number): void;
376392

377393
/**
378394
* 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.
379-
* @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.
380-
* @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.
395+
* @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.
396+
* @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.
381397
*/
382398
public setMeasuredDimension(measuredWidth: number, measuredHeight: number): void;
383399

@@ -387,16 +403,16 @@ export abstract class View extends ViewBase {
387403
* @param left Left position, relative to parent
388404
* @param top Top position, relative to parent
389405
* @param right Right position, relative to parent
390-
* @param bottom Bottom position, relative to parent
406+
* @param bottom Bottom position, relative to parent
391407
*/
392408
public layoutNativeView(left: number, top: number, right: number, bottom: number): void;
393409

394410
/**
395411
* Measure a child by taking into account its margins and a given measureSpecs.
396412
* @param parent This parameter is not used. You can pass null.
397413
* @param child The view to be measured.
398-
* @param measuredWidth The measured width that the parent layout specifies for this view.
399-
* @param measuredHeight The measured height that the parent layout specifies for this view.
414+
* @param measuredWidth The measured width that the parent layout specifies for this view.
415+
* @param measuredHeight The measured height that the parent layout specifies for this view.
400416
*/
401417
public static measureChild(parent: View, child: View, widthMeasureSpec: number, heightMeasureSpec: number): { measuredWidth: number; measuredHeight: number };
402418

@@ -406,7 +422,7 @@ export abstract class View extends ViewBase {
406422
* @param left Left position, relative to parent
407423
* @param top Top position, relative to parent
408424
* @param right Right position, relative to parent
409-
* @param bottom Bottom position, relative to parent
425+
* @param bottom Bottom position, relative to parent
410426
*/
411427
public static layoutChild(parent: View, child: View, left: number, top: number, right: number, bottom: number): void;
412428

@@ -775,4 +791,4 @@ export namespace ios {
775791
export class UILayoutViewController {
776792
public static initWithOwner(owner: WeakRef<View>): UILayoutViewController;
777793
}
778-
}
794+
}

‎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: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -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, Style, Color, isIOS, booleanConverter } from "../core/view";
2+
import { View, Property, InheritedCssProperty, 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)
Back | FazBrowse Home | New Git URL