10000 fix: use root context for navigation · heywhy/nativescript-vue@b8c5612 · GitHub
[go: up one dir, main page]
Skip to content

Commit b8c5612

Browse files
heywhyheywhy
committed
fix: use root context for navigation
1 parent 40de7bf commit b8c5612

File tree

7 files changed

+119
-63
lines changed

7 files changed

+119
-63
lines changed

‎.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
**/dist
22
*.tgz
33

4-
yarn-error.log
4+
yarn-error.log
5+
node_modules

‎src/components/ListView.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {
66
ObservableArray,
77
} from "@nativescript/core";
88

9-
import { getCurrentInstance, ref, VNode, watch, PropType } from "..";
9+
import { getCurrentInstance, ref, VNode, watch } from "@vue/runtime-dom";
1010
import { NSVElement, NSVViewFlags } from "../dom";
1111
import { registerElement } from "../registry";
1212
import { ELEMENT_REF } from "../runtimeHelpers";

‎src/index.ts

Lines changed: 7 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { resolveComponent as resolveComponentCore } from "@vue/runtime-core";
2-
import type { CreateAppFunction, Plugin } from "@vue/runtime-core";
2+
import type { CreateAppFunction } from "@vue/runtime-core";
33

44
import { BUILT_IN_COMPONENTS } from "./components";
55

@@ -10,6 +10,7 @@ import { renderer } from "./renderer";
1010
import { install as modalsPlugin } from "./plugins/modals";
1111
import { install as navigationPlugin } from "./plugins/navigation";
1212
import { isKnownView, registerElement } from "./registry";
13+
import { setRootContext } from './runtimeHelpers'
1314

1415
declare module "@vue/runtime-core" {
1516
interface App {
@@ -34,8 +35,6 @@ export { vShow } from "./directives/vShow";
3435
export { $showModal } from "./plugins/modals";
3536
export { $navigateTo, $navigateBack } from "./plugins/navigation";
3637

37-
export const APP_USES = Symbol("app_uses");
38-
3938
// creates a special root container that calls resetRoot whenever it's children change
4039
function createAppRoot() {
4140
const defaultRoot = new NSVRoot();
@@ -64,13 +63,10 @@ function createAppRoot() {
6463
return defaultRoot;
6564
}
6665

67-
// plugins applied to the root app
68-
let rootAppUses: Array<[Plugin, ...any[]]> = [];
69-
7066
export const render = renderer.render;
7167
export const createApp = ((...args) => {
7268
const app = renderer.createApp(...args);
73-
const { mount, use } = app;
69+
const { mount } = app;
7470

7571
app.registerElement = registerElement;
7672

@@ -83,25 +79,15 @@ export const createApp = ((...args) => {
8379

8480
app.start = () => {
8581
const componentInstance = app.mount(createAppRoot(), false, false);
82+
8683
startApp(componentInstance);
87-
rootAppUses = app[APP_USES];
84+
setRootContext(componentInstance.$.appContext);
8885

8986
return componentInstance;
9087
};
9188

92-
app[APP_USES] = [];
93-
app.use = (...args) => {
94-
app[APP_USES].push([...args]);
95-
return use(...args);
96-
};
97-
98-
// always added core plugins, no need to track them through app.use...
99-
use(modalsPlugin);
100-
use(navigationPlugin);
101-
102-
rootAppUses.forEach((args) => {
103-
use(...args);
104-
});
89+
app.use(modalsPlugin);
90+
app.use(navigationPlugin);
10591

10692
return app;
10793
}) as CreateAppFunction<NSVElement>;

‎src/plugins/navigation.ts

Lines changed: 42 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import { App, Component, isRef, Ref } from "@vue/runtime-core";
1+
import { App, Component, createVNode, Ref, unref } from "@vue/runtime-core";
22
import { Frame, NavigationEntry, Page } from "@nativescript/core";
3-
import { createApp, NSVElement, NSVRoot } from "..";
3+
import { NSVElement, NSVRoot } from "../dom";
4+
import { renderer } from "../renderer";
45
import { NavigatedData } from "@nativescript/core";
6+
import { rootContext } from '../runtimeHelpers'
57

68
declare module "@vue/runtime-core" {
79
interface ComponentCustomProperties {
@@ -40,28 +42,25 @@ export function install(app: App) {
4042
app.config.globalProperties.$navigateBack = $navigateBack;
4143
}
4244

43-
function resolveFrame(frame: ResolvableFrame): Frame {
45+
function resolveFrame(frame?: ResolvableFrame): Frame {
4446
if (!frame) {
4547
return Frame.topmost();
4648
}
4749

48-
if (frame instanceof Frame) {
49-
return frame;
50-
}
50+
const ob = unref(frame);
5151

52-
// todo: check if refs work this way or not
53-
if (isRef(frame)) {
54-
return frame.value as any;
52+
if (ob instanceof Frame) {
53+
return ob;
5554
}
5655

57-
if (frame instanceof NSVElement) {
58-
return frame.nativeView;
56+
if (ob instanceof NSVElement) {
57+
return ob.nativeView;
5958
}
6059

6160
// todo: either change core Frame to add frames to the stack when they are created
6261
// or do as we did in 2.x - handle a Map of frames.
6362
// right now, empty frames can't be navigated as they are not recognized by `getFrameById`
64-
return Frame.getFrameById(frame);
63+
return Frame.getFrameById(ob);
6564
}
6665

6766
function createNavigationRoot(cb: (view: any) => void) {
@@ -132,37 +131,42 @@ export async function $navigateTo(
132131
const cleanup = (page) => {
133132
if (page === latestPage) {
134133
// console.log("DISPOSE NAVIGATION APP");
135-
navigationApp.unmount();
134+
// the next two statements does what app.unmount does
135+
renderer.render(null, navRoot);
136+
navRoot = null
136137
} else {
137138
// console.log("no dispose we have replaced page");
138139
}
139140
};
140141

141-
const navigationApp = createApp(target, options.props);
142-
const targetPage = navigationApp.mount(
143-
createNavigationRoot((newPage) => {
144-
latestPage = newPage;
145-
attachDisposeCallbacks(newPage, cleanup);
146-
147-
// cache the original transition of the current page
148-
const originalTransition = frame.currentEntry.transition;
149-
150-
// replace current page
151-
frame.replacePage({
152-
...options,
153-
transition: {
154-
name: "fade",
155-
duration: 10,
156-
},
157-
create: () => newPage,
158-
});
159-
160-
// reset the transition to the original one
161-
frame.once("navigatedTo", () => {
162-
frame.currentEntry.transition = originalTransition;
163-
});
164-
})
165-
).$el.nativeView as unknown as Page;
142+
let navRoot = createNavigationRoot((newPage) => {
143+
latestPage = newPage;
144+
attachDisposeCallbacks(newPage, cleanup);
145+
// cache the original transition of the current page
146+
const originalTransition = frame.currentEntry.transition;
147+
// replace current page
148+
frame.replacePage({
149+
...options,
150+
transition: {
151+
name: "fade",
152+
duration: 10,
153+
},
154+
create: () => newPage,
155+
});
156+
// reset the transition to the original one
157+
frame.once("navigatedTo", () => {
158+
frame.currentEntry.transition = originalTransition;
159+
});
160+
});
161+
162+
const vnode = createVNode(target, options.props)
163+
164+
vnode.appContext = rootContext
165+
166+
renderer.render(vnode, navRoot)
167+
168+
const targetPage = vnode.component.proxy.$el?.nativeView as Page
169+
166170
let latestPage = targetPage;
167171
attachDisposeCallbacks(targetPage, cleanup);
168172

‎src/runtimeHelpers.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
1+
import { AppContext } from '@vue/runtime-dom'
2+
13
const __DEV__ = true;
24

5+
export let rootContext = null
6+
7+
export const setRootContext = (context: AppContext) => {
8+
rootContext = context
9+
}
310

411
export const ELEMENT_REF = Symbol(__DEV__ ? `elementRef` : ``);
512

‎src/withCompiler.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { registerRuntimeCompiler } from "./";
1+
import { registerRuntimeCompiler } from "@vue/runtime-dom";
22
import { compileToFunction } from "./compiler";
33

44
registerRuntimeCompiler(compileToFunction);

‎yarn.lock

Lines changed: 59 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -433,6 +433,16 @@
433433
estree-walker "^2.0.2"
434434
source-map "^0.6.1"
435435

436+
"@vue/compiler-core@3.2.47":
437+
version "3.2.47"
438+
resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.47.tgz#3e07c684d74897ac9aa5922c520741f3029267f8"
439+
integrity sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==
440+
dependencies:
441+
"@babel/parser" "^7.16.4"
442+
"@vue/shared" "3.2.47"
443+
estree-walker "^2.0.2"
444+
source-map "^0.6.1"
445+
436446
"@vue/compiler-dom@3.2.41", "@vue/compiler-dom@^3.2.41":
437447
version "3.2.41"
438448
resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.41.tgz#dc63dcd3ce8ca8a8721f14009d498a7a54380299"
@@ -441,6 +451,14 @@
441451
"@vue/compiler-core" "3.2.41"
442452
"@vue/shared" "3.2.41"
443453

454+
"@vue/compiler-dom@3.2.47":
455+
version "3.2.47"
456+
resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz#a0b06caf7ef7056939e563dcaa9cbde30794f305"
457+
integrity sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==
458+
dependencies:
459+
"@vue/compiler-core" "3.2.47"
460+
"@vue/shared" "3.2.47"
461+
444462
"@vue/compiler-sfc@3.2.41":
445463
version "3.2.41"
446464
resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.41.tgz#238fb8c48318408c856748f4116aff8cc1dc2a73"
@@ -457,6 +475,22 @@
457475
postcss "^8.1.10"
458476
source-map "^0.6.1"
459477

478+
"@vue/compiler-sfc@^3.2.41":
479+
version "3.2.47"
480+
resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz#1bdc36f6cdc1643f72e2c397eb1a398f5004ad3d"
481+
integrity sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==
482+
dependencies:
483+
"@babel/parser" "^7.16.4"
484+
"@vue/compiler-core" "3.2.47"
485+
"@vue/compiler-dom" "3.2.47"
486+
"@vue/compiler-ssr" "3.2.47"
487+
"@vue/reactivity-transform" "3.2.47"
488+
"@vue/shared" "3.2.47"
489+
estree-walker "^2.0.2"
490+
magic-string "^0.25.7"
491+
postcss "^8.1.10"
492+
source-map "^0.6.1"
493+
460494
"@vue/compiler-ssr@3.2.41":
461495
version "3.2.41"
462496
resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.41.tgz#344f564d68584b33367731c04ffc949784611fcb"
@@ -465,6 +499,14 @@
465499
"@vue/compiler-dom" "3.2.41"
466500
"@vue/shared" "3.2.41"
467501

502+
"@vue/compiler-ssr@3.2.47":
503+
version "3.2.47"
504+
resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz#35872c01a273aac4d6070ab9d8da918ab13057ee"
505+
integrity sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==
506+
dependencies:
507+
"@vue/compiler-dom" "3.2.47"
508+
"@vue/shared" "3.2.47"
509+
468510
"@vue/component-compiler-utils@^3.1.0":
469511
version "3.3.0"
470512
resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.3.0.tgz#f9f5fb53464b0c37b2c8d2f3fbfe44df60f61dc9"
@@ -492,6 +534,17 @@
492534
estree-walker "^2.0.2"
493535
magic-string "^0.25.7"
494536

537+
"@vue/reactivity-transform@3.2.47":
538+
version "3.2.47"
539+
resolved "https://registry.yarnpkg.com/@vue/reactivity-transform/-/reactivity-transform-3.2.47.tgz#e45df4d06370f8abf29081a16afd25cffba6d84e"
540+
integrity sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==
541+
dependencies:
542+
"@babel/parser" "^7.16.4"
543+
"@vue/compiler-core" "3.2.47"
544+
"@vue/shared" "3.2.47"
545+
estree-walker "^2.0.2"
546+
magic-string "^0.25.7"
547+
495548
"@vue/reactivity@3.2.41":
496549
version "3.2.41"
497550
resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.2.41.tgz#0ad3bdf76d76822da1502dc9f394dafd02642963"
@@ -529,6 +582,11 @@
529582
resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.41.tgz#fbc95422df654ea64e8428eced96ba6ad555d2bb"
530583
integrity sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw==
531584

585+
"@vue/shared@3.2.47":
586+
version "3.2.47"
587+
resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.47.tgz#e597ef75086c6e896ff5478a6bfc0a7aa4bbd14c"
588+
integrity sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==
589+
532590
"@webassemblyjs/ast@1.11.1":
533591
version "1.11.1"
534592
resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.11.1.tgz#2bfd767eae1a6996f432ff7e8d7fc75679c0b6a7"
@@ -2615,7 +2673,7 @@ vue-hot-reload-api@^2.3.0:
26152673
vue-hot-reload-api "^2.3.0"
26162674
vue-style-loader "^4.1.0"
26172675

2618-
vue-loader@^17.0.1:
2676+
vue-loader@^17.0.0:
26192677
version "17.0.1"
26202678
resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-17.0.1.tgz#c0ee8875e0610a0c2d13ba9b4d50a9c8442e7a3a"
26212679
integrity sha512-/OOyugJnImKCkAKrAvdsWMuwoCqGxWT5USLsjohzWbMgOwpA5wQmzQiLMzZd7DjhIfunzAGIApTOgIylz/kwcg==

0 commit comments

Comments
 (0)
0