@ng-native/components 0.2.0 → 0.4.0

package/dist/zero-size-warning.js

@@ -0,0 +1,58 @@
+/**
+ * In development, says once when a scrolling element with content stays at zero size along its
+ * axis: the usual sign of a component host without `flex: 1`, which renders nothing and says
+ * nothing. A second's grace, so a container that is collapsed or animating open is not reported.
+ */
+export class ZeroSizeWarning {
+    timer;
+    warned = false;
+    element;
+    horizontal;
+    /**
+     * `element` names the element as written: `<scroll-view class="feed">`. `horizontal` says
+     * whether it scrolls along x, so its size is a width.
+     */
+    constructor(element, horizontal) {
+        this.element = element;
+        this.horizontal = horizontal;
+    }
+    /**
+     * A layout, or new content: its size along the scroll axis, and whether there is anything to
+     * show. Still zero with content keeps the deadline already running rather than starting over.
+     */
+    laidOut(size, hasContent) {
+        if (this.warned)
+            return;
+        if (size > 0 || !hasContent) {
+            clearTimeout(this.timer);
+            this.timer = undefined;
+        }
+        else {
+            this.timer ??= setTimeout(() => this.warn(), 1000);
+        }
+    }
+    stop() {
+        clearTimeout(this.timer);
+    }
+    warn() {
+        this.warned = true;
+        const [size, big] = this.horizontal() ? ['width', 'wide'] : ['height', 'tall'];
+        console.warn(`[angular-native] ${this.element()} has content but is laid out at zero ${size}, so it ` +
+            `shows nothing. A component's host is a flex item that is as ${big} as its content: give ` +
+            `the host, or the element, flex: 1 or a ${size}. See ` +
+            `https://ng-native.com/packages/components/layout#a-components-host-is-a-flex-item`);
+    }
+}
+/** Whether this is a development build, where the check runs. A release build folds it away. */
+export const checksZeroSize = () => typeof ngDevMode !== 'undefined' && !!ngDevMode;
+/**
+ * An element as written in a template, with its classes: `<virtual-list class="feed">`. A node is
+ * the engine's on a device, and a DOM element on the web host.
+ */
+export function written(node) {
+    const { name, localName, classes, classList } = node;
+    // An engine node has a `classList` too, for Angular's renderer, but its classes are `classes`.
+    const names = [...((classes === undefined ? classList : classes) ?? [])];
+    return `<${name ?? localName}${names.length ? ` class="${names.join(' ')}"` : ''}>`;
+}
+//# sourceMappingURL=zero-size-warning.js.map

package/dist/zero-size-warning.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zero-size-warning.js","sourceRoot":"","sources":["../src/zero-size-warning.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,OAAO,eAAe;IAClB,KAAK,CAA4C;IACjD,MAAM,GAAG,KAAK,CAAC;IAEN,OAAO,CAAe;IACtB,UAAU,CAAgB;IAE3C;;;OAGG;IACH,YAAY,OAAqB,EAAE,UAAyB;QAC1D,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC;QACvB,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC;IAC/B,CAAC;IAED;;;OAGG;IACH,OAAO,CAAC,IAAY,EAAE,UAAmB;QACvC,IAAI,IAAI,CAAC,MAAM;YAAE,OAAO;QACxB,IAAI,IAAI,GAAG,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YAC5B,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACzB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC;QACzB,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,KAAK,UAAU,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC;QACrD,CAAC;IACH,CAAC;IAED,IAAI;QACF,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC;IAEO,IAAI;QACV,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;QACnB,MAAM,CAAC,IAAI,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QAC/E,OAAO,CAAC,IAAI,CACV,oBAAoB,IAAI,CAAC,OAAO,EAAE,wCAAwC,IAAI,UAAU;YACtF,+DAA+D,GAAG,wBAAwB;YAC1F,0CAA0C,IAAI,QAAQ;YACtD,mFAAmF,CACtF,CAAC;IACJ,CAAC;CACF;AAID,gGAAgG;AAChG,MAAM,CAAC,MAAM,cAAc,GAAG,GAAY,EAAE,CAAC,OAAO,SAAS,KAAK,WAAW,IAAI,CAAC,CAAC,SAAS,CAAC;AAE7F;;;GAGG;AACH,MAAM,UAAU,OAAO,CAAC,IAAa;IACnC,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAK/C,CAAC;IACF,+FAA+F;IAC/F,MAAM,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IACzE,OAAO,IAAI,IAAI,IAAI,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC;AACtF,CAAC","sourcesContent":["/**\n * In development, says once when a scrolling element with content stays at zero size along its\n * axis: the usual sign of a component host without `flex: 1`, which renders nothing and says\n * nothing. A second's grace, so a container that is collapsed or animating open is not reported.\n */\nexport class ZeroSizeWarning {\n  private timer: ReturnType<typeof setTimeout> | undefined;\n  private warned = false;\n\n  private readonly element: () => string;\n  private readonly horizontal: () => boolean;\n\n  /**\n   * `element` names the element as written: `<scroll-view class=\"feed\">`. `horizontal` says\n   * whether it scrolls along x, so its size is a width.\n   */\n  constructor(element: () => string, horizontal: () => boolean) {\n    this.element = element;\n    this.horizontal = horizontal;\n  }\n\n  /**\n   * A layout, or new content: its size along the scroll axis, and whether there is anything to\n   * show. Still zero with content keeps the deadline already running rather than starting over.\n   */\n  laidOut(size: number, hasContent: boolean): void {\n    if (this.warned) return;\n    if (size > 0 || !hasContent) {\n      clearTimeout(this.timer);\n      this.timer = undefined;\n    } else {\n      this.timer ??= setTimeout(() => this.warn(), 1000);\n    }\n  }\n\n  stop(): void {\n    clearTimeout(this.timer);\n  }\n\n  private warn(): void {\n    this.warned = true;\n    const [size, big] = this.horizontal() ? ['width', 'wide'] : ['height', 'tall'];\n    console.warn(\n      `[angular-native] ${this.element()} has content but is laid out at zero ${size}, so it ` +\n        `shows nothing. A component's host is a flex item that is as ${big} as its content: give ` +\n        `the host, or the element, flex: 1 or a ${size}. See ` +\n        `https://ng-native.com/packages/components/layout#a-components-host-is-a-flex-item`,\n    );\n  }\n}\n\ndeclare const ngDevMode: unknown;\n\n/** Whether this is a development build, where the check runs. A release build folds it away. */\nexport const checksZeroSize = (): boolean => typeof ngDevMode !== 'undefined' && !!ngDevMode;\n\n/**\n * An element as written in a template, with its classes: `<virtual-list class=\"feed\">`. A node is\n * the engine's on a device, and a DOM element on the web host.\n */\nexport function written(node: unknown): string {\n  const { name, localName, classes, classList } = node as {\n    name?: string;\n    localName?: string;\n    classes?: Iterable<string> | null;\n    classList?: Iterable<string>;\n  };\n  // An engine node has a `classList` too, for Angular's renderer, but its classes are `classes`.\n  const names = [...((classes === undefined ? classList : classes) ?? [])];\n  return `<${name ?? localName}${names.length ? ` class=\"${names.join(' ')}\"` : ''}>`;\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-native/components",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Angular Native's core components: view, text, image, pressable, scroll-view, virtual-list, text-input and the rest of React Native's set.",
   "keywords": [
     "angular",
@@ -27,20 +27,34 @@
     },
     "./gestures": {
       "types": "./dist/gestures.d.ts",
+      "browser": "./dist/gestures-web.js",
       "default": "./dist/gestures.js"
     },
     "./reanimated": {
       "types": "./dist/reanimated.d.ts",
+      "browser": "./dist/reanimated-web.js",
       "default": "./dist/reanimated.js"
     },
+    "./stand-ins/reanimated": {
+      "types": "./dist/stand-ins/reanimated.d.ts",
+      "default": "./dist/stand-ins/reanimated.js"
+    },
+    "./stand-ins/worklets": {
+      "types": "./dist/stand-ins/worklets.d.ts",
+      "default": "./dist/stand-ins/worklets.js"
+    },
+    "./stand-ins/gesture-handler": {
+      "types": "./dist/stand-ins/gesture-handler.d.ts",
+      "default": "./dist/stand-ins/gesture-handler.js"
+    },
     "./package.json": "./package.json"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@ng-native/device": "0.2.0",
-    "@ng-native/fabric": "0.2.0"
+    "@ng-native/device": "0.4.0",
+    "@ng-native/fabric": "0.4.0"
   },
   "peerDependencies": {
     "@angular/core": "^22.0.0",
@@ -87,7 +101,8 @@
     "dist"
   ],
   "devDependencies": {
-    "@angular/core": "22.2.0"
+    "@angular/core": "22.2.0",
+    "@babel/core": "^7.29.7"
   },
   "scripts": {
     "build": "ngc -p tsconfig.build.json",