@triniwiz/nativescript-masonkit 1.0.0-beta.120 → 1.0.0-beta.121

package/README.md

@@ -1,48 +1,88 @@
 # @triniwiz/nativescript-masonkit
 
-```javascript
+[![npm](https://img.shields.io/npm/v/@triniwiz/nativescript-masonkit/beta?label=npm)](https://www.npmjs.com/package/@triniwiz/nativescript-masonkit)
+[![docs](https://img.shields.io/badge/docs-github%20pages-3d5afe)](https://triniwiz.github.io/nativescript-mason/)
+[![license](https://img.shields.io/badge/license-Apache--2.0-blue)](https://github.com/triniwiz/nativescript-mason/blob/main/LICENSE)
+
+Web layout for NativeScript. MasonKit brings flexbox, grid, block and inline flow, positioning and HTML-shaped elements (`div`, `p`, `span`, `h1`, `ul`, `img`, `input`, ...) to iOS, Android and Windows. Every element is a real native view; layout runs in a Rust core built on [taffy](https://github.com/DioxusLabs/taffy).
+
+**Documentation: https://triniwiz.github.io/nativescript-mason/**
+
+## Install
+
+```bash
 ns plugin add @triniwiz/nativescript-masonkit
 ```
 
 ## Usage
 
-## Framework integrations
-
-The main package works with any NativeScript flavour. For Angular, Vue 3 and
-Svelte Native, dedicated entry points register every MasonKit element for you — including the
-HTML-shaped elements from `/web` — and wire up child-order bookkeeping:
+Register the elements once in your app entry, then write markup and CSS the way you would for the web.
 
-- **Angular** — `@triniwiz/nativescript-masonkit/angular`:
-  call `installMasonKit()` in `main.ts` before bootstrap. See
-  [angular/README.md](angular/README.md).
-- **Vue 3** — `@triniwiz/nativescript-masonkit/vue`:
-  call `installMasonKit()` in the app entry before `createApp(App).start()`.
-  See [vue/README.md](vue/README.md).
-- **Svelte Native** — `@triniwiz/nativescript-masonkit/svelte`:
-  call `installMasonKit()` in the app entry before `svelteNative(App)`.
-  See [svelte/README.md](svelte/README.md).
+| Flavour | Setup |
+| --- | --- |
+| Plain NativeScript (XML / TS) | [XML namespaces or imports](https://triniwiz.github.io/nativescript-mason/frameworks/core) |
+| Angular | `installMasonKit()` from `@triniwiz/nativescript-masonkit/angular` ([guide](https://triniwiz.github.io/nativescript-mason/frameworks/angular)) |
+| Vue 3 | `installMasonKit()` from `@triniwiz/nativescript-masonkit/vue` ([guide](https://triniwiz.github.io/nativescript-mason/frameworks/vue)) |
+| Svelte Native | `installMasonKit()` from `@triniwiz/nativescript-masonkit/svelte` ([guide](https://triniwiz.github.io/nativescript-mason/frameworks/svelte)) |
+| React, Solid | register `getMasonKitElements()` with your renderer ([React](https://triniwiz.github.io/nativescript-mason/frameworks/react), [Solid](https://triniwiz.github.io/nativescript-mason/frameworks/solid)) |
 
-All three entry points ship in this package, so no extra dependency is required.
+Vue 3 example:
 
-## Rust
+```ts
+// app.ts
+import { createApp } from 'nativescript-vue';
+import { installMasonKit } from '@triniwiz/nativescript-masonkit/vue';
+import App from './App.vue';
 
-For building the iOS and Android packages the following targets are required
-
-### Android
+installMasonKit();
+createApp(App).start();
+```
 
-`rustup target add aarch64-linux-android armv7-linux-androideabi i686-linux-android x86_64-linux-android`
+```vue
+<template>
+  <div class="card">
+    <h2>{{ title }}</h2>
+    <p>Styled with <strong>real</strong> CSS.</p>
+  </div>
+</template>
+
+<style>
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 1rem;
+  border-radius: 12px;
+  background-color: #3d5afe;
+  color: white;
+}
+</style>
+```
 
-To run the project in Android Studio you will need to install the NDK.
+Plain NativeScript XML:
 
-To build the aar to be used by NativeScript you can run `./gradlew masonkit:assembleRelease` then copy the aar build located in `packages/nativescript-masonkit/src-native/mason-android/masonkit/build/outputs/aar` to the `packages/nativescript-masonkit/platforms/android` directory
+```xml
+<Page xmlns="http://schemas.nativescript.org/tns.xsd"
+      xmlns:web="@triniwiz/nativescript-masonkit/web">
+  <web:Div class="card">
+    <web:H2 text="Hello Mason" />
+    <web:P text="Styled with real CSS." />
+  </web:Div>
+</Page>
+```
 
-### iOS
+## Highlights
 
-`rustup target add aarch64-apple-ios x86_64-apple-ios`
+- **CSS that means what it means on the web.** `px` is a CSS pixel, and `rem`, `em`, `vw`, `vh`, `calc()`, `min()`, `max()` and `clamp()` resolve. [Units](https://triniwiz.github.io/nativescript-mason/styling/units)
+- **Flexbox, grid, block, inline, float, `position: fixed` and `sticky`.** [Styling](https://triniwiz.github.io/nativescript-mason/styling/)
+- **Rich visuals:** gradients, box shadows, border images, corner shapes, filters, backdrop filters, masks, clip paths and transforms. [Effects](https://triniwiz.github.io/nativescript-mason/styling/effects)
+- **Scrollable block containers** with a web-shaped scroll API (`scrollTop`, `scrollTo`, `scrollIntoView`). [Scrolling](https://triniwiz.github.io/nativescript-mason/guide/scrolling)
+- **Mixes with existing NativeScript views** in both directions. [Mixing views](https://triniwiz.github.io/nativescript-mason/guide/mixing-views)
+- **CSS diagnostics** that report what was dropped and why. [Diagnostics](https://triniwiz.github.io/nativescript-mason/guide/diagnostics)
 
-To build the rust source to be used by xcode you can run `yarn nx run nativescript-masonkit:build.native.ios.release`.
+## Contributing
 
-To build the xcframework to be used by NativeScript you can run `yarn nx run nativescript-masonkit:build.native.ios.framework.release`
+Building the native libraries from source, running the tests and the repo layout are covered in the [contributing guide](https://triniwiz.github.io/nativescript-mason/contributing/).
 
 ## License
 

package/angular/README.md

@@ -62,23 +62,24 @@ export class StoryComponent {}
 }
 ```
 
-> **Lengths:** use unitless values. In NativeScript `px` means _physical device
-> pixels_, so `padding: 12px` lands at ~4 on a 3x screen. Unitless is the dip
-> value, which is what matches a CSS pixel in a browser.
+> **Lengths:** on MasonKit elements `px` is a CSS pixel, as in a browser, and a
+> unitless value is the same size. Plain NativeScript views keep core's meaning,
+> where `px` is a device pixel.
 
 ### Available elements
 
 | From                                  | Elements                                                                                                                                              |
 | ------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `@triniwiz/nativescript-masonkit`     | `View`, `Text`, `Scroll`, `Img`, `Button`, `Input`, `TextArea`, `Br`, `Ul`, `Ol`, `Li`                                                                |
-| `@triniwiz/nativescript-masonkit/web` | `div`, `section`, `header`, `footer`, `article`, `main`, `nav`, `aside`, `span`, `code`, `h1`-`h6`, `p`, `ul`, `li`, `blockquote`, `b`, `strong`, `a` |
+| `@triniwiz/nativescript-masonkit/web` | Every HTML-shaped element: `div`, `section`, `p`, `span`, `h1`-`h6`, `ul`, `ol`, `li`, `a`, `details`, `summary`, `label` and [more](https://triniwiz.github.io/nativescript-mason/elements/html) |
 
 Each name works in its original, lowercase and kebab-case spelling, so `<View>`,
 `<view>` and `<text-area>` all resolve.
 
 Note that these **replace** some core elements in Angular templates: `<Button>`,
-`<img>` and `<Span>` resolve to MasonKit's versions rather than core's `Button`,
-`Image` and `Span`. Turn off either set if you would rather keep the classic
+`<button>` and `<img>` resolve to MasonKit's versions rather than core's `Button`
+and `Image`, and so do lowercase `<span>` and `<label>`. The exact spellings
+`<Span>` and `<Label>` stay core's, which `<FormattedString>` needs. Turn off either set if you would rather keep the classic
 widgets:
 
 ```ts
@@ -185,9 +186,6 @@ rather than inserted in position, and removals leave stale entries behind.
 That component is a page root whose host box collapsed. Add its selector to
 `passthrough`. Check the console - auto-detection logs the name.
 
-**Everything looks cramped, but the text size is right.**
-Lengths are in `px`. In NativeScript that means physical pixels. Drop the unit.
-
 **A component's `class` or `backgroundColor` does nothing.**
 Component host mode is off, or that element is in `passthrough`.
 

package/button/index.windows.js

@@ -3,7 +3,7 @@ import { ButtonBase, textContentProperty } from '../common';
 import { Style } from '../style';
 import { Tree } from '../tree';
 import { style_, isText_, isMasonView_, native_, runMember_ } from '../symbols';
-import { removeNativeChild } from '../windows-panel-helpers';
+import { removeNativeChild } from '../panel-helpers';
 let Button = class Button extends ButtonBase {
     constructor() {
         super();

package/button/index.windows.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.windows.js","sourceRoot":"","sources":["../../../../packages/nativescript-masonkit/button/index.windows.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.windows.js","sourceRoot":"","sources":["../../../../packages/nativescript-masonkit/button/index.windows.ts"],"names":[],"mappings":"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"}

package/common.d.ts

@@ -431,8 +431,8 @@ export declare class ViewBase extends CustomLayoutView implements AddChildFromBu
     set boxSizing(value: BoxSizing);
     get display(): Display;
     set display(value: Display);
-    get overflow(): Overflow | "auto auto" | "auto hidden" | "auto scroll" | "auto clip" | "auto visible" | "hidden auto" | "hidden hidden" | "hidden scroll" | "hidden clip" | "hidden visible" | "scroll auto" | "scroll hidden" | "scroll scroll" | "scroll clip" | "scroll visible" | "clip auto" | "clip hidden" | "clip scroll" | "clip clip" | "clip visible" | "visible auto" | "visible hidden" | "visible scroll" | "visible clip" | "visible visible";
-    set overflow(value: Overflow | "auto auto" | "auto hidden" | "auto scroll" | "auto clip" | "auto visible" | "hidden auto" | "hidden hidden" | "hidden scroll" | "hidden clip" | "hidden visible" | "scroll auto" | "scroll hidden" | "scroll scroll" | "scroll clip" | "scroll visible" | "clip auto" | "clip hidden" | "clip scroll" | "clip clip" | "clip visible" | "visible auto" | "visible hidden" | "visible scroll" | "visible clip" | "visible visible");
+    get overflow(): Overflow | "auto auto" | "auto visible" | "auto hidden" | "auto scroll" | "auto clip" | "visible auto" | "visible visible" | "visible hidden" | "visible scroll" | "visible clip" | "hidden auto" | "hidden visible" | "hidden hidden" | "hidden scroll" | "hidden clip" | "scroll auto" | "scroll visible" | "scroll hidden" | "scroll scroll" | "scroll clip" | "clip auto" | "clip visible" | "clip hidden" | "clip scroll" | "clip clip";
+    set overflow(value: Overflow | "auto auto" | "auto visible" | "auto hidden" | "auto scroll" | "auto clip" | "visible auto" | "visible visible" | "visible hidden" | "visible scroll" | "visible clip" | "hidden auto" | "hidden visible" | "hidden hidden" | "hidden scroll" | "hidden clip" | "scroll auto" | "scroll visible" | "scroll hidden" | "scroll scroll" | "scroll clip" | "clip auto" | "clip visible" | "clip hidden" | "clip scroll" | "clip clip");
     get overflowX(): Overflow;
     set overflowX(value: Overflow);
     get overflowY(): Overflow;
@@ -500,6 +500,12 @@ export declare class ViewBase extends CustomLayoutView implements AddChildFromBu
     set textOverFlow(value: CoreTypes.TextOverflowType);
     get textOverFlow(): CoreTypes.TextOverflowType;
     updateNativeTransform(): any;
+    _windowsTransformOrigin(native: any): {
+        x: number;
+        y: number;
+    };
+    _windowsTransformValue: unknown;
+    _applyWindowsTransform(value?: unknown): void;
     animate(options: any): any;
 }
 export declare function windowsFontSource(font: any): string;

package/common.js

@@ -15,10 +15,11 @@ import { adoptForeignLayout, releaseForeignLayout } from './foreign-layout';
 import { Style, nodeHelper, cssLengthToDip, resolveCssMathIn } from './style';
 import { encodeBoxShadows, parseBoxShadows } from './box-shadow';
 import { parseCssTransform } from './css-transform';
-import { alignContentProperty, aspectRatioProperty, backgroundProperty, borderRadiusProperty, bottomProperty, boxSizingProperty, clearProperty, columnGapProperty, cornerShapeProperty, displayProperty, filterProperty, flexBasisProperty, floatProperty, gridAreaProperty, gridAutoColumnsProperty, gridAutoFlowProperty, gridAutoRowsProperty, gridColumnEndProperty, gridColumnProperty, gridColumnStartProperty, gridRowEndProperty, gridRowProperty, gridRowStartProperty, gridTemplateAreasProperty, gridTemplateColumnsProperty, gridTemplateRowsProperty, justifyItemsProperty, justifySelfProperty, leftProperty, marginProperty, maxHeightProperty, maxWidthProperty, overflowXProperty, overflowYProperty, paddingProperty, positionProperty, rightProperty, rowGapProperty, scrollBarWidthProperty, textOverFlowProperty, textProperty, textWrapProperty, topProperty, verticalAlignProperty, boxShadowProperty, transformProperty, borderColorProperty, borderTopStyleProperty, borderRightStyleProperty, borderBottomStyleProperty, borderLeftStyleProperty, backgroundImageProperty, listStyleTypeProperty, listStylePositionProperty, installMasonSizeUnits, } from './properties';
+import { alignContentProperty, aspectRatioProperty, backgroundProperty, borderRadiusProperty, bottomProperty, boxSizingProperty, clearProperty, columnGapProperty, cornerShapeProperty, displayProperty, filterProperty, flexBasisProperty, floatProperty, gridAreaProperty, gridAutoColumnsProperty, gridAutoFlowProperty, gridAutoRowsProperty, gridColumnEndProperty, gridColumnProperty, gridColumnStartProperty, gridRowEndProperty, gridRowProperty, gridRowStartProperty, gridTemplateAreasProperty, gridTemplateColumnsProperty, gridTemplateRowsProperty, justifyItemsProperty, justifySelfProperty, leftProperty, marginProperty, maxHeightProperty, maxWidthProperty, overflowXProperty, overflowYProperty, paddingProperty, positionProperty, rightProperty, rowGapProperty, scrollBarWidthProperty, textOverFlowProperty, textProperty, textWrapProperty, topProperty, verticalAlignProperty, boxShadowProperty, transformProperty, borderColorProperty, borderTopStyleProperty, borderRightStyleProperty, borderBottomStyleProperty, borderLeftStyleProperty, backgroundImageProperty, listStyleTypeProperty, listStylePositionProperty, installMasonSizeUnits, masonRawDeclaration, } from './properties';
+import { masonLayout } from './display-density';
 import { isMasonView_, isTextChild_, isText_, isPlaceholder_, text_, native_, textNode_, textNodeIndex_, textNodeProxied_, pseudoStyles_, emptyTextNode_, breakRun_, anonymousText_, windowsFontSource_, hostsRuns_, needsAnonymousText_, borderRadiusCorners_, borderSideColors_, eventType_, runMember_, runsInline_, runsSettled_, blockified_, touchAction_ } from './symbols';
 import { Tree } from './tree';
-import { masonEngine, removeNativeChild } from './windows-panel-helpers';
+import { masonEngine, removeNativeChild } from './panel-helpers';
 import { TextNode } from './text-node';
 import { compile } from './pseudo';
 import { frameworkRegistry } from './framework-registry';
@@ -78,7 +79,7 @@ function nativeScrollOffset(view, vertical) {
         return 0;
     if (__ANDROID__) {
         const scroll = org.nativescript.mason.masonkit.WebScroll;
-        return Utils.layout.toDeviceIndependentPixels(vertical ? scroll.scrollTop(native) : scroll.scrollLeft(native));
+        return masonLayout.toDeviceIndependentPixels(vertical ? scroll.scrollTop(native) : scroll.scrollLeft(native));
     }
     if (__APPLE__) {
         return (vertical ? native.mason_scrollTop : native.mason_scrollLeft) ?? 0;
@@ -94,7 +95,7 @@ function nativeScrollMetric(view, metric) {
         return 0;
     let value = 0;
     if (__ANDROID__) {
-        value = Utils.layout.toDeviceIndependentPixels(org.nativescript.mason.masonkit.WebScroll[metric](native));
+        value = masonLayout.toDeviceIndependentPixels(org.nativescript.mason.masonkit.WebScroll[metric](native));
     }
     else if (__APPLE__) {
         value = native[`mason_${metric}`];
@@ -118,7 +119,7 @@ function nativeScrollTo(view, left, top, smooth) {
         return;
     }
     if (__ANDROID__) {
-        org.nativescript.mason.masonkit.WebScroll.scrollTo(native, isNaN(left) ? NaN : Utils.layout.toDevicePixels(left), isNaN(top) ? NaN : Utils.layout.toDevicePixels(top), smooth);
+        org.nativescript.mason.masonkit.WebScroll.scrollTo(native, isNaN(left) ? NaN : masonLayout.toDevicePixels(left), isNaN(top) ? NaN : masonLayout.toDevicePixels(top), smooth);
     }
     else if (__APPLE__) {
         native.mason_scrollTo(left, top, smooth);
@@ -258,8 +259,8 @@ export function setRootNativeViewFrame(view, nativeView, frame) {
     if (!CGRectEqualToRect(adjusted, frame)) {
         // Each measure pass lays the root out at the safe-area size again, so check the
         // computed size rather than whether the frame changed.
-        const width = Utils.layout.toDevicePixels(adjusted.size.width);
-        const height = Utils.layout.toDevicePixels(adjusted.size.height);
+        const width = masonLayout.toDevicePixels(adjusted.size.width);
+        const height = masonLayout.toDevicePixels(adjusted.size.height);
         const layout = view.ios.node.computedLayout;
         if (Math.round(layout.width) !== Math.round(width) || Math.round(layout.height) !== Math.round(height)) {
             view.ios.mason_computeWithSize(width, height);
@@ -494,7 +495,7 @@ export class ViewBase extends CustomLayoutView {
         let nativeHit = null;
         if (__ANDROID__ && typeof nativeView.elementFromPoint === 'function') {
             // Android views hit-test in device pixels.
-            nativeHit = nativeView.elementFromPoint(Utils.layout.toDevicePixels(x), Utils.layout.toDevicePixels(y));
+            nativeHit = nativeView.elementFromPoint(masonLayout.toDevicePixels(x), masonLayout.toDevicePixels(y));
         }
         else if (__APPLE__) {
             const hitTest = nativeView.mason_elementFromPointY ?? nativeView.mason_elementFromPoint ?? nativeView.elementFromPoint;
@@ -1132,13 +1133,13 @@ export class ViewBase extends CustomLayoutView {
     }
     getMeasuredWidth() {
         if (this._masonPlacedNatively && this.nativeViewProtected) {
-            return Math.round(Utils.layout.toDevicePixels(this.nativeViewProtected.frame.size.width));
+            return Math.round(masonLayout.toDevicePixels(this.nativeViewProtected.frame.size.width));
         }
         return super.getMeasuredWidth();
     }
     getMeasuredHeight() {
         if (this._masonPlacedNatively && this.nativeViewProtected) {
-            return Math.round(Utils.layout.toDevicePixels(this.nativeViewProtected.frame.size.height));
+            return Math.round(masonLayout.toDevicePixels(this.nativeViewProtected.frame.size.height));
         }
         return super.getMeasuredHeight();
     }
@@ -2526,14 +2527,14 @@ export class ViewBase extends CustomLayoutView {
         const style = this._styleHelper;
         // @ts-ignore
         if (style)
-            style.lineHeight = value;
+            style.lineHeight = masonRawDeclaration(this.style, 'lineHeight', value);
     }
     [letterSpacingProperty.setNative](value) {
         // @ts-ignore
         const style = this._styleHelper;
         // @ts-ignore
         if (style)
-            style.letterSpacing = value;
+            style.letterSpacing = masonRawDeclaration(this.style, 'letterSpacing', value);
     }
     [textAlignmentProperty.setNative](value) {
         // @ts-ignore
@@ -3385,7 +3386,35 @@ export class ViewBase extends CustomLayoutView {
         if (!native)
             return;
         const self = this;
-        NativeScript.Mason.Css.SetTransforms(native, typeof self.scaleX === 'number' ? self.scaleX : 1, typeof self.scaleY === 'number' ? self.scaleY : 1, self.rotate || 0, self.translateX || 0, self.translateY || 0, self.originX ?? 0.5, self.originY ?? 0.5);
+        const origin = this._windowsTransformOrigin(native);
+        NativeScript.Mason.Css.SetTransforms(native, typeof self.scaleX === 'number' ? self.scaleX : 1, typeof self.scaleY === 'number' ? self.scaleY : 1, self.rotate || 0, self.translateX || 0, self.translateY || 0, origin.x, origin.y);
+    }
+    // CSS transform-origin when set, else core's originX/originY. RenderTransformOrigin is shared
+    // by every part of the element's transform.
+    _windowsTransformOrigin(native) {
+        const self = this;
+        // @ts-ignore
+        const css = this._styleHelper?.transformOriginFraction?.(native?.ActualWidth ?? 0, native?.ActualHeight ?? 0);
+        return css ?? { x: self.originX ?? 0.5, y: self.originY ?? 0.5 };
+    }
+    _applyWindowsTransform(value = this._windowsTransformValue) {
+        // @ts-ignore
+        const style = this._styleHelper;
+        const nv = this.nativeViewProtected ?? this._view;
+        this._windowsTransformValue = value;
+        if (!style || !nv)
+            return;
+        try {
+            const size = { width: nv.ActualWidth ?? 0, height: nv.ActualHeight ?? 0 };
+            const m = parseCssTransform(typeof value === 'string' ? value : '', (token) => cssLengthToDip(token, style.emBasisFor(token)), size);
+            const origin = this._windowsTransformOrigin(nv);
+            if (!m)
+                NativeScript.Mason.Css.ClearTransform(nv);
+            else
+                NativeScript.Mason.Css.ApplyTransform(nv, m[0], m[1], m[2], m[3], m[4], m[5]);
+            NativeScript.Mason.Css.SetTransformOrigin(nv, origin.x, origin.y);
+        }
+        catch (_) { }
     }
     animate(options) {
         if (!__WINDOWS__ || !options || !('rotate' in options || 'scale' in options || 'translate' in options)) {
@@ -3422,23 +3451,9 @@ export class ViewBase extends CustomLayoutView {
         if (style) {
             // @ts-ignore
             style.transform = value;
-            if (__WINDOWS__) {
-                // transform isn't a Mason buffer prop — apply it to the FrameworkElement via Composition,
-                // like @nativescript/core does on its own panels (the plugin's View is a custom Panel core
-                // doesn't drive transforms on). Parse the CSS string to a matrix and set RenderTransform.
-                const nv = this.nativeViewProtected ?? this._view;
-                try {
-                    const size = { width: nv?.ActualWidth ?? 0, height: nv?.ActualHeight ?? 0 };
-                    const m = parseCssTransform(typeof value === 'string' ? value : '', (token) => cssLengthToDip(token, style.emBasisFor(token)), size);
-                    if (!m)
-                        NativeScript.Mason.Css.ClearTransform(nv);
-                    else {
-                        NativeScript.Mason.Css.ApplyTransform(nv, m[0], m[1], m[2], m[3], m[4], m[5]);
-                        NativeScript.Mason.Css.SetTransformOrigin(nv, this.originX ?? 0.5, this.originY ?? 0.5);
-                    }
-                }
-                catch (_) { }
-            }
+            // Windows: transform isn't read from the buffer; it becomes the panel's RenderTransform.
+            if (__WINDOWS__)
+                this._applyWindowsTransform(value);
         }
     }
 }