feat: Proper CSS api & css bundle (#269)

Co-authored-by: Vap0r1ze <superdash993@gmail.com>
This commit is contained in:
Ven 2022-12-25 20:47:35 +01:00 committed by GitHub
parent 2172cae779
commit 2e5d27b6b6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
31 changed files with 438 additions and 126 deletions

View file

@ -2,7 +2,18 @@ if (typeof browser === "undefined") {
var browser = chrome;
}
var script = document.createElement("script");
const script = document.createElement("script");
script.src = browser.runtime.getURL("dist/Vencord.js");
// documentElement because we load before body/head are ready
document.documentElement.appendChild(script);
const style = document.createElement("link");
style.type = "text/css";
style.rel = "stylesheet";
style.href = browser.runtime.getURL("dist/Vencord.css");
document.documentElement.append(script);
document.addEventListener(
"DOMContentLoaded",
() => document.documentElement.append(style),
{ once: true }
);

View file

@ -18,7 +18,7 @@
"js": ["content.js"]
}
],
"web_accessible_resources": ["dist/Vencord.js"],
"web_accessible_resources": ["dist/Vencord.js", "dist/Vencord.css"],
"background": {
"scripts": ["background.js"]
}

View file

@ -23,7 +23,7 @@
"web_accessible_resources": [
{
"resources": ["dist/Vencord.js"],
"resources": ["dist/Vencord.js", "dist/Vencord.css"],
"matches": ["*://*.discord.com/*"]
}
],

View file

@ -65,6 +65,17 @@
"patchedDependencies": {
"eslint-plugin-path-alias@1.0.0": "patches/eslint-plugin-path-alias@1.0.0.patch",
"eslint@8.28.0": "patches/eslint@8.28.0.patch"
},
"peerDependencyRules": {
"ignoreMissing": [
"eslint-plugin-import"
]
},
"allowedDeprecatedVersions": {
"source-map-resolve": "*",
"resolve-url": "*",
"source-map-url": "*",
"urix": "*"
}
},
"webExt": {

74
scripts/build/buildWeb.mjs Executable file → Normal file
View file

@ -20,13 +20,13 @@
import esbuild from "esbuild";
import { zip } from "fflate";
import { existsSync, mkdirSync, readFileSync, rmSync, writeFileSync } from "fs";
import { readFile } from "fs/promises";
import { join, resolve } from "path";
import { readFileSync } from "fs";
import { appendFile, mkdir, readFile, rm, writeFile } from "fs/promises";
import { join } from "path";
// wtf is this assert syntax
import PackageJSON from "../../package.json" assert { type: "json" };
import { commonOpts, fileIncludePlugin, gitHashPlugin, gitRemotePlugin, globPlugins, watch } from "./common.mjs";
import { commonOpts, globPlugins, watch } from "./common.mjs";
/**
* @type {esbuild.BuildOptions}
@ -39,9 +39,7 @@ const commonOptions = {
external: ["plugins", "git-hash"],
plugins: [
globPlugins,
gitHashPlugin,
gitRemotePlugin,
fileIncludePlugin
...commonOpts.plugins,
],
target: ["esnext"],
define: {
@ -77,9 +75,13 @@ await Promise.all(
]
);
/**
* @type {(target: string, files: string[], shouldZip: boolean) => Promise<void>}
*/
async function buildPluginZip(target, files, shouldZip) {
const entries = {
"dist/Vencord.js": readFileSync("dist/browser.js"),
"dist/Vencord.js": await readFile("dist/browser.js"),
"dist/Vencord.css": await readFile("dist/browser.css"),
...Object.fromEntries(await Promise.all(files.map(async f => [
(f.startsWith("manifest") ? "manifest.json" : f),
await readFile(join("browser", f))
@ -87,29 +89,47 @@ async function buildPluginZip(target, files, shouldZip) {
};
if (shouldZip) {
zip(entries, {}, (err, data) => {
if (err) {
console.error(err);
process.exitCode = 1;
} else {
writeFileSync("dist/" + target, data);
console.info("Extension written to dist/" + target);
}
return new Promise((resolve, reject) => {
zip(entries, {}, (err, data) => {
if (err) {
reject(err);
} else {
const out = join("dist", target);
writeFile(out, data).then(() => {
console.info("Extension written to " + out);
resolve();
}).catch(reject);
}
});
});
} else {
if (existsSync(target))
rmSync(target, { recursive: true });
for (const entry in entries) {
const destination = "dist/" + target + "/" + entry;
const parentDirectory = resolve(destination, "..");
mkdirSync(parentDirectory, { recursive: true });
writeFileSync(destination, entries[entry]);
}
await rm(target, { recursive: true, force: true });
await Promise.all(Object.entries(entries).map(async ([file, content]) => {
const dest = join("dist", target, file);
const parentDirectory = join(dest, "..");
await mkdir(parentDirectory, { recursive: true });
await writeFile(dest, content);
}));
console.info("Unpacked Extension written to dist/" + target);
}
}
await buildPluginZip("extension-v3.zip", ["modifyResponseHeaders.json", "content.js", "manifestv3.json"], true);
await buildPluginZip("extension-v2.zip", ["background.js", "content.js", "manifestv2.json"], true);
await buildPluginZip("extension-v2-unpacked", ["background.js", "content.js", "manifestv2.json"], false);
const cssText = "`" + readFileSync("dist/Vencord.user.css", "utf-8").replaceAll("`", "\\`") + "`";
const cssRuntime = `
;document.addEventListener("DOMContentLoaded", () => document.documentElement.appendChild(
Object.assign(document.createElement("style"), {
textContent: ${cssText},
id: "vencord-css-core"
}),
{ once: true }
));
`;
await Promise.all([
appendFile("dist/Vencord.user.js", cssRuntime),
buildPluginZip("extension-v3.zip", ["modifyResponseHeaders.json", "content.js", "manifestv3.json"], true),
buildPluginZip("extension-v2.zip", ["background.js", "content.js", "manifestv2.json"], true),
buildPluginZip("extension-v2-unpacked", ["background.js", "content.js", "manifestv2.json"], false),
]);

View file

@ -17,9 +17,9 @@
*/
import { exec, execSync } from "child_process";
import { existsSync } from "fs";
import { existsSync, readFileSync } from "fs";
import { readdir, readFile } from "fs/promises";
import { join } from "path";
import { join, relative } from "path";
import { promisify } from "util";
export const watch = process.argv.includes("--watch");
@ -35,7 +35,7 @@ export const banner = {
// https://github.com/evanw/esbuild/issues/619#issuecomment-751995294
/**
* @type {esbuild.Plugin}
* @type {import("esbuild").Plugin}
*/
export const makeAllPackagesExternalPlugin = {
name: "make-all-packages-external",
@ -46,7 +46,7 @@ export const makeAllPackagesExternalPlugin = {
};
/**
* @type {esbuild.Plugin}
* @type {import("esbuild").Plugin}
*/
export const globPlugins = {
name: "glob-plugins",
@ -87,7 +87,7 @@ export const globPlugins = {
};
/**
* @type {esbuild.Plugin}
* @type {import("esbuild").Plugin}
*/
export const gitHashPlugin = {
name: "git-hash-plugin",
@ -103,7 +103,7 @@ export const gitHashPlugin = {
};
/**
* @type {esbuild.Plugin}
* @type {import("esbuild").Plugin}
*/
export const gitRemotePlugin = {
name: "git-remote-plugin",
@ -125,7 +125,7 @@ export const gitRemotePlugin = {
};
/**
* @type {esbuild.Plugin}
* @type {import("esbuild").Plugin}
*/
export const fileIncludePlugin = {
name: "file-include-plugin",
@ -147,6 +147,31 @@ export const fileIncludePlugin = {
}
};
const styleModule = readFileSync("./scripts/build/module/style.js", "utf-8");
/**
* @type {import("esbuild").Plugin}
*/
export const stylePlugin = {
name: "style-plugin",
setup: ({ onResolve, onLoad }) => {
onResolve({ filter: /\.css\?managed$/, namespace: "file" }, ({ path, resolveDir }) => ({
path: relative(process.cwd(), join(resolveDir, path.replace("?managed", ""))),
namespace: "managed-style",
}));
onLoad({ filter: /\.css$/, namespace: "managed-style" }, async ({ path }) => {
const css = await readFile(path, "utf-8");
const name = relative(process.cwd(), path).replaceAll("\\", "/");
return {
loader: "js",
contents: styleModule
.replaceAll("STYLE_SOURCE", JSON.stringify(css))
.replaceAll("STYLE_NAME", JSON.stringify(name))
};
});
}
};
/**
* @type {import("esbuild").BuildOptions}
*/
@ -158,7 +183,7 @@ export const commonOpts = {
sourcemap: watch ? "inline" : "",
legalComments: "linked",
banner,
plugins: [fileIncludePlugin, gitHashPlugin, gitRemotePlugin],
plugins: [fileIncludePlugin, gitHashPlugin, gitRemotePlugin, stylePlugin],
external: ["~plugins", "~git-hash", "~git-remote"],
inject: ["./scripts/build/inject/react.mjs"],
jsxFactory: "VencordCreateElement",

View file

@ -0,0 +1,26 @@
/*
* Vencord, a modification for Discord's desktop app
* Copyright (c) 2022 Vendicated and contributors
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
(window.VencordStyles ??= new Map()).set(STYLE_NAME, {
name: STYLE_NAME,
source: STYLE_SOURCE,
classNames: {},
dom: null,
});
export default STYLE_NAME;

View file

@ -18,7 +18,6 @@
export * as Api from "./api";
export * as Plugins from "./plugins";
// eslint-disable-next-line @typescript-eslint/no-restricted-imports
export * as Util from "./utils";
export * as QuickCss from "./utils/quickCss";
export * as Updater from "./utils/updater";

162
src/api/Styles.ts Normal file
View file

@ -0,0 +1,162 @@
/*
* Vencord, a modification for Discord's desktop app
* Copyright (c) 2022 Vendicated and contributors
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import type { MapValue } from "type-fest/source/entry";
export type Style = MapValue<typeof VencordStyles>;
export const styleMap = window.VencordStyles ??= new Map();
export function requireStyle(name: string) {
const style = styleMap.get(name);
if (!style) throw new Error(`Style "${name}" does not exist`);
return style;
}
/**
* A style's name can be obtained from importing a stylesheet with `?managed` at the end of the import
* @param name The name of the style
* @returns `false` if the style was already enabled, `true` otherwise
* @example
* import pluginStyle from "./plugin.css?managed";
*
* // Inside some plugin method like "start()" or "[option].onChange()"
* enableStyle(pluginStyle);
*/
export function enableStyle(name: string) {
const style = requireStyle(name);
if (style.dom?.isConnected)
return false;
if (!style.dom) {
style.dom = document.createElement("style");
style.dom.dataset.vencordName = style.name;
}
compileStyle(style);
document.head.appendChild(style.dom);
return true;
}
/**
* @param name The name of the style
* @returns `false` if the style was already disabled, `true` otherwise
* @see {@link enableStyle} for info on getting the name of an imported style
*/
export function disableStyle(name: string) {
const style = requireStyle(name);
if (!style.dom?.isConnected)
return false;
style.dom.remove();
style.dom = null;
return true;
}
/**
* @param name The name of the style
* @returns `true` in most cases, may return `false` in some edge cases
* @see {@link enableStyle} for info on getting the name of an imported style
*/
export const toggleStyle = (name: string) => isStyleEnabled(name) ? disableStyle(name) : enableStyle(name);
/**
* @param name The name of the style
* @returns Whether the style is enabled
* @see {@link enableStyle} for info on getting the name of an imported style
*/
export const isStyleEnabled = (name: string) => requireStyle(name).dom?.isConnected ?? false;
/**
* Sets the variables of a style
* ```ts
* // -- plugin.ts --
* import pluginStyle from "./plugin.css?managed";
* import { setStyleVars } from "@api/Styles";
* import { findByPropsLazy } from "@webpack";
* const classNames = findByPropsLazy("thin", "scrollerBase"); // { thin: "thin-31rlnD scrollerBase-_bVAAt", ... }
*
* // Inside some plugin method like "start()"
* setStyleClassNames(pluginStyle, classNames);
* enableStyle(pluginStyle);
* ```
* ```scss
* // -- plugin.css --
* .plugin-root [--thin]::-webkit-scrollbar { ... }
* ```
* ```scss
* // -- final stylesheet --
* .plugin-root .thin-31rlnD.scrollerBase-_bVAAt::-webkit-scrollbar { ... }
* ```
* @param name The name of the style
* @param classNames An object where the keys are the variable names and the values are the variable values
* @param recompile Whether to recompile the style after setting the variables, defaults to `true`
* @see {@link enableStyle} for info on getting the name of an imported style
*/
export const setStyleClassNames = (name: string, classNames: Record<string, string>, recompile = true) => {
const style = requireStyle(name);
style.classNames = classNames;
if (recompile && isStyleEnabled(style.name))
compileStyle(style);
};
/**
* Updates the stylesheet after doing the following to the sourcecode:
* - Interpolate style classnames
* @param style **_Must_ be a style with a DOM element**
* @see {@link setStyleClassNames} for more info on style classnames
*/
export const compileStyle = (style: Style) => {
if (!style.dom) throw new Error("Style has no DOM element");
style.dom.textContent = style.source
.replace(/\[--(\w+)\]/g, (match, name) => {
const className = style.classNames[name];
return className ? classNameToSelector(className) : match;
});
};
/**
* @param name The classname
* @param prefix A prefix to add each class, defaults to `""`
* @return A css selector for the classname
* @example
* classNameToSelector("foo bar") // => ".foo.bar"
*/
export const classNameToSelector = (name: string, prefix = "") => name.split(" ").map(n => `.${prefix}${n}`).join("");
type ClassNameFactoryArg = string | string[] | Record<string, unknown>;
/**
* @param prefix The prefix to add to each class, defaults to `""`
* @returns A classname generator function
* @example
* const cl = classNameFactory("plugin-");
*
* cl("base", ["item", "editable"], { selected: null, disabled: true })
* // => "plugin-base plugin-item plugin-editable plugin-disabled"
*/
export const classNameFactory = (prefix: string = "") => (...args: ClassNameFactoryArg[]) => {
const classNames = new Set<string>();
for (const arg of args) {
if (typeof arg === "string") classNames.add(arg);
else if (Array.isArray(arg)) arg.forEach(name => classNames.add(name));
else if (typeof arg === "object") Object.entries(arg).forEach(([name, value]) => value && classNames.add(name));
}
return Array.from(classNames, name => prefix + name).join(" ");
};

View file

@ -26,6 +26,7 @@ import * as $MessageEventsAPI from "./MessageEvents";
import * as $MessagePopover from "./MessagePopover";
import * as $Notices from "./Notices";
import * as $ServerList from "./ServerList";
import * as $Styles from "./Styles";
/**
* An API allowing you to listen to Message Clicks or run your own logic
@ -33,16 +34,16 @@ import * as $ServerList from "./ServerList";
*
* If your plugin uses this, you must add MessageEventsAPI to its dependencies
*/
const MessageEvents = $MessageEventsAPI;
export const MessageEvents = $MessageEventsAPI;
/**
* An API allowing you to create custom notices
* (snackbars on the top, like the Update prompt)
*/
const Notices = $Notices;
export const Notices = $Notices;
/**
* An API allowing you to register custom commands
*/
const Commands = $Commands;
export const Commands = $Commands;
/**
* A wrapper around IndexedDB. This can store arbitrarily
* large data and supports a lot of datatypes (Blob, Map, ...).
@ -57,30 +58,33 @@ const Commands = $Commands;
* This is actually just idb-keyval, so if you're familiar with that, you're golden!
* @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm#supported_types}
*/
const DataStore = $DataStore;
export const DataStore = $DataStore;
/**
* An API allowing you to add custom components as message accessories
*/
const MessageAccessories = $MessageAccessories;
export const MessageAccessories = $MessageAccessories;
/**
* An API allowing you to add custom buttons in the message popover
*/
const MessagePopover = $MessagePopover;
export const MessagePopover = $MessagePopover;
/**
* An API allowing you to add badges to user profiles
*/
const Badges = $Badges;
export const Badges = $Badges;
/**
* An API allowing you to add custom elements to the server list
*/
const ServerList = $ServerList;
export const ServerList = $ServerList;
/**
* An API allowing you to add components as message accessories
*/
const MessageDecorations = $MessageDecorations;
export const MessageDecorations = $MessageDecorations;
/**
* An API allowing you to add components to member list users, in both DM's and servers
*/
const MemberListDecorators = $MemberListDecorators;
export { Badges, Commands, DataStore, MemberListDecorators, MessageAccessories, MessageDecorations, MessageEvents, MessagePopover, Notices, ServerList };
export const MemberListDecorators = $MemberListDecorators;
/**
* An API allowing you to dynamically load styles
* a
*/
export const Styles = $Styles;

View file

@ -16,22 +16,18 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import "./settingsStyles.css";
import ErrorBoundary from "@components/ErrorBoundary";
import { findByCodeLazy } from "@webpack";
import { Forms, Router, Text } from "@webpack/common";
import cssText from "~fileContent/settingsStyles.css";
import BackupRestoreTab from "./BackupRestoreTab";
import PluginsTab from "./PluginsTab";
import ThemesTab from "./ThemesTab";
import Updater from "./Updater";
import VencordSettings from "./VencordTab";
const style = document.createElement("style");
style.textContent = cssText;
document.head.appendChild(style);
const st = (style: string) => `vcSettings${style}`;
const TabBar = findByCodeLazy('[role="tab"][aria-disabled="false"]');

6
src/globals.d.ts vendored
View file

@ -38,6 +38,12 @@ declare global {
export var VencordNative: typeof import("./VencordNative").default;
export var Vencord: typeof import("./Vencord");
export var VencordStyles: Map<string, {
name: string;
source: string;
classNames: Record<string, string>;
dom: HTMLStyleElement | null;
}>;
export var appSettings: {
set(setting: string, v: any): void;
};

View file

@ -16,6 +16,7 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import "./legacy";
import "./updater";
import { debounce } from "@utils/debounce";

31
src/ipcMain/legacy.ts Normal file
View file

@ -0,0 +1,31 @@
/*
* Vencord, a modification for Discord's desktop app
* Copyright (c) 2022 Vendicated and contributors
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import IpcEvents from "@utils/IpcEvents";
import { ipcMain } from "electron";
import { writeFile } from "fs/promises";
import { join } from "path";
import { get } from "./simpleGet";
ipcMain.handleOnce(IpcEvents.DOWNLOAD_VENCORD_CSS, async () => {
const buf = await get("https://github.com/Vendicated/Vencord/releases/download/devbuild/renderer.css");
await writeFile(join(__dirname, "renderer.css"), buf);
return buf.toString("utf-8");
});

View file

@ -24,7 +24,7 @@ export async function calculateHashes() {
const hashes = {} as Record<string, string>;
await Promise.all(
["patcher.js", "preload.js", "renderer.js"].map(file => new Promise<void>(r => {
["patcher.js", "preload.js", "renderer.js", "renderer.css"].map(file => new Promise<void>(r => {
const fis = createReadStream(join(__dirname, file));
const hash = createHash("sha1", { encoding: "hex" });
fis.once("end", () => {

View file

@ -69,7 +69,7 @@ async function fetchUpdates() {
return false;
data.assets.forEach(({ name, browser_download_url }) => {
if (["patcher.js", "preload.js", "renderer.js"].some(s => name.startsWith(s))) {
if (["patcher.js", "preload.js", "renderer.js", "renderer.css"].some(s => name.startsWith(s))) {
PendingUpdates.push([name, browser_download_url]);
}
});

6
src/modules.d.ts vendored
View file

@ -37,3 +37,9 @@ declare module "~fileContent/*" {
const content: string;
export default content;
}
declare module "*.css" { }
declare module "*.css?managed" {
const name: string;
export default name;
}

View file

@ -16,6 +16,8 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import "./messageLogger.css";
import { Settings } from "@api/settings";
import ErrorBoundary from "@components/ErrorBoundary";
import { Devs } from "@utils/constants";
@ -42,51 +44,14 @@ export default definePlugin({
timestampModule: null as any,
moment: null as Function | null,
css: `
.messagelogger-red-overlay .messageLogger-deleted {
background-color: rgba(240, 71, 71, 0.15);
}
.messagelogger-red-text .messageLogger-deleted div {
color: #f04747;
}
.messageLogger-deleted [class^="buttons"] {
display: none;
}
.messageLogger-deleted-attachment {
filter: grayscale(1);
}
.messageLogger-deleted-attachment:hover {
filter: grayscale(0);
transition: 250ms filter linear;
}
.theme-dark .messageLogger-edited {
filter: brightness(80%);
}
.theme-light .messageLogger-edited {
opacity: 0.5;
}
`,
start() {
this.moment = findByPropsLazy("relativeTimeRounding", "relativeTimeThreshold");
this.timestampModule = findByPropsLazy("messageLogger_TimestampComponent");
const style = this.style = document.createElement("style");
style.textContent = this.css;
style.id = "MessageLogger-css";
document.head.appendChild(style);
addDeleteStyleClass();
},
stop() {
this.style?.remove();
document.querySelectorAll(".messageLogger-deleted").forEach(e => e.remove());
document.querySelectorAll(".messageLogger-edited").forEach(e => e.remove());
document.body.classList.remove("messagelogger-red-overlay");

View file

@ -0,0 +1,27 @@
.messagelogger-red-overlay .messageLogger-deleted {
background-color: rgba(240, 71, 71, 0.15);
}
.messagelogger-red-text .messageLogger-deleted div {
color: #f04747;
}
.messageLogger-deleted [class^="buttons"] {
display: none;
}
.messageLogger-deleted-attachment {
filter: grayscale(1);
}
.messageLogger-deleted-attachment:hover {
filter: grayscale(0);
transition: 250ms filter linear;
}
.theme-dark .messageLogger-edited {
filter: brightness(80%);
}
.theme-light .messageLogger-edited {
opacity: 0.5;
}

View file

@ -33,7 +33,7 @@ export function Header({ langName, useDevIcon, shikiLang }: HeaderProps) {
<div className={cl("lang")}>
{useDevIcon !== DeviconSetting.Disabled && shikiLang?.devicon && (
<i
className={`devicon-${shikiLang.devicon}${useDevIcon === DeviconSetting.Color ? " colored" : ""}`}
className={`${cl("devicon")} devicon-${shikiLang.devicon}${useDevIcon === DeviconSetting.Color ? " colored" : ""}`}
/>
)}
{langName}

View file

@ -90,14 +90,10 @@ export const Highlighter = ({
let langName;
if (lang) langName = useHljs ? hljs?.getLanguage?.(lang)?.name : shikiLang?.name;
const preClasses = [cl("root")];
if (!langName) preClasses.push(cl("plain"));
if (isPreview) preClasses.push(cl("preview"));
return (
<div
ref={rootRef}
className={preClasses.join(" ")}
className={cl("root", { plain: !langName, preview: isPreview })}
style={{
backgroundColor: useHljs
? themeBase.backgroundColor

View file

@ -0,0 +1 @@
@import url('https://cdn.jsdelivr.net/gh/devicons/devicon@v2.10.1/devicon.min.css');

View file

@ -16,23 +16,25 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import "./shiki.css";
import { disableStyle, enableStyle } from "@api/Styles";
import { Devs } from "@utils/constants";
import { parseUrl } from "@utils/misc";
import { wordsFromPascal, wordsToTitle } from "@utils/text";
import definePlugin, { OptionType } from "@utils/types";
import previewExampleText from "~fileContent/previewExample.tsx";
import cssText from "~fileContent/shiki.css";
import { Settings } from "../../Vencord";
import { shiki } from "./api/shiki";
import { themes } from "./api/themes";
import { createHighlighter } from "./components/Highlighter";
import { DeviconSetting, HljsSetting, ShikiSettings, StyleSheets } from "./types";
import { clearStyles, removeStyle, setStyle } from "./utils/createStyle";
import deviconStyle from "./devicon.css?managed";
import { DeviconSetting, HljsSetting, ShikiSettings } from "./types";
import { clearStyles } from "./utils/createStyle";
const themeNames = Object.keys(themes);
const devIconCss = "@import url('https://cdn.jsdelivr.net/gh/devicons/devicon@v2.10.1/devicon.min.css');";
const getSettings = () => Settings.plugins.ShikiCodeblocks as ShikiSettings;
@ -50,9 +52,8 @@ export default definePlugin({
},
],
start: async () => {
setStyle(cssText, StyleSheets.Main);
if (getSettings().useDevIcon !== DeviconSetting.Disabled)
setStyle(devIconCss, StyleSheets.DevIcons);
enableStyle(deviconStyle);
await shiki.init(getSettings().customTheme || getSettings().theme);
},
@ -135,8 +136,8 @@ export default definePlugin({
},
],
onChange: (newValue: DeviconSetting) => {
if (newValue === DeviconSetting.Disabled) removeStyle(StyleSheets.DevIcons);
else setStyle(devIconCss, StyleSheets.DevIcons);
if (newValue === DeviconSetting.Disabled) disableStyle(deviconStyle);
else enableStyle(deviconStyle);
},
},
bgOpacity: {

View file

@ -1,6 +1,5 @@
.shiki-container {
border: 4px;
/* fallback background */
background-color: var(--background-secondary);
}
@ -22,8 +21,7 @@
border: none;
}
.shiki-root [class^='devicon-'],
.shiki-root [class*=' devicon-'] {
.shiki-devicon {
margin-right: 8px;
user-select: none;
}

View file

@ -16,13 +16,14 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import { classNameFactory } from "@api/Styles";
import { hljs } from "@webpack/common";
import { resolveLang } from "../api/languages";
import { HighlighterProps } from "../components/Highlighter";
import { HljsSetting, ShikiSettings } from "../types";
export const cl = (className: string) => `shiki-${className}`;
export const cl = classNameFactory("shiki-");
export const shouldUseHljs = ({
lang,

View file

@ -16,6 +16,8 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>.
*/
import "./spotifyStyles.css";
import ErrorBoundary from "@components/ErrorBoundary";
import { Flex } from "@components/Flex";
import { Link } from "@components/Link";

View file

@ -21,8 +21,6 @@ import { proxyLazy } from "@utils/proxyLazy";
import { findByPropsLazy } from "@webpack";
import { Flux, FluxDispatcher } from "@webpack/common";
import cssText from "~fileContent/spotifyStyles.css";
export interface Track {
id: string;
name: string;
@ -69,11 +67,6 @@ type Repeat = "off" | "track" | "context";
// Don't wanna run before Flux and Dispatcher are ready!
export const SpotifyStore = proxyLazy(() => {
// TODO: Move this elsewhere
const style = document.createElement("style");
style.innerText = cssText;
document.head.appendChild(style);
// For some reason ts hates extends Flux.Store
const { Store } = Flux;

View file

@ -44,6 +44,34 @@ contextBridge.exposeInMainWorld("VencordNative", VencordNative);
if (location.protocol !== "data:") {
// Discord
webFrame.executeJavaScript(readFileSync(join(__dirname, "renderer.js"), "utf-8"));
const rendererCss = join(__dirname, "renderer.css");
function insertCss(css: string) {
const style = document.createElement("style");
style.id = "vencord-css-core";
style.textContent = css;
if (document.readyState === "complete") {
document.documentElement.appendChild(style);
} else {
document.addEventListener("DOMContentLoaded", () => document.documentElement.appendChild(style), {
once: true
});
}
}
try {
const css = readFileSync(rendererCss, "utf-8");
insertCss(css);
} catch (err) {
if ((err as NodeJS.ErrnoException)?.code !== "ENOENT")
throw err;
// hack: the pre update updater does not download this file, so manually download it
// TODO: remove this in a future version
ipcRenderer.invoke(IpcEvents.DOWNLOAD_VENCORD_CSS)
.then(insertCss);
}
require(process.env.DISCORD_PRELOAD!);
} else {
// Monaco Popout

View file

@ -44,5 +44,6 @@ export default strEnum({
UPDATE: "VencordUpdate",
BUILD: "VencordBuild",
GET_DESKTOP_CAPTURE_SOURCES: "VencordGetDesktopCaptureSources",
OPEN_MONACO_EDITOR: "VencordOpenMonacoEditor"
OPEN_MONACO_EDITOR: "VencordOpenMonacoEditor",
DOWNLOAD_VENCORD_CSS: "VencordDownloadVencordCss"
} as const);

View file

@ -61,7 +61,7 @@ export function getRepo() {
return Unwrap(VencordNative.ipc.invoke<IpcRes<string>>(IpcEvents.GET_REPO));
}
type Hashes = Record<"patcher.js" | "preload.js" | "renderer.js", string>;
type Hashes = Record<"patcher.js" | "preload.js" | "renderer.js" | "renderer.css", string>;
/**
* @returns true if hard restart is required

View file

@ -36,6 +36,7 @@ export let React: typeof import("react");
export let useState: typeof React.useState;
export let useEffect: typeof React.useEffect;
export let useMemo: typeof React.useMemo;
export let useRef: typeof React.useRef;
export const ReactDOM: typeof import("react-dom") = findByPropsLazy("createPortal", "render");
@ -158,7 +159,7 @@ export const NavigationRouter = mapMangledModuleLazy("Transitioning to external
waitFor("useState", m => {
React = m;
({ useEffect, useState, useMemo } = React);
({ useEffect, useState, useMemo, useRef } = React);
});
waitFor(["dispatch", "subscribe"], m => {