fix: fallback frame when navigating

CHANGELOG.md

@@ -1,3 +1,12 @@
+## [2.9.1-rc.0](https://github.com/nativescript-vue/nativescript-vue/compare/v2.9.0...v2.9.1-rc.0) (2022-03-02)
+
+
+### Bug Fixes
+
+* fallback frame when navigating ([2bbf28e](https://github.com/nativescript-vue/nativescript-vue/commit/2bbf28e5c7a9052efffa040ada870a547b0e97ac))
+
+
+
 # [2.9.0](https://github.com/nativescript-vue/nativescript-vue/compare/v2.8.4...v2.9.0) (2021-04-01)
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nativescript-vue",
-  "version": "2.9.0",
+  "version": "2.9.1-rc.0",
   "description": "NativeScript and Vue integration",
   "main": "dist/index.js",
   "files": [

packages/nativescript-vue-template-compiler/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nativescript-vue-template-compiler",
-  "version": "2.9.0",
+  "version": "2.9.1-rc.0",
   "description": "template compiler for nativescript-vue",
   "main": "index.js",
   "repository": {

platform/nativescript/plugins/navigator-plugin.js

@@ -34,7 +34,7 @@ export function getFrameInstance(frame) {
     frame = frame.nativeView
   }
   // finally get the component instance for this frame
-  return getFrame(frame.id)
+  return getFrame(frame.id, frame)
 }
 
 export function findParentFrame(vm) {

platform/nativescript/util/frame.js

@@ -1,11 +1,25 @@
+import { VUE_ELEMENT_REF } from '../renderer/ElementNode'
+
 const frames = new Map()
 
 export function setFrame(id, frame) {
   return frames.set(id, frame)
 }
 
-export function getFrame(id) {
-  return frames.get(id)
+export function getFrame(id, fallback) {
+  if (frames.has(id)) {
+    return frames.get(id)
+  }
+
+  // handle a fallback case where the frame with a same id might have been unmounted, but another one with the same id exists as a fallback...
+  if (fallback) {
+    const frameVM = fallback[VUE_ELEMENT_REF]['__vue__']
+    setFrame(id, frameVM)
+
+    return frameVM
+  }
+
+  return null
 }
 
 export function deleteFrame(id) {

samples/app/entry.js

@@ -1 +1 @@
-require('./app-to-check-hmr')
+require('./multiple-default-frames')

samples/app/multiple-default-frames.js

@@ -0,0 +1,54 @@
+const Vue = require('nativescript-vue')
+
+Vue.config.silent = false
+
+const wait = ms => new Promise(resolve => setTimeout(resolve, ms))
+
+const pageComponent = title => ({
+  template: `
+        <Page>
+            <Label text="${title}" />
+        </Page>
+    `
+})
+
+let app = new Vue({
+  data() {
+    return {
+      showSecondFrame: true
+    }
+  },
+  template: `
+    <GridLayout rows="*, auto, *">
+        <ContentView row="0">
+            <Frame>
+                ${pageComponent('[top frame] Page 1').template}
+            </Frame>
+        </ContentView>
+        <Label row="1" text="--- SEPARATOR ---" textAlignment="center" backgroundColor="#eee" />
+        <ContentView row="2" backgroundColor="rgba(255, 0, 0, 0.1)">
+            <Frame v-if="showSecondFrame">
+                ${pageComponent('[bottom frame] Page 2').template}
+            </Frame>
+            <Label v-else text="No more frame here..." color="red" verticalAlignment="center" textAlignment="center" />
+        </ContentView>
+    </GridLayout>
+  `,
+  mounted() {
+    this.testNavigations().catch(err => {
+      console.log(err)
+    })
+  },
+  methods: {
+    async testNavigations() {
+      await wait(3000)
+      this.$navigateTo(pageComponent('[bottom frame] Page 3'))
+      await wait(3000)
+      this.showSecondFrame = false
+      await wait(3000)
+      this.$navigateTo(pageComponent('[top frame] Page 4'))
+    }
+  }
+})
+
+app.$start()

samples/app_resources/Android/src/main/AndroidManifest.xml

@@ -11,7 +11,7 @@
                  android:icon="@drawable/icon"
                  android:label="@string/app_name"
                  android:theme="@style/AppTheme">
-        <activity android:name="com.tns.NativeScriptActivity" android:label="@string/title_activity_kimera" android:configChanges="keyboardHidden|orientation|screenSize" android:theme="@style/LaunchScreenTheme">
+        <activity android:exported="true" android:name="com.tns.NativeScriptActivity" android:label="@string/title_activity_kimera" android:configChanges="keyboardHidden|orientation|screenSize" android:theme="@style/LaunchScreenTheme">
             <meta-data android:name="SET_THEME_ON_LAUNCH" android:resource="@style/AppTheme" />
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />

samples/nativescript.config.ts

@@ -1,12 +1,15 @@
-import { NativeScriptConfig } from "@nativescript/core";
+import { NativeScriptConfig } from '@nativescript/core'
 
 export default {
-	id: 'org.nativescript.application',
+  id: 'org.nativescript.application',
   appPath: 'app',
-	appResourcesPath: 'app_resources',
-	android: {
-		markingMode: 'none',
-		v8Flags: '--expose-gc',
-		maxLogcatObjectSize: 9999,
-	}
+  appResourcesPath: 'app_resources',
+  android: {
+    markingMode: 'none',
+    v8Flags: '--expose-gc',
+    maxLogcatObjectSize: 9999
+  },
+  cli: {
+    packageManager: 'yarn'
+  }
 } as NativeScriptConfig

samples/package.json

@@ -7,13 +7,13 @@
   "license": "MIT",
   "readme": "NativeScriptVue Samples Application",
   "dependencies": {
-    "@nativescript/core": "~8.1.5",
+    "@nativescript/core": "^8.2.0-alpha.12",
     "lorem-ipsum": "2.0.4",
     "vuex": "3.6.2"
   },
   "devDependencies": {
-    "@nativescript/android": "8.1.1",
-    "@nativescript/ios": "8.1.0",
+    "@nativescript/android": "^8.2.0-alpha.11",
+    "@nativescript/ios": "^8.2.0-alpha.6",
     "@nativescript/webpack": "~5.0.0",
     "nativescript-vue-template-compiler": "file:../packages/nativescript-vue-template-compiler"
   }

samples/webpack.config.js

@@ -1,21 +1,30 @@
-const webpack = require("@nativescript/webpack");
+const webpack = require('@nativescript/webpack')
 const path = require('path')
 
-module.exports = (env) => {
-  webpack.init(env);
+module.exports = env => {
+  webpack.init(env)
 
   // force the vue config, since we don't have nativescript-vue in package.json
   webpack.useConfig('vue')
 
   webpack.chainWebpack(config => {
+    config.set('snapshot', {
+      managedPaths: []
+    })
+
     config.resolve.alias
       // resolve nativescript-vue to built version in parent folder
       .set('nativescript-vue', path.resolve(__dirname, '../dist/index.js'))
       // resolve nativescript-toasty to the updated version scoped under @triniwiz
       .set('nativescript-toasty', '@triniwiz/nativescript-toasty')
-  })
-
-  return webpack.resolveConfig();
-};
 
+    config.module
+      .rule('vue')
+      .use('vue-loader')
+      .options({
+        compiler: require('nativescript-vue-template-compiler')
+      })
+  })
 
+  return webpack.resolveConfig()
+}