Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit0e7406d

Browse files
committed
feat(hmr): improved Page HMR
1 parentfda7405 commit0e7406d

File tree

3 files changed

+72
-20
lines changed

3 files changed

+72
-20
lines changed

‎demo/app/components/Home.vue‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<script setup lang="ts">
2-
importTestfrom'./Test.vue';
2+
import{ListItem,onMounted,onUnmounted }from'nativescript-vue';
33
import {goHome }from'~/composables/goHome';
4-
import {onUnmounted }from'nativescript-vue';
5-
import {ListItem }from'nativescript-vue';
4+
importTestfrom'./Test.vue';
65
76
defineProps({
87
depth: {
@@ -11,7 +10,7 @@ defineProps({
1110
},
1211
});
1312
14-
const message='Hello World!';
13+
const message='Hello World!!';
1514
1615
interfaceTest {
1716
name:string;
@@ -31,6 +30,10 @@ function selector(item: ListItem<Test>) {
3130
returnitem.even?'default':'odd';
3231
}
3332
33+
onMounted(()=> {
34+
console.log('MOUNTED HOME');
35+
});
36+
3437
onUnmounted(()=> {
3538
console.log('UNMOUNTED HOME');
3639
});

‎src/plugins/navigation.ts‎

Lines changed: 60 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import{Frame,NavigationEntry,Page}from'@nativescript/core';
22
import{App,Component,Ref,nextTick,unref}from'@vue/runtime-core';
3-
import{NSVElement}from'../dom';
3+
import{NSVElement,NSVRoot}from'../dom';
44
import{createNativeView}from'../runtimeHelpers';
55

66
declare module'@vue/runtime-core'{
@@ -69,28 +69,75 @@ export function $navigateTo(
6969
thrownewError('Failed to resolve frame. Make sure your frame exists.');
7070
}
7171

72-
letview=createNativeView<Page>(target,options?.props);
72+
constroot=newNSVRoot();
73+
letisReloading=false;
7374

74-
view.mount();
75+
constattachDisposeCallback=(page:Page)=>{
76+
constdispose=page.disposeNativeView;
7577

76-
constpage=view.nativeView;
77-
constdispose=page.disposeNativeView;
78+
page.disposeNativeView=()=>{
79+
dispose.call(page);
7880

79-
page.disposeNativeView=()=>{
80-
dispose.call(page);
81-
82-
nextTick(()=>{
83-
view.unmount();
84-
view=null;
81+
// if we are reloading, don't unmount the view, as the reload will unmount/remount it.
82+
if(!isReloading){
83+
view.unmount();
84+
view=null;
85+
}
86+
};
87+
};
88+
constreloadPage=()=>{
89+
if(isReloading){
90+
return;
91+
}
92+
93+
// if the page we are reloading is not the current page, wait for it to be navigated to
94+
if(frame.currentPage!==view.nativeView){
95+
view.nativeView.once('navigatedTo',()=>{
96+
nextTick(()=>{
97+
reloadPage();
98+
});
99+
});
100+
return;
101+
}
102+
103+
isReloading=true;
104+
view.unmount();
105+
view.mount(root);
106+
attachDisposeCallback(view.nativeView);
107+
108+
constoriginalTransition=frame.currentEntry.transition;
109+
// replace current page
110+
frame.replacePage({
111+
...options,
112+
transition:{
113+
name:'fade',
114+
duration:10,
115+
},
116+
create:()=>view.nativeView,
117+
});
118+
// reset the transition to the original one
119+
frame.once('navigatedTo',()=>{
120+
frame.currentEntry.transition=originalTransition;
121+
isReloading=false;
85122
});
86123
};
87124

125+
letview=createNativeView<Page>(target,options?.props,{
126+
/**
127+
* Called by @vue/runtime-core when the component is reloaded during HMR.
128+
*/
129+
reload:reloadPage,
130+
});
131+
132+
view.mount(root);
133+
attachDisposeCallback(view.nativeView);
134+
88135
frame.navigate({
89136
...options,
90-
create:()=>page,
137+
create:()=>view.nativeView,
91138
});
92139

93-
returnpage;
140+
returnview.nativeView;
94141
}catch(e){
95142
console.error('[$navigateTo] Failed to navigate:\n\n');
96143
console.error(e,e.stack);

‎src/runtimeHelpers.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,13 @@ export const setRootContext = (context: AppContext) => {
2222

2323
exportconstcreateNativeView=<T=View>(
2424
component:Component,
25-
props?:Props
25+
props?:Props,
26+
contextOverrides?:any
2627
)=>{
2728
letvnode:VNode;
2829
letisMounted=false;
2930
letcontainer:NSVNode;
30-
constcontext={ ...rootContext};
31+
constcontext={ ...rootContext, ...contextOverrides};
3132

3233
typeM=VNode<RendererNode,RendererElement,{nativeView:T}>;
3334

@@ -54,8 +55,9 @@ export const createNativeView = <T = View>(
5455
},
5556
unmount(){
5657
if(!isMounted)return;
57-
renderer.render(null,container);
5858
vnode=null;
59+
renderer.render(null,container);
60+
isMounted=false;
5961
container=null;
6062
},
6163
};

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp