nativescript-vue 3.0.3 → 3.1.0

package/dist/renderer/patchProp.js

@@ -4,6 +4,7 @@ import { patchEvent } from './modules/events';
 import { patchStyle } from './modules/style';
 import { getViewMeta } from '../registry';
 import { isOn } from '../runtimeHelpers';
+import { logger } from '../util/logger';
 export const patchProp = (el, key, prevValue, nextValue, namespace, parentComponent) => {
     switch (key) {
         // special
@@ -16,23 +17,29 @@ export const patchProp = (el, key, prevValue, nextValue, namespace, parentCompon
             patchStyle(el, prevValue, nextValue);
             break;
         case 'modelValue':
-        case 'onUpdate:modelValue':
-            try {
-                // v-model - maps modelValue/onUpdate:modelValue to the correct prop/events from the registry meta
-                const { prop, event } = getViewMeta(el.tagName)
-                    .model;
-                if (key === 'modelValue') {
-                    patchAttr(el, prop, prevValue, nextValue);
-                }
-                else {
-                    const cb = nextValue
-                        ? ($event) => nextValue($event.object[prop])
-                        : nextValue;
-                    patchEvent(el, `on:${event}`, prevValue, cb);
-                }
+        case 'onUpdate:modelValue': {
+            // v-model maps modelValue/onUpdate:modelValue to the prop/event pair
+            // declared in the element's registry meta
+            const model = resolveModel(el);
+            if (!model) {
+                break;
             }
-            catch (err) {
-                // ignore if the view meta can't be found.
+            if (key === 'modelValue') {
+                patchAttr(el, model.prop, prevValue, nextValue);
+            }
+            else {
+                const cb = nextValue
+                    ? ($event) => nextValue($event.object[model.prop])
+                    : nextValue;
+                patchEvent(el, `on:${model.event}`, prevValue, cb);
+            }
+            break;
+        }
+        case 'modelModifiers':
+            if (__DEV__ && nextValue && Object.keys(nextValue).length) {
+                logger.warn(`v-model modifiers (.${Object.keys(nextValue).join(', .')}) are ` +
+                    `not supported on <${el.tagName}>; apply the transformation in ` +
+                    `a computed setter instead.`);
             }
             break;
         default:
@@ -44,4 +51,19 @@ export const patchProp = (el, key, prevValue, nextValue, namespace, parentCompon
             }
     }
 };
+function resolveModel(el) {
+    let model;
+    try {
+        model = getViewMeta(el.tagName).model;
+    }
+    catch {
+        // unregistered element, fall through to the warning
+    }
+    if (!model && __DEV__) {
+        logger.warn(`v-model is not supported on <${el.tagName}>: no model prop/event ` +
+            `pair is registered for it. Pass { model: { prop, event } } to ` +
+            `registerElement() to enable it.`);
+    }
+    return model;
+}
 //# sourceMappingURL=patchProp.js.map

package/dist/renderer/patchProp.js.map

@@ -1 +1 @@
-{"version":3,"file":"patchProp.js","sourceRoot":"","sources":["../../src/renderer/patchProp.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAsB,MAAM,aAAa,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAQzC,MAAM,CAAC,MAAM,SAAS,GAAiC,CACrD,EAAc,EACd,GAAW,EACX,SAAc,EACd,SAAc,EACd,SAA4B,EAC5B,eAAkD,EAClD,EAAE;IACF,QAAQ,GAAG,EAAE,CAAC;QACZ,UAAU;QACV,KAAK,OAAO;YACV,mCAAmC;YACnC,UAAU,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;YAC1B,MAAM;QACR,KAAK,OAAO;YACV,mCAAmC;YACnC,UAAU,CAAC,EAAE,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;YACrC,MAAM;QACR,KAAK,YAAY,CAAC;QAClB,KAAK,qBAAqB;YACxB,IAAI,CAAC;gBACH,kGAAkG;gBAClG,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,WAAW,CAAC,EAAE,CAAC,OAAO,CAAC;qBAC5C,KAA2B,CAAC;gBAC/B,IAAI,GAAG,KAAK,YAAY,EAAE,CAAC;oBACzB,SAAS,CAAC,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;gBAC5C,CAAC;qBAAM,CAAC;oBACN,MAAM,EAAE,GAAG,SAAS;wBAClB,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;wBAC5C,CAAC,CAAC,SAAS,CAAC;oBACd,UAAU,CAAC,EAAE,EAAE,MAAM,KAAK,EAAE,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC;gBAC/C,CAAC;YACH,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,0CAA0C;YAC5C,CAAC;YACD,MAAM;QACR;YACE,IAAI,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;gBACd,UAAU,CAAC,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,EAAE,eAAe,CAAC,CAAC;YAC7D,CAAC;iBAAM,CAAC;gBACN,SAAS,CAAC,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;YAC3C,CAAC;IACL,CAAC;AACH,CAAC,CAAC"}
+{"version":3,"file":"patchProp.js","sourceRoot":"","sources":["../../src/renderer/patchProp.ts"],"names":[],"mappings":"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","sourcesContent":["import { NSVElement } from '../dom';\nimport { patchAttr } from './modules/attrs';\nimport { patchClass } from './modules/class';\nimport { patchEvent } from './modules/events';\nimport { patchStyle } from './modules/style';\n\nimport { getViewMeta, NSVModelDescriptor } from '../registry';\nimport { isOn } from '../runtimeHelpers';\nimport { logger } from '../util/logger';\n\nimport type {\n  ComponentInternalInstance,\n  ElementNamespace,\n  RendererOptions,\n} from '@vue/runtime-core';\n\nexport const patchProp: RendererOptions['patchProp'] = (\n  el: NSVElement,\n  key: string,\n  prevValue: any,\n  nextValue: any,\n  namespace?: ElementNamespace,\n  parentComponent?: ComponentInternalInstance | null,\n) => {\n  switch (key) {\n    // special\n    case 'class':\n      // console.log('->patchProp+Class')\n      patchClass(el, nextValue);\n      break;\n    case 'style':\n      // console.log('->patchProp+Style')\n      patchStyle(el, prevValue, nextValue);\n      break;\n    case 'modelValue':\n    case 'onUpdate:modelValue': {\n      // v-model maps modelValue/onUpdate:modelValue to the prop/event pair\n      // declared in the element's registry meta\n      const model = resolveModel(el);\n      if (!model) {\n        break;\n      }\n      if (key === 'modelValue') {\n        patchAttr(el, model.prop, prevValue, nextValue);\n      } else {\n        const cb = nextValue\n          ? ($event) => nextValue($event.object[model.prop])\n          : nextValue;\n        patchEvent(el, `on:${model.event}`, prevValue, cb);\n      }\n      break;\n    }\n    case 'modelModifiers':\n      if (__DEV__ && nextValue && Object.keys(nextValue).length) {\n        logger.warn(\n          `v-model modifiers (.${Object.keys(nextValue).join(', .')}) are ` +\n            `not supported on <${el.tagName}>; apply the transformation in ` +\n            `a computed setter instead.`,\n        );\n      }\n      break;\n    default:\n      if (isOn(key)) {\n        patchEvent(el, key, prevValue, nextValue, parentComponent);\n      } else {\n        patchAttr(el, key, prevValue, nextValue);\n      }\n  }\n};\n\nfunction resolveModel(el: NSVElement): NSVModelDescriptor | undefined {\n  let model: NSVModelDescriptor | undefined;\n  try {\n    model = getViewMeta(el.tagName).model;\n  } catch {\n    // unregistered element, fall through to the warning\n  }\n  if (!model && __DEV__) {\n    logger.warn(\n      `v-model is not supported on <${el.tagName}>: no model prop/event ` +\n        `pair is registered for it. Pass { model: { prop, event } } to ` +\n        `registerElement() to enable it.`,\n    );\n  }\n  return model;\n}\n"]}

package/dist/renderer/runtimeDomOverrides.d.ts

@@ -1,5 +1,16 @@
+import { KeepAlive as KeepAliveCore } from '@vue/runtime-core';
 export declare const TransitionGroup: {
     "new"(): {
         $props: {};
     };
 };
+/**
+ * runtime-core's KeepAlive parks deactivated subtrees in a container it
+ * obtains from createElement('div'), which is not a registered view here.
+ * It reads the renderer from the instance context during setup, so hand it
+ * one whose createElement yields a detached container instead. Deactivated
+ * views are removed from their native parent and re-added on activation;
+ * NativeScript recreates their native views then, so the component state
+ * survives but native-only state such as scroll offsets does not.
+ */
+export declare const KeepAlive: typeof KeepAliveCore;

package/dist/renderer/runtimeDomOverrides.js

@@ -1,3 +1,5 @@
+import { getCurrentInstance, KeepAlive as KeepAliveCore, } from '@vue/runtime-core';
+import { NSVDetachedContainer } from '../dom';
 import { logger } from '../util/logger';
 export const TransitionGroup = {
     new() {
@@ -5,4 +7,25 @@ export const TransitionGroup = {
         return { $props: {} };
     },
 };
+/**
+ * runtime-core's KeepAlive parks deactivated subtrees in a container it
+ * obtains from createElement('div'), which is not a registered view here.
+ * It reads the renderer from the instance context during setup, so hand it
+ * one whose createElement yields a detached container instead. Deactivated
+ * views are removed from their native parent and re-added on activation;
+ * NativeScript recreates their native views then, so the component state
+ * survives but native-only state such as scroll offsets does not.
+ */
+export const KeepAlive = {
+    ...KeepAliveCore,
+    setup(props, ctx) {
+        const { ctx: sharedContext } = getCurrentInstance();
+        const renderer = sharedContext.renderer;
+        sharedContext.renderer = {
+            ...renderer,
+            o: { ...renderer.o, createElement: () => new NSVDetachedContainer() },
+        };
+        return KeepAliveCore.setup(props, ctx);
+    },
+};
 //# sourceMappingURL=runtimeDomOverrides.js.map

package/dist/renderer/runtimeDomOverrides.js.map

@@ -1 +1 @@
-{"version":3,"file":"runtimeDomOverrides.js","sourceRoot":"","sources":["../../src/renderer/runtimeDomOverrides.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,GAAG;QACD,MAAM,CAAC,IAAI,CAAC,kCAAkC,CAAC,CAAC;QAChD,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;IACxB,CAAC;CACF,CAAC"}
+{"version":3,"file":"runtimeDomOverrides.js","sourceRoot":"","sources":["../../src/renderer/runtimeDomOverrides.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,SAAS,IAAI,aAAa,GAC3B,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAExC,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,GAAG;QACD,MAAM,CAAC,IAAI,CAAC,kCAAkC,CAAC,CAAC;QAChD,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;IACxB,CAAC;CACF,CAAC;AAEF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,GAAI,aAAqB;IACzB,KAAK,CAAC,KAAU,EAAE,GAAQ;QACxB,MAAM,EAAE,GAAG,EAAE,aAAa,EAAE,GAAG,kBAAkB,EAAS,CAAC;QAC3D,MAAM,QAAQ,GAAG,aAAa,CAAC,QAAQ,CAAC;QAExC,aAAa,CAAC,QAAQ,GAAG;YACvB,GAAG,QAAQ;YACX,CAAC,EAAE,EAAE,GAAG,QAAQ,CAAC,CAAC,EAAE,aAAa,EAAE,GAAG,EAAE,CAAC,IAAI,oBAAoB,EAAE,EAAE;SACtE,CAAC;QAEF,OAAQ,aAAqB,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAClD,CAAC;CACiC,CAAC","sourcesContent":["import {\n  getCurrentInstance,\n  KeepAlive as KeepAliveCore,\n} from '@vue/runtime-core';\nimport { NSVDetachedContainer } from '../dom';\nimport { logger } from '../util/logger';\n\nexport const TransitionGroup = {\n  new() {\n    logger.warn('TransitionGroup is not supported');\n    return { $props: {} };\n  },\n};\n\n/**\n * runtime-core's KeepAlive parks deactivated subtrees in a container it\n * obtains from createElement('div'), which is not a registered view here.\n * It reads the renderer from the instance context during setup, so hand it\n * one whose createElement yields a detached container instead. Deactivated\n * views are removed from their native parent and re-added on activation;\n * NativeScript recreates their native views then, so the component state\n * survives but native-only state such as scroll offsets does not.\n */\nexport const KeepAlive = {\n  ...(KeepAliveCore as any),\n  setup(props: any, ctx: any) {\n    const { ctx: sharedContext } = getCurrentInstance() as any;\n    const renderer = sharedContext.renderer;\n\n    sharedContext.renderer = {\n      ...renderer,\n      o: { ...renderer.o, createElement: () => new NSVDetachedContainer() },\n    };\n\n    return (KeepAliveCore as any).setup(props, ctx);\n  },\n} as unknown as typeof KeepAliveCore;\n"]}

package/dist/runtimeHelpers.d.ts

@@ -5,15 +5,21 @@ export declare const setRootApp: (app: App) => void;
 export type ContextOverrides = {
     reload?(): void;
 };
+/**
+ * Devtools label each app after its root component's `name`. Script-setup
+ * SFCs only carry `__name`, which Vue already treats as the fallback
+ * everywhere else, so every page and modal would otherwise show as "App N".
+ */
+export declare function nameForDevtools(component: Component): void;
 export type CreateNativeViewProps<P> = Partial<P & VNodeProps & Record<string, any>>;
 export declare function createNativeView<T = View, P = any>(component: Component<P>, props?: CreateNativeViewProps<P>, contextOverrides?: ContextOverrides): {
     context: {
-        reload?(): void;
         config: import("@vue/runtime-core").AppConfig;
         mixins: import("@vue/runtime-core").ComponentOptions[];
         components: Record<string, Component>;
         directives: Record<string, import("@vue/runtime-core").Directive>;
         provides: Record<string | symbol, any>;
+        reload?: () => void;
     };
     readonly vnode: VNode<RendererNode, RendererElement, {
         [key: string]: any;
@@ -28,4 +34,9 @@ export declare const ELEMENT_REF: unique symbol;
 export declare const isOn: (key: string) => boolean;
 export declare const isAndroidKey: (key: string) => boolean;
 export declare const isIOSKey: (key: string) => boolean;
+/**
+ * `android:foo` targets the view's own `foo`; `android.foo` keeps its path
+ * into the view's platform-specific settings object.
+ */
+export declare const stripPlatformPrefix: (key: string, platform: string) => string;
 export declare const isBoolean: (value: unknown) => boolean;

package/dist/runtimeHelpers.js

@@ -4,9 +4,24 @@ let rootApp = null;
 export const setRootApp = (app) => {
     rootApp = app;
 };
+/**
+ * Devtools label each app after its root component's `name`. Script-setup
+ * SFCs only carry `__name`, which Vue already treats as the fallback
+ * everywhere else, so every page and modal would otherwise show as "App N".
+ */
+export function nameForDevtools(component) {
+    if (__DEV__ &&
+        component &&
+        typeof component === 'object' &&
+        !component.name &&
+        component.__name) {
+        component.name = component.__name;
+    }
+}
 export function createNativeView(component, props, contextOverrides) {
     let isMounted = false;
     let vm;
+    nameForDevtools(component);
     let currentApp = renderer.createApp(component, props);
     // Destructure so as not to copy over the root app instance
     const { app, ...rootContext } = rootApp._context;
@@ -48,10 +63,19 @@ export function createNativeView(component, props, contextOverrides) {
     };
 }
 export const ELEMENT_REF = Symbol(__DEV__ ? `elementRef` : ``);
-const onRE = /^on.+/;
+// matches Vue's own isOn: "on" followed by anything but a lowercase letter,
+// so onTap and on:textChange are events while onboardingTitle is a prop
+const onRE = /^on[^a-z]/;
 export const isOn = (key) => onRE.test(key);
-export const isAndroidKey = (key) => key.startsWith('android:');
-export const isIOSKey = (key) => key.startsWith('ios:');
+export const isAndroidKey = (key) => key.startsWith('android:') || key.startsWith('android.');
+export const isIOSKey = (key) => key.startsWith('ios:') || key.startsWith('ios.');
+/**
+ * `android:foo` targets the view's own `foo`; `android.foo` keeps its path
+ * into the view's platform-specific settings object.
+ */
+export const stripPlatformPrefix = (key, platform) => key.charAt(platform.length) === ':'
+    ? key.substring(platform.length + 1)
+    : key;
 export const isBoolean = (value) => {
     return typeof value === 'boolean' || value instanceof Boolean;
 };

package/dist/runtimeHelpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"runtimeHelpers.js","sourceRoot":"","sources":["../src/runtimeHelpers.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"runtimeHelpers.js","sourceRoot":"","sources":["../src/runtimeHelpers.ts"],"names":[],"mappings":"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","sourcesContent":["import { View } from '@nativescript/core';\nimport {\n  App,\n  Component,\n  ComponentPublicInstance,\n  RendererElement,\n  RendererNode,\n  VNode,\n  VNodeProps,\n} from '@vue/runtime-core';\nimport { NSVNode, NSVRoot } from './dom';\nimport { renderer } from './renderer';\n\nlet rootApp: App = null;\nexport const setRootApp = (app: App) => {\n  rootApp = app;\n};\n\nexport type ContextOverrides = { reload?(): void };\n\n/**\n * Devtools label each app after its root component's `name`. Script-setup\n * SFCs only carry `__name`, which Vue already treats as the fallback\n * everywhere else, so every page and modal would otherwise show as \"App N\".\n */\nexport function nameForDevtools(component: Component) {\n  if (\n    __DEV__ &&\n    component &&\n    typeof component === 'object' &&\n    !(component as any).name &&\n    (component as any).__name\n  ) {\n    (component as any).name = (component as any).__name;\n  }\n}\nexport type CreateNativeViewProps<P> = Partial<\n  P & VNodeProps & Record<string, any>\n>;\n\nexport function createNativeView<T = View, P = any>(\n  component: Component<P>,\n  props?: CreateNativeViewProps<P>,\n  contextOverrides?: ContextOverrides,\n) {\n  let isMounted = false;\n  let vm: ComponentPublicInstance | null;\n  nameForDevtools(component);\n  let currentApp = renderer.createApp(component, props);\n  // Destructure so as not to copy over the root app instance\n  const { app, ...rootContext } = rootApp._context;\n  const context = { ...rootContext, ...contextOverrides };\n\n  type M = VNode<RendererNode, RendererElement, { nativeView: T }>;\n  return {\n    context,\n    get vnode() {\n      return vm?.$.vnode;\n    },\n    get nativeView(): T {\n      return this.vnode?.el.nativeView;\n    },\n    mount(root: NSVNode = new NSVRoot()) {\n      if (isMounted) {\n        return this.vnode as M;\n      }\n\n      // Create a NEW app instance for remount (after HMR unmount) as Vue doesn't allow mounting the same app instance twice\n      if (!currentApp._instance) {\n        currentApp = renderer.createApp(component, props);\n      }\n\n      Object.keys(context).forEach((key) => {\n        currentApp._context[key] = context[key];\n      });\n\n      vm = currentApp.mount(root);\n\n      // Set reload callback on the component instance's appContext, for HMR to work on navigated pages\n      if (context.reload && vm && (vm as any).$?.appContext) {\n        (vm as any).$.appContext.reload = context.reload;\n      }\n\n      isMounted = true;\n\n      return this.vnode as M;\n    },\n    unmount() {\n      if (!isMounted) return;\n\n      vm = null;\n      currentApp.unmount();\n\n      isMounted = false;\n    },\n  };\n}\n\nexport const ELEMENT_REF = Symbol(__DEV__ ? `elementRef` : ``);\n\n// matches Vue's own isOn: \"on\" followed by anything but a lowercase letter,\n// so onTap and on:textChange are events while onboardingTitle is a prop\nconst onRE = /^on[^a-z]/;\nexport const isOn = (key: string) => onRE.test(key);\n\nexport const isAndroidKey = (key: string) =>\n  key.startsWith('android:') || key.startsWith('android.');\n\nexport const isIOSKey = (key: string) =>\n  key.startsWith('ios:') || key.startsWith('ios.');\n\n/**\n * `android:foo` targets the view's own `foo`; `android.foo` keeps its path\n * into the view's platform-specific settings object.\n */\nexport const stripPlatformPrefix = (key: string, platform: string) =>\n  key.charAt(platform.length) === ':'\n    ? key.substring(platform.length + 1)\n    : key;\n\nexport const isBoolean = (value: unknown): boolean => {\n  return typeof value === 'boolean' || value instanceof Boolean;\n};\n"]}

package/dist/util/logger.js.map

@@ -1 +1 @@
-{"version":3,"file":"logger.js","sourceRoot":"","sources":["../../src/util/logger.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,MAAM,UAAU,GAAG,oBAAoB,CAAC;AAExC,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,IAAI,CAAC,GAAW;QACd,IAAI,CAAC,GAAG,UAAU,IAAI,GAAG,EAAE,CAAC,CAAC;IAC/B,CAAC;CACF,CAAC"}
+{"version":3,"file":"logger.js","sourceRoot":"","sources":["../../src/util/logger.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAEzC,MAAM,UAAU,GAAG,oBAAoB,CAAC;AAExC,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,IAAI,CAAC,GAAW;QACd,IAAI,CAAC,GAAG,UAAU,IAAI,GAAG,EAAE,CAAC,CAAC;IAC/B,CAAC;CACF,CAAC","sourcesContent":["import { warn } from '@vue/runtime-core';\n\nconst baseLogger = '[NativeScript-Vue]';\n\nexport const logger = {\n  warn(msg: string) {\n    warn(`${baseLogger} ${msg}`);\n  },\n};\n"]}

package/nativescript.webpack.js

@@ -1,5 +1,7 @@
+const fs = require('fs');
+const path = require('path');
+const { spawn } = require('child_process');
 const { VueLoaderPlugin } = require('vue-loader');
-const spawn = require('cross-spawn');
 
 function findFreePort(startingPort = 8098) {
   let found = false;
@@ -30,31 +32,141 @@ function findFreePort(startingPort = 8098) {
 
   findFreePort();
 
+  // webpack config hooks are synchronous; listen() reports through nextTick
+  // and the promise through microtasks, both of which _tickCallback drains
+  if (typeof process._tickCallback !== 'function') {
+    return port;
+  }
+
   while (!found) {
     process._tickCallback();
     const start = Date.now();
     while (Date.now() - start < 100) {
-      // busy wait... not ideal, but we need to find a port synchronously...
+      // busy wait
     }
   }
 
   return port;
 }
 
-function startVueDevtools(port, isAndroid = false) {
-  console.log(`[VueDevtools] Starting standalone Vue Devtools on port ${port}`);
+/**
+ * Finds the directory of an installed package the way Node would, without
+ * going through its exports map (most of the devtools packages do not
+ * expose package.json there). Handles hoisted, nested and pnpm layouts.
+ */
+function findPackageDir(name, from) {
+  let dir = from;
+  for (;;) {
+    const candidates = [path.join(dir, 'node_modules', name)];
+    if (path.basename(dir) === 'node_modules') {
+      candidates.push(path.join(dir, name));
+    }
+    for (const candidate of candidates) {
+      if (fs.existsSync(path.join(candidate, 'package.json'))) {
+        return fs.realpathSync(candidate);
+      }
+    }
+    const parent = path.dirname(dir);
+    if (parent === dir) {
+      return null;
+    }
+    dir = parent;
+  }
+}
+
+/**
+ * Locates @vue/devtools and the client packages it brings along, resolving
+ * from the app so a hoisted or nested layout both work.
+ */
+function resolveDevtools(projectRoot) {
+  const devtoolsDir = findPackageDir('@vue/devtools', projectRoot);
+  if (!devtoolsDir) {
+    return null;
+  }
+
+  const version = require(path.join(devtoolsDir, 'package.json')).version;
+  const major = parseInt(version.split('.')[0], 10);
+  if (major < 8) {
+    throw new Error(
+      `@vue/devtools ${version} is installed but nativescript-vue needs ^8. Run: npm i -D @vue/devtools@^8`,
+    );
+  }
+
+  const requireDir = (name, from) => {
+    const dir = findPackageDir(name, from);
+    if (!dir) {
+      throw new Error(
+        `[VueDevtools] ${name} is missing next to @vue/devtools. Reinstall it: npm i -D @vue/devtools@^8`,
+      );
+    }
+    return dir;
+  };
+
+  const electronDir = requireDir('@vue/devtools-electron', devtoolsDir);
+
+  return {
+    version,
+    cli: path.join(electronDir, 'dist/cli.mjs'),
+    aliases: {
+      // the package entry resolves to the Node build under NativeScript's
+      // node target; the app needs the browser build (global XMLHttpRequest)
+      'socket.io-client': path.join(
+        requireDir('socket.io-client', electronDir),
+        'build/esm/index.js',
+      ),
+      '@vue/devtools-kit': requireDir('@vue/devtools-kit', devtoolsDir),
+      '@vue/devtools-core': requireDir('@vue/devtools-core', electronDir),
+    },
+  };
+}
+
+// packages whose imports must resolve with browser conditions and fields,
+// otherwise the socket.io stack pulls in ws, xmlhttprequest-ssl and Node
+// core modules that do not exist in the app
+const BROWSER_RESOLVED_PACKAGES =
+  /[\\/]node_modules[\\/](socket\.io-client|engine\.io-client|socket\.io-parser|engine\.io-parser)[\\/]/;
+
+function startVueDevtools(cli, port, isAndroid, debug) {
+  console.log(`[VueDevtools] Starting Vue Devtools on port ${port}`);
   if (isAndroid) {
     console.log(
-      `[VueDevtools] If the app doesn't automatically connect, check if http traffic is allowed. (e.g. on Android, you may need to set android:usesCleartextTraffic="true" in AndroidManifest.xml)`,
+      `[VueDevtools] If the app doesn't connect, make sure cleartext HTTP is allowed: set android:usesCleartextTraffic="true" on <application> in AndroidManifest.xml`,
     );
   }
-  spawn(require.resolve('@vue/devtools/bin.js'), [], {
-    stdio: 'ignore',
+  const child = spawn(process.execPath, [cli], {
+    stdio: debug ? 'inherit' : 'ignore',
     env: {
       ...process.env,
-      PORT: port,
+      PORT: String(port),
     },
   });
+  child.on('error', (err) => {
+    console.warn(`[VueDevtools] Failed to start the devtools app: ${err}`);
+  });
+}
+
+/**
+ * Warns when the app resolves a `vue` package whose version differs from the
+ * runtime nativescript-vue ships. vue-loader compiles templates with that
+ * package's compiler when present, and a mismatch can emit helpers the
+ * runtime does not have.
+ */
+function checkVueVersionSkew(projectRoot) {
+  let vuePkg;
+  try {
+    vuePkg = require(
+      require.resolve('vue/package.json', { paths: [projectRoot] }),
+    );
+  } catch {
+    return;
+  }
+  const runtimeVersion = require('@vue/runtime-core/package.json').version;
+  if (vuePkg.version !== runtimeVersion) {
+    console.warn(
+      `[nativescript-vue] vue@${vuePkg.version} is installed in this project but nativescript-vue uses @vue/runtime-core@${runtimeVersion}. ` +
+        `Templates are compiled with the installed vue's compiler, so keep both on the same version.`,
+    );
+  }
 }
 
 /**
@@ -62,44 +174,76 @@ function startVueDevtools(port, isAndroid = false) {
  */
 module.exports = (webpack) => {
   webpack.chainWebpack((config, env) => {
+    const projectRoot = webpack.Utils.project.getProjectRootPath();
     const additionalDefines = {
       __VUE_PROD_DEVTOOLS__: false,
-      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false
+      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false,
     };
 
-    // todo: support configuring the devtools host/port from the nativescript.config.ts...
-    if (!!env.vueDevtools) {
-      // find a free port for the devtools
-      const vueDevtoolsPort = findFreePort(8098);
-      const isAndroid = webpack.Utils.platform.getPlatformName() === 'android';
-
-      // on android simulators, localhost is not the host machine...
-      const vueDevtoolsHost = isAndroid
-        ? 'http://10.0.2.2'
-        : 'http://localhost';
-
-      additionalDefines['__VUE_PROD_DEVTOOLS__'] = true;
-      additionalDefines['__NS_VUE_DEVTOOLS_HOST__'] =
-        JSON.stringify(vueDevtoolsHost);
-      additionalDefines['__NS_VUE_DEVTOOLS_PORT__'] = vueDevtoolsPort;
-
-      const devtoolsEntryPath = require.resolve('./devtools.js');
-      const entryPath = webpack.Utils.platform.getEntryPath();
-      const paths = config.entry('bundle').values();
-      const entryIndex = paths.indexOf(entryPath);
-
-      if (entryIndex === -1) {
-        // if the app entry is not found, add the devtools entry at the beginning - generally should not happen, but just in case.
-        paths.unshift(entryPath);
+    checkVueVersionSkew(projectRoot);
+
+    if (env.vueDevtools) {
+      const devtools = resolveDevtools(projectRoot);
+
+      if (!devtools) {
+        console.warn(
+          `[VueDevtools] --env.vueDevtools was passed but @vue/devtools is not installed. Run: npm i -D @vue/devtools@^8`,
+        );
       } else {
-        // insert devtools entry before the app entry, but after globals etc.
-        paths.splice(entryIndex, 0, devtoolsEntryPath);
-      }
+        const isAndroid =
+          webpack.Utils.platform.getPlatformName() === 'android';
+        const port = env.vueDevtoolsPort
+          ? parseInt(env.vueDevtoolsPort, 10)
+          : findFreePort(8098);
+        // on Android emulators, localhost is not the host machine
+        const host =
+          env.vueDevtoolsHost ??
+          (isAndroid ? 'http://10.0.2.2' : 'http://localhost');
 
-      config.entry('bundle').clear().merge(paths);
+        additionalDefines['__VUE_PROD_DEVTOOLS__'] = true;
+        additionalDefines['__NS_VUE_DEVTOOLS_HOST__'] = JSON.stringify(host);
+        additionalDefines['__NS_VUE_DEVTOOLS_PORT__'] = port;
+        additionalDefines['__NS_VUE_DEVTOOLS_DEBUG__'] = !!env.vueDevtoolsDebug;
 
-      // start the devtools...
-      startVueDevtools(vueDevtoolsPort, isAndroid);
+        for (const [name, dir] of Object.entries(devtools.aliases)) {
+          config.resolve.alias.set(name, dir);
+        }
+
+        const clientRule = config.module
+          .rule('vue-devtools-client')
+          .test(BROWSER_RESOLVED_PACKAGES);
+        clientRule.resolve.set('conditionNames', [
+          'browser',
+          'import',
+          'module',
+          'default',
+        ]);
+        clientRule.resolve.aliasFields.add('browser');
+        clientRule.resolve.mainFields.merge(['browser', 'module', 'main']);
+
+        const devtoolsEntryPath = require.resolve('./devtools.js');
+        const entryPath = webpack.Utils.platform.getEntryPath();
+        const paths = config.entry('bundle').values();
+        const entryIndex = paths.indexOf(entryPath);
+
+        if (entryIndex === -1) {
+          paths.unshift(devtoolsEntryPath);
+        } else {
+          // before the app entry, after globals etc.
+          paths.splice(entryIndex, 0, devtoolsEntryPath);
+        }
+
+        config.entry('bundle').clear().merge(paths);
+
+        if (String(env.vueDevtoolsSpawn) !== 'false') {
+          startVueDevtools(
+            devtools.cli,
+            port,
+            isAndroid,
+            !!env.vueDevtoolsDebug,
+          );
+        }
+      }
     }
 
     // resolve any imports from "vue" to "nativescript-vue"
@@ -116,10 +260,7 @@ module.exports = (webpack) => {
         return {
           ...options,
           isServerBuild: false,
-          compilerOptions: {
-            // isCustomElement: (el) => el.toLowerCase() === 'label',
-            // transformHoist: null
-          },
+          compilerOptions: {},
         };
       });
 
@@ -142,19 +283,23 @@ module.exports = (webpack) => {
       return args;
     });
 
-    // disable vue fork ts checker, as it doesn't work with vue3 yet?
-    config.plugin('ForkTsCheckerWebpackPlugin').tap((args) => {
-      args[0] = webpack.merge(args[0], {
-        typescript: {
-          extensions: {
-            vue: {
-              enabled: false,
+    // @nativescript/webpack only registers the checker when the project
+    // depends on typescript; tapping an unregistered plugin throws
+    if (config.plugins.has('ForkTsCheckerWebpackPlugin')) {
+      // disable vue fork ts checker, as it doesn't work with vue3 yet?
+      config.plugin('ForkTsCheckerWebpackPlugin').tap((args) => {
+        args[0] = webpack.merge(args[0], {
+          typescript: {
+            extensions: {
+              vue: {
+                enabled: false,
+              },
             },
           },
-        },
-      });
+        });
 
-      return args;
-    });
+        return args;
+      });
+    }
   });
 };