-
-
Notifications
You must be signed in to change notification settings - Fork 43
/
launch-vue.ts
82 lines (70 loc) · 2.57 KB
/
launch-vue.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
/* c8 ignore start -- common entry point for UI pages */
// An easy way to launch a Vue application, which also applies some CSS classes
// common to every UI in Tab Stash.
import type {ExtractPropTypes, MethodOptions} from "vue";
import {createApp} from "vue";
import browser from "webextension-polyfill";
import "./util/debug.js"; // To setup globalThis.trace
import {asyncEvent, resolveNamed} from "./util/index.js";
import * as Options from "./model/options.js";
export default function launch<
C extends {props?: object; provide?: object; methods?: MethodOptions},
>(
component: C,
options: () => Promise<{
propsData: Readonly<ExtractPropTypes<C["props"]>>;
provide?: {[k: string]: any};
methods?: MethodOptions & Partial<C["methods"]>;
}>,
): void {
const loc = new URL(document.location.href);
// Enable tracing at load time if needed
const trace = (loc.searchParams.get("trace") ?? "").split(",");
for (const t of trace) {
(<any>globalThis).trace[t] = true;
}
const loader = async function () {
document.documentElement.dataset!.view =
loc.searchParams.get("view") ?? "tab";
const plat = await resolveNamed({
browser: browser.runtime.getBrowserInfo
? browser.runtime.getBrowserInfo()
: {name: "chrome"},
platform: browser.runtime.getPlatformInfo
? browser.runtime.getPlatformInfo()
: {os: "unknown"},
options: Options.Model.live(),
});
document.documentElement.dataset!.browser = plat.browser.name.toLowerCase();
document.documentElement.dataset!.os = plat.platform.os;
function updateStyle(opts: Options.SyncModel) {
document.documentElement.dataset!.metrics = opts.state.ui_metrics;
document.documentElement.dataset!.theme = opts.state.ui_theme;
}
updateStyle(plat.options.sync);
plat.options.sync.onChanged.addListener(updateStyle);
const opts = await options();
const app = createApp(
{
...component,
provide: {
...(component.provide ?? {}),
...(opts.provide ?? {}),
},
methods: {
...(component.methods ?? {}),
...(opts.methods ?? {}),
},
},
opts.propsData,
);
Object.assign(<any>globalThis, {app, app_options: opts});
app.mount("body");
};
window.addEventListener("load", asyncEvent(loader));
}
// Small helper function to pass our search parameters along to another sibling
// page in this extension, so the sibling page knows what environment it's in.
export function pageref(path: string): string {
return `${path}${window.location.search}`;
}