diff --git a/CHANGELOG.md b/CHANGELOG.md index 3937f186..83564a28 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/package.json b/package.json index 07b80721..46c3fe72 100644 --- a/package.json +++ b/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": [ diff --git a/packages/nativescript-vue-template-compiler/package.json b/packages/nativescript-vue-template-compiler/package.json index 1627a31d..aae18806 100644 --- a/packages/nativescript-vue-template-compiler/package.json +++ b/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": { diff --git a/platform/nativescript/plugins/navigator-plugin.js b/platform/nativescript/plugins/navigator-plugin.js index 1be5076a..f6d3ee87 100644 --- a/platform/nativescript/plugins/navigator-plugin.js +++ b/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) { diff --git a/platform/nativescript/util/frame.js b/platform/nativescript/util/frame.js index 93300d0a..a7dc7291 100644 --- a/platform/nativescript/util/frame.js +++ b/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) { diff --git a/samples/app/entry.js b/samples/app/entry.js index 8420d3db..4feb67d2 100644 --- a/samples/app/entry.js +++ b/samples/app/entry.js @@ -1 +1 @@ -require('./app-to-check-hmr') +require('./multiple-default-frames') diff --git a/samples/app/multiple-default-frames.js b/samples/app/multiple-default-frames.js new file mode 100644 index 00000000..c1e9f881 --- /dev/null +++ b/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: ` + + + ` +}) + +let app = new Vue({ + data() { + return { + showSecondFrame: true + } + }, + template: ` + + + + ${pageComponent('[top frame] Page 1').template} + + + + `, + 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() diff --git a/samples/app_resources/Android/src/main/AndroidManifest.xml b/samples/app_resources/Android/src/main/AndroidManifest.xml index 8133c17d..7fcd2e44 100644 --- a/samples/app_resources/Android/src/main/AndroidManifest.xml +++ b/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"> - + diff --git a/samples/nativescript.config.ts b/samples/nativescript.config.ts index 02fe39af..aad794fb 100644 --- a/samples/nativescript.config.ts +++ b/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 diff --git a/samples/package.json b/samples/package.json index 0c681440..51fe5679 100644 --- a/samples/package.json +++ b/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" } diff --git a/samples/webpack.config.js b/samples/webpack.config.js index 9c52fccf..80519c04 100644 --- a/samples/webpack.config.js +++ b/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() +}