8000 feat: Improve tracked global properties (#1036) · heywhy/nativescript-vue@6b9be9e · GitHub
[go: up one dir, main page]
Skip to content

Commit 6b9be9e

Browse files
heywhyheywhy
authored
feat: Improve tracked global properties (nativescript-vue#1036)
1 parent 5c9e171 commit 6b9be9e

File tree

13 files changed

+793
-581
lines changed

13 files changed

+793
-581
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

‎package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
},
1414
"dependencies": {
1515
"@vue/compiler-dom": "^3.2.41",
16-
"@vue/runtime-dom": "^3.2.41",
1716
"@vue/compiler-sfc": "^3.2.41",
1817
"set-value": "^4.1.0",
1918
"vue-loader": "^17.0.0"

‎src/compiler.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { compile, CompilerError, CompilerOptions } from "@vue/compiler-dom";
2-
import { RenderFunction, warn } from "@vue/runtime-dom";
2+
import { RenderFunction, warn } from "@vue/runtime-core";
33
import * as runtime from "./index";
44

55
const NOOP = () => {};

‎src/components/ListView.ts

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
1-
import { defineComponent, h, warn } from "@vue/runtime-core";
1+
import {
2+
defineComponent,
3+
getCurrentInstance,
4+
h,
5+
VNode,
6+
warn,
7+
watch,
8+
ref
9+
} from "@vue/runtime-core";
210

311
import {
412
ItemEventData,
513
ListView as NSCListView,
614
ObservableArray,
715
} from "@nativescript/core";
816

9-
import { getCurrentInstance, ref, VNode, watch, PropType } from "..";
1017
import { NSVElement, NSVViewFlags } from "../dom";
1118
import { registerElement } from "../registry";
1219
import { ELEMENT_REF } from "../runtimeHelpers";

‎src/index.ts

Lines changed: 9 additions & 22 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 {
@@ -28,14 +29,13 @@ init();
2829
export * from "./dom";
2930
export * from "./registry";
3031
export * from "./renderer";
32+
export { createNativeView } from "./runtimeHelpers";
3133

32-
export * from "@vue/runtime-dom";
34+
export * from "@vue/runtime-core";
3335
export { vShow } from "./directives/vShow";
3436
export { $showModal } from "./plugins/modals";
3537
export { $navigateTo, $navigateBack } from "./plugins/navigation";
3638

37-
export const APP_USES = Symbol("app_uses");
38-
3939
// creates a special root container that calls resetRoot whenever it's children change
4040
function createAppRoot() {
4141
const defaultRoot = new NSVRoot();
@@ -64,13 +64,10 @@ function createAppRoot() {
6464
return defaultRoot;
6565
}
6666

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

7572
app.registerElement = registerElement;
7673

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

8481
app.start = () => {
8582
const componentInstance = app.mount(createAppRoot(), false, false);
83+
8684
startApp(componentInstance);
87-
rootAppUses = app[APP_USES];
85+
setRootContext(componentInstance.$.appContext);
8886

8987
return componentInstance;
9088
};
9189

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-
});
90+
app.use(modalsPlugin);
91+
app.use(navigationPlugin);
10592

10693
return app;
10794
}) as CreateAppFunction<NSVElement>;

‎src/plugins/modals.ts

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { Application, ShowModalOptions, View } from "@nativescript/core";
12
import {
23
App,
34
Component,
@@ -6,19 +7,23 @@ import {
67
Ref,
78
warn,
89
} from "@vue/runtime-core";
9-
import { Application, ShowModalOptions, View } from "@nativescript/core";
10-
import { createApp, NSVElement } from "..";
1110
import { isObject } from "@vue/shared";
11+
import { NSVElement } from "../dom";
12+
import { createNativeView } from "../runtimeHelpers";
1213

1314
declare module "@vue/runtime-core" {
14-
interface ComponentCustomProperties {
15+
export interface ComponentCustomProperties {
1516
/**
1617
* todo: update docblock
1718
*/
1819
$showModal: <T = any>(
1920
component: Component,
2021
options?: ModalOptions
2122
) => Promise<T | false | undefined>;
23+
$closeModal: (arg: any) => void;
24+
$modal: {
25+
close: (arg: any) => void
26+
};
2227
}
2328
}
2429

@@ -71,31 +76,27 @@ export async function $showModal<T = any>(
7176
if (__DEV__) {
7277
warn(`could not open modal because the target does not exist`);
7378
}
74-
return false;
79+
return;
7580
}
7681

7782
return new Promise((resolve) => {
78-
const modalApp = createApp(component, options ? options.props : null);
7983
let isResolved = false;
84+
let view = createNativeView(component, options.props);
85+
86+
const closeModal = (...args: any[]) => modalContent.closeModal(...args);
8087
const closeCallback = (data?: T) => {
81-
if (isResolved) return;
88+
if(isResolved) return;
8289
isResolved = true;
90+
view.unmount();
91+
view = null;
8392

84-
try {
85-
modalContent.closeModal();
86-
} catch (e) {
87-
// ignore?
88-
}
89-
90-
modalApp.unmount();
9193
resolve(data);
9294
};
9395

94-
modalApp.config.globalProperties.$modal = {
95-
close: closeCallback,
96-
};
96+
view.context.config.globalProperties.$closeModal = closeModal;
97+
view.context.config.globalProperties.$modal = { close: closeModal };
9798

98-
const modalContent = modalApp.mount().$el.nativeView;
99+
const modalContent = view.mount();
99100

100101
modalTarget.showModal(modalContent, {
101102
...options,

‎src/plugins/navigation.ts

Lines changed: 38 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { App, Component, isRef, Ref } from "@vue/runtime-core";
21
import { Frame, NavigationEntry, Page } from "@nativescript/core";
3-
import { createApp, NSVElement, NSVRoot } from "..";
4-
import { NavigatedData } from "@nativescript/core";
2+
import { App, Component, Ref, unref } from "@vue/runtime-core";
3+
import { NSVElement, NSVRoot } from "../dom";
4+
import { createNativeView } from "../runtimeHelpers";
55

66
declare module "@vue/runtime-core" {
7-
interface ComponentCustomProperties {
7+
export interface ComponentCustomProperties {
88
/**
99
* todo: update docblock
1010
* Navigate to {target} component.
@@ -40,28 +40,25 @@ export function install(app: App) {
4040
app.config.globalProperties.$navigateBack = $navigateBack;
4141
}
4242

43-
function resolveFrame(frame: ResolvableFrame): Frame {
43+
function resolveFrame(frame?: ResolvableFrame): Frame {
4444
if (!frame) {
4545
return Frame.topmost();
4646
}
4747

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

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

57-
if (frame instanceof NSVElement) {
58-
return frame.nativeView;
54+
if (ob instanceof NSVElement) {
55+
return ob.nativeView;
5956
}
6057

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

6764
function createNavigationRoot(cb: (view: any) => void) {
@@ -132,37 +129,38 @@ export async function $navigateTo(
132129
const cleanup = (page) => {
133130
if (page === latestPage) {
134131
// console.log("DISPOSE NAVIGATION APP");
135-
navigationApp.unmount();
132+
view.unmount()
133+
view = null
134+
navRoot = null
136135
} else {
137136
// console.log("no dispose we have replaced page");
138137
}
139138
};
140139

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;
140+
let navRoot = createNavigationRoot((newPage) => {
141+
latestPage = newPage;
142+
attachDisposeCallbacks(newPage, cleanup);
143+
// cache the original transition of the current page
144+
const originalTransition = frame.currentEntry.transition;
145+
// replace current page
146+
frame.replacePage({
147+
...options,
148+
transition: {
149+
name: "fade",
150+
duration: 10,
151+
},
152+
create: () => newPage,
153+
});
154+
// reset the transition to the original one
155+
frame.once("navigatedTo", () => {
156+
frame.currentEntry.transition = originalTransition;
157+
});
158+
});
159+
160+
let view = createNativeView<Page>(target, options.props)
161+
162+
const targetPage = view.mount(navRoot)
163+
166164
let latestPage = targetPage;
167165
attachDisposeCallbacks(targetPage, cleanup);
168166

‎src/registry/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export interface NSVElementDescriptor {
2323
}
2424

2525
export let defaultViewMeta: NSVViewMeta = {
26-
viewFlags: 0 // NSVViewFlags.NONE, // tsx can't resolve NSVViewFlags here?
26+
viewFlags: 0, // NSVViewFlags.NONE, // tsx can't resolve NSVViewFlags here?
2727
};
2828

2929
let elementMap: Record<string, NSVElementDescriptor> = {};

‎src/renderer/modules/events.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ function parseName(name: string): [string, EventListenerOptions | undefined] {
7171
}
7272

7373
// todo: optimise if necessary
74-
// this isn't technically perfect,
74+
// this isn't technically perfect,
7575
// since if the event name was UPPER then we'll convert it to uPPER
7676
// but for the majority of cases, this should be the right thing to do.
7777
name = name.slice(name.startsWith("on:") ? 3 : 2);

‎src/renderer/nodeOps.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { VNodeProps, RendererOptions } from "@vue/runtime-dom";
1+
import { VNodeProps, RendererOptions } from "@vue/runtime-core";
22

33
import { NSVComment, NSVElement, NSVNode, NSVText } from "../dom";
44

@@ -80,10 +80,10 @@ export function insertStaticContent(
8080
}
8181

8282
export function setScopeId(el: NSVElement, scopeId: string) {
83-
el.setAttribute(scopeId, '')
83+
el.setAttribute(scopeId, "");
8484
}
8585

86-
export const nodeOps: Omit<RendererOptions, 'patchProp'> = {
86+
export const nodeOps: Omit<RendererOptions, "patchProp"> = {
8787
insert,
8888
remove,
8989
createElement,
@@ -98,6 +98,6 @@ export const nodeOps: Omit<RendererOptions, 'patchProp'> = {
9898
insertStaticContent,
9999

100100
setScopeId,
101-
101+
102102
// querySelector,
103103
};

0 commit comments

Comments
 (0)
0