nativescript-vue 3.0.3 → 3.1.1

package/README.md

@@ -8,7 +8,7 @@
     <a href="https://www.npmjs.com/package/nativescript-vue">
        <img src="https://img.shields.io/npm/v/nativescript-vue/latest.svg" alt="npm"/>
     </a>
-    <a href="https://github.com/nativescript-vue/nativescript-vue/blob/master/LICENSE">
+    <a href="https://github.com/nativescript-vue/nativescript-vue/blob/main/LICENSE">
        <img src="https://img.shields.io/github/license/nativescript-vue/nativescript-vue.svg" alt="license"/>
     </a>
 </p>
@@ -34,12 +34,26 @@ Please refer to our [Upgrade Guide](https://nativescript-vue.org/docs/essentials
 
 ## Using Vue Devtools
 
-To enable Vue Devtools, run:
+Install the standalone devtools in your app (it is not pulled in by
+nativescript-vue because it depends on Electron):
+
+```sh
+npm i -D @vue/devtools@^8
+```
+
+Then run with the `vueDevtools` flag. The devtools window opens on the host
+machine and the app connects to it:
 
 ```sh
 ns run ios|android --env.vueDevtools
 ```
 
+A free port from 8098 up is picked automatically; pass `--env.vueDevtoolsPort=9000`
+to pin one, or `--env.vueDevtoolsHost=http://192.168.1.10` to reach the
+devtools from a physical device. `--env.vueDevtoolsSpawn=false` skips
+launching the devtools app, for when one is already running, and
+`--env.vueDevtoolsDebug` logs the socket traffic between app and devtools.
+
 🛠️ **Android Users:**
 To allow Vue Devtools to connect, enable **cleartext HTTP traffic** in your `AndroidManifest.xml`:
 
@@ -49,6 +63,27 @@ To allow Vue Devtools to connect, enable **cleartext HTTP traffic** in your `And
 .../>
 ```
 
+## TypeScript
+
+Types for every core element, `$navigateTo`, `$showModal` and friends ship
+with the package. Third-party libraries such as Pinia or vue-i18n augment the
+`vue` module, and code often imports from `vue`. The templates map `vue` to
+`nativescript-vue` in `tsconfig.json` so both resolve; add this to existing
+projects:
+
+```json
+{
+  "compilerOptions": {
+    "paths": {
+      "vue": ["./node_modules/nativescript-vue"]
+    }
+  },
+  "vueCompilerOptions": {
+    "lib": "nativescript-vue"
+  }
+}
+```
+
 ## Issues
 
 If you encounter any issues, please open a new issue with as much detail as possible.

package/devtools.js

@@ -1,33 +1,109 @@
+// Bundled into the app ahead of its entry point by nativescript.webpack.js
+// when running with --env.vueDevtools. Connects to the standalone Vue
+// Devtools app over socket.io, mirroring @vue/devtools-electron's user-app
+// client but without the DOM inspector code that expects a browser.
 if (__DEV__) {
   try {
-    const _global = globalThis.global;
+    const target = globalThis;
+    const host = (target.__VUE_DEVTOOLS_HOST__ ??= __NS_VUE_DEVTOOLS_HOST__);
+    const port = (target.__VUE_DEVTOOLS_PORT__ ??= __NS_VUE_DEVTOOLS_PORT__);
+    const url = `${host}:${port}`;
 
-    const host = (_global.__VUE_DEVTOOLS_HOST__ ??= __NS_VUE_DEVTOOLS_HOST__);
-    const port = (_global.__VUE_DEVTOOLS_PORT__ ??= __NS_VUE_DEVTOOLS_PORT__);
-    _global.__VUE_DEVTOOLS_TOAST__ ??= (message) => {
-      console.warn('[VueDevtools]', message);
-    };
+    const {
+      devtools,
+      setElectronServerContext,
+      createRpcServer,
+    } = require('@vue/devtools-kit');
+
+    // The hook must exist before anything evaluates nativescript-vue: its
+    // renderer reads the hook once at import and, without a window to
+    // replay into, treats a missing hook as "devtools not installed" for
+    // the rest of the session. @vue/devtools-core imports 'vue', which the
+    // webpack alias resolves to nativescript-vue, so it has to come after.
+    devtools.init();
+
+    const { io } = require('socket.io-client');
+    const { functions } = require('@vue/devtools-core');
 
     const platform = global.isAndroid ? 'Android' : 'iOS';
+    console.log(`[VueDevtools] Connecting to ${url} (${platform})...`);
+
+    const socket = io(url, {
+      // NativeScript exposes XMLHttpRequest but no global WebSocket
+      transports: ['polling'],
+      reconnectionDelayMax: 5000,
+    });
+
+    if (__NS_VUE_DEVTOOLS_DEBUG__) {
+      const preview = (args) =>
+        args.map((a) => String(a).slice(0, 160)).join(' ');
+      socket.onAny((event, ...args) =>
+        console.log(`[VueDevtools] <- ${event} ${preview(args)}`),
+      );
+      socket.onAnyOutgoing((event, ...args) =>
+        console.log(`[VueDevtools] -> ${event} ${preview(args)}`),
+      );
+      socket.on('disconnect', (reason) =>
+        console.log(`[VueDevtools] disconnected: ${reason}`),
+      );
+      socket.io.on('reconnect_attempt', (n) =>
+        console.log(`[VueDevtools] reconnect attempt ${n}`),
+      );
+      socket.io.on('error', (err) =>
+        console.log(`[VueDevtools] transport error: ${err.message}`),
+      );
+    }
+
+    let serverReady = false;
+    socket.on('connect', () => {
+      // the Socket instance survives reconnects, so the RPC server only
+      // needs wiring once; the devtools window needs init after every
+      // (re)connect because it is what evicted us in the first place
+      if (!serverReady) {
+        setElectronServerContext(socket);
+        createRpcServer(functions, { preset: 'electron' });
+        serverReady = true;
+      }
+      socket.emit('vue-devtools:init');
+      console.log(`[VueDevtools] Connected to ${url}`);
+
+      if (__NS_VUE_DEVTOOLS_DEBUG__) {
+        setTimeout(() => {
+          const { devtoolsState } = require('@vue/devtools-kit');
+          console.log(
+            `[VueDevtools] state: apps=${devtoolsState.appRecords.length} ` +
+              `connected=${devtoolsState.connected} ` +
+              `clientConnected=${devtoolsState.clientConnected} ` +
+              `vue=${devtoolsState.vueVersion}`,
+          );
+        }, 2000);
+      }
+    });
+
+    // the devtools app tells every other client to leave whenever a new
+    // socket connects, including when its own window opens after the app;
+    // reconnecting shortly after makes the start order irrelevant
+    socket.on('vue-devtools:disconnect-user-app', () => {
+      socket.disconnect();
+      setTimeout(() => socket.connect(), 1000);
+    });
 
-    const documentShim = {
-      // this shows as the title in VueDevtools
-      title: `${platform} :: ${host}:${port} :: NativeScript`,
-      querySelector: () => null,
-      querySelectorAll: () => [],
-    };
-
-    _global.document = Object.assign({}, documentShim, _global.document);
-    _global.addEventListener ??= () => {};
-    _global.removeEventListener ??= () => {};
-    _global.window ??= _global;
-
-    console.warn(
-      `[VueDevtools] Connecting to ${global.__VUE_DEVTOOLS_HOST__}:${global.__VUE_DEVTOOLS_PORT__}...`,
-    );
-    require('@vue/devtools/build/hook.js');
-    require('@vue/devtools/build/backend.js');
+    let reportedError = false;
+    socket.on('connect_error', (err) => {
+      if (reportedError) return;
+      reportedError = true;
+      console.warn(
+        `[VueDevtools] Could not reach ${url}: ${err.message}. ` +
+          `Is the devtools app running?` +
+          (global.isAndroid
+            ? ` On Android, cleartext HTTP must be allowed (android:usesCleartextTraffic="true").`
+            : ''),
+      );
+    });
+    socket.on('connect', () => {
+      reportedError = false;
+    });
   } catch (e) {
-    console.warn('[VueDevtools] Failed to init:', e);
+    console.warn('[VueDevtools] Failed to start:', e);
   }
 }

package/dist/components/ActionBar.js

@@ -12,7 +12,7 @@ registerElement('NSCActionBar', () => NSCActionBar, {
                 actionBar.navigationButton = childView;
             }
             else if (childView instanceof NSCActionItem) {
-                if (atIndex) {
+                if (typeof atIndex === 'number') {
                     const ai = actionBar.actionItems.getItems();
                     ai.splice(atIndex, 0, childView);
                     actionBar.actionItems.setItems(ai);

package/dist/components/ActionBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.js","sourceRoot":"","sources":["../../src/components/ActionBar.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ActionBar.js","sourceRoot":"","sources":["../../src/components/ActionBar.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  ActionBar as NSCActionBar,\n  ActionItem as NSCActionItem,\n  NavigationButton as NSCNavigationButton,\n  Page as NSCPage,\n} from '@nativescript/core';\nimport { defineComponent, h } from '@vue/runtime-core';\nimport { NSVElement, NSVViewFlags } from '../dom';\nimport { registerElement } from '../registry';\nimport { logger } from '../util/logger';\n\nregisterElement('NSCActionBar', () => NSCActionBar, {\n  viewFlags: NSVViewFlags.SKIP_ADD_TO_DOM,\n  nodeOps: {\n    insert(child, parent, atIndex) {\n      const actionBar = parent.nativeView as NSCActionBar;\n      const childView = child.nativeView;\n\n      if (childView instanceof NSCNavigationButton) {\n        actionBar.navigationButton = childView;\n      } else if (childView instanceof NSCActionItem) {\n        if (typeof atIndex === 'number') {\n          const ai: NSCActionItem[] = actionBar.actionItems.getItems();\n          ai.splice(atIndex, 0, childView);\n          (actionBar.actionItems as any).setItems(ai);\n        } else {\n          actionBar.actionItems.addItem(childView);\n        }\n      } else {\n        actionBar.titleView = childView;\n      }\n    },\n    remove(child, parent) {\n      const actionBar = parent.nativeView as NSCActionBar;\n      const childView = child.nativeView;\n\n      if (childView instanceof NSCNavigationButton) {\n        if (actionBar.navigationButton === childView) {\n          actionBar.navigationButton = null;\n        }\n      } else if (childView instanceof NSCActionItem) {\n        actionBar.actionItems.removeItem(childView);\n      } else {\n        if (actionBar.titleView === childView) {\n          actionBar.titleView = null;\n        }\n      }\n    },\n  },\n});\n\nexport const ActionBar = /*#__PURE__*/ defineComponent({\n  name: 'ActionBar',\n  setup(props, ctx) {\n    return () => {\n      return h(\n        'NSCActionBar',\n        {\n          ...ctx.attrs,\n          onVnodeMounted(vnode) {\n            const el = vnode.el as NSVElement;\n            const actionBar = el.nativeView as NSCActionBar;\n            const parent = el.parentNode as NSVElement;\n\n            if (parent.nativeView instanceof NSCPage) {\n              parent.nativeView.actionBar = actionBar;\n            } else {\n              if (__DEV__) {\n                logger.warn(\n                  `<ActionBar> must be a direct child of a <Page> element - ` +\n                    `got <${parent.nativeView.constructor.name}> instead.`,\n                );\n              }\n            }\n          },\n        },\n        ctx.slots.default ? ctx.slots.default() : undefined,\n      );\n    };\n  },\n});\n"]}

package/dist/components/ListView.d.ts

@@ -1,11 +1,13 @@
 import { VNode } from '@vue/runtime-core';
-import { ObservableArray } from '@nativescript/core';
+import { ItemEventData, ObservableArray } from '@nativescript/core';
 export interface ListItem<T = any> {
     item: T;
     index: number;
     even: boolean;
     odd: boolean;
 }
+/** Payload of the ListView `itemTap` event. */
+export type ListViewItemTapEvent<T = any> = ItemEventData & ListItem<T>;
 export declare const ListView: import("@vue/runtime-core").DefineComponent<import("@vue/runtime-core").ExtractPropTypes<{
     items: {
         validator(value: unknown): value is any[] | ObservableArray<any>;
@@ -13,9 +15,13 @@ export declare const ListView: import("@vue/runtime-core").DefineComponent<impor
     itemTemplateSelector: FunctionConstructor;
 }>, () => VNode<import("@vue/runtime-core").RendererNode, import("@vue/runtime-core").RendererElement, {
     [key: string]: any;
-}>, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
+}>, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
+    itemTap: (event: ListViewItemTapEvent) => boolean;
+}, string, import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
     items: {
         validator(value: unknown): value is any[] | ObservableArray<any>;
     };
     itemTemplateSelector: FunctionConstructor;
-}>> & Readonly<{}>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, true, {}, any>;
+}>> & Readonly<{
+    onItemTap?: (event: ListViewItemTapEvent<any>) => any;
+}>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, true, {}, any>;

package/dist/components/ListView.js

@@ -1,4 +1,4 @@
-import { Comment, defineComponent, getCurrentInstance, h, ref, watch, } from '@vue/runtime-core';
+import { Comment, defineComponent, Fragment, getCurrentInstance, h, ref, watch, } from '@vue/runtime-core';
 import { ListView as NSCListView, ObservableArray, } from '@nativescript/core';
 import { registerElement } from '../registry';
 import { ELEMENT_REF } from '../runtimeHelpers';
@@ -15,6 +15,22 @@ function getListItem(item, index) {
     };
 }
 const LIST_CELL_ID = Symbol('list_cell_id');
+/**
+ * The element vnodes a template renders. Fragments are unwrapped because a
+ * forwarded `<slot>` renders as one, and a cell needs an element to hand to
+ * the native ListView.
+ */
+function templateRoots(vnodes) {
+    return vnodes.flatMap((vnode) => {
+        if (vnode.type === Comment) {
+            return [];
+        }
+        if (vnode.type === Fragment) {
+            return templateRoots(vnode.children);
+        }
+        return [vnode];
+    });
+}
 export const ListView = /*#__PURE__*/ defineComponent({
     name: 'ListView',
     props: {
@@ -25,6 +41,9 @@ export const ListView = /*#__PURE__*/ defineComponent({
         },
         itemTemplateSelector: Function,
     },
+    emits: {
+        itemTap: (event) => !!event,
+    },
     setup(props, ctx) {
         const itemTemplates = Object.keys(ctx.slots).map((slotName) => {
             return {
@@ -37,8 +56,9 @@ export const ListView = /*#__PURE__*/ defineComponent({
         const getSlotName = (itemCtx) => props.itemTemplateSelector?.(itemCtx) ?? 'default';
         const listView = ref(null);
         const vm = getCurrentInstance();
-        watch(props, () => {
+        function refresh() {
             try {
+                // ObservableArray notifies the native ListView of changes itself
                 if (props.items instanceof ObservableArray) {
                     return;
                 }
@@ -48,15 +68,27 @@ export const ListView = /*#__PURE__*/ defineComponent({
             catch (err) {
                 console.error('Error while refreshing ListView', err);
             }
-        });
+        }
+        // depth 1 tracks the array's length and slots without walking into the
+        // items themselves; cells re-render on their own when item fields change
+        watch(() => props.items, refresh, { deep: 1 });
+        watch(() => props.itemTemplateSelector, refresh);
+        function listItemAt(index) {
+            return getListItem(props.items instanceof ObservableArray
+                ? props.items.getItem(index)
+                : props.items[index], index);
+        }
+        // the native event carries only the index; the template's item context
+        // is what handlers want
+        function onItemTap(event) {
+            ctx.emit('itemTap', Object.assign(event, listItemAt(event.index)));
+        }
         let cellId = 0;
         const cells = ref({});
-        function onitemLoading(event) {
+        function onItemLoading(event) {
             const el = event.view?.[ELEMENT_REF];
             const id = el?.nativeView[LIST_CELL_ID] ?? `LIST_CELL_${cellId++}`;
-            const itemCtx = getListItem(props.items instanceof ObservableArray
-                ? props.items.getItem(event.index)
-                : props.items[event.index], event.index);
+            const itemCtx = listItemAt(event.index);
             // update the cell data with the current row
             cells.value[id] = {
                 itemCtx,
@@ -80,15 +112,14 @@ export const ListView = /*#__PURE__*/ defineComponent({
         }
         // render all realized templates as children
         const cellVNODES = () => Object.entries(cells.value).map(([id, entry]) => {
-            const vnodes = ctx.slots[entry.slotName]?.(entry.itemCtx) ?? [];
-            const nonCommentVnodes = vnodes.filter((vnode) => vnode.type !== Comment);
-            if (nonCommentVnodes.length === 0) {
+            const roots = templateRoots(ctx.slots[entry.slotName]?.(entry.itemCtx) ?? []);
+            if (roots.length === 0) {
                 logger.warn(`ListView template must contain at least one element.`);
             }
-            else if (nonCommentVnodes.length > 1) {
-                logger.warn(`ListView template must contain a single root element. Found: ${vnodes.length}. Only the first one will be used.`);
+            else if (roots.length > 1) {
+                logger.warn(`ListView template must contain a single root element. Found: ${roots.length}. Only the first one will be used.`);
             }
-            const vnode = nonCommentVnodes.at(0) ??
+            const vnode = roots.at(0) ??
                 // default template is just a label
                 h('Label', {
                     text: entry.itemCtx.item,
@@ -103,7 +134,8 @@ export const ListView = /*#__PURE__*/ defineComponent({
                 items: props.items,
                 itemTemplates,
                 itemTemplateSelector,
-                onitemLoading,
+                onItemLoading,
+                onItemTap,
             }, cellVNODES());
         };
     },

package/dist/components/ListView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListView.js","sourceRoot":"","sources":["../../src/components/ListView.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"ListView.js","sourceRoot":"","sources":["../../src/components/ListView.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  Comment,\n  defineComponent,\n  Fragment,\n  getCurrentInstance,\n  h,\n  ref,\n  VNode,\n  watch,\n} from '@vue/runtime-core';\n\nimport {\n  ItemEventData,\n  ListView as NSCListView,\n  ObservableArray,\n} from '@nativescript/core';\n\nimport { NSVElement, NSVViewFlags } from '../dom';\nimport { registerElement } from '../registry';\nimport { ELEMENT_REF } from '../runtimeHelpers';\nimport { logger } from '../util/logger';\n\nregisterElement('NSCListView', () => NSCListView, {\n  viewFlags: NSVViewFlags.NO_CHILDREN,\n});\n\nexport interface ListItem<T = any> {\n  item: T;\n  index: number;\n  even: boolean;\n  odd: boolean;\n}\n\n/** Payload of the ListView `itemTap` event. */\nexport type ListViewItemTapEvent<T = any> = ItemEventData & ListItem<T>;\n\nfunction getListItem(item: any, index: number): ListItem {\n  return {\n    item,\n    index,\n    even: index % 2 === 0,\n    odd: index % 2 !== 0,\n  };\n}\n\nconst LIST_CELL_ID = Symbol('list_cell_id');\n\n/**\n * The element vnodes a template renders. Fragments are unwrapped because a\n * forwarded `<slot>` renders as one, and a cell needs an element to hand to\n * the native ListView.\n */\nfunction templateRoots(vnodes: VNode[]): VNode[] {\n  return vnodes.flatMap((vnode) => {\n    if (vnode.type === Comment) {\n      return [];\n    }\n    if (vnode.type === Fragment) {\n      return templateRoots(vnode.children as VNode[]);\n    }\n    return [vnode];\n  });\n}\n\nexport const ListView = /*#__PURE__*/ defineComponent({\n  name: 'ListView',\n  props: {\n    items: {\n      validator(value) {\n        return Array.isArray(value) || value instanceof ObservableArray;\n      },\n    },\n    itemTemplateSelector: Function,\n  },\n  emits: {\n    itemTap: (event: ListViewItemTapEvent) => !!event,\n  },\n  setup(props, ctx) {\n    const itemTemplates = Object.keys(ctx.slots).map((slotName) => {\n      return {\n        key: slotName,\n        createView() {\n          // no need to return anything here\n        },\n      };\n    });\n\n    const getSlotName = (itemCtx: ListItem) =>\n      props.itemTemplateSelector?.(itemCtx) ?? 'default';\n\n    const listView = ref(null);\n\n    const vm = getCurrentInstance();\n\n    function refresh() {\n      try {\n        // ObservableArray notifies the native ListView of changes itself\n        if (props.items instanceof ObservableArray) {\n          return;\n        }\n\n        const lv: NSCListView = listView.value?.nativeView;\n        lv?.refresh();\n      } catch (err) {\n        console.error('Error while refreshing ListView', err);\n      }\n    }\n\n    // depth 1 tracks the array's length and slots without walking into the\n    // items themselves; cells re-render on their own when item fields change\n    watch(() => props.items, refresh, { deep: 1 });\n    watch(() => props.itemTemplateSelector, refresh);\n\n    function listItemAt(index: number): ListItem {\n      return getListItem(\n        props.items instanceof ObservableArray\n          ? props.items.getItem(index)\n          : props.items[index],\n        index,\n      );\n    }\n\n    // the native event carries only the index; the template's item context\n    // is what handlers want\n    function onItemTap(event: ItemEventData) {\n      ctx.emit('itemTap', Object.assign(event, listItemAt(event.index)));\n    }\n\n    let cellId = 0;\n    interface ItemCellData {\n      itemCtx: ListItem;\n      slotName: string;\n    }\n    const cells = ref<Record<string, ItemCellData>>({});\n\n    function onItemLoading(event: ItemEventData) {\n      const el = event.view?.[ELEMENT_REF] as NSVElement;\n      const id = el?.nativeView[LIST_CELL_ID] ?? `LIST_CELL_${cellId++}`;\n\n      const itemCtx = listItemAt(event.index);\n\n      // update the cell data with the current row\n      cells.value[id] = {\n        itemCtx,\n        slotName: getSlotName(itemCtx),\n      };\n\n      // trigger an update!\n      vm.update();\n\n      // find the vnode rendering this cell\n      const vnode = (vm.subTree.children as VNode[]).find((vnode) => {\n        return vnode.key === id;\n      });\n\n      // store the cell id on the Element itself so we can retrieve it when recycling kicks in\n      const cellEl = vnode.el.nativeView;\n      cellEl[LIST_CELL_ID] = id;\n\n      // finally, set the event.view to the rendered cellEl\n      event.view = cellEl;\n    }\n\n    function itemTemplateSelector(item, index) {\n      // pass on the template selector call with the ListItem context\n      return getSlotName(getListItem(item, index));\n    }\n\n    // render all realized templates as children\n    const cellVNODES = () =>\n      Object.entries(cells.value).map(([id, entry]) => {\n        const roots = templateRoots(\n          ctx.slots[entry.slotName]?.(entry.itemCtx) ?? [],\n        );\n\n        if (roots.length === 0) {\n          logger.warn(`ListView template must contain at least one element.`);\n        } else if (roots.length > 1) {\n          logger.warn(\n            `ListView template must contain a single root element. Found: ${roots.length}. Only the first one will be used.`,\n          );\n        }\n\n        const vnode: VNode =\n          roots.at(0) ??\n          // default template is just a label\n          h('Label', {\n            text: entry.itemCtx.item,\n          });\n\n        // set the key to the list cell id, so we can find this cell later...\n        vnode.key = id;\n\n        return vnode;\n      });\n\n    return () => {\n      return h(\n        'NSCListView',\n        {\n          ref: listView,\n          items: props.items,\n          itemTemplates,\n          itemTemplateSelector,\n          onItemLoading,\n          onItemTap,\n        },\n        cellVNODES(),\n      );\n    };\n  },\n});\n"]}

package/dist/components/Platform.d.ts

@@ -0,0 +1,8 @@
+/** Renders its children on Android only. */
+export declare const Android: import("@vue/runtime-core").DefineComponent<{}, () => import("@vue/runtime-core").VNode<import("@vue/runtime-core").RendererNode, import("@vue/runtime-core").RendererElement, {
+    [key: string]: any;
+}>[], {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, true, {}, any>;
+/** Renders its children on iOS only. */
+export declare const iOS: import("@vue/runtime-core").DefineComponent<{}, () => import("@vue/runtime-core").VNode<import("@vue/runtime-core").RendererNode, import("@vue/runtime-core").RendererElement, {
+    [key: string]: any;
+}>[], {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, true, {}, any>;

package/dist/components/Platform.js

@@ -0,0 +1,15 @@
+import { defineComponent } from '@vue/runtime-core';
+import { isAndroid, isIOS } from '../nativescript';
+function platformComponent(name, enabled) {
+    return defineComponent({
+        name,
+        setup(_props, { slots }) {
+            return () => (enabled() ? slots.default?.() : null);
+        },
+    });
+}
+/** Renders its children on Android only. */
+export const Android = /*#__PURE__*/ platformComponent('Android', () => isAndroid);
+/** Renders its children on iOS only. */
+export const iOS = /*#__PURE__*/ platformComponent('iOS', () => isIOS);
+//# sourceMappingURL=Platform.js.map

package/dist/components/Platform.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Platform.js","sourceRoot":"","sources":["../../src/components/Platform.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAEnD,SAAS,iBAAiB,CAAC,IAAY,EAAE,OAAsB;IAC7D,OAAO,eAAe,CAAC;QACrB,IAAI;QACJ,KAAK,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE;YACrB,OAAO,GAAG,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;QACtD,CAAC;KACF,CAAC,CAAC;AACL,CAAC;AAED,4CAA4C;AAC5C,MAAM,CAAC,MAAM,OAAO,GAAG,aAAa,CAAC,iBAAiB,CACpD,SAAS,EACT,GAAG,EAAE,CAAC,SAAS,CAChB,CAAC;AAEF,wCAAwC;AACxC,MAAM,CAAC,MAAM,GAAG,GAAG,aAAa,CAAC,iBAAiB,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC","sourcesContent":["import { defineComponent } from '@vue/runtime-core';\nimport { isAndroid, isIOS } from '../nativescript';\n\nfunction platformComponent(name: string, enabled: () => boolean) {\n  return defineComponent({\n    name,\n    setup(_props, { slots }) {\n      return () => (enabled() ? slots.default?.() : null);\n    },\n  });\n}\n\n/** Renders its children on Android only. */\nexport const Android = /*#__PURE__*/ platformComponent(\n  'Android',\n  () => isAndroid,\n);\n\n/** Renders its children on iOS only. */\nexport const iOS = /*#__PURE__*/ platformComponent('iOS', () => isIOS);\n"]}

package/dist/components/index.d.ts

@@ -1,5 +1,6 @@
 import { ActionBar } from './ActionBar';
-import { ListView, ListItem } from './ListView';
+import { ListView, ListItem, ListViewItemTapEvent } from './ListView';
+import { Android, iOS } from './Platform';
 export declare const BUILT_IN_COMPONENTS: {
     ActionBar: import("@vue/runtime-core").DefineComponent<{}, () => import("@vue/runtime-core").VNode<import("@vue/runtime-core").RendererNode, import("@vue/runtime-core").RendererElement, {
         [key: string]: any;
@@ -11,12 +12,22 @@ export declare const BUILT_IN_COMPONENTS: {
         itemTemplateSelector: FunctionConstructor;
     }>, () => import("@vue/runtime-core").VNode<import("@vue/runtime-core").RendererNode, import("@vue/runtime-core").RendererElement, {
         [key: string]: any;
-    }>, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
+    }>, {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {
+        itemTap: (event: ListViewItemTapEvent) => boolean;
+    }, string, import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
         items: {
             validator(value: unknown): value is any[] | import("@nativescript/core").ObservableArray<any>;
         };
         itemTemplateSelector: FunctionConstructor;
-    }>> & Readonly<{}>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, true, {}, any>;
+    }>> & Readonly<{
+        onItemTap?: (event: ListViewItemTapEvent<any>) => any;
+    }>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, true, {}, any>;
+    Android: import("@vue/runtime-core").DefineComponent<{}, () => import("@vue/runtime-core").VNode<import("@vue/runtime-core").RendererNode, import("@vue/runtime-core").RendererElement, {
+        [key: string]: any;
+    }>[], {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, true, {}, any>;
+    iOS: import("@vue/runtime-core").DefineComponent<{}, () => import("@vue/runtime-core").VNode<import("@vue/runtime-core").RendererNode, import("@vue/runtime-core").RendererElement, {
+        [key: string]: any;
+    }>[], {}, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("@vue/runtime-core").ComponentProvideOptions, true, {}, any>;
 };
-export { ActionBar, ListView };
-export type { ListItem };
+export { ActionBar, ListView, Android, iOS };
+export type { ListItem, ListViewItemTapEvent };

package/dist/components/index.js

@@ -1,8 +1,11 @@
 import { ActionBar } from './ActionBar';
 import { ListView } from './ListView';
+import { Android, iOS } from './Platform';
 export const BUILT_IN_COMPONENTS = {
     ActionBar,
     ListView,
+    Android,
+    iOS,
 };
-export { ActionBar, ListView };
+export { ActionBar, ListView, Android, iOS };
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAY,MAAM,YAAY,CAAC;AAEhD,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,SAAS;IACT,QAAQ;CACT,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAkC,MAAM,YAAY,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAE1C,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,SAAS;IACT,QAAQ;IACR,OAAO;IACP,GAAG;CACJ,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC","sourcesContent":["import { ActionBar } from './ActionBar';\nimport { ListView, ListItem, ListViewItemTapEvent } from './ListView';\nimport { Android, iOS } from './Platform';\n\nexport const BUILT_IN_COMPONENTS = {\n  ActionBar,\n  ListView,\n  Android,\n  iOS,\n};\n\nexport { ActionBar, ListView, Android, iOS };\n\nexport type { ListItem, ListViewItemTapEvent };\n"]}

package/dist/directives/vShow.js.map

@@ -1 +1 @@
-{"version":3,"file":"vShow.js","sourceRoot":"","sources":["../../src/directives/vShow.ts"],"names":[],"mappings":"AAQA,MAAM,CAAC,MAAM,KAAK,GAAkC;IAClD,WAAW,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,UAAU,EAAE;QACvC,EAAE,CAAC,IAAI;YACL,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,KAAK,MAAM;gBACtC,CAAC,CAAC,EAAE;gBACJ,CAAC,CAAE,EAAE,CAAC,YAAY,CAAC,YAAY,CAAY,CAAC;QAChD,IAAI,UAAU,IAAI,KAAK,EAAE,CAAC;YACxB,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC7B,CAAC;aAAM,CAAC;YACN,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;QACxB,CAAC;IACH,CAAC;IACD,OAAO,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,UAAU,EAAE;QACnC,IAAI,UAAU,IAAI,KAAK,EAAE,CAAC;YACxB,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QACvB,CAAC;IACH,CAAC;IACD,OAAO,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE;QAC7C,IAAI,CAAC,KAAK,KAAK,CAAC,QAAQ;YAAE,OAAO;QACjC,IAAI,UAAU,EAAE,CAAC;YACf,IAAI,KAAK,EAAE,CAAC;gBACV,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;gBAC3B,UAAU,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;gBACrB,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YACvB,CAAC;iBAAM,CAAC;gBACN,UAAU,CAAC,KAAK,CAAC,EAAE,EAAE,GAAG,EAAE;oBACxB,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;gBACxB,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC;aAAM,CAAC;YACN,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;QACxB,CAAC;IACH,CAAC;IACD,aAAa,CAAC,EAAE;QACd,UAAU,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;IACvB,CAAC;CACF,CAAC;AAEF,SAAS,UAAU,CAAC,EAAgB,EAAE,KAAc;IAClD,EAAE,CAAC,YAAY,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;AAC/D,CAAC"}
+{"version":3,"file":"vShow.js","sourceRoot":"","sources":["../../src/directives/vShow.ts"],"names":[],"mappings":"AAQA,MAAM,CAAC,MAAM,KAAK,GAAkC;IAClD,WAAW,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,UAAU,EAAE;QACvC,EAAE,CAAC,IAAI;YACL,EAAE,CAAC,YAAY,CAAC,YAAY,CAAC,KAAK,MAAM;gBACtC,CAAC,CAAC,EAAE;gBACJ,CAAC,CAAE,EAAE,CAAC,YAAY,CAAC,YAAY,CAAY,CAAC;QAChD,IAAI,UAAU,IAAI,KAAK,EAAE,CAAC;YACxB,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;QAC7B,CAAC;aAAM,CAAC;YACN,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;QACxB,CAAC;IACH,CAAC;IACD,OAAO,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,UAAU,EAAE;QACnC,IAAI,UAAU,IAAI,KAAK,EAAE,CAAC;YACxB,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QACvB,CAAC;IACH,CAAC;IACD,OAAO,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE;QAC7C,IAAI,CAAC,KAAK,KAAK,CAAC,QAAQ;YAAE,OAAO;QACjC,IAAI,UAAU,EAAE,CAAC;YACf,IAAI,KAAK,EAAE,CAAC;gBACV,UAAU,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;gBAC3B,UAAU,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;gBACrB,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;YACvB,CAAC;iBAAM,CAAC;gBACN,UAAU,CAAC,KAAK,CAAC,EAAE,EAAE,GAAG,EAAE;oBACxB,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;gBACxB,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC;aAAM,CAAC;YACN,UAAU,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;QACxB,CAAC;IACH,CAAC;IACD,aAAa,CAAC,EAAE;QACd,UAAU,CAAC,EAAE,EAAE,IAAI,CAAC,CAAC;IACvB,CAAC;CACF,CAAC;AAEF,SAAS,UAAU,CAAC,EAAgB,EAAE,KAAc;IAClD,EAAE,CAAC,YAAY,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;AAC/D,CAAC","sourcesContent":["import { ObjectDirective } from '@vue/runtime-core';\nimport { NSVElement } from '../dom';\n\ninterface VShowElement extends NSVElement {\n  // _vod = vue original display\n  _vod: string;\n}\n\nexport const vShow: ObjectDirective<VShowElement> = {\n  beforeMount(el, { value }, { transition }) {\n    el._vod =\n      el.getAttribute('visibility') === 'none'\n        ? ''\n        : (el.getAttribute('visibility') as string);\n    if (transition && value) {\n      transition.beforeEnter(el);\n    } else {\n      setDisplay(el, value);\n    }\n  },\n  mounted(el, { value }, { transition }) {\n    if (transition && value) {\n      transition.enter(el);\n    }\n  },\n  updated(el, { value, oldValue }, { transition }) {\n    if (!value === !oldValue) return;\n    if (transition) {\n      if (value) {\n        transition.beforeEnter(el);\n        setDisplay(el, true);\n        transition.enter(el);\n      } else {\n        transition.leave(el, () => {\n          setDisplay(el, false);\n        });\n      }\n    } else {\n      setDisplay(el, value);\n    }\n  },\n  beforeUnmount(el) {\n    setDisplay(el, true);\n  },\n};\n\nfunction setDisplay(el: VShowElement, value: unknown): void {\n  el.setAttribute('visibility', value ? el._vod : 'collapsed');\n}\n"]}

package/dist/dom/index.d.ts

@@ -3,7 +3,8 @@ export declare const enum NSVNodeTypes {
     TEXT = "text",
     ELEMENT = "element",
     COMMENT = "comment",
-    ROOT = "root"
+    ROOT = "root",
+    DETACHED = "detached"
 }
 export declare const enum NSVViewFlags {
     NONE = 0,
@@ -64,3 +65,15 @@ export declare class NSVRoot extends NSVNode {
     removeChild(el: NSVNode): void;
     insertBefore(el: NSVNode, anchor?: NSVNode | null): void;
 }
+/**
+ * Parks nodes outside the visual tree, as KeepAlive does with deactivated
+ * subtrees. Children keep their place in the node tree so anchors and
+ * siblings still resolve, but nothing is added to a native parent: a view
+ * moved in here is simply detached until it is moved back out.
+ */
+export declare class NSVDetachedContainer extends NSVNode {
+    constructor();
+    appendChild(el: NSVNode): void;
+    insertBefore(el: NSVNode, anchor?: NSVNode | null): void;
+    removeChild(el: NSVNode): void;
+}