nativescript-vue · rigor789 · Sep 10, 2023 · Sep 8, 2023 · Sep 8, 2023 · Sep 9, 2023
diff --git a/demo/App_Resources/Android/src/main/AndroidManifest.xml b/demo/App_Resources/Android/src/main/AndroidManifest.xml
@@ -6,19 +6,20 @@
 		android:smallScreens="true"
 		android:normalScreens="true"
 		android:largeScreens="true"
-		android:xlargeScreens="true"/>
+		android:xlargeScreens="true" />
 
-	<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
-	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
-	<uses-permission android:name="android.permission.INTERNET"/>
-	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
+	<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
+	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+	<uses-permission android:name="android.permission.INTERNET" />
+	<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
 
 	<application
 		android:name="com.tns.NativeScriptApplication"
 		android:allowBackup="true"
 		android:icon="@mipmap/ic_launcher"
 		android:label="@string/app_name"
 		android:theme="@style/AppTheme"
+		android:usesCleartextTraffic="true"
 		android:hardwareAccelerated="true">
 
 		<activity
@@ -27,7 +28,7 @@
 			android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout|locale|uiMode"
 			android:theme="@style/LaunchScreenTheme"
 			android:hardwareAccelerated="true"
-      		android:launchMode="singleTask"
+			android:launchMode="singleTask"
 			android:exported="true">
 
 			<meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />
@@ -37,6 +38,6 @@
 				<category android:name="android.intent.category.LAUNCHER" />
 			</intent-filter>
 		</activity>
-		<activity android:name="com.tns.ErrorReportActivity"/>
+		<activity android:name="com.tns.ErrorReportActivity" />
 	</application>
 </manifest>
diff --git a/demo/package.json b/demo/package.json
@@ -14,6 +14,6 @@
     "@nativescript/ios": "~8.5.2",
     "@nativescript/types": "~8.5.0",
     "@nativescript/webpack": "~5.0.14",
-    "typescript": "~5.1.3"
+    "typescript": "^5.2.2"
   }
 }
diff --git a/demo/tsconfig.json b/demo/tsconfig.json
@@ -14,8 +14,6 @@
       "@/*": ["src/*"],
       "nativescript-vue": ["../src/index.ts"]
     },
-    "typeRoots": ["types"],
-    "types": ["node"],
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "experimentalDecorators": true,

diff --git a/devtools.js b/devtools.js
@@ -0,0 +1,33 @@
+if (__DEV__) {
+  try {
+    const _global = globalThis.global;
+
+    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 platform = global.isAndroid ? 'Android' : 'iOS';
+
+    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');
+  } catch (e) {
+    console.warn('[VueDevtools] Failed to init:', e);
+  }
+}
diff --git a/nativescript.webpack.js b/nativescript.webpack.js
@@ -1,12 +1,108 @@
 const { VueLoaderPlugin } = require('vue-loader');
+const spawn = require('cross-spawn');
+
+function findFreePort(startingPort = 8098) {
+  let found = false;
+  let port = startingPort;
+
+  const isPortFree = (port) =>
+    new Promise((resolve) => {
+      const server = require('http')
+        .createServer()
+        .listen(port, '0.0.0.0', () => {
+          server.close();
+          resolve(true);
+        })
+        .on('error', () => {
+          resolve(false);
+        });
+    });
+
+  const findFreePort = () => {
+    isPortFree(port).then((isFree) => {
+      if (!isFree) {
+        port++;
+        return findFreePort();
+      }
+      found = true;
+    });
+  };
+
+  findFreePort();
+
+  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...
+    }
+  }
+
+  return port;
+}
+
+function startVueDevtools(port, isAndroid = false) {
+  console.log(`[VueDevtools] Starting standalone 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)`
+    );
+  }
+  spawn(require.resolve('@vue/devtools/bin.js'), [], {
+    stdio: 'ignore',
+    env: {
+      ...process.env,
+      PORT: port,
+    },
+  });
+}
 
 /**
  * @param {typeof import("@nativescript/webpack")} webpack
  */
 module.exports = (webpack) => {
   webpack.useConfig('vue');
 
-  webpack.chainWebpack((config) => {
+  webpack.chainWebpack((config, env) => {
+    const additionalDefines = {
+      __VUE_PROD_DEVTOOLS__: 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);
+      } else {
+        // insert devtools entry before the app entry, but after globals etc.
+        paths.splice(entryIndex, 0, devtoolsEntryPath);
+      }
+
+      config.entry('bundle').clear().merge(paths);
+
+      // start the devtools...
+      startVueDevtools(vueDevtoolsPort, isAndroid);
+    }
+
     // resolve any imports from "vue" to "nativescript-vue"
     config.resolve.alias.set('vue', 'nativescript-vue');
 
@@ -41,7 +137,7 @@ module.exports = (webpack) => {
     config.plugin('DefinePlugin').tap((args) => {
       Object.assign(args[0], {
         __VUE_OPTIONS_API__: true,
-        __VUE_PROD_DEVTOOLS__: false,
+        ...additionalDefines,
       });
 
       return args;

diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
   "main": "dist/index.js",
   "files": [
     "dist/",
+    "devtools.js",
     "nativescript.webpack.js"
   ],
   "license": "MIT",
@@ -16,8 +17,10 @@
   },
   "dependencies": {
     "@vue/compiler-sfc": "^3.3.4",
+    "@vue/devtools": "^6.5.0",
     "@vue/runtime-core": "^3.3.4",
     "@vue/shared": "^3.3.4",
+    "cross-spawn": "^7.0.3",
     "set-value": "^4.1.0",
     "vue-loader": "^17.2.2"
   },

diff --git a/packages/stackblitz-template/package.json b/packages/stackblitz-template/package.json
@@ -14,7 +14,7 @@
     "@nativescript/webpack": "~5.0.0",
     "@types/node": "~17.0.21",
     "tailwindcss": "^3.1.8",
-    "typescript": "~4.9.5"
+    "typescript": "^5.2.2"
   },
   "stackblitz": {
     "installDependencies": true,

diff --git a/packages/stackblitz-template/tsconfig.json b/packages/stackblitz-template/tsconfig.json
@@ -13,8 +13,6 @@
       "~/*": ["src/*"],
       "@/*": ["src/*"]
     },
-    "typeRoots": ["types"],
-    "types": ["node"],
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "experimentalDecorators": true,

diff --git a/packages/template-blank/package.json b/packages/template-blank/package.json
@@ -12,6 +12,6 @@
     "@nativescript/webpack": "~5.0.0",
     "@types/node": "~17.0.21",
     "tailwindcss": "^3.1.8",
-    "typescript": "~4.9.5"
+    "typescript": "^5.2.2"
   }
 }
diff --git a/packages/template-blank/tsconfig.json b/packages/template-blank/tsconfig.json
@@ -13,8 +13,6 @@
       "~/*": ["src/*"],
       "@/*": ["src/*"]
     },
-    "typeRoots": ["types"],
-    "types": ["node"],
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "experimentalDecorators": true,

diff --git a/src/components/ActionBar.ts b/src/components/ActionBar.ts
@@ -49,6 +49,7 @@ registerElement('NSCActionBar', () => NSCActionBar, {
 });
 
 export const ActionBar = /*#__PURE__*/ defineComponent({
+  name: 'ActionBar',
   setup(props, ctx) {
     return () => {
       return h(

diff --git a/src/components/ListView.ts b/src/components/ListView.ts
@@ -41,6 +41,7 @@ function getListItem(item: any, index: number): ListItem {
 const LIST_CELL_ID = Symbol('list_cell_id');
 
 export const ListView = /*#__PURE__*/ defineComponent({
+  name: 'ListView',
   props: {
     items: {
       validator(value) {

diff --git a/src/dom/index.ts b/src/dom/index.ts
@@ -1,4 +1,4 @@
-import { markRaw } from "@vue/runtime-core";
+import { markRaw } from '@vue/runtime-core';
 import {
   getViewClass,
   getViewMeta,

diff --git a/src/index.ts b/src/index.ts
@@ -16,7 +16,7 @@ import { renderer } from './renderer';
 import { install as modalsPlugin } from './plugins/modals';
 import { install as navigationPlugin } from './plugins/navigation';
 import { isKnownView, registerElement } from './registry';
-import { setRootContext } from './runtimeHelpers';
+import { setRootApp } from './runtimeHelpers';
 
 declare module '@vue/runtime-core' {
   interface App {
@@ -89,7 +89,7 @@ export const createApp = ((...args) => {
     const componentInstance = app.mount(createAppRoot(), false, false);
 
     startApp(componentInstance);
-    setRootContext(componentInstance.$.appContext);
+    setRootApp(app);
 
     return componentInstance;
   };

diff --git a/src/runtimeHelpers.ts b/src/runtimeHelpers.ts
@@ -1,8 +1,7 @@
 import { View } from '@nativescript/core';
 import {
-  AppContext,
+  App,
   Component,
-  h,
   RendererElement,
   RendererNode,
   VNode,
@@ -14,51 +13,54 @@ type Props = Record<string, unknown>;
 
 const __DEV__ = true;
 
-let rootContext: AppContext = null;
+let rootApp: App = null;
 
-export const setRootContext = (context: AppContext) => {
-  rootContext = context;
+export const setRootApp = (app: App) => {
+  rootApp = app;
 };
 
 export const createNativeView = <T = View>(
   component: Component,
   props?: Props,
-  contextOverrides?: any
+  contextOverrides?: { reload?(): void }
 ) => {
-  let vnode: VNode;
   let isMounted = false;
-  let container: NSVNode;
+  const newApp = renderer.createApp(component, props);
+  // Destructure so as not to copy over the root app instance
+  const { app, ...rootContext } = rootApp._context;
   const context = { ...rootContext, ...contextOverrides };
 
   type M = VNode<RendererNode, RendererElement, { nativeView: T }>;
 
   return {
     context,
+    get vnode() {
+      return newApp._instance?.vnode;
+    },
     get nativeView(): T {
-      return vnode.el.nativeView;
+      return this.vnode?.el.nativeView;
     },
     mount(root: NSVNode = new NSVRoot()) {
       if (isMounted) {
-        return vnode as M;
+        return this.vnode as M;
       }
 
-      vnode = h(component, props);
-
-      vnode.appContext = context;
+      Object.keys(context).forEach((key) => {
+        newApp._context[key] = context[key];
+      });
 
-      renderer.render(vnode, root);
+      newApp.mount(root);
 
       isMounted = true;
-      container = root;
 
-      return vnode as M;
+      return this.vnode as M;
     },
     unmount() {
       if (!isMounted) return;
-      vnode = null;
-      renderer.render(null, container);
+
+      newApp.unmount();
+
       isMounted = false;
-      container = null;
     },
   };
 };