refactor: circular deps part 10

apps/automated/src/ui/frame/frame-tests.android.ts

@@ -1,7 +1,5 @@
-import { Frame } from '@nativescript/core/ui/frame';
 import * as TKUnit from '../../tk-unit';
-import { unsetValue } from '@nativescript/core/ui/core/view';
+import { PercentLength, unsetValue, Frame } from '@nativescript/core';
-import { PercentLength } from '@nativescript/core/ui/styling/style-properties';
 export * from './frame-tests-common';
 
 export function test_percent_width_and_height_set_to_page_support() {

packages/core/core-types/animation-types.ts

@@ -1,5 +1,3 @@
-// Types shared between core-types and animation-interfaces
-
 /**
  * Defines a custom animation timing curve by using the cubic-bezier function.
  * Possible values are numeric values from 0 to 1

packages/core/css-mediaquery/index.ts

@@ -7,7 +7,7 @@ See the accompanying LICENSE file for terms.
 // https://github.com/ericf/css-mediaquery
 
 import { Trace } from '../trace';
-import { Length } from '../ui/styling/style-properties';
+import { Length } from '../ui/styling/length-shared';
 
 // -----------------------------------------------------------------------------
 

packages/core/ui/action-bar/action-bar-common.ts

@@ -6,7 +6,8 @@ import { View, CSSType } from '../core/view';
 import { ViewBase, booleanConverter } from '../core/view-base';
 import { Trace } from '../../trace';
 import { ShorthandProperty, CssProperty, Property, unsetValue } from '../core/properties';
-import { Length, horizontalAlignmentProperty, verticalAlignmentProperty } from '../styling/style-properties';
+import { horizontalAlignmentProperty, verticalAlignmentProperty } from '../styling/style-properties';
+import { Length } from '../styling/length-shared';
 import { Style } from '../styling/style';
 
 @CSSType('ActionBar')

packages/core/ui/animation/animation-common.ts

@@ -1,13 +1,12 @@
 // Types.
 import { Point3D } from './animation-types';
-import { AnimationDefinition, AnimationPromise as AnimationPromiseDefinition, Pair, PropertyAnimation } from './animation-interfaces';
+import { AnimationDefinition, AnimationPromise as AnimationPromiseDefinition, Pair } from './animation-shared';
-
+import { PropertyAnimation } from './animation-shared';
-// Requires.
 import { Color } from '../../color';
 import { Trace } from '../../trace';
-import { PercentLength } from '../styling/style-properties';
+import { PercentLength } from '../styling/length-shared';
 
-export * from './animation-interfaces';
+export * from './animation-shared';
 
 export namespace Properties {
 	export const opacity = 'opacity';

packages/core/ui/animation/animation-shared.ts

@@ -1,7 +1,9 @@
-// Types
+// Shared animation types/interfaces for animation and styling modules.
-import { View } from '../core/view';
+// Only put platform-agnostic types/interfaces here.
-import { CoreTypes } from '../../core-types';
+
-import { Color } from '../../color';
+import type { View } from '../core/view';
+import type { CoreTypes } from '../../core-types';
+import type { Color } from '../../color';
 
 export type Transformation = {
 	property: TransformationType;
@@ -24,9 +26,36 @@ export type TransformFunctionsInfo = {
 	scale: Pair;
 };
 
-export interface AnimationPromise extends Promise<any>, Cancelable {
+export interface Pair {
-	then(...args): AnimationPromise;
+	x: number;
-	catch(...args): AnimationPromise;
+	y: number;
+}
+
+export interface Cancelable {
+	cancel(): void;
+}
+
+export type AnimationPromise = Promise<void> & Cancelable;
+
+export interface AnimationDefinition {
+	target?: View;
+	opacity?: number;
+	backgroundColor?: Color | any;
+	translate?: Pair | { x: number; y: number };
+	scale?: Pair | { x: number; y: number };
+	height?: CoreTypes.PercentLengthType | string | any;
+	width?: CoreTypes.PercentLengthType | string | any;
+	rotate?: number | Point3D | { x: number; y: number; z: number };
+	duration?: number;
+	delay?: number;
+	iterations?: number;
+	curve?: any;
+}
+
+export interface Point3D {
+	x: number;
+	y: number;
+	z: number;
 }
 
 export interface Pair {
@@ -53,21 +82,6 @@ export interface PropertyAnimationInfo extends PropertyAnimation {
 	_originalValue?: any;
 }
 
-export interface AnimationDefinition {
-	target?: View;
-	opacity?: number;
-	backgroundColor?: Color;
-	translate?: Pair;
-	scale?: Pair;
-	height?: CoreTypes.PercentLengthType | string;
-	width?: CoreTypes.PercentLengthType | string;
-	rotate?: number | Point3D;
-	duration?: number;
-	delay?: number;
-	iterations?: number;
-	curve?: any;
-}
-
 export interface AnimationDefinitionInternal extends AnimationDefinition {
 	valueSource?: 'animation' | 'keyframe';
 }

packages/core/ui/animation/animation-types.ts

@@ -1,50 +1,2 @@
 // Shared types/interfaces for animation
-import { View } from '../core/view';
+export * from './animation-shared';
-
-export interface AnimationDefinition {
-	target?: View;
-	opacity?: number;
-	backgroundColor?: any;
-	translate?: { x: number; y: number };
-	scale?: { x: number; y: number };
-	height?: any;
-	width?: any;
-	rotate?: number | { x: number; y: number; z: number };
-	duration?: number;
-	delay?: number;
-	iterations?: number;
-	curve?: any;
-}
-
-// Types from index.d.ts that need to be exported for consumers
-export interface Point3D {
-	x: number;
-	y: number;
-	z: number;
-}
-
-export interface Pair {
-	x: number;
-	y: number;
-}
-
-export type TransformationType = 'rotate' | 'rotate3d' | 'rotateX' | 'rotateY' | 'translate' | 'translate3d' | 'translateX' | 'translateY' | 'scale' | 'scale3d' | 'scaleX' | 'scaleY';
-
-export type TransformationValue = Point3D | Pair | number;
-
-export type Transformation = {
-	property: TransformationType;
-	value: TransformationValue;
-};
-
-export type TransformFunctionsInfo = {
-	translate: Pair;
-	rotate: Point3D;
-	scale: Pair;
-};
-
-export interface Cancelable {
-	cancel(): void;
-}
-
-export type AnimationPromise = Promise<void> & Cancelable;

packages/core/ui/animation/index.android.ts

@@ -3,7 +3,8 @@ import { View } from '../core/view';
 import { CubicBezierAnimationCurve } from '../../core-types/animation-types';
 import { Color } from '../../color';
 import { Trace } from '../../trace';
-import { opacityProperty, backgroundColorProperty, rotateProperty, rotateXProperty, rotateYProperty, translateXProperty, translateYProperty, scaleXProperty, scaleYProperty, heightProperty, widthProperty, PercentLength } from '../styling/style-properties';
+import { opacityProperty, backgroundColorProperty, rotateProperty, rotateXProperty, rotateYProperty, translateXProperty, translateYProperty, scaleXProperty, scaleYProperty, heightProperty, widthProperty } from '../styling/style-properties';
+import { PercentLength } from '../styling/length-shared';
 import { layout } from '../../utils';
 import { SDK_VERSION } from '../../utils/constants';
 import { Device, Screen } from '../../platform';

packages/core/ui/animation/index.ios.ts

@@ -3,7 +3,8 @@ import { AnimationDefinitionInternal, AnimationPromise, IOSView, PropertyAnimati
 import { View } from '../core/view';
 import { CubicBezierAnimationCurve } from '../../core-types/animation-types';
 import { Trace } from '../../trace';
-import { opacityProperty, backgroundColorProperty, rotateProperty, rotateXProperty, rotateYProperty, translateXProperty, translateYProperty, scaleXProperty, scaleYProperty, heightProperty, widthProperty, PercentLength } from '../styling/style-properties';
+import { opacityProperty, backgroundColorProperty, rotateProperty, rotateXProperty, rotateYProperty, translateXProperty, translateYProperty, scaleXProperty, scaleYProperty, heightProperty, widthProperty } from '../styling/style-properties';
+import { PercentLength } from '../styling/length-shared';
 import { ios as iosBackground } from '../styling/background';
 import { ios as iosViewUtils, NativeScriptUIView } from '../utils';
 

packages/core/ui/button/index.android.ts

@@ -1,6 +1,7 @@
 import { ButtonBase } from './button-common';
 import { PseudoClassHandler } from '../core/view';
-import { paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, Length, zIndexProperty, minWidthProperty, minHeightProperty } from '../styling/style-properties';
+import { paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, zIndexProperty, minWidthProperty, minHeightProperty } from '../styling/style-properties';
+import { Length } from '../styling/length-shared';
 import { textAlignmentProperty } from '../text-base';
 import { CoreTypes } from '../../core-types';
 import { profile } from '../../profiling';

packages/core/ui/core/view/index.android.ts

@@ -2,7 +2,8 @@ import type { Point, Position } from './view-interfaces';
 import type { GestureTypes, GestureEventData } from '../../gestures';
 
 import { ViewCommon, isEnabledProperty, originXProperty, originYProperty, isUserInteractionEnabledProperty, testIDProperty, AndroidHelper } from './view-common';
-import { paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, Length } from '../../styling/style-properties';
+import { paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty } from '../../styling/style-properties';
+import { Length } from '../../styling/length-shared';
 import { layout } from '../../../utils';
 import { Trace } from '../../../trace';
 import { ShowModalOptions, hiddenProperty } from '../view-base';

packages/core/ui/core/view/view-common.ts

@@ -11,7 +11,7 @@ import { EventData } from '../../../data/observable';
 import { ViewHelper } from './view-helper';
 import { setupAccessibleView } from '../../../application';
 
-import { PercentLength } from '../../styling/style-properties';
+import { PercentLength } from '../../styling/length-shared';
 
 import { observe as gestureObserve, GesturesObserver, GestureTypes, fromString as gestureFromString, toString as gestureToString, TouchManager, TouchAnimationOptions, VisionHoverOptions } from '../../gestures';
 import type { GestureEventData } from '../../gestures/gestures-types';

packages/core/ui/gestures/touch-manager.ts

@@ -4,7 +4,7 @@
  */
 import { GestureEventData, GestureEventDataWithState, TouchGestureEventData } from './gestures-types';
 import { Animation } from '../animation';
-import { AnimationDefinition } from '../animation/animation-interfaces';
+import { AnimationDefinition } from '../animation/animation-shared';
 import type { View } from '../core/view';
 import { isObject, isFunction } from '../../utils/types';
 import { GestureEvents, GestureStateTypes, GestureTypes } from './gestures-common';

packages/core/ui/image/image-common.ts

@@ -7,7 +7,7 @@ import { ImageSource, iosSymbolScaleType } from '../../image-source';
 import { isDataURI, isFontIconURI, isFileOrResourcePath, RESOURCE_PREFIX, SYSTEM_PREFIX } from '../../utils';
 import { Color } from '../../color';
 import { Style } from '../styling/style';
-import { Length } from '../styling/style-properties';
+import { Length } from '../styling/length-shared';
 import { Property, InheritedCssProperty } from '../core/properties';
 import { Trace } from '../../trace';
 import { ImageSymbolEffect, ImageSymbolEffects } from './symbol-effects';

packages/core/ui/image/index.android.ts

@@ -3,7 +3,7 @@ import { isDataURI, isFontIconURI, isFileOrResourcePath, RESOURCE_PREFIX } from
 import { Color } from '../../color';
 import { ImageSource } from '../../image-source';
 import { ImageAsset } from '../../image-asset';
-import { Length } from '../styling/style-properties';
+import { Length } from '../styling/length-shared';
 import { knownFolders } from '../../file-system';
 
 import { Screen } from '../../platform';

packages/core/ui/index.ts

@@ -68,6 +68,7 @@ export { Font, FontStyle, FontWeight, FontVariationSettings } from './styling/fo
 export { Style } from './styling/style';
 export type { CommonLayoutParams } from './styling/style';
 export * from './styling/style-properties';
+export * from './styling/length-shared';
 export { CssAnimationParser, parseKeyframeDeclarations } from './styling/css-animation-parser';
 export { CSSHelper } from './styling/css-selector';
 

packages/core/ui/label/index.ios.ts

@@ -1,6 +1,6 @@
 import { Label as LabelDefinition } from '.';
 import { Background } from '../styling/background';
-import { Length, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty } from '../styling/style-properties';
+import { borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty } from '../styling/style-properties';
 import { booleanConverter } from '../core/view-base';
 import { View, CSSType } from '../core/view';
 import { CoreTypes } from '../../core-types';

packages/core/ui/layouts/absolute-layout/absolute-layout-common.ts

@@ -3,7 +3,7 @@ import { LayoutBase } from '../layout-base';
 import { CoreTypes } from '../../../core-types';
 import { View, CSSType } from '../../core/view';
 import { Property } from '../../core/properties';
-import { Length } from '../../styling/style-properties';
+import { Length } from '../../styling/length-shared';
 
 export * from '../layout-base';
 

packages/core/ui/layouts/absolute-layout/index.android.ts

@@ -1,6 +1,6 @@
 import { AbsoluteLayoutBase, leftProperty, topProperty } from './absolute-layout-common';
 import { View } from '../../core/view';
-import { Length } from '../../styling/style-properties';
+import { Length } from '../../styling/length-shared';
 
 export * from './absolute-layout-common';
 

packages/core/ui/layouts/absolute-layout/index.d.ts

@@ -1,7 +1,7 @@
 import { LayoutBase } from '../layout-base';
 import { Property } from '../../core/properties';
 import { View } from '../../core/view';
-import { Length } from '../../styling/style-properties';
+import { Length } from '../../styling/length-shared';
 import { CoreTypes } from '../../../core-types';
 
 /**

packages/core/ui/layouts/absolute-layout/index.ios.ts

@@ -1,7 +1,6 @@
 import { AbsoluteLayoutBase } from './absolute-layout-common';
 import { CoreTypes } from '../../../core-types';
 import { View } from '../../core/view';
-import { Length } from '../../styling/style-properties';
 import { layout } from '../../../utils';
 
 export * from './absolute-layout-common';

packages/core/ui/layouts/flexbox-layout/index.android.ts

@@ -1,7 +1,7 @@
 import { FlexDirection, FlexWrap, JustifyContent, AlignItems, AlignContent, FlexboxLayoutBase, orderProperty, Order, flexGrowProperty, FlexGrow, flexShrinkProperty, FlexShrink, flexWrapBeforeProperty, FlexWrapBefore, alignSelfProperty, AlignSelf, flexDirectionProperty, flexWrapProperty, justifyContentProperty, alignItemsProperty, alignContentProperty } from './flexbox-layout-common';
 import { CoreTypes } from '../../../core-types';
 import { View } from '../../core/view';
-import { Length } from '../../styling/style-properties';
+import { Length } from '../../styling/length-shared';
 
 export * from './flexbox-layout-common';
 

packages/core/ui/layouts/layout-base.android.ts

@@ -1,5 +1,6 @@
 import { LayoutBaseCommon, clipToBoundsProperty, isPassThroughParentEnabledProperty } from './layout-base-common';
-import { Length, paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty } from '../styling/style-properties';
+import { paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty } from '../styling/style-properties';
+import { Length } from '../styling/length-shared';
 import { CoreTypes } from '../../core-types';
 
 export * from './layout-base-common';

packages/core/ui/layouts/wrap-layout/index.android.ts

@@ -1,6 +1,6 @@
 import { WrapLayoutBase, orientationProperty, itemWidthProperty, itemHeightProperty } from './wrap-layout-common';
 import { CoreTypes } from '../../../core-types';
-import { Length } from '../../styling/style-properties';
+import { Length } from '../../styling/length-shared';
 
 export * from './wrap-layout-common';
 

packages/core/ui/layouts/wrap-layout/index.d.ts

@@ -1,5 +1,5 @@
 import { LayoutBase } from '../layout-base';
-import { Length } from '../../styling/style-properties';
+import { Length } from '../../styling/length-shared';
 import { Property } from '../../core/properties';
 import { CoreTypes } from '../../../core-types';
 

packages/core/ui/layouts/wrap-layout/wrap-layout-common.ts

@@ -2,7 +2,7 @@
 import { LayoutBase } from '../layout-base';
 import { CSSType } from '../../core/view';
 import { Property, makeValidator, makeParser } from '../../core/properties';
-import { Length } from '../../styling/style-properties';
+import { Length } from '../../styling/length-shared';
 import { CoreTypes } from '../../../core-types';
 
 export * from '../layout-base';

packages/core/ui/list-view/index.ios.ts

@@ -2,7 +2,7 @@ import { ItemEventData } from '.';
 import { ListViewBase, separatorColorProperty, itemTemplatesProperty, iosEstimatedRowHeightProperty } from './list-view-common';
 import { CoreTypes } from '../../core-types';
 import { View, KeyedTemplate } from '../core/view';
-import { Length } from '../styling/style-properties';
+import { Length } from '../styling/length-shared';
 import { Observable, EventData } from '../../data/observable';
 import { Color } from '../../color';
 import { layout } from '../../utils';

packages/core/ui/list-view/list-view-common.ts

@@ -1,7 +1,7 @@
 import { ListView as ListViewDefinition, ItemsSource, ItemEventData, TemplatedItemsView } from '.';
 import { View, ContainerView, Template, KeyedTemplate, CSSType } from '../core/view';
 import { Property, CoercibleProperty, CssProperty } from '../core/properties';
-import { Length } from '../styling/style-properties';
+import { Length } from '../styling/length-shared';
 import { Style } from '../styling/style';
 import { Color } from '../../color';
 import { Builder } from '../builder';

packages/core/ui/styling/css-shadow.spec.ts

@@ -1,6 +1,6 @@
 import { parseCSSShadow } from './css-shadow';
 import { CoreTypes } from '../../core-types';
-import { Length } from './style-properties';
+import { Length } from './length-shared';
 import { Color } from '../../color';
 
 describe('css-shadow', () => {

packages/core/ui/styling/css-shadow.ts

@@ -1,5 +1,6 @@
 import { Color } from '../../color';
 import { CoreTypes } from '../../core-types';
+import { Length } from './length-shared';
 import { parseCSSShorthand } from './css-utils';
 
 export interface ShadowCSSValues {

packages/core/ui/styling/css-stroke.spec.ts

@@ -1,5 +1,5 @@
 import { parseCSSStroke } from './css-stroke';
-import { Length } from './style-properties';
+import { Length } from './length-shared';
 import { Color } from '../../color';
 
 describe('css-text-stroke', () => {

packages/core/ui/styling/css-stroke.ts

@@ -1,6 +1,7 @@
 import { CoreTypes } from '../../core-types';
 import { Color } from '../../color';
 import { parseCSSShorthand } from './css-utils';
+import { Length } from './length-shared';
 
 export interface StrokeCSSValues {
 	width: CoreTypes.LengthType;

packages/core/ui/styling/css-utils.ts

@@ -1,6 +1,6 @@
 import { Trace } from '../../trace';
 import { CoreTypes } from '../../core-types';
-import { Length } from './style-properties';
+import { Length } from './length-shared';
 
 export function cleanupImportantFlags(value: unknown, propertyName: string) {
 	if (typeof value !== 'string') {

packages/core/ui/styling/length-shared.ts

@@ -0,0 +1,180 @@
+// Shared Length, FixedLength, and PercentLength helpers for styling modules.
+// Only put platform-agnostic logic here.
+
+import { CoreTypes } from '../../core-types';
+import { layout } from '../../utils';
+import { isCssWideKeyword } from '../core/properties';
+
+function equalsCommon(a: CoreTypes.LengthType, b: CoreTypes.LengthType): boolean;
+function equalsCommon(a: CoreTypes.PercentLengthType, b: CoreTypes.PercentLengthType): boolean;
+function equalsCommon(a: CoreTypes.PercentLengthType, b: CoreTypes.PercentLengthType): boolean {
+	if (a == 'auto' || isCssWideKeyword(a)) {
+		return b == 'auto' || isCssWideKeyword(b);
+	}
+
+	if (b == 'auto' || isCssWideKeyword(b)) {
+		return false;
+	}
+
+	if (typeof a === 'number') {
+		if (typeof b === 'number') {
+			return a == b;
+		}
+		if (!b) {
+			return false;
+		}
+		return b.unit == 'dip' && a == b.value;
+	}
+
+	if (typeof b === 'number') {
+		return a ? a.unit == 'dip' && a.value == b : false;
+	}
+	if (!a || !b) {
+		return false;
+	}
+	return a.value == b.value && a.unit == b.unit;
+}
+
+function convertToStringCommon(length: CoreTypes.LengthType | CoreTypes.PercentLengthType): string {
+	if (length == 'auto' || isCssWideKeyword(length)) {
+		return 'auto';
+	}
+
+	if (typeof length === 'number') {
+		return length.toString();
+	}
+
+	let val = length.value;
+	if (length.unit === '%') {
+		val *= 100;
+	}
+
+	return val + length.unit;
+}
+
+function toDevicePixelsCommon(length: CoreTypes.PercentLengthType, auto: number = Number.NaN, parentAvailableWidth: number = Number.NaN): number {
+	if (length == 'auto' || isCssWideKeyword(length)) {
+		return auto;
+	}
+	if (typeof length === 'number') {
+		return layout.round(layout.toDevicePixels(length));
+	}
+	if (!length) {
+		return auto;
+	}
+	switch (length.unit) {
+		case 'px':
+			return layout.round(length.value);
+		case '%':
+			return layout.round(parentAvailableWidth * length.value);
+		case 'dip':
+		default:
+			return layout.round(layout.toDevicePixels(length.value));
+	}
+}
+
+export namespace PercentLength {
+	export function parse(fromValue: string | CoreTypes.LengthType): CoreTypes.PercentLengthType {
+		if (fromValue == 'auto') {
+			return 'auto';
+		}
+
+		if (typeof fromValue === 'string') {
+			let stringValue = fromValue.trim();
+			const percentIndex = stringValue.indexOf('%');
+			if (percentIndex !== -1) {
+				let value: CoreTypes.percent;
+				// if only % or % is not last we treat it as invalid value.
+				if (percentIndex !== stringValue.length - 1 || percentIndex === 0) {
+					value = Number.NaN;
+				} else {
+					// Normalize result to values between -1 and 1
+					value = parseFloat(stringValue.substring(0, stringValue.length - 1).trim()) / 100;
+				}
+
+				if (isNaN(value) || !isFinite(value)) {
+					throw new Error(`Invalid value: ${fromValue}`);
+				}
+
+				return { unit: '%', value };
+			} else if (stringValue.indexOf('px') !== -1) {
+				stringValue = stringValue.replace('px', '').trim();
+				const value: CoreTypes.px = parseFloat(stringValue);
+				if (isNaN(value) || !isFinite(value)) {
+					throw new Error(`Invalid value: ${fromValue}`);
+				}
+
+				return { unit: 'px', value };
+			} else {
+				const value: CoreTypes.dip = parseFloat(stringValue);
+				if (isNaN(value) || !isFinite(value)) {
+					throw new Error(`Invalid value: ${fromValue}`);
+				}
+
+				return value;
+			}
+		} else {
+			return fromValue;
+		}
+	}
+
+	export const equals: {
+		(a: CoreTypes.PercentLengthType, b: CoreTypes.PercentLengthType): boolean;
+	} = equalsCommon;
+	export const toDevicePixels: {
+		(length: CoreTypes.PercentLengthType, auto: number, parentAvailableWidth: number): number;
+	} = toDevicePixelsCommon;
+	export const convertToString: {
+		(length: CoreTypes.PercentLengthType): string;
+	} = convertToStringCommon;
+}
+
+export namespace FixedLength {
+	export function parse(fromValue: string | CoreTypes.FixedLengthType): CoreTypes.FixedLengthType {
+		if (typeof fromValue === 'string') {
+			let stringValue = fromValue.trim();
+			if (stringValue.indexOf('px') !== -1) {
+				stringValue = stringValue.replace('px', '').trim();
+				const value: CoreTypes.px = parseFloat(stringValue);
+				if (isNaN(value) || !isFinite(value)) {
+					throw new Error(`Invalid value: ${stringValue}`);
+				}
+
+				return { unit: 'px', value };
+			} else {
+				const value: CoreTypes.dip = parseFloat(stringValue);
+				if (isNaN(value) || !isFinite(value)) {
+					throw new Error(`Invalid value: ${stringValue}`);
+				}
+
+				return value;
+			}
+		} else {
+			return fromValue;
+		}
+	}
+	export const equals: { (a: CoreTypes.FixedLengthType, b: CoreTypes.FixedLengthType): boolean } = equalsCommon;
+	export const toDevicePixels: {
+		(length: CoreTypes.FixedLengthType): number;
+	} = toDevicePixelsCommon;
+	export const convertToString: {
+		(length: CoreTypes.FixedLengthType): string;
+	} = convertToStringCommon;
+}
+
+export namespace Length {
+	export function parse(fromValue: string | CoreTypes.LengthType): CoreTypes.LengthType {
+		if (fromValue == 'auto') {
+			return 'auto';
+		}
+
+		return FixedLength.parse(fromValue);
+	}
+	export const equals: { (a: CoreTypes.LengthType, b: CoreTypes.LengthType): boolean } = equalsCommon;
+	export const toDevicePixels: {
+		(length: CoreTypes.LengthType, auto?: number): number;
+	} = toDevicePixelsCommon;
+	export const convertToString: {
+		(length: CoreTypes.LengthType): string;
+	} = convertToStringCommon;
+}

packages/core/ui/styling/style-properties.ts

@@ -8,6 +8,7 @@ import { layout } from '../../utils';
 
 import { Trace } from '../../trace';
 import { CoreTypes } from '../../core-types';
+import { Length, FixedLength, PercentLength } from './length-shared';
 
 import { parseBackground } from '../../css/parser';
 import { LinearGradient } from './linear-gradient';
@@ -90,112 +91,6 @@ function toDevicePixelsCommon(length: CoreTypes.PercentLengthType, auto: number
 	}
 }
 
-export namespace PercentLength {
-	export function parse(fromValue: string | CoreTypes.LengthType): CoreTypes.PercentLengthType {
-		if (fromValue == 'auto') {
-			return 'auto';
-		}
-
-		if (typeof fromValue === 'string') {
-			let stringValue = fromValue.trim();
-			const percentIndex = stringValue.indexOf('%');
-			if (percentIndex !== -1) {
-				let value: CoreTypes.percent;
-				// if only % or % is not last we treat it as invalid value.
-				if (percentIndex !== stringValue.length - 1 || percentIndex === 0) {
-					value = Number.NaN;
-				} else {
-					// Normalize result to values between -1 and 1
-					value = parseFloat(stringValue.substring(0, stringValue.length - 1).trim()) / 100;
-				}
-
-				if (isNaN(value) || !isFinite(value)) {
-					throw new Error(`Invalid value: ${fromValue}`);
-				}
-
-				return { unit: '%', value };
-			} else if (stringValue.indexOf('px') !== -1) {
-				stringValue = stringValue.replace('px', '').trim();
-				const value: CoreTypes.px = parseFloat(stringValue);
-				if (isNaN(value) || !isFinite(value)) {
-					throw new Error(`Invalid value: ${fromValue}`);
-				}
-
-				return { unit: 'px', value };
-			} else {
-				const value: CoreTypes.dip = parseFloat(stringValue);
-				if (isNaN(value) || !isFinite(value)) {
-					throw new Error(`Invalid value: ${fromValue}`);
-				}
-
-				return value;
-			}
-		} else {
-			return fromValue;
-		}
-	}
-
-	export const equals: {
-		(a: CoreTypes.PercentLengthType, b: CoreTypes.PercentLengthType): boolean;
-	} = equalsCommon;
-	export const toDevicePixels: {
-		(length: CoreTypes.PercentLengthType, auto: number, parentAvailableWidth: number): number;
-	} = toDevicePixelsCommon;
-	export const convertToString: {
-		(length: CoreTypes.PercentLengthType): string;
-	} = convertToStringCommon;
-}
-
-export namespace FixedLength {
-	export function parse(fromValue: string | CoreTypes.FixedLengthType): CoreTypes.FixedLengthType {
-		if (typeof fromValue === 'string') {
-			let stringValue = fromValue.trim();
-			if (stringValue.indexOf('px') !== -1) {
-				stringValue = stringValue.replace('px', '').trim();
-				const value: CoreTypes.px = parseFloat(stringValue);
-				if (isNaN(value) || !isFinite(value)) {
-					throw new Error(`Invalid value: ${stringValue}`);
-				}
-
-				return { unit: 'px', value };
-			} else {
-				const value: CoreTypes.dip = parseFloat(stringValue);
-				if (isNaN(value) || !isFinite(value)) {
-					throw new Error(`Invalid value: ${stringValue}`);
-				}
-
-				return value;
-			}
-		} else {
-			return fromValue;
-		}
-	}
-	export const equals: { (a: CoreTypes.FixedLengthType, b: CoreTypes.FixedLengthType): boolean } = equalsCommon;
-	export const toDevicePixels: {
-		(length: CoreTypes.FixedLengthType): number;
-	} = toDevicePixelsCommon;
-	export const convertToString: {
-		(length: CoreTypes.FixedLengthType): string;
-	} = convertToStringCommon;
-}
-
-export namespace Length {
-	export function parse(fromValue: string | CoreTypes.LengthType): CoreTypes.LengthType {
-		if (fromValue == 'auto') {
-			return 'auto';
-		}
-
-		return FixedLength.parse(fromValue);
-	}
-	export const equals: { (a: CoreTypes.LengthType, b: CoreTypes.LengthType): boolean } = equalsCommon;
-	export const toDevicePixels: {
-		(length: CoreTypes.LengthType, auto?: number): number;
-	} = toDevicePixelsCommon;
-	export const convertToString: {
-		(length: CoreTypes.LengthType): string;
-	} = convertToStringCommon;
-}
-
 function isNonNegativeFiniteNumber(value: number): boolean {
 	return isFinite(value) && !isNaN(value) && value >= 0;
 }

packages/core/ui/text-base/index.android.ts

@@ -4,10 +4,10 @@ import { ShadowCSSValues } from '../styling/css-shadow';
 
 // Requires
 import { Font } from '../styling/font';
-import { backgroundColorProperty } from '../styling/style-properties';
 import { TextBaseCommon, formattedTextProperty, textAlignmentProperty, textDecorationProperty, textProperty, textTransformProperty, textShadowProperty, textStrokeProperty, letterSpacingProperty, whiteSpaceProperty, lineHeightProperty, resetSymbol } from './text-base-common';
 import { Color } from '../../color';
-import { colorProperty, fontSizeProperty, fontInternalProperty, paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, Length } from '../styling/style-properties';
+import { colorProperty, fontSizeProperty, fontInternalProperty, paddingLeftProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty } from '../styling/style-properties';
+import { Length } from '../styling/length-shared';
 import { StrokeCSSValues } from '../styling/css-stroke';
 import { FormattedString } from './formatted-string';
 import { Span } from './span';

packages/core/ui/text-base/index.ios.ts

@@ -9,7 +9,8 @@ import { TextBaseCommon, textProperty, formattedTextProperty, textAlignmentPrope
 import { Color } from '../../color';
 import { FormattedString } from './formatted-string';
 import { Span } from './span';
-import { colorProperty, fontInternalProperty, fontScaleInternalProperty, Length } from '../styling/style-properties';
+import { colorProperty, fontInternalProperty, fontScaleInternalProperty } from '../styling/style-properties';
+import { Length } from '../styling/length-shared';
 import { StrokeCSSValues } from '../styling/css-stroke';
 import { isString, isNullOrUndefined } from '../../utils/types';
 import { layout } from '../../utils';

packages/core/ui/text-view/index.ios.ts

@@ -5,7 +5,7 @@ import { editableProperty, hintProperty, placeholderColorProperty, _updateCharac
 import { CoreTypes } from '../../core-types';
 import { CSSType } from '../core/view';
 import { Color } from '../../color';
-import { colorProperty, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty, Length } from '../styling/style-properties';
+import { colorProperty, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty, borderLeftWidthProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty } from '../styling/style-properties';
 import { layout, isRealDevice } from '../../utils';
 import { SDK_VERSION } from '../../utils/constants';
 

packages/core/utils/layout-helper/index.android.ts

@@ -46,7 +46,7 @@ export namespace layout {
 			return size + mode;
 		}
 
-		return (size & ~layoutCommon.MODE_MASK) | (mode & layoutCommon.MODE_MASK);
+		return (size & ~MODE_MASK) | (mode & MODE_MASK);
 	}
 
 	export function getDisplayDensity(): number {

packages/core/utils/layout-helper/index.d.ts

@@ -7,13 +7,15 @@ export namespace layout {
 	/**
 	 * Bits that provide the actual measured size.
 	 */
-	export const MEASURED_HEIGHT_STATE_SHIFT: number;
+	export const MODE_SHIFT: number;
-	export const MEASURED_SIZE_MASK: number;
+	export const MODE_MASK: number;
-	export const MEASURED_STATE_MASK: number;
-	export const MEASURED_STATE_TOO_SMALL: number;
 	export const UNSPECIFIED: number;
 	export const EXACTLY: number;
 	export const AT_MOST: number;
+	export const MEASURED_HEIGHT_STATE_SHIFT: number;
+	export const MEASURED_STATE_TOO_SMALL: number;
+	export const MEASURED_STATE_MASK: number;
+	export const MEASURED_SIZE_MASK: number;
 
 	/**
 	 * Gets layout mode from a given specification as string.

packages/core/utils/layout-helper/index.ios.ts

@@ -29,7 +29,7 @@ export namespace layout {
 	}
 
 	export function makeMeasureSpec(size: number, mode: number): number {
-		return (Math.round(Math.max(0, size)) & ~layoutCommon.MODE_MASK) | (mode & layoutCommon.MODE_MASK);
+		return (Math.round(Math.max(0, size)) & ~MODE_MASK) | (mode & MODE_MASK);
 	}
 
 	export function getDisplayDensity(): number {

packages/core/utils/layout-helper/layout-helper-common.ts

@@ -1,16 +1,6 @@
 // cache the MeasureSpec constants here, to prevent extensive marshaling calls to and from Java
 // TODO: While this boosts the performance it is error-prone in case Google changes these constants
-export const MODE_SHIFT = 30;
+import { MODE_MASK, UNSPECIFIED, EXACTLY, AT_MOST } from './layout-helper-shared';
-export const MODE_MASK = 0x3 << MODE_SHIFT;
-
-export const UNSPECIFIED = 0 << MODE_SHIFT;
-export const EXACTLY = 1 << MODE_SHIFT;
-export const AT_MOST = 2 << MODE_SHIFT;
-
-export const MEASURED_HEIGHT_STATE_SHIFT = 0x00000010; /* 16 */
-export const MEASURED_STATE_TOO_SMALL = 0x01000000;
-export const MEASURED_STATE_MASK = 0xff000000;
-export const MEASURED_SIZE_MASK = 0x00ffffff;
 
 export function getMode(mode: number): string {
 	switch (mode) {

packages/core/utils/layout-helper/layout-helper-shared.ts

@@ -0,0 +1,13 @@
+// Shared layout constants and helpers for layout-helper, used by both common and platform-specific files.
+// Only put platform-agnostic logic here.
+
+export const MODE_SHIFT = 30;
+export const MODE_MASK = 0x3 << MODE_SHIFT;
+export const UNSPECIFIED = 0 << MODE_SHIFT;
+export const EXACTLY = 1 << MODE_SHIFT;
+export const AT_MOST = 2 << MODE_SHIFT;
+export const MEASURED_HEIGHT_STATE_SHIFT = 0x00000010;
+export const MEASURED_STATE_TOO_SMALL = 0x01000000;
+export const MEASURED_STATE_MASK = 0xff000000;
+export const MEASURED_SIZE_MASK = 0x00ffffff;
+// Add more shared constants/helpers as needed.