@triniwiz/nativescript-masonkit 1.0.0-alpha.9 → 1.0.0-beta.1

package/common.js

@@ -1,10 +1,37 @@
+var _a, _b, _c;
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/ban-ts-comment */
-import { CSSType, CssProperty, CustomLayoutView, Length as NSLength, ShorthandProperty, Style, View as NSView, getViewById, unsetValue, Property, widthProperty, heightProperty, CoreTypes, Trace, Length as CoreLength, marginLeftProperty, marginRightProperty, marginTopProperty, marginBottomProperty, minWidthProperty, minHeightProperty } from '@nativescript/core';
-import { _forceStyleUpdate, _parseGridTemplates, _setAlignContent, _setColumnGap, _setDisplay, _setFlexDirection, _setGridColumnEnd, _setGridColumnStart, _setGridRowEnd, _setGridRowStart, _setGridTemplateColumns, _setGridTemplateRows, _setHeight, _setJustifyContent, _setMarginBottom, _setMarginLeft, _setMarginRight, _setMarginTop, _setMinHeight, _setMinWidth, _setPaddingBottom, _setPaddingLeft, _setPaddingRight, _setPaddingTop, _setRowGap, _setWidth } from './helpers';
+import { CssProperty, CustomLayoutView, Length as NSLength, ShorthandProperty, Style, View as NSView, getViewById, unsetValue, Property, widthProperty, heightProperty, CoreTypes, Trace, Length as CoreLength, PercentLength as CorePercentLength, marginLeftProperty, marginRightProperty, marginTopProperty, marginBottomProperty, minWidthProperty, minHeightProperty, fontSizeProperty, fontWeightProperty, fontStyleProperty, colorProperty, Color, lineHeightProperty, letterSpacingProperty, textAlignmentProperty, borderLeftWidthProperty, borderTopWidthProperty, borderRightWidthProperty, borderBottomWidthProperty } from '@nativescript/core';
 import { flexDirectionProperty, flexGrowProperty, flexWrapProperty } from '@nativescript/core/ui/layouts/flexbox-layout';
+import { _forceStyleUpdate } from './utils';
 export const native_ = Symbol('[[native]]');
 export const style_ = Symbol('[[style]]');
+export const isTextChild_ = Symbol('[[isTextChild]]');
+export const isText_ = Symbol('[[isText]]');
+export const isMasonView_ = Symbol('[[isMasonView]]');
+export const text_ = Symbol('[[text]]');
+function getViewStyle(view) {
+    const ret = (__ANDROID__ ? view.get() : view.deref());
+    return ret._styleHelper;
+}
+var FrameWork;
+(function (FrameWork) {
+    FrameWork[FrameWork["Core"] = 0] = "Core";
+    FrameWork[FrameWork["Angular"] = 1] = "Angular";
+    FrameWork[FrameWork["Vue"] = 2] = "Vue";
+    FrameWork[FrameWork["React"] = 3] = "React";
+    FrameWork[FrameWork["Svelte"] = 4] = "Svelte";
+    FrameWork[FrameWork["Solid"] = 5] = "Solid";
+})(FrameWork || (FrameWork = {}));
+let frameWork = FrameWork.Core;
+try {
+    global.VUE3_ELEMENT_REF = require('nativescript-vue').ELEMENT_REF;
+    frameWork = FrameWork.Vue;
+}
+catch (e) { }
+if (global.__ngRegisteredViews || typeof Zone !== 'undefined') {
+    frameWork = FrameWork.Angular;
+}
 export const scrollBarWidthProperty = new CssProperty({
     name: 'scrollBarWidth',
     cssName: 'scroll-bar-width',
@@ -17,37 +44,122 @@ function overflowConverter(value) {
             case 0:
                 return 'visible';
             case 1:
-                return 'hidden';
+                return 'clip';
             case 2:
+                return 'hidden';
+            case 3:
                 return 'scroll';
         }
     }
     switch (value) {
         case 'visible':
         case 'hidden':
+        case 'clip':
         case 'scroll':
             return value;
         default:
-            return 'visible';
+            return undefined;
     }
 }
-export const overflowProperty = new CssProperty({
+function masonLengthParse(value) {
+    try {
+        return CoreLength.parse(value);
+    }
+    catch (e) {
+        return undefined;
+    }
+}
+function masonLengthPercentParse(value) {
+    try {
+        return CorePercentLength.parse(value);
+    }
+    catch (e) {
+        return undefined;
+    }
+}
+const filterProperty = new CssProperty({
+    name: 'filter',
+    cssName: 'filter',
+});
+filterProperty.register(Style);
+const borderProperty = new CssProperty({
+    name: 'border',
+    cssName: 'border',
+});
+borderProperty.register(Style);
+const backgroundProperty = new CssProperty({
+    name: 'background',
+    cssName: 'background',
+});
+backgroundProperty.register(Style);
+const overFlow = /^\s*(visible|hidden|clip|scroll|auto)(?:\s+(visible|hidden|clip|scroll|auto))?\s*$/;
+export const overflowProperty = new ShorthandProperty({
     name: 'overflow',
     cssName: 'overflow',
-    defaultValue: 'visible',
-    valueConverter: overflowConverter,
+    getter: function () {
+        if (this.overflowX === this.overflowY) {
+            return this.overflowX;
+        }
+        return `${this.overflowX} ${this.overflowY}`;
+    },
+    converter(value) {
+        const properties = [];
+        if (typeof value === 'string') {
+            const values = value.match(overFlow);
+            const length = values?.length ?? 0;
+            if (length === 0) {
+                return properties;
+            }
+            if (length === 1) {
+                const xy = values[0];
+                properties.push([overflowXProperty, xy]);
+                properties.push([overflowYProperty, xy]);
+            }
+            if (length > 1) {
+                const x = values[0];
+                const y = values[1];
+                properties.push([overflowXProperty, x]);
+                properties.push([overflowYProperty, y]);
+            }
+        }
+        return properties;
+    },
 });
 export const overflowXProperty = new CssProperty({
     name: 'overflowX',
     cssName: 'overflow-x',
     defaultValue: 'visible',
     valueConverter: overflowConverter,
+    valueChanged: (target, oldValue, newValue) => {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            if (newValue) {
+                view.overflowX = newValue;
+            }
+            else {
+                // Revert to old value if newValue is invalid
+                view.view.style.overflowX = oldValue;
+            }
+        }
+    },
 });
 export const overflowYProperty = new CssProperty({
-    name: 'overflow',
+    name: 'overflowY',
     cssName: 'overflow-y',
     defaultValue: 'visible',
     valueConverter: overflowConverter,
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            if (newValue) {
+                view.overflowY = newValue;
+            }
+            else {
+                // Revert to old value if newValue is invalid
+                view.view.style.overflowY = oldValue;
+            }
+        }
+    },
 });
 const paddingProperty = new ShorthandProperty({
     name: 'padding',
@@ -67,15 +179,15 @@ export const paddingLeftProperty = new CssProperty({
     affectsLayout: global.isIOS,
     equalityComparer: CoreLength.equals,
     valueChanged: (target, oldValue, newValue) => {
-        const view = target.viewRef.get();
+        const view = getViewStyle(target.viewRef);
         if (view) {
-            view.effectivePaddingLeft = CoreLength.toDevicePixels(newValue, 0);
+            view.paddingLeft = CoreLength.toDevicePixels(newValue, 0);
         }
         else {
             Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
         }
     },
-    valueConverter: CoreLength.parse,
+    valueConverter: masonLengthParse,
 });
 export const paddingRightProperty = new CssProperty({
     name: 'paddingRight',
@@ -84,15 +196,15 @@ export const paddingRightProperty = new CssProperty({
     affectsLayout: global.isIOS,
     equalityComparer: CoreLength.equals,
     valueChanged: (target, oldValue, newValue) => {
-        const view = target.viewRef.get();
+        const view = getViewStyle(target.viewRef);
         if (view) {
-            view.effectivePaddingRight = CoreLength.toDevicePixels(newValue, 0);
+            view.paddingRight = CoreLength.toDevicePixels(newValue, 0);
         }
         else {
             Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
         }
     },
-    valueConverter: CoreLength.parse,
+    valueConverter: masonLengthParse,
 });
 export const paddingTopProperty = new CssProperty({
     name: 'paddingTop',
@@ -101,15 +213,15 @@ export const paddingTopProperty = new CssProperty({
     affectsLayout: global.isIOS,
     equalityComparer: CoreLength.equals,
     valueChanged: (target, oldValue, newValue) => {
-        const view = target.viewRef.get();
+        const view = getViewStyle(target.viewRef);
         if (view) {
-            view.effectivePaddingTop = CoreLength.toDevicePixels(newValue, 0);
+            view.paddingTop = CoreLength.toDevicePixels(newValue, 0);
         }
         else {
             Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
         }
     },
-    valueConverter: CoreLength.parse,
+    valueConverter: masonLengthParse,
 });
 export const paddingBottomProperty = new CssProperty({
     name: 'paddingBottom',
@@ -118,15 +230,15 @@ export const paddingBottomProperty = new CssProperty({
     affectsLayout: global.isIOS,
     equalityComparer: CoreLength.equals,
     valueChanged: (target, oldValue, newValue) => {
-        const view = target.viewRef.get();
+        const view = getViewStyle(target.viewRef);
         if (view) {
-            view.effectivePaddingBottom = CoreLength.toDevicePixels(newValue, 0);
+            view.paddingBottom = CoreLength.toDevicePixels(newValue, 0);
         }
         else {
             Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
         }
     },
-    valueConverter: CoreLength.parse,
+    valueConverter: masonLengthParse,
 });
 export const rowGapProperty = new CssProperty({
     name: 'rowGap',
@@ -139,6 +251,12 @@ export const rowGapProperty = new CssProperty({
         }
         return parsed;
     },
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.rowGap = newValue;
+        }
+    },
 });
 export const columnGapProperty = new CssProperty({
     name: 'columnGap',
@@ -151,6 +269,48 @@ export const columnGapProperty = new CssProperty({
         }
         return parsed;
     },
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.columnGap = newValue;
+        }
+    },
+});
+export const gridGapProperty = new ShorthandProperty({
+    name: 'gridGap',
+    cssName: 'grid-gap',
+    getter: function () {
+        if (this.rowGap === this.columnGap) {
+            return this.rowGap;
+        }
+        return `${this.rowGap} ${this.columnGap}`;
+    },
+    converter(gap) {
+        const properties = [];
+        let value = gap;
+        if (typeof value === 'number') {
+            value = `${value}`;
+        }
+        if (typeof value === 'string') {
+            const values = value.split(/\s+/).filter((item) => item.trim().length !== 0);
+            const length = values.length;
+            if (length === 0) {
+                return properties;
+            }
+            if (length === 1) {
+                const row = values[0];
+                properties.push([rowGapProperty, row]);
+                properties.push([columnGapProperty, row]);
+            }
+            if (length > 1) {
+                const row = values[0];
+                const column = values[1];
+                properties.push([rowGapProperty, row]);
+                properties.push([columnGapProperty, column]);
+            }
+        }
+        return properties;
+    },
 });
 export const gapProperty = new ShorthandProperty({
     name: 'gap',
@@ -161,8 +321,12 @@ export const gapProperty = new ShorthandProperty({
         }
         return `${this.rowGap} ${this.columnGap}`;
     },
-    converter(value) {
+    converter(gap) {
         const properties = [];
+        let value = gap;
+        if (typeof value === 'number') {
+            value = `${value}`;
+        }
         if (typeof value === 'string') {
             const values = value.split(/\s+/).filter((item) => item.trim().length !== 0);
             const length = values.length;
@@ -200,7 +364,17 @@ export const displayProperty = new CssProperty({
     name: 'display',
     cssName: 'display',
     defaultValue: 'block',
-    valueConverter(value) {
+    valueChanged: (target, oldValue, newValue) => {
+        const view = getViewStyle(target.viewRef);
+        if (view && newValue) {
+            view.display = newValue;
+        }
+        else {
+            // Revert to old value if newValue is invalid
+            view.view.style.display = oldValue;
+        }
+    },
+    valueConverter: function (value) {
         if (typeof value === 'number') {
             switch (value) {
                 case 0:
@@ -211,6 +385,14 @@ export const displayProperty = new CssProperty({
                     return 'grid';
                 case 3:
                     return 'block';
+                case 4:
+                    return 'inline';
+                case 5:
+                    return 'inline-block';
+                case 6:
+                    return 'inline-flex';
+                case 7:
+                    return 'inline-grid';
             }
         }
         switch (value) {
@@ -218,10 +400,13 @@ export const displayProperty = new CssProperty({
             case 'flex':
             case 'grid':
             case 'block':
+            case 'inline':
+            case 'inline-block':
+            case 'inline-flex':
+            case 'inline-grid':
                 return value;
             default:
-                // todo throw???
-                return 'block';
+                return undefined;
         }
     },
 });
@@ -231,6 +416,16 @@ export const maxWidthProperty = new CssProperty({
     defaultValue: 'auto',
     // @ts-ignore
     equalityComparer: NSLength.equals,
+    valueConverter: masonLengthParse,
+    valueChanged: (target, oldValue, newValue) => {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.maxWidth = newValue;
+        }
+        else {
+            Trace.write(`${newValue} not set to view's property because ".viewRef" is cleared`, Trace.categories.Style, Trace.messageType.warn);
+        }
+    },
 });
 export const maxHeightProperty = new CssProperty({
     name: 'maxHeight',
@@ -238,11 +433,24 @@ export const maxHeightProperty = new CssProperty({
     defaultValue: 'auto',
     // @ts-ignore
     equalityComparer: NSLength.equals,
+    valueConverter: masonLengthParse,
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.maxHeight = newValue;
+        }
+    },
 });
 export const positionProperty = new CssProperty({
     name: 'position',
     cssName: 'position',
     defaultValue: 'relative',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.position = newValue;
+        }
+    },
 });
 // export const flexDirectionProperty = new CssProperty<Style, FlexDirection>({
 //   name: 'flexDirection',
@@ -253,12 +461,63 @@ export const positionProperty = new CssProperty({
 //   cssName: 'flex-wrap',
 //   defaultValue: 'no-wrap',
 // });
+const insetProperty = new ShorthandProperty({
+    name: 'inset',
+    cssName: 'inset',
+    getter: function () {
+        if (this.top === this.right && this.top === this.bottom && this.top === this.left) {
+            if (typeof this.top === 'string') {
+                if (this.top === 'auto') {
+                    return this.top;
+                }
+                const value = CorePercentLength.parse(this.top);
+                if (Number.isNaN(value)) {
+                    return this.top;
+                }
+                else {
+                    return CorePercentLength.convertToString(value);
+                }
+            }
+        }
+        if (CorePercentLength.equals(this.top, this.right) && CorePercentLength.equals(this.top, this.bottom) && CorePercentLength.equals(this.top, this.left)) {
+            return this.top;
+        }
+        return `${CorePercentLength.convertToString(this.paddingTop)} ${CorePercentLength.convertToString(this.paddingRight)} ${CorePercentLength.convertToString(this.paddingBottom)} ${CorePercentLength.convertToString(this.paddingLeft)}`;
+    },
+    converter: convertToInsets,
+});
+function convertToInsets(value) {
+    if (typeof value === 'string' && value !== 'auto') {
+        const thickness = parseShorthandPositioning(value);
+        return [
+            [topProperty, masonLengthPercentParse(thickness.top)],
+            [rightProperty, masonLengthPercentParse(thickness.right)],
+            [bottomProperty, masonLengthPercentParse(thickness.bottom)],
+            [leftProperty, masonLengthPercentParse(thickness.left)],
+        ];
+    }
+    else {
+        return [
+            [topProperty, value],
+            [rightProperty, value],
+            [bottomProperty, value],
+            [leftProperty, value],
+        ];
+    }
+}
 export const leftProperty = new CssProperty({
     name: 'left',
     cssName: 'left',
     defaultValue: 'auto',
     // @ts-ignore
     equalityComparer: NSLength.equals,
+    valueConverter: masonLengthParse,
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.left = newValue;
+        }
+    },
 });
 export const rightProperty = new CssProperty({
     name: 'right',
@@ -266,6 +525,13 @@ export const rightProperty = new CssProperty({
     defaultValue: 'auto',
     // @ts-ignore
     equalityComparer: NSLength.equals,
+    valueConverter: masonLengthParse,
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.right = newValue;
+        }
+    },
 });
 export const topProperty = new CssProperty({
     name: 'top',
@@ -273,6 +539,13 @@ export const topProperty = new CssProperty({
     defaultValue: 'auto',
     // @ts-ignore
     equalityComparer: NSLength.equals,
+    valueConverter: masonLengthParse,
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.top = newValue;
+        }
+    },
 });
 export const bottomProperty = new CssProperty({
     name: 'bottom',
@@ -280,11 +553,26 @@ export const bottomProperty = new CssProperty({
     defaultValue: 'auto',
     // @ts-ignore
     equalityComparer: NSLength.equals,
+    valueConverter: masonLengthParse,
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.bottom = newValue;
+        }
+    },
 });
 export const flexBasisProperty = new CssProperty({
     name: 'flexBasis',
     cssName: 'flex-basis',
     defaultValue: 'auto',
+    equalityComparer: NSLength.equals,
+    valueConverter: masonLengthParse,
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.flexBasis = newValue;
+        }
+    },
 });
 export const gridRowGapProperty = new ShorthandProperty({
     name: 'gridRowGap',
@@ -310,247 +598,221 @@ export const aspectRatioProperty = new CssProperty({
     name: 'aspectRatio',
     cssName: 'aspect-ratio',
     defaultValue: Number.NaN,
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.aspectRatio = newValue;
+        }
+    },
 });
 export const alignItemsProperty = new CssProperty({
     name: 'alignItems',
     cssName: 'align-items',
     defaultValue: 'normal',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.alignItems = newValue;
+        }
+    },
 });
 export const alignSelfProperty = new CssProperty({
     name: 'alignSelf',
     cssName: 'align-self',
     defaultValue: 'normal',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.alignSelf = newValue;
+        }
+    },
 });
 export const alignContentProperty = new CssProperty({
     name: 'alignContent',
     cssName: 'align-content',
     defaultValue: 'normal',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.alignContent = newValue;
+        }
+    },
 });
 export const justifyItemsProperty = new CssProperty({
     name: 'justifyItems',
     cssName: 'justify-items',
     defaultValue: 'normal',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.justifyItems = newValue;
+        }
+    },
 });
 export const justifySelfProperty = new CssProperty({
     name: 'justifySelf',
     cssName: 'justify-self',
     defaultValue: 'normal',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.justifySelf = newValue;
+        }
+    },
 });
 export const justifyContentProperty = new CssProperty({
     name: 'justifyContent',
     cssName: 'justify-content',
     defaultValue: 'normal',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.justifyContent = newValue;
+        }
+    },
 });
 export const gridAutoRowsProperty = new CssProperty({
     name: 'gridAutoRows',
     cssName: 'grid-auto-rows',
     defaultValue: '',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.gridAutoRows = newValue;
+        }
+    },
 });
 export const gridAutoColumnsProperty = new CssProperty({
     name: 'gridAutoColumns',
     cssName: 'grid-auto-columns',
     defaultValue: '',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.gridAutoColumns = newValue;
+        }
+    },
 });
 export const gridAutoFlowProperty = new CssProperty({
     name: 'gridAutoFlow',
     cssName: 'grid-auto-flow',
     defaultValue: 'row',
-});
-function parseGridColumnOrRow(value) {
-    if (value.trim() === 'auto') {
-        return 'auto';
-    }
-    else {
-        const split = value.split(/\s+/).filter((item) => item.trim().length !== 0);
-        const length = split.length;
-        if (length === 0) {
-            return undefined;
-        }
-        const first = split[0];
-        if (length === 1) {
-            const parsedValue = Number(first);
-            if (Number.isNaN(parsedValue)) {
-                return undefined;
-            }
-            return first;
-        }
-        if (length === 2) {
-            if (first === 'span') {
-                const second = split[1];
-                const parsedValue = Number(second);
-                if (Number.isNaN(parsedValue)) {
-                    return undefined;
-                }
-                return `${first} ${second}`;
-            }
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.gridAutoFlow = newValue;
         }
-        //custom-ident unsupport atm
-        return undefined;
-    }
-}
-export const gridAreaProperty = new ShorthandProperty({
+    },
+});
+export const gridAreaProperty = new CssProperty({
     name: 'gridArea',
     cssName: 'grid-area',
-    getter: function () {
-        return `${this.gridRowStart} / ${this.gridColumnStart} / ${this.gridRowEnd} / ${this.gridColumnEnd}`;
-    },
-    converter(value) {
-        if (typeof value === 'string') {
-            const values = value.split('/').filter((item) => item.trim().length !== 0);
-            // grid-row-start / grid-column-start / grid-row-end / grid-column-end
-            const length = values.length;
-            if (length === 0) {
-                return [];
-            }
-            if (length === 1) {
-                const parsed = parseGridColumnOrRow(values[0]);
-                return [
-                    [gridRowStartProperty, parsed],
-                    [gridRowEndProperty, parsed],
-                    [gridColumnStartProperty, parsed],
-                    [gridColumnEndProperty, parsed],
-                ];
-            }
-            if (length === 2) {
-                const row = parseGridColumnOrRow(values[0]);
-                const column = parseGridColumnOrRow(values[1]);
-                return [
-                    [gridRowStartProperty, row],
-                    [gridRowEndProperty, row],
-                    [gridColumnStartProperty, column],
-                    [gridColumnEndProperty, column],
-                ];
-            }
-            if (length === 3) {
-                const rowStart = parseGridColumnOrRow(values[0]);
-                const rowEnd = parseGridColumnOrRow(values[2]);
-                const columnStart = parseGridColumnOrRow(values[1]);
-                return [
-                    [gridRowStartProperty, rowStart],
-                    [gridRowEndProperty, rowEnd],
-                    [gridColumnStartProperty, columnStart],
-                    [gridColumnEndProperty, columnStart],
-                ];
-            }
-            if (length >= 4) {
-                const rowStart = parseGridColumnOrRow(values[0]);
-                const rowEnd = parseGridColumnOrRow(values[2]);
-                const columnStart = parseGridColumnOrRow(values[1]);
-                const columnEnd = parseGridColumnOrRow(values[3]);
-                return [
-                    [gridRowStartProperty, rowStart],
-                    [gridRowEndProperty, rowEnd],
-                    [gridColumnStartProperty, columnStart],
-                    [gridColumnEndProperty, columnEnd],
-                ];
-            }
-        }
-        return [];
+    defaultValue: '',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.gridArea = newValue;
+        }
     },
 });
 export const gridColumnStartProperty = new CssProperty({
     name: 'gridColumnStart',
     cssName: 'grid-column-start',
     defaultValue: 'auto',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.gridColumnStart = newValue;
+        }
+    },
 });
 export const gridColumnEndProperty = new CssProperty({
     name: 'gridColumnEnd',
     cssName: 'grid-column-end',
     defaultValue: 'auto',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.gridColumnEnd = newValue;
+        }
+    },
 });
-export const gridColumnProperty = new ShorthandProperty({
+export const gridColumnProperty = new CssProperty({
     name: 'gridColumn',
     cssName: 'grid-column',
-    getter: function () {
-        if (this.gridColumnStart === this.gridColumnEnd) {
-            return this.gridColumnStart;
-        }
-        return `${this.gridColumnStart} / ${this.gridColumnStart}`;
-    },
-    converter(value) {
-        if (typeof value === 'string') {
-            const values = value.split('/').filter((item) => item.trim().length !== 0);
-            const length = values.length;
-            if (length === 0) {
-                return [];
-            }
-            if (length === 1) {
-                const parsed = parseGridColumnOrRow(values[0]);
-                return [
-                    [gridColumnStartProperty, parsed],
-                    [gridColumnEndProperty, parsed],
-                ];
-            }
-            if (length > 1) {
-                const start = values[0];
-                const end = values[1];
-                const parsedStart = parseGridColumnOrRow(start);
-                const parsedEnd = parseGridColumnOrRow(end);
-                return [
-                    [gridColumnStartProperty, parsedStart],
-                    [gridColumnEndProperty, parsedEnd],
-                ];
-            }
+    defaultValue: '',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.gridColumn = newValue;
         }
-        return [];
     },
 });
 export const gridRowStartProperty = new CssProperty({
     name: 'gridRowStart',
     cssName: 'grid-row-start',
     defaultValue: 'auto',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.gridRowStart = newValue;
+        }
+    },
 });
 export const gridRowEndProperty = new CssProperty({
     name: 'gridRowEnd',
     cssName: 'grid-row-end',
     defaultValue: 'auto',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.gridRowEnd = newValue;
+        }
+    },
 });
-export const gridRowProperty = new ShorthandProperty({
+export const gridRowProperty = new CssProperty({
     name: 'gridRow',
     cssName: 'grid-row',
-    getter: function () {
-        if (this.gridRowStart === this.gridRowEnd) {
-            return this.gridRowStart;
+    defaultValue: '',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.gridRow = newValue;
         }
-        return `${this.gridRowStart} / ${this.gridRowStart}`;
     },
-    converter(value) {
-        if (typeof value === 'string') {
-            const values = value.split('/').filter((item) => item.trim().length !== 0);
-            const length = values.length;
-            if (length === 0) {
-                return [];
-            }
-            if (length === 1) {
-                const parsed = parseGridColumnOrRow(values[0]);
-                return [
-                    [gridRowStartProperty, parsed],
-                    [gridRowEndProperty, parsed],
-                ];
-            }
-            if (length > 1) {
-                const start = values[0];
-                const end = values[1];
-                const parsedStart = parseGridColumnOrRow(start);
-                const parsedEnd = parseGridColumnOrRow(end);
-                return [
-                    [gridRowStartProperty, parsedStart],
-                    [gridRowEndProperty, parsedEnd],
-                ];
-            }
+});
+export const gridTemplateAreasProperty = new CssProperty({
+    name: 'gridTemplateAreas',
+    cssName: 'grid-template-areas',
+    defaultValue: null,
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.gridTemplateAreas = newValue;
         }
-        return [];
     },
 });
 export const gridTemplateRowsProperty = new CssProperty({
     name: 'gridTemplateRows',
     cssName: 'grid-template-rows',
     defaultValue: null,
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.gridTemplateRows = newValue;
+        }
+    },
 });
 export const gridTemplateColumnsProperty = new CssProperty({
     name: 'gridTemplateColumns',
     cssName: 'grid-template-columns',
     defaultValue: null,
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            view.gridTemplateColumns = newValue;
+        }
+    },
 });
 // flex-flow: <flex-direction> || <flex-wrap>
 const flexFlowProperty = new ShorthandProperty({
@@ -637,27 +899,79 @@ const flexProperty = new ShorthandProperty({
         return properties;
     },
 });
-export const textWrapProperty = new Property({
+// @ts-ignore
+export const textWrapProperty = new CssProperty({
     name: 'textWrap',
     affectsLayout: true,
     defaultValue: 'nowrap',
+    valueChanged(target, oldValue, newValue) {
+        const view = target?.viewRef ? getViewStyle(target.viewRef) : target.view;
+        if (view) {
+            view.textWrap = newValue;
+        }
+    },
 });
-export const textProperty = new Property({
-    name: 'text',
+// @ts-ignore
+export const textOverFlowProperty = new CssProperty({
+    name: 'textOverflow',
+    defaultValue: 'text-overflow',
+    valueChanged(target, oldValue, newValue) {
+        const view = target?.viewRef ? getViewStyle(target.viewRef) : target.view;
+        if (view) {
+            view.textOverflow = newValue;
+        }
+    },
+});
+export const textContentProperty = new Property({
+    name: 'textContent',
     affectsLayout: true,
     defaultValue: '',
 });
-let ViewBase = class ViewBase extends CustomLayoutView {
+export const boxSizingProperty = new CssProperty({
+    name: 'boxSizing',
+    cssName: 'box-sizing',
+    defaultValue: 'border-box',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            if (newValue) {
+                view.boxSizing = newValue;
+            }
+            else {
+                // Revert to old value if newValue is invalid
+                view.view.style.boxSizing = oldValue;
+            }
+        }
+    },
+    valueConverter(value) {
+        switch (value) {
+            case 'content-box':
+            case 'border-box':
+                return value;
+            default:
+                return undefined;
+        }
+    },
+});
+const borderRadiusProperty = new CssProperty({
+    name: 'borderRadius',
+    cssName: 'border-radius',
+});
+borderRadiusProperty.register(Style);
+export class ViewBase extends CustomLayoutView {
     constructor() {
         super();
         this._children = [];
-        this._isMasonView = false;
-        this._isMasonChild = false;
-        this._isMasonView = true;
+        this[_a] = false;
+        this[_b] = false;
+        this[_c] = false;
     }
     forceStyleUpdate() {
         _forceStyleUpdate(this);
     }
+    get _viewChildren() {
+        return this._children.filter((child) => child instanceof NSView);
+    }
     eachLayoutChild(callback) {
         let lastChild = null;
         this.eachChildView((cv) => {
@@ -674,42 +988,96 @@ let ViewBase = class ViewBase extends CustomLayoutView {
         }
     }
     eachChild(callback) {
-        for (const child of this._children) {
+        for (const child of this._viewChildren) {
             callback(child);
         }
     }
     eachChildView(callback) {
-        for (const view of this._children) {
+        for (const view of this._viewChildren) {
             callback(view);
         }
     }
     _addChildFromBuilder(name, value) {
-        if (value instanceof NSView) {
-            this.addChild(value);
-        }
+        this.addChild(value);
     }
     getChildrenCount() {
-        return this._children.length;
+        return this._viewChildren.length;
     }
     get _childrenCount() {
-        return this._children.length;
+        return this._viewChildren.length;
     }
     getChildAt(index) {
-        return this._children[index];
+        return this._viewChildren[index];
     }
     getChildIndex(child) {
-        return this._children.indexOf(child);
+        return this._viewChildren.indexOf(child);
     }
     getChildById(id) {
         return getViewById(this, id);
     }
     addChild(child) {
-        this._children.push(child);
-        this._addView(child);
+        if (child instanceof NSView) {
+            this._children.push(child);
+            if (this[isText_]) {
+                child[isTextChild_] = true;
+            }
+            this._addView(child);
+        }
+        else {
+            if (text_ in child) {
+                //@ts-ignore
+                if (this._view) {
+                    if (__ANDROID__) {
+                        //@ts-ignore
+                        this._view.addChildAt(child[text_] || '', this._children.length);
+                    }
+                    if (__APPLE__) {
+                        //@ts-ignore
+                        this._view.mason_addChildAtText(child[text_] || '', this._children.length);
+                    }
+                }
+                this._children.push(child);
+            }
+        }
     }
     insertChild(child, atIndex) {
-        this._children.splice(atIndex, 0, child);
-        this._addView(child, atIndex);
+        if (child instanceof NSView) {
+            this._children.splice(atIndex, 0, child);
+            if (this[isText_]) {
+                child[isTextChild_] = true;
+            }
+            this._addView(child, atIndex);
+        }
+    }
+    replaceChild(child, atIndex) {
+        if (child instanceof NSView) {
+            this._children[atIndex] = child;
+            if (this[isText_]) {
+                child[isTextChild_] = true;
+            }
+            this._addView(child, atIndex);
+        }
+        else {
+            if (text_ in child) {
+                //@ts-ignore
+                if (this._view) {
+                    if (__ANDROID__) {
+                        //@ts-ignore
+                        this._view.replaceChildAt(child[text_] || '', atIndex);
+                    }
+                    if (__APPLE__) {
+                        //@ts-ignore
+                        this._view.mason_replaceChildAtText(child[text_] || '', atIndex);
+                    }
+                }
+                if (this._children.length >= atIndex) {
+                    this._children[atIndex] = { text: child[text_] || '' };
+                }
+                else {
+                    this._children.push({ text: child[text_] || '' });
+                }
+            }
+        }
     }
     removeChild(child) {
         const index = this._children.indexOf(child);
@@ -719,105 +1087,505 @@ let ViewBase = class ViewBase extends CustomLayoutView {
         }
     }
     removeChildren() {
-        if (this._children.length === 0) {
+        if (this._viewChildren.length === 0) {
             return;
         }
-        for (const child of this._children) {
+        for (const child of this._viewChildren) {
+            // @ts-ignore
             child._isMasonChild = false;
-            this._removeView(child);
+            if (child instanceof NSView) {
+                this._removeView(child);
+            }
         }
         this._children.splice(0);
     }
-    [displayProperty.setNative](value) {
-        _setDisplay(value, this);
+    set text(value) {
+        if (frameWork === FrameWork.Vue && global.VUE3_ELEMENT_REF) {
+            const view_ref = this[global.VUE3_ELEMENT_REF];
+            if (Array.isArray(view_ref.childNodes)) {
+                if (view_ref.childNodes.length === 0) {
+                    this.addChild({ [text_]: value });
+                    return;
+                }
+                if (view_ref.childNodes.length === 1) {
+                    const node = view_ref.childNodes[0];
+                    if (node && node.nodeType === 'text') {
+                        this.addChild({ [text_]: node.text });
+                    }
+                    return;
+                }
+                view_ref.childNodes.forEach((node, index) => {
+                    if (node.nodeType === 'text') {
+                        //  nativeView.replaceChildAt(node.text, index);
+                        this.replaceChild({ [text_]: node.text }, index);
+                    }
+                });
+            }
+            return;
+        }
+        if ('firstChild' in this) {
+            function getTextNodes(root) {
+                const result = [];
+                let node = root.firstChild;
+                while (node) {
+                    result.push(node);
+                    node = node.nextSibling;
+                }
+                return result;
+            }
+            const nodes = getTextNodes(this);
+            for (const [index, node] of nodes.entries()) {
+                if (node.nodeType === 'text' || node.nodeName === 'TextNode' || node.constructor.name === 'TextNode') {
+                    const existing = this._children[index];
+                    if (existing && Object.is(existing['node'], node)) {
+                        // todo direct set text
+                        this.replaceChild({ [text_]: node.text, node }, index);
+                        continue;
+                    }
+                    this.replaceChild({ [text_]: node.text, node }, index);
+                }
+            }
+        }
+    }
+    [(_a = isMasonView_, _b = isTextChild_, _c = isText_, filterProperty.setNative)](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.filter = value;
+        }
+    }
+    [borderRadiusProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.borderRadius = value;
+        }
+    }
+    [borderProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.border = value;
+        }
+    }
+    [backgroundProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.background = value;
+        }
+    }
+    [borderLeftWidthProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.borderLeftWidth = value;
+        }
+    }
+    [borderTopWidthProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.borderTopWidth = value;
+        }
+    }
+    [borderRightWidthProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.borderRightWidth = value;
+        }
+    }
+    [borderBottomWidthProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.borderBottomWidth = value;
+        }
+    }
+    [lineHeightProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.lineHeight = value;
+        }
+    }
+    [letterSpacingProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.letterSpacing = value;
+        }
+    }
+    [textAlignmentProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.textAlignment = value;
+        }
+    }
+    get boxSizing() {
+        return this.style.boxSizing;
+    }
+    set boxSizing(value) {
+        this.style.boxSizing = value;
+    }
+    get display() {
+        return this.style.display;
+    }
+    set display(value) {
+        this.style.display = value;
+    }
+    get overflowX() {
+        return this.style.overflowX;
+    }
+    set overflowX(value) {
+        this.style.overflowX = value;
+    }
+    get overflowY() {
+        return this.style.overflowY;
+    }
+    set overflowY(value) {
+        this.style.overflowY = value;
+    }
+    get scrollBarWidth() {
+        return this.style.scrollBarWidth;
+    }
+    set scrollBarWidth(value) {
+        this.style.scrollBarWidth = value;
+    }
+    get position() {
+        return this.style.position;
+    }
+    set position(value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            // @ts-ignore
+            style.position = value;
+        }
+    }
+    [colorProperty.setNative](value) {
+        if (value instanceof Color) {
+            // @ts-ignore
+            const style = this._styleHelper;
+            if (style) {
+                // @ts-ignore
+                style.color = value.argb;
+            }
+        }
+    }
+    [flexWrapProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.flexWrap = value;
+        }
     }
     [flexDirectionProperty.setNative](value) {
-        _setFlexDirection(value, this);
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.flexDirection = value;
+        }
+    }
+    [flexGrowProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.flexGrow = value;
+        }
+    }
+    [flexShrinkProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.flexShrink = value;
+        }
+    }
+    [flexBasisProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.flexBasis = value;
+        }
+    }
+    [alignItemsProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.alignItems = value;
+        }
+    }
+    [alignSelfProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.alignSelf = value;
+        }
+    }
+    [alignContentProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.alignContent = value;
+        }
+    }
+    [justifyItemsProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.justifyItems = value;
+        }
+    }
+    [justifySelfProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.justifySelf = value;
+        }
+    }
+    [justifyContentProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.justifyContent = value;
+        }
+    }
+    [leftProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.left = value;
+        }
+    }
+    [rightProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.right = value;
+        }
+    }
+    [bottomProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.bottom = value;
+        }
+    }
+    [topProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.top = value;
+        }
     }
     [minWidthProperty.setNative](value) {
-        _setMinWidth(value, this);
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.minWidth = value;
+        }
     }
     [minHeightProperty.setNative](value) {
-        _setMinHeight(value, this);
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.minHeight = value;
+        }
+    }
+    [heightProperty.setNative](value) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.height = value;
+        }
     }
     [widthProperty.setNative](value) {
-        _setWidth(value, this);
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.width = value;
+        }
     }
-    [heightProperty.setNative](value) {
-        _setHeight(value, this);
+    set maxWidth(value) {
+        this.style.maxWidth = value;
     }
-    [alignContentProperty.setNative](value) {
-        _setAlignContent(value, this);
+    get maxWidth() {
+        return this.style.maxWidth;
     }
-    [justifyContentProperty.setNative](value) {
-        _setJustifyContent(value, this);
+    set maxHeight(value) {
+        this.style.maxHeight = value;
+    }
+    get maxHeight() {
+        return this.style.maxHeight;
     }
+    _redrawNativeBackground(value) { }
     [marginLeftProperty.setNative](value) {
-        _setMarginLeft(value, this);
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.marginLeft = value;
+        }
     }
     [marginRightProperty.setNative](value) {
-        _setMarginRight(value, this);
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.marginRight = value;
+        }
     }
     [marginBottomProperty.setNative](value) {
-        _setMarginBottom(value, this);
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.marginBottom = value;
+        }
     }
     [marginTopProperty.setNative](value) {
-        _setMarginTop(value, this);
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.marginTop = value;
+        }
     }
     [paddingLeftProperty.setNative](value) {
-        _setPaddingLeft(value, this);
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.paddingLeft = value;
+        }
     }
     [paddingRightProperty.setNative](value) {
-        _setPaddingRight(value, this);
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.paddingRight = value;
+        }
     }
     [paddingTopProperty.setNative](value) {
-        _setPaddingTop(value, this);
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.paddingTop = value;
+        }
     }
     [paddingBottomProperty.setNative](value) {
-        _setPaddingBottom(value, this);
+        // @ts-ignore
+        const style = this._styleHelper;
+        if (style) {
+            style.paddingBottom = value;
+        }
     }
-    [rowGapProperty.setNative](value) {
-        _setRowGap(value, this);
+    set rowGap(value) {
+        this.style.rowGap = value;
     }
-    [columnGapProperty.setNative](value) {
-        _setColumnGap(value, this);
+    get rowGap() {
+        return this.style.rowGap;
     }
-    [gridColumnStartProperty.setNative](value) {
-        _setGridColumnStart(value, this);
+    set columnGap(value) {
+        this.style.columnGap = value;
     }
-    [gridColumnEndProperty.setNative](value) {
-        _setGridColumnEnd(value, this);
+    get columnGap() {
+        return this.style.columnGap;
     }
-    [gridRowStartProperty.setNative](value) {
-        _setGridRowStart(value, this);
+    set gridColumnStart(value) {
+        this.style.gridColumnStart = value;
     }
-    [gridRowEndProperty.setNative](value) {
-        _setGridRowEnd(value, this);
+    get gridColumnStart() {
+        return this.style.gridColumnStart;
     }
-    [gridTemplateRowsProperty.setNative](value) {
-        _setGridTemplateRows(_parseGridTemplates(value), this);
+    set gridColumnEnd(value) {
+        this.style.gridColumnEnd = value;
     }
-    [gridTemplateColumnsProperty.setNative](value) {
-        _setGridTemplateColumns(_parseGridTemplates(value), this);
+    get gridColumnEnd() {
+        return this.style.gridColumnEnd;
     }
-};
-ViewBase = __decorate([
-    CSSType('View'),
-    __metadata("design:paramtypes", [])
-], ViewBase);
-export { ViewBase };
-let TextBase = class TextBase extends ViewBase {
-    constructor() {
-        super();
+    set gridRowStart(value) {
+        this.style.gridRowStart = value;
+    }
+    get gridRowStart() {
+        return this.style.gridRowStart;
+    }
+    set gridRowEnd(value) {
+        this.style.gridRowEnd = value;
+    }
+    get gridRowEnd() {
+        return this.style.gridRowEnd;
+    }
+    set gridTemplateRows(value) {
+        this.style.gridTemplateRows = value;
+    }
+    get gridTemplateRows() {
+        return this.style.gridTemplateRows;
+    }
+    set gridTemplateColumns(value) {
+        this.style.gridTemplateColumns = value;
+    }
+    get gridTemplateColumns() {
+        return this.style.gridTemplateColumns;
+    }
+    set gridAutoColumns(value) {
+        this.style.gridAutoColumns = value;
+    }
+    get gridAutoColumns() {
+        return this.style.gridAutoColumns;
+    }
+    set gridAutoRows(value) {
+        this.style.gridAutoRows = value;
+    }
+    get gridAutoRows() {
+        return this.style.gridAutoRows;
+    }
+    // @ts-ignore
+    [fontSizeProperty.setNative](value) {
+        // @ts-ignore
+        if (this._styleHelper) {
+            //@ts-ignore
+            this._styleHelper.fontSize = value;
+        }
+    }
+    [fontWeightProperty.setNative](value) {
+        // @ts-ignore
+        if (this._styleHelper) {
+            //@ts-ignore
+            this._styleHelper.fontWeight = value;
+        }
     }
-};
-TextBase = __decorate([
-    CSSType('Text'),
-    __metadata("design:paramtypes", [])
-], TextBase);
-export { TextBase };
-textProperty.register(TextBase);
-textWrapProperty.register(TextBase);
+    [fontStyleProperty.setNative](value) {
+        // @ts-ignore
+        if (this._styleHelper) {
+            //@ts-ignore
+            this._styleHelper.fontStyle = value;
+        }
+    }
+}
+export class TextBase extends ViewBase {
+}
+textContentProperty.register(TextBase);
+textWrapProperty.register(Style);
+textOverFlowProperty.register(Style);
+export class ButtonBase extends TextBase {
+}
+// @ts-ignore
+export const srcProperty = new Property({
+    name: 'src',
+    defaultValue: '',
+});
+export class ImageBase extends ViewBase {
+}
+srcProperty.register(ImageBase);
 /**
  * Props are already defined in core flexbox layout,
  * overriding them breaks the core flexbox layout.
@@ -825,7 +1593,123 @@ textWrapProperty.register(TextBase);
 // flexDirectionProperty.register(Style);
 // flexWrapProperty.register(Style);
 // flexGrowProperty.register(Style);
-// flexShrinkProperty.register(Style);
+flexShrinkProperty.register(Style);
+// revert valueConverter if causing issues with core components
+fontSizeProperty.overrideHandlers({
+    name: 'fontSize',
+    cssName: 'font-size',
+    valueConverter: function (value) {
+        return value;
+    },
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            if (newValue) {
+                if (typeof newValue === 'string') {
+                    // @ts-ignore
+                    if (newValue.indexOf('%') !== -1) {
+                        view.fontSize = {
+                            value: parseFloat(newValue) / 100,
+                            unit: '%',
+                        };
+                        // @ts-ignore
+                    }
+                    else if (newValue.indexOf('dip') !== -1) {
+                        view.fontSize = parseFloat(newValue);
+                        // @ts-ignore
+                    }
+                    else if (newValue.indexOf('px') !== -1) {
+                        view.fontSize = {
+                            value: parseFloat(newValue),
+                            unit: 'px',
+                        };
+                    }
+                    else {
+                        view.fontSize = parseFloat(newValue);
+                    }
+                }
+                else {
+                    view.fontSize = newValue;
+                }
+            }
+            else {
+                // Revert to old value if newValue is invalid
+                // @ts-ignore
+                view.view.style.fontSize = oldValue;
+            }
+        }
+    },
+});
+paddingLeftProperty.overrideHandlers({
+    name: 'paddingLeft',
+    cssName: 'padding-left',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            if (newValue) {
+                view.paddingLeft = newValue;
+            }
+            else {
+                // Revert to old value if newValue is invalid
+                // @ts-ignore
+                view.view.style.paddingLeft = oldValue;
+            }
+        }
+    },
+});
+paddingTopProperty.overrideHandlers({
+    name: 'paddingTop',
+    cssName: 'padding-top',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            if (newValue) {
+                view.paddingTop = newValue;
+            }
+            else {
+                // Revert to old value if newValue is invalid
+                // @ts-ignore
+                view.view.style.paddingTop = oldValue;
+            }
+        }
+    },
+});
+paddingRightProperty.overrideHandlers({
+    name: 'paddingRight',
+    cssName: 'padding-right',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            if (newValue) {
+                view.paddingRight = newValue;
+            }
+            else {
+                // Revert to old value if newValue is invalid
+                // @ts-ignore
+                view.view.style.paddingRight = oldValue;
+            }
+        }
+    },
+});
+paddingBottomProperty.overrideHandlers({
+    name: 'paddingBottom',
+    cssName: 'padding-bottom',
+    valueChanged(target, oldValue, newValue) {
+        const view = getViewStyle(target.viewRef);
+        if (view) {
+            if (newValue) {
+                view.paddingBottom = newValue;
+            }
+            else {
+                // Revert to old value if newValue is invalid
+                // @ts-ignore
+                view.view.style.paddingBottom = oldValue;
+            }
+        }
+    },
+});
+insetProperty.register(Style);
+boxSizingProperty.register(Style);
 alignItemsProperty.register(Style);
 alignSelfProperty.register(Style);
 justifyContentProperty.register(Style);
@@ -843,6 +1727,7 @@ columnGapProperty.register(Style);
 gridRowGapProperty.register(Style);
 gridColumnGapProperty.register(Style);
 gapProperty.register(Style);
+gridGapProperty.register(Style);
 aspectRatioProperty.register(Style);
 alignContentProperty.register(Style);
 justifyItemsProperty.register(Style);
@@ -859,6 +1744,7 @@ gridRowStartProperty.register(Style);
 gridRowEndProperty.register(Style);
 gridTemplateRowsProperty.register(Style);
 gridTemplateColumnsProperty.register(Style);
+gridTemplateAreasProperty.register(Style);
 overflowProperty.register(Style);
 overflowXProperty.register(Style);
 overflowYProperty.register(Style);