Optimise Web via treeshaking, cleanup build scripts

This commit is contained in:
Vendicated 2022-10-16 17:15:15 +02:00
parent 845088ec02
commit 01ae0983b3
No known key found for this signature in database
GPG key ID: EC781ADFB93EFFA3
14 changed files with 261 additions and 269 deletions

124
build.mjs
View file

@ -1,124 +0,0 @@
#!/usr/bin/node
import { execSync } from "child_process";
import esbuild from "esbuild";
import { readdirSync } from "fs";
/**
* @type {esbuild.WatchMode|false}
*/
const watch = process.argv.includes("--watch");
// https://github.com/evanw/esbuild/issues/619#issuecomment-751995294
/**
* @type {esbuild.Plugin}
*/
const makeAllPackagesExternalPlugin = {
name: "make-all-packages-external",
setup(build) {
let filter = /^[^.\/]|^\.[^.\/]|^\.\.[^\/]/; // Must not start with "/" or "./" or "../"
build.onResolve({ filter }, args => ({ path: args.path, external: true }));
},
};
/**
* @type {esbuild.Plugin}
*/
const globPlugins = {
name: "glob-plugins",
setup: build => {
build.onResolve({ filter: /^plugins$/ }, args => {
return {
namespace: "import-plugins",
path: args.path
};
});
build.onLoad({ filter: /^plugins$/, namespace: "import-plugins" }, () => {
const files = readdirSync("./src/plugins");
let code = "";
let obj = "";
for (let i = 0; i < files.length; i++) {
if (files[i] === "index.ts") {
continue;
}
const mod = `__pluginMod${i}`;
code += `import ${mod} from "./${files[i].replace(/.tsx?$/, "")}";\n`;
obj += `[${mod}.name]: ${mod},`;
}
code += `export default {${obj}}`;
return {
contents: code,
resolveDir: "./src/plugins"
};
});
}
};
const gitHash = execSync("git rev-parse --short HEAD", { encoding: "utf-8" }).trim();
/**
* @type {esbuild.Plugin}
*/
const gitHashPlugin = {
name: "git-hash-plugin",
setup: build => {
const filter = /^git-hash$/;
build.onResolve({ filter }, args => ({
namespace: "git-hash", path: args.path
}));
build.onLoad({ filter, namespace: "git-hash" }, () => ({
contents: `export default "${gitHash}"`
}));
}
};
await Promise.all([
esbuild.build({
logLevel: "info",
entryPoints: ["src/preload.ts"],
outfile: "dist/preload.js",
format: "cjs",
bundle: true,
platform: "node",
target: ["esnext"],
sourcemap: "linked",
plugins: [makeAllPackagesExternalPlugin],
watch
}),
esbuild.build({
logLevel: "info",
entryPoints: ["src/patcher.ts"],
outfile: "dist/patcher.js",
bundle: true,
format: "cjs",
target: ["esnext"],
external: ["electron"],
platform: "node",
sourcemap: "linked",
plugins: [makeAllPackagesExternalPlugin],
watch
}),
esbuild.build({
logLevel: "info",
entryPoints: ["src/Vencord.ts"],
outfile: "dist/renderer.js",
format: "iife",
bundle: true,
target: ["esnext"],
footer: { js: "//# sourceURL=VencordRenderer" },
globalName: "Vencord",
external: ["plugins", "git-hash"],
plugins: [
globPlugins,
gitHashPlugin
],
sourcemap: false,
watch,
minify: true,
}),
]).catch(err => {
console.error("Build failed");
console.error(err.message);
// make ci fail
if (!watch)
process.exitCode = 1;
});

View file

@ -1,110 +0,0 @@
// TODO: Modularise the plugins since both build scripts use them
import { execSync } from "child_process";
import { createWriteStream, readdirSync, readFileSync } from "fs";
import yazl from "yazl";
import esbuild from "esbuild";
// wtf is this assert syntax
import PackageJSON from "./package.json" assert { type: "json" };
/**
* @type {esbuild.Plugin}
*/
const globPlugins = {
name: "glob-plugins",
setup: build => {
build.onResolve({ filter: /^plugins$/ }, args => {
return {
namespace: "import-plugins",
path: args.path
};
});
build.onLoad({ filter: /^plugins$/, namespace: "import-plugins" }, () => {
const files = readdirSync("./src/plugins");
let code = "";
let obj = "";
for (let i = 0; i < files.length; i++) {
if (files[i] === "index.ts") {
continue;
}
const mod = `__pluginMod${i}`;
code += `import ${mod} from "./${files[i].replace(/.tsx?$/, "")}";\n`;
obj += `[${mod}.name]: ${mod},`;
}
code += `export default {${obj}}`;
return {
contents: code,
resolveDir: "./src/plugins"
};
});
}
};
const gitHash = execSync("git rev-parse --short HEAD", { encoding: "utf-8" }).trim();
/**
* @type {esbuild.Plugin}
*/
const gitHashPlugin = {
name: "git-hash-plugin",
setup: build => {
const filter = /^git-hash$/;
build.onResolve({ filter }, args => ({
namespace: "git-hash", path: args.path
}));
build.onLoad({ filter, namespace: "git-hash" }, () => ({
contents: `export default "${gitHash}"`
}));
}
};
/**
* @type {esbuild.BuildOptions}
*/
const commonOptions = {
logLevel: "info",
entryPoints: ["browser/Vencord.ts"],
globalName: "Vencord",
format: "iife",
bundle: true,
minify: true,
sourcemap: false,
external: ["plugins", "git-hash"],
plugins: [
globPlugins,
gitHashPlugin
],
target: ["esnext"],
};
await Promise.all(
[
esbuild.build({
...commonOptions,
outfile: "dist/browser.js",
footer: { js: "//# sourceURL=VencordWeb" },
}),
esbuild.build({
...commonOptions,
outfile: "dist/Vencord.user.js",
banner: {
js: readFileSync("browser/userscript.meta.js", "utf-8").replace("%version%", PackageJSON.version)
},
footer: {
// UserScripts get wrapped in an iife, so define Vencord prop on window that returns our local
js: "Object.defineProperty(window,'Vencord',{get:()=>Vencord});"
},
})
]
);
const zip = new yazl.ZipFile();
zip.outputStream.pipe(createWriteStream("dist/extension.zip")).on("close", () => {
console.info("Extension written to dist/extension.zip");
});
zip.addFile("dist/browser.js", "dist/Vencord.js");
["background.js", "content.js", "manifest.json"].forEach(f => {
zip.addFile(`browser/${f}`, `${f}`);
});
zip.end();

View file

@ -18,15 +18,15 @@
"doc": "docs" "doc": "docs"
}, },
"scripts": { "scripts": {
"build": "node build.mjs", "build": "node scripts/build/build.mjs",
"buildWeb": "node --require=./scripts/suppressExperimentalWarnings.js buildWeb.mjs", "buildWeb": "node --require=./scripts/suppressExperimentalWarnings.js scripts/build/buildWeb.mjs",
"inject": "node scripts/patcher/install.js", "inject": "node scripts/patcher/install.js",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx", "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
"lint:fix": "pnpm lint --fix", "lint:fix": "pnpm lint --fix",
"test": "pnpm lint && pnpm build && pnpm testTsc", "test": "pnpm lint && pnpm build && pnpm testTsc",
"testTsc": "tsc --noEmit", "testTsc": "tsc --noEmit",
"uninject": "node scripts/patcher/uninstall.js", "uninject": "node scripts/patcher/uninstall.js",
"watch": "node build.mjs --watch" "watch": "node scripts/build/build.mjs --watch"
}, },
"dependencies": { "dependencies": {
"console-menu": "^0.1.0", "console-menu": "^0.1.0",

53
scripts/build/build.mjs Executable file
View file

@ -0,0 +1,53 @@
#!/usr/bin/node
import esbuild from "esbuild";
import { commonOpts, gitHashPlugin, globPlugins, makeAllPackagesExternalPlugin } from "./common.mjs";
/**
* @type {esbuild.BuildOptions}
*/
const nodeCommonOpts = {
...commonOpts,
format: "cjs",
platform: "node",
target: ["esnext"],
sourcemap: "linked",
plugins: [makeAllPackagesExternalPlugin],
};
await Promise.all([
esbuild.build({
...nodeCommonOpts,
entryPoints: ["src/preload.ts"],
outfile: "dist/preload.js",
}),
esbuild.build({
...nodeCommonOpts,
entryPoints: ["src/patcher.ts"],
outfile: "dist/patcher.js",
}),
esbuild.build({
...commonOpts,
entryPoints: ["src/Vencord.ts"],
outfile: "dist/renderer.js",
format: "iife",
target: ["esnext"],
footer: { js: "//# sourceURL=VencordRenderer" },
globalName: "Vencord",
external: ["plugins", "git-hash"],
plugins: [
globPlugins,
gitHashPlugin
],
sourcemap: "inline",
minify: true,
define: {
IS_WEB: "false"
}
}),
]).catch(err => {
console.error("Build failed");
console.error(err.message);
// make ci fail
if (!watch)
process.exitCode = 1;
});

View file

@ -0,0 +1,61 @@
// TODO: Modularise the plugins since both build scripts use them
import { createWriteStream, readFileSync } from "fs";
import yazl from "yazl";
import esbuild from "esbuild";
// wtf is this assert syntax
import PackageJSON from "../../package.json" assert { type: "json" };
import { commonOpts, gitHashPlugin, globPlugins } from "./common.mjs";
/**
* @type {esbuild.BuildOptions}
*/
const commonOptions = {
...commonOpts,
entryPoints: ["browser/Vencord.ts"],
globalName: "Vencord",
format: "iife",
minify: true,
sourcemap: false,
external: ["plugins", "git-hash"],
plugins: [
globPlugins,
gitHashPlugin
],
target: ["esnext"],
define: {
IS_WEB: "true"
}
};
await Promise.all(
[
esbuild.build({
...commonOptions,
outfile: "dist/browser.js",
footer: { js: "//# sourceURL=VencordWeb" },
}),
esbuild.build({
...commonOptions,
outfile: "dist/Vencord.user.js",
banner: {
js: readFileSync("browser/userscript.meta.js", "utf-8").replace("%version%", PackageJSON.version)
},
footer: {
// UserScripts get wrapped in an iife, so define Vencord prop on window that returns our local
js: "Object.defineProperty(window,'Vencord',{get:()=>Vencord});"
},
})
]
);
const zip = new yazl.ZipFile();
zip.outputStream.pipe(createWriteStream("dist/extension.zip")).on("close", () => {
console.info("Extension written to dist/extension.zip");
});
zip.addFile("dist/browser.js", "dist/Vencord.js");
["background.js", "content.js", "manifest.json"].forEach(f => {
zip.addFile(`browser/${f}`, `${f}`);
});
zip.end();

80
scripts/build/common.mjs Normal file
View file

@ -0,0 +1,80 @@
import { execSync } from "child_process";
import esbuild from "esbuild";
import { readdir } from "fs/promises";
/**
* @type {esbuild.WatchMode|false}
*/
export const watch = process.argv.includes("--watch");
/**
* @type {esbuild.BuildOptions}
*/
export const commonOpts = {
logLevel: "info",
bundle: true,
watch
};
// https://github.com/evanw/esbuild/issues/619#issuecomment-751995294
/**
* @type {esbuild.Plugin}
*/
export const makeAllPackagesExternalPlugin = {
name: "make-all-packages-external",
setup(build) {
let filter = /^[^.\/]|^\.[^.\/]|^\.\.[^\/]/; // Must not start with "/" or "./" or "../"
build.onResolve({ filter }, args => ({ path: args.path, external: true }));
},
};
/**
* @type {esbuild.Plugin}
*/
export const globPlugins = {
name: "glob-plugins",
setup: build => {
build.onResolve({ filter: /^plugins$/ }, args => {
return {
namespace: "import-plugins",
path: args.path
};
});
build.onLoad({ filter: /^plugins$/, namespace: "import-plugins" }, async () => {
const files = await readdir("./src/plugins");
let code = "";
let plugins = "\n";
for (let i = 0; i < files.length; i++) {
if (files[i] === "index.ts") {
continue;
}
const mod = `p${i}`;
code += `import ${mod} from "./${files[i].replace(/.tsx?$/, "")}";\n`;
plugins += `[${mod}.name]:${mod},\n`;
}
code += `export default {${plugins}};`;
return {
contents: code,
resolveDir: "./src/plugins"
};
});
}
};
const gitHash = execSync("git rev-parse --short HEAD", { encoding: "utf-8" }).trim();
/**
* @type {esbuild.Plugin}
*/
export const gitHashPlugin = {
name: "git-hash-plugin",
setup: build => {
const filter = /^git-hash$/;
build.onResolve({ filter }, args => ({
namespace: "git-hash", path: args.path
}));
build.onLoad({ filter, namespace: "git-hash" }, () => ({
contents: `export default "${gitHash}"`
}));
}
};

View file

@ -17,12 +17,6 @@ import { checkForUpdates, UpdateLogger } from "./utils/updater";
import { onceReady } from "./webpack"; import { onceReady } from "./webpack";
import { Router } from "./webpack/common"; import { Router } from "./webpack/common";
Object.defineProperty(window, "IS_WEB", {
get: () => !window.DiscordNative,
configurable: true,
enumerable: true
});
export let Components: any; export let Components: any;
async function init() { async function init() {
@ -30,21 +24,23 @@ async function init() {
startAllPlugins(); startAllPlugins();
Components = await import("./components"); Components = await import("./components");
try { if (!IS_WEB) {
const isOutdated = await checkForUpdates(); try {
if (isOutdated && Settings.notifyAboutUpdates) const isOutdated = await checkForUpdates();
setTimeout(() => { if (isOutdated && Settings.notifyAboutUpdates)
showNotice( setTimeout(() => {
"A Vencord update is available!", showNotice(
"View Update", "A Vencord update is available!",
() => { "View Update",
popNotice(); () => {
Router.open("VencordUpdater"); popNotice();
} Router.open("VencordUpdater");
); }
}, 10000); );
} catch (err) { }, 10000);
UpdateLogger.error("Failed to check for updates", err); } catch (err) {
UpdateLogger.error("Failed to check for updates", err);
}
} }
} }

View file

@ -72,7 +72,7 @@ export default ErrorBoundary.wrap(function Settings() {
SettingsDir: <code style={{ userSelect: "text", cursor: "text" }}>{settingsDir}</code> SettingsDir: <code style={{ userSelect: "text", cursor: "text" }}>{settingsDir}</code>
</Forms.FormText> </Forms.FormText>
{!IS_WEB && <Flex className={classes(Margins.marginBottom20)}> {!IS_WEB && <Flex className={Margins.marginBottom20}>
<Button <Button
onClick={() => window.DiscordNative.app.relaunch()} onClick={() => window.DiscordNative.app.relaunch()}
size={Button.Sizes.SMALL} size={Button.Sizes.SMALL}
@ -95,8 +95,8 @@ export default ErrorBoundary.wrap(function Settings() {
Open QuickCSS File Open QuickCSS File
</Button> </Button>
</Flex>} </Flex>}
<Forms.FormDivider /> <Forms.FormDivider />
<Forms.FormTitle tag="h5">Settings</Forms.FormTitle>
<Switch <Switch
value={settings.useQuickCss} value={settings.useQuickCss}
onChange={(v: boolean) => settings.useQuickCss = v} onChange={(v: boolean) => settings.useQuickCss = v}

View file

@ -158,7 +158,7 @@ function Newer(props: CommonProps) {
); );
} }
export default ErrorBoundary.wrap(function Updater() { function Updater() {
const [repo, err, repoPending] = useAwaiter(getRepo, "Loading..."); const [repo, err, repoPending] = useAwaiter(getRepo, "Loading...");
React.useEffect(() => { React.useEffect(() => {
@ -188,4 +188,6 @@ export default ErrorBoundary.wrap(function Updater() {
{isNewer ? <Newer {...commonProps} /> : <Updatable {...commonProps} />} {isNewer ? <Newer {...commonProps} /> : <Updatable {...commonProps} />}
</Forms.FormSection > </Forms.FormSection >
); );
}); }
export default IS_WEB ? null : ErrorBoundary.wrap(Updater);

20
src/globals.d.ts vendored
View file

@ -1,10 +1,30 @@
declare global { declare global {
/**
* This exists only at build time, so references to it in patches should insert it
* via String interpolation OR use different replacement code based on this
* but NEVER refrence it inside the patched code
*
* @example
* // BAD
* replace: "IS_WEB?foo:bar"
* // GOOD
* replace: IS_WEB ? "foo" : "bar"
* // also good
* replace: `${IS_WEB}?foo:bar`
*/
export var IS_WEB: boolean; export var IS_WEB: boolean;
export var VencordNative: typeof import("./VencordNative").default; export var VencordNative: typeof import("./VencordNative").default;
export var Vencord: typeof import("./Vencord"); export var Vencord: typeof import("./Vencord");
export var appSettings: { export var appSettings: {
set(setting: string, v: any): void; set(setting: string, v: any): void;
}; };
/**
* Only available when running in Electron, undefined on web.
* Thus, avoid using this or only use it inside an {@link IS_WEB} guard.
*
* If you really must use it, mark your plugin as Desktop App only via
* `target: "DESKTOP"`
*/
export var DiscordNative: any; export var DiscordNative: any;
interface Window { interface Window {

View file

@ -18,7 +18,16 @@ export default definePlugin({
], ],
copyToClipBoard(color: string) { copyToClipBoard(color: string) {
window.DiscordNative.clipboard.copy(color); if (IS_WEB) {
navigator.clipboard.writeText(color)
.then(() => this.notifySuccess);
} else {
DiscordNative.clipboard.copy(color);
this.notifySuccess();
}
},
notifySuccess() {
Toasts.show({ Toasts.show({
message: "Copied to Clipboard!", message: "Copied to Clipboard!",
type: Toasts.Type.SUCCESS, type: Toasts.Type.SUCCESS,

View file

@ -5,6 +5,7 @@ export default definePlugin({
name: "No RPC", name: "No RPC",
description: "Disables Discord's RPC server.", description: "Disables Discord's RPC server.",
authors: [Devs.Cyn], authors: [Devs.Cyn],
target: "DESKTOP",
patches: [ patches: [
{ {
find: '.ensureModule("discord_rpc")', find: '.ensureModule("discord_rpc")',

View file

@ -5,6 +5,7 @@ export default definePlugin({
name: "NoSystemBadge", name: "NoSystemBadge",
description: "Disables the taskbar and system tray unread count badge.", description: "Disables the taskbar and system tray unread count badge.",
authors: [Devs.rushii], authors: [Devs.rushii],
target: "DESKTOP",
patches: [ patches: [
{ {
find: "setSystemTrayApplications:function", find: "setSystemTrayApplications:function",

View file

@ -28,12 +28,15 @@ export default definePlugin({
find: "Messages.ACTIVITY_SETTINGS", find: "Messages.ACTIVITY_SETTINGS",
replacement: { replacement: {
match: /\{section:(.{1,2})\.ID\.HEADER,\s*label:(.{1,2})\..{1,2}\.Messages\.ACTIVITY_SETTINGS\}/, match: /\{section:(.{1,2})\.ID\.HEADER,\s*label:(.{1,2})\..{1,2}\.Messages\.ACTIVITY_SETTINGS\}/,
replace: (m, mod) => replace: (m, mod) => {
`{section:${mod}.ID.HEADER,label:"Vencord"},` + const updater = !IS_WEB ? '{section:"VencordUpdater",label:"Updater",element:Vencord.Components.Updater},' : "";
'{section:"VencordSetting",label:"Vencord",element:Vencord.Components.Settings},' + return (
'{section:"VencordUpdater",label:"Updater",element:Vencord.Components.Updater,predicate:()=>!IS_WEB},' + `{section:${mod}.ID.HEADER,label:"Vencord"},` +
`{section:${mod}.ID.DIVIDER},${m}` '{section:"VencordSetting",label:"Vencord",element:Vencord.Components.Settings},' +
updater +
`{section:${mod}.ID.DIVIDER},${m}`
);
}
} }
}] }]
}); });