yes
#🧩-plugin-development
lofty crypt
congrats on not losing any karma xd
lofty crypt
fr
pure temple
most viewed post though!
||https://www.reddit.com/r/ProgrammerHumor/comments/rpkvvb/oh_god_oh_fuck_i_learned_rust_wtf_do_i_do_guys ||
lofty crypt
but i believe in you – if anyone can do it, you can!
pure temple
i'm new though!
lofty crypt
most viewed post though!
||https://www.reddit.com/r/ProgrammerHumor/comments/rpk...
: more rust
hexed cargo
i luv rust :3
faint siren
😱
novel gale
I've finished my plugin, can anyone do a review?
Me! If you can wait a few hours 😭
lost granite
Me! If you can wait a few hours 😭
oh! thank you very much
lost granite
ok !!
pure temple
https://pastebin.com/Nv0jDeSC
i think it's better to review via pr
you can create a draft
(of course you may already know all this so sorry to be patronising!)
lost granite
i think it's better to review via pr
yes, but I don't know the best practices for the project
lost granite
yes i thinks
green vessel
how can i disconnect someone from voicestate (guild)
ruby turtle
how can i disconnect someone from voicestate (guild)
https://github.com/Vendicated/Vencord/pull/600/commits/63dd3d5393da28974bc75296fb6d620adeb601cf
You can see how it was done here
green vessel
<https://github.com/Vendicated/Vencord/pull/600/commits/63dd3d5393da28974bc75296...
i've done it x)
dull magnet
that's their own pr...
green vessel
pure temple
how do you load the development build into the browser?
viral roost
pnpm buildWeb --watch i think but i cant check rn
pure temple
phew... i can use firefox devtools (i can't find prettify though :()
pure temple
i'm now trying to implement the pronouns section without the experiment!
pure temple
i never finished that
empty jacinth
y'all i am having a git moment rn
i accidentally pushed some commits while on my local pr/483 branch. how can i switch to my fork without losing my commits?
empty jacinth
i just remade the commits
@green vessel please review? https://github.com/Vendicated/Vencord/pull/483
amber mantle
is it not already
torpid agate
i thought that would be the first thing you did
amber mantle
thats what im asking
probably
but support servers are hell so a lot probably dont want to join xd
solemn star
Close your DMs, problem solved
covert nimbus
just like powercord used to
crisp jungle
does anyone know how discord decides if a server has an animated icon?
amber mantle
boost or partnered flag
amber mantle
just like powercord used to
Vencord does not support Discord PTB, Canary, or Development. Please switch to Stable to receive support.
paper mountain
It doesn't support but it generally works on Canary
dull magnet
does anyone know how discord decides if a server has an animated icon?
?
elaborate
if you want to know how to determine whether an icon is animated based on its hash, the hash will start with a_
crisp jungle
if you want to know how to determine whether an icon is animated based on its ha...
AH
bruh
let me test that out
crisp jungle
if you want to know how to determine whether an icon is animated based on its ha...
BRUH yes now i see it...
i am very dumb
before knowing this information i just do an XHR to test if it fails if I use gif
amber mantle
lol
covert nimbus
amazing
untold briar
eternal lion
Lmao
faint siren
any way to access discords i18n?
dull magnet
webpack find
faint siren
yea, tho what do i search for?
dull magnet
find it urself!
take any string you see somewhere in the ui and search for it
and you will find the module
faint siren
i see, thx
dull magnet
faint siren
meh, doesn't find anything
dull magnet
how
faint siren
dull magnet
use search like here
dull magnet
duh, that crashed my discord 😂
you love out of memory
faint siren
fookn 32 bit smh
Vencord.Webpack.findAll(Vencord.Webpack.filters.byProps("DM_TEXTAREA_PLACEHOLDER")) 👍
faint siren
any way to do Webpack.findAll as lazy?
dull magnet
why do u need it
faint siren
if the user has a native language in discord like german it finds 2 i18n modules, the first is english and the second is the native language
they seem to not be loaded immediately, so i need to do it lazily
dull magnet
why do you need i18n
dull magnet
const i18n = find(m => m.Messages?.["en-US"]);
console.log(i18n.Messages.DM_TEXTAREA_PLACEHOLDER)
thx
maiden ruin
will there be a way to unlock the new client themes using fakenitro since its mostly client sided?
dull magnet
already is
maiden ruin
Oh
chrome folio
does anyone know how the animations on super reactions are played? Aka is there a way I can trigger that animation https://c.lunish.nl/r/UvCFsq.gif
torpid agate
does anyone know how the animations on super reactions are played? Aka is there ...
i think its related to mouse proximity tho i havent tested it
chrome folio
hm, because I would like to trigger them anyhow inside a plugin
pure temple
what would be the purpose?
chrome folio
what would be the purpose?
just a little trolling
covert nimbus
not fully rolled out
viral roost
@dull magnet
dull magnet
yeye
chrome folio
is there a way to send a message as the current user? (outside of any injected application command)
dull magnet
ye
chrome folio
(how)
dull magnet
findByProps("editMessage").sendMessage
chrome folio
thanls, could find any plugin that does that to copy
chrome folio
findByProps("editMessage").sendMessage
start() {
this.preSend = addPreSendListener((_, message) => {
if (message.content.startsWith(".thing")) {
const res = 'just a string'
findByProps("editMessage").sendMessage({
content: res.toString() || "undefined"
});
}
});
},
amber mantle
you can just edit the content lol
chrome folio
it should send the original message and an extra message with the res lol
amber mantle
ah
dull magnet
```ts
start() {
this.preSend = addPreSendListener((_, message) => {
...
this is normal
its cause you need to add more properties to the message object to it to make it happy
Also that's not how u use sendMessage
First arg is channel id
chrome folio
doesnt matter now, I just work with edit lol
my friend wanted eval command lol
.eval 3+5
8
chrome folio
wym proper lmao
amber mantle
/ eval
chrome folio
its funnier when others can see the input and output (for my friends)
can make a proper one for public if you even want that, eval just can be kind of dangerous
amber mantle
well yeah 
chrome folio
.eval Vencord.Webpack.Common.UserStore.getCurrentUser().phone
911
onyx yoke
hey, when does a plugin's stop() get invoked, if ever?
chrome folio
hey, when does a plugin's `stop()` get invoked, if ever?
when disabled
onyx yoke
What's the process for getting a PR reviewed and merged in this project? The CONTRIBUTING doc doesn't really go into detail 🙂
green vessel
what's the point of an eval command when u can just use console
onyx yoke
when disabled
So, I'm testing with a simple stop() { console.log("HOBOKEN? I'M DYYYYYYIN'"); } and it doesn't log when I disable the plugin (it says "restart required"), and when I restart - basically, that console.log() never seems to get called, ever.
green vessel
What's the process for getting a PR reviewed and merged in this project? The CO...
you just make a PR there's not really a complex workflow or anything
woven lion
So, I'm testing with a simple `stop() { console.log("HOBOKEN? I'M DYYYYYYIN'");...
have you got requiresRestart
onyx yoke
you just make a PR there's not really a complex workflow or anything
cool, done - do I need to request a review from anyone?
woven lion
ven will personally review all of them
onyx yoke
have you got requiresRestart
no, heh
woven lion
i had another project's API in my head that's not even related to discord
casual developer brain death
what's your plugin definition look like?
amber mantle
you may have forgotten to build
woven lion
it depends
amber mantle
me when i debug something and i forget to build (all the time)
onyx yoke
<:worksonmymachine:1001635185659498578> you may have forgotten to build
I considered that, but I have a similar log in start() and it's logging.
amber mantle
what's your plugin definition look like?
^
woven lion
oh actually hm
yeah send your plugin file
cuz obviously something isnt right but we cant work it out without seeing
onyx yoke
what's your plugin definition look like?
export default definePlugin({
name: "AAA",
description: "ABC",
authors: [
{
id: 189195450555826176n,
name: "Dossy",
},
],
patches: [],
settings,
start() {
console.log("AAA start()");
},
stop() {
console.log("HOBOKEN? I'M DYYYYYYIN'");
},
});
remove your patches array
onyx yoke
remove your patches array
amber mantle
that'll do it
woven lion
the existence of that prop instructs vencord to mark your plugin as requiring a restart
onyx yoke
tfw a arr.length check should really be there but isn't
woven lion
not really
that would've been a review point in a PR
you shouldn't have empty stuff for what you're not using, just don't provide it
onyx yoke
that generally violates principle of least surprise, though. empty arrays and missing properties should really be semantically identical, no?
woven lion
no, they arent
onyx yoke
that would be useful to at least document somewhere, like on docs/2_PLUGINS.md or somesuch, because the example has patches: [], which is where I got that from.
amber mantle
funny
woven lion
that would be useful to at least document somewhere, like on `docs/2_PLUGINS.md`...
we'll write a better documentation site soon dw
amber mantle
but yeah, just don't include what you aren't using, like how dependencies[] dont need to be specified unless you are using an api or another plugin
dull magnet
you just make a PR there's not really a complex workflow or anything
stop is ignored if your plugin has any features that require restarts (aka patches)
wrong reply moment
amber mantle
true
dull magnet
im currently dying at the fact that I need to sveltify so many components unnecessarily in my astro codebase cause you cant import Astro components from svelte
dull magnet
wdym
I have a svelte component
inside i want to use other components like LinkButton and Card
but you cant use Astro components in svelte
so I now also need to make LinkButton and Card svelte
dull magnet
hmm looks like I could use slot to achieve this perhaps
woven lion
yeah
was just about to mention
actually this is a good point
i was going to write my service using astro and solidjs
dull magnet
I renamed this channel to coding btw, so it can serve as a general purpose coding channel, and only #👾-core-development will be vencord exclusive (you can obviously still use this channel for vencord development)
woven lion
I renamed this channel to coding btw, so it can serve as a general purpose codin...
sounds good
woven lion
but if i want to use any UI components id have to write them solid
might as well just use solidstart at this point
cause the entire site needs SSR anyway
woven lion
Astro®️
dull magnet
woven lion
svelte doesnt render the slots if they're not needed
unless you mean it'll still download the component
in which case yes
woven lion
dull magnet
<slot> name cannot be dynamic
woven lion
never thought about doing that before
dull magnet
EXPLODE
lament dew
first (haha new channel)
woven lion
L (not first)
lament dew
(L)
dull magnet
lgtm
woven lion
onyx yoke
Is there an example of a plugin that restarts itself (e.g., calls its stop() then start()) when the settings "Save & Close" button is clicked?
onyx yoke
yeah, I was thinking it was easier/cleaner to stop and start so that timers can be canceled and then fired fresh
dull magnet
what r u u making
okay so the thiccness is related to me setting width: 100vw on the body
???
onyx yoke
I'd like the plugin to measure/display words-per-minute speed.
opal fern
new channel name nice.
onyx yoke
Want to have the stat updated periodically, (either using setTimeout or setInterval - not sure).
dull magnet
WARN Issues with peer dependencies found
.
├─┬ @astrojs/mdx 0.18.1
│ └─┬ @mdx-js/rollup 2.3.0
│ ├── ✕ missing peer rollup@>=2
│ └─┬ @rollup/pluginutils 5.0.2
│ └── ✕ missing peer rollup@^1.20.0||^2.0.0||^3.0.0
└─┬ @astrojs/svelte 2.1.0
├─┬ @sveltejs/vite-plugin-svelte 2.0.3
│ ├── ✕ missing peer vite@^4.0.0
│ └─┬ vitefu 0.2.4
│ └── ✕ missing peer vite@"^3.0.0 || ^4.0.0"
└─┬ svelte2tsx 0.5.23
└── ✕ missing peer typescript@^4.1.2
Peer dependencies that should be installed:
rollup@">=2.0.0 <3.0.0 || >=3.0.0 <4.0.0" vite@">=4.0.0 <5.0.0"
typescript@^4.1.2
this is a nightmare holy cow
onyx yoke
Being able to reset counters when any settings are changed would be nice, and doing that with a clean stop()/start() would be really nice.
opal fern
Being able to reset counters when any settings are changed would be nice, and do...
you can wait for settings to be updated. I believe updated settings are announced with an event, but not 100% sure
amber mantle
i think ur thinking of quickcss update
opal fern
never knew quickcss emitted events
onyx yoke
you can wait for settings to be updated. I believe updated settings are announce...
Any chance you can point to an example of how to do that?
opal fern
Any chance you can point to an example of how to do that?
cant rn, sorry mate
onyx yoke
s'okay
dull magnet
i think ur thinking of quickcss update
all settings do
amber mantle
o
dull magnet
anyway
you can define onChange functions for each setting @onyx yoke
function restartTimers() {
...
}
const settings = definePluginSettings({
mySetting: {
type: OptionType.BOOLEAN,
description: "very cool",
onChange: restartTimers
}
});
That might be okay, except I don't want the setting changes to take effect on change, but only on save - if someone changes a setting then clicks Cancel, it's not obvious that the plugin will be functioning with the changed setting...
dull magnet
onChange already only runs on save
woven lion
woven lion
hoi
dull magnet
i set the body to width: 100vw. This is important for properly applying background colour yadayada
now I have a card component with no width set
it for some reason goes like waaaay out of bounds
(see the scroller)
im very confused why
(i also have 20% margin set on the body)
woven lion
what's on the computed styles
dull magnet
erm
wdym
oh
whys this here
that div for some reason wants to be 100vw
but its not set to be 100vw
woven lion
is it inheriting maybe?
dull magnet
nono
woven lion
dull magnet
want me to push?
woven lion
if you may
dull magnet
okay so
i just removed the width from body
and it works
and is full width anyway
minus the beautiful scroller
yes this is the hottest site ever created i know
dull magnet
ohhh right
i need border-box
OHHH
i get the issue now
in my own website (where i copied the width and margin from), i have the 100vw on body and use a wrapper div for the margin
woven lion
vw is literally the screen size, which wont take stuff into account, so applying the margin makes it overflow heavily
ye
woven lion
yeah its uhhh...
When they called it Cascading style Sheets i didnt think They Meant The Website Cascades
dull magnet
there fixed
woven lion
it hurts my head
dull magnet
oh god what did i do now
i love how no matter how long I do this i still fuck up like this
woven lion
this is why i hate frontend
dull magnet
GHRRRR
dull magnet
astro
woven lion
id recommend ripping out the global styles and putting them into a dedicated css file instead of putting them with your astro code
dull magnet
id recommend ripping out the global styles and putting them into a dedicated css...
ye i did that on my site
woven lion
ah wait yeah you can do that too
woven lion
ye
dull magnet
long embed
ok here we go
btw im purposely not really paying attention to design
i dont wanna overengineer that rn
just get the content and basic layout
woven lion
layout first make pretty later
woven lion
oops
dull magnet
looks like html parser just auto closes it for us lmao
so it works anyway
i love this
proud parrotBOT
https://github.com/Vendicated/Vencord/blob/main/src/plugins/platformIndicators.t...
**platformIndicators.tsx: **Line 64
return <Icon color={`var(--${getStatusColor(status)}`} tooltip={tooltip} />;
yep lmao
dull magnet
wontfix :3
woven lion
i will MicroCommit /s
woven lion
https://discord.coffee/5aYCy7j.png works in ff
dull magnet
i know i said i wouldnt work on design at all but now its slightly better
(arbitrary colours)
amber mantle
woven lion
you will use gruvbox
woven lion
actually gruvbox would look hot
woven lion
lmao
you will:
:root {
--gb-bg: #282828;
/* etc. */
}
@media (prefers-color-scheme: light) {
:root {
--gb-bg: #fbf1c7;
/* etc. */
}
}
gameboy bg
green vessel
gameboy box o' gruv
green vessel
add non-breaking space between : and (
dull magnet
yeah already figured
green vessel
<nobr>
woven lion
dont use nobr
dull magnet
but
woven lion
i will slaughter you
woven lion
use white-space: nowrap;
green vessel
<nobr/>u<nobr/>s<nobr/>e<nobr/> <nobr/><<nobr/>n<nobr/>o<nobr/>b<nobr/>r<nobr/>><nobr/>
dull magnet
dull magnet
why does this look off center
oh
prettier doesnt know its an inline component
so it inserts a newline
which counts as whitespace in astro
trail ginkgo
why does this look off center
its very off center
dull magnet
Read messages after
trail ginkgo
oh the nweline
dull magnet
bad astro formatter moment
trail ginkgo
i got it after the 3rd read
dull magnet
basically
woven lion
ill fiddle with it
dull magnet
inline elements use newlines as space
woven lion
i need to sleep though lmfao
dull magnet
like
<code>
hi
</code>
this will insert a space before and after hi
in html
but in jsx it just strips the newline, instead you can insert a newline via {"\n"}
woven lion
i had a really really bad hack to fix this
dull magnet
like
```html
<code>
hi
</code>
```
Astro just uses the jsx formatter as a base I'm pretty sure because it formats components like this
thus inserting whitespace
they blacklist inline elements for newline insertions but if you make a custom component that is an inline component it will still insert newlines
just bad formatter
woven lion
proud parrotBOT
https://github.com/lewisakura/lewisakura.moe/blob/5d38fb27d0f6b3664cbfc612af30af...
**PostListingLayout.astro: **Lines 33-42
<span class="date">
{dayjs(data.createdAt).format("Do MMM, YYYY")}
{data.modifiedAt && (
<>
(updated
{dayjs(data.modifiedAt).format("Do MMM, YYYY")}
{})
</>
)}
</span>
😭
green vessel
i had a really really bad hack to fix this
isn't the entirety of frontend just a collection of hacky workarounds though? lol
or maybe i'm just really bad at it, actually yeah i am really bad at it
but i do think there's some truth to it :p
dull magnet
isn't the entirety of frontend just a collection of hacky workarounds though? lo...
(it's not :P)
grim hare
there are still some things that are kinda gross and hacky in frontend work but the situation has gotten much better in recent years, especially with the death of IE
most of the hacky stuff I've had to do in frontend I've had to do because I'm working around other ancient code that's already in the codebase and I don't have the time or authorization to fix
(I am looking specifically at jquery and its associated libraries)
(I cannot wait until later this year when I've been given the goahead to remove jquery from the project)
visual berry
How do i go about patching a webpack module using vencord
covert nimbus
you can use regex/plaintext patching (recommended) and maybe monkeypatching? o haven't tried the latter so i can't confirm. might be a patcher function somewhere too idk, ill look into it
from what i can tell, there doesn't seem to be a patcher function, so you'll have to monkeypatch (is it even possible?) or plaintext patch
amber mantle
for the like 2 things that still have props or whatev
gilded carbon
pretty sure we dont do monkey patching here
also there is the patch function which uses regex
i've been looking into it but havent had much time with full work. (im trying to make a plugin where it appends peoples nicknames to their actual name and not just the nickname showing)
amber mantle
I believe there is still findbyprops for things that you can find stuff with but that is barely anything so you're stuck with regex patching that is better but more annoying to find stuff
dull magnet
I believe there is still findbyprops for things that you can find stuff with but...
you can still find everything but monkey patching is illegal
amber mantle
monkey patching so guh
faint siren
who be monkey patching these days
abstract spire
i'm making the settings panel for a plugin i'm working on, is there any way of getting multi-line string options?
as the OptionType.STRING type is limited to a single line
austere gulch
you can do custom components
abstract spire
is there any documentation on them?
austere gulch
type: OptionType.COMPONENT,
component: ({setValue, setError, option}) => <YourComponent />
if you check src/components/VencordSettings/ThemesTab.tsx we use a <TextArea /> component
which can be multiline
abstract spire
oh, that should work
austere gulch
```ts
type: OptionType.COMPONENT,
component: ({setValue, setError, option}) => <...
with this, you can do setValue(yourNewValue) to update settings obj, and setError(true | false) to flag an error on the ui to prevent saving
abstract spire
alright, i'll give it a try, thanks!
austere gulch
np
muted thunder
how do I get user id if when I click on there profile in plugin code 
austere gulch
what
austere gulch
"how do I get user id if when I click on there profile in plugin code "
inject into the popup and get their id from args i guess
empty echo
question: how does vencord work?
like
how can it reverse engineer all the discord features?
austere gulch
we replace the code itself before it gets loaded
we use regex to match strings
and replace them
empty echo
inside the minified code of discord???
austere gulch
yep
woven lion
its the fastest and safest way of doing it- if a patch breaks it normally just does nothing rather than breaking the entire client
dull magnet
i'm making the settings panel for a plugin i'm working on, is there any way of g...
tbh this could be a vencord settings option
like
myLongText: {
type: OptionType.LONG_STRING,
...
}
what do u think
woven lion
with a textarea?
dull magnet
ye
woven lion
lgtm
abstract spire
i actually can't manage to get any component to work, i tried adding buttons, i tried adding text areas
detectedPhrases: {
description: "aa",
type: OptionType.COMPONENT,
component: () =>
<TextArea
placeholder="Theme Links"
/>
},
this should work, right?
with TextArea imported from @webpack/common
dull magnet
you likely need to fill more props
abstract spire
it just complains "Expected ">" but found "placeholder""
dull magnet
whats your file called
abstract spire
index.ts
austere gulch
.tsx
dull magnet
it needs to be named index.tsx to use jsx syntax
abstract spire
sob
dull magnet
idk why vscode cant show you a proper error
"jsx is only valid inside .tsx or .jsx files"
not hard to do
abstract spire
could've saved me like 30 min 😭
cedar marsh
what plugin is good example of options that have int picker
cedar marsh
like a slider from 0-255 or 0 to 100
cedar marsh
thamk
dull magnet
you just declare the max and min value and the markers u want
pretty straight forward
proud parrotBOT
https://github.com/Vendicated/Vencord/blob/main/src/plugins/volumeBooster.ts#L24...
**volumeBooster.ts: **Lines 24-32
const settings = definePluginSettings({
multiplier: {
description: "Volume Multiplier",
type: OptionType.SLIDER,
markers: makeRange(1, 5, 1),
default: 2,
stickToMarkers: true,
}
});
it looks like it makes sense from the code i see
wait what, I was looking at lines 77-85 in the same file
dull magnet
youre looking at outdated code
cedar marsh
why is my vencord not up to date
fuck
I forgor to pull
I feel dumb, why isn't it exist
I have done a ctrl+r
viral roost
what does that even do
if its to enable the new theme thing from discord thats part of FakeNitro
cedar marsh
it doesn't do anything yet, but it will be the old client theme experiement
cedar marsh
did you actually patch with ur dev install
I am dumb
cedar marsh
pnpm inject :P
I would've done it if I could find the old non-installer based instructions
what did I do wrong
const settings = definePluginSettings({
hue: {
description: "hue",
type: OptionType.SLIDER,
markers: makeRange(0, 1, 360),
default: 0
},
saturation: {
description: "saturation",
type: OptionType.SLIDER,
markers: makeRange(0, 1, 100),
default: 0
},
lightness: {
description: "lightness",
type: OptionType.SLIDER,
markers: makeRange(0, 1, 100),
default: 7
}
});
the sliders don't move and aren't respecting default values
amber mantle
it needs to be named index.tsx to use jsx syntax
i forget thsi every time and i go insane
i hate react
dull magnet
what did I do wrong
```js
const settings = definePluginSettings({
hue: {
...
youre using makeRange wrong
i think the args are start, end, step
dull magnet
so you'd want 0, 360, 1, but also this would add 360 markers which would be insane
I'd not use more than 10 markers
cedar marsh
I will figure out a good marker step once I figure out what on earth it looks like
the plan is to eventually use the color picker component
dull magnet
LOL thats for colour
why not make the user enter a hex colour
or yeah just use the colour picker
cedar marsh
why not make the user enter a hex colour
because then I would have to convert to hsl and I am too lazy to find a way to do that right now
I am just doing minimum viable product rn
cedar marsh
or yeah just use the colour picker
because I spent ~30 minutes trying to find the component using the react devtools but I have literally no idea what I am doing
dull magnet
why do u need hsl
cedar marsh
so you'd want `0, 360, 1`, but also this would add 360 markers which would be in...
that makes more sense now
cedar marsh
why do u need hsl
because the css I made to recreate the old experiment uses HSL
because the --primary colors are based on HSL
onInject() {
addEditCSSFile("clientThemeBase", `:root:root {
--primary-100-hsl: calc(var(--theme-h) + 20) calc(var(--theme-s) - 1.8%) 96.7%;
...
--primary-500-hsl: calc(var(--theme-h) - 11.4) calc(var(--theme-s) - 4.1%) 32.5%;
}`);
},
onChangeSettings({ hue, saturation, lightness }) {
addEditCSSFile("clientThemeVars", `:root {
--theme-h: ${hue};
--theme-s: ${saturation}%;
--theme-l: ${lightness}%;
}`);
}
Is there hooks for plugins like onInject and onChangeSettings, similar to start/stop?
Also is there a built in way to add css?
dull magnet
whats onInject
cedar marsh
sorry, I feel like an absolute idiot with what I am doing
cedar marsh
whats onInject
something that just runs once, on the plugin being enabled/discord starting
I guess that would just be start
dull magnet
yes start
or just top level code
but top level code runs extremely early so be careful, at that point all discord stuff doesn't exist yet
dull magnet
then yes
cedar marsh
if I do onChange in settings, will it run once on plugin inject?
dull magnet
no, only on change
make a generic function addStyles() or whatever and use it both as onChange and call it in start
cedar marsh
alright
cedar marsh
just import css file
first import I have is
import "./clientTheme.css";
but the css isn't applying
wait what, ok it works now for some reason.
cedar marsh
viral roost
it probably works only for dev builds cause they have css hot reload
cedar marsh
it edits a style node
viral roost
oh
cedar marsh
function handleSettingChange() {
const style = document.head.querySelector("style#clientThemeVars");
if (!style) return;
style.textContent = `:root {
--theme-h: ${settings.store.hue};
--theme-s: ${settings.store.saturation}%;
--theme-l: ${settings.store.lightness}%;
}`;
}
- how do I get access to color picker
- how do I render it in the settings of my plugin
are there any plugins that render a component in their settings modal I can look at?
proud parrotBOT
https://github.com/AutumnVN/Vencord/blob/main/src/plugins/textReplace.tsx#L42-L5...
**textReplace.tsx: **Lines 42-52
const settings = definePluginSettings({
replace: {
type: OptionType.COMPONENT,
description: "",
component: () =>
<>
<TextReplaceString />
<TextReplaceRegex />
</>
},
});
thank
how does the settings store work, can I just make the component control settings.store.var and it will save? or do I need to call some fancy store function thingy
woven lion
actually let me confirm that
i've never tried writing but i swear i've seen it before
yep, writing will automatically save the setting (its through the same settings proxy as everything else), onChange() is only fired by the UI when you save
cedar marsh
alright
thanks!
what do components look like in SWC
I am only familiar with react function component syntax, should I be looking for something like
function d({react component args you normally have, like}) {
return <div/>;
react's createComponent func
except it does some funny shit
(0,[react].jsx)(ComponentType,{props},[children])
viral roost
ye
cedar marsh
ok and I just confirmed that it is infact the color picker by having a debugger freeze on it and it froze when I had a color picker pop up
now how do I go from knowing where it is in the source, to getting the component accesable in my plugin
viral roost
now how do I go from knowing where it is in the source, to getting the component...
that's what the chrome debugger is for
cedar marsh
what
woven lion
now how do I go from knowing where it is in the source, to getting the component...
you'd have to search by props
or by code in the component
cedar marsh
is there any plugins that get components through regex magic or whatever so I can get a vauge idea of what I am supposed to write
dull magnet
react components are just functions or classes
if they're a class component you need to check m.prototype.render, if they're a function component you need to just use findByCode
cedar marsh
https://github.com/Vendicated/Vencord/blob/main/src/webpack/common/components.ts
I am struggling to try and import a component from this as a test
dull magnet
`(0,[react].jsx)(ComponentType,{props},[children])`
not quite, the syntax is
(0,r.jsxs)(Component, { foo: bar, children: [] }, "key")```the function name can either be r.jsx or r.jsxs
they're functionally the same so it doesn't matter which one it is
it's used by react to differentiate whether an array was created by react due to passing multiple children or passed as child by the user
in the latter case keys are required and react warns in development if there aren't any
in production the functions do the same
react is almost always called r but I wouldn't depend on it
cedar marsh
I can't exactly do what components.ts does, because I don't have a readily available type, so do I have to initialize my own?
dull magnet
wdym
cedar marsh
export const Card = waitForComponent<t.Card>("Card", m => m.Types?.PRIMARY && m.defaultProps);
it uses the already made t.Card type thing
export type Card = ComponentType<PropsWithChildren<HTMLProps<HTMLDivElement> & {
editable?: boolean;
outline?: boolean;
/** Card.Types.PRIMARY */
type?: string;
}>> & {
Types: Record<"BRAND" | "CUSTOM" | "DANGER" | "PRIMARY" | "SUCCESS" | "WARNING", string>;
};
but I am not looking for a card component
so I need to make my own type thing
I am calling it a type thing because I don't know the first thing about typescript other than everyone saying I should use it
woven lion
oh nono you dont need to do that
when you're doing the code searches yourself it returns any
you dont need to write types
cedar marsh
can I put anything into the name bit of waitForComponent or do I need to find that somewhere in the code
dull magnet
you can't use waitForComponent
it's an internal vencord function that simply wraps waitFor
the name is for debugging purposes
cedar marsh
the only example that I have gotten for finding a component is the internal vencord one
dull magnet
const ColorPicker = LazyComponent(() => findByCode("whatever"));
<ColorPicker />
thank
I will try that later today, I need to go
automatic imports aren't being nice and working easily
I will figure out later
amber mantle
that should just be @webpack no?
cedar marsh
return (0,
r.jsxs)(u.VqE, {
"aria-label": A.Z.Messages.PICK_A_COLOR,
className: D().customColorPicker,
children: [(0,
r.jsx)(T, {
would findByCode("A.Z.Messages.PICK_A_COLOR") work here?
ooo vencord vscode plugin would help
dull magnet
yes
dull magnet
```js
return (0,
r.jsxs)(u.VqE, {
"aria-label": A.Z.Messages.PICK_A_...
do not include the A
that's a minified variable name that will break
.Messages.PICK_A_COLOR,
this might work
cedar marsh
cedar marsh
I want this component
but selecting any of it's unique props, like suggestedColors gives no results
selecting any of the code in it's return, like customColorPicker gives no results
dull magnet
I want this component
but selecting any of it's unique props, like `suggestedCol...
it's a class
wait it's not
are you sure it's exported
cedar marsh
Can I somehow add an export using patches
dull magnet
yes but don't
cedar marsh
how do I access it then
dull magnet
I'll get on pc in a bit and help you
cedar marsh
thanks
dire fern
[g]ame[b]oy
[g]ood [b]oy
dull magnet
L
trail ginkgo
why cant u do const x of iterator
in typescript
its literally normla
what the FUCK you BITCH im justr trying to make an INTERSPERSE util
fuck this why am i even using generators
oblique lark
Component.literal("\u2588").withStyle(Style.EMPTY.withColor(color))
me when I have to use Style.empty in order to style things (I hate minecraft chat formatting)
trail ginkgo
java
cedar marsh
I can't put import "./clientTheme.css" into my start function because imports have to be at the top level
but if it's at the top level it will fuck with colors of people who don't have my plugin enabled
I can give default vars so it looks very close to vanilla discord, but it will still fuck with saturation
proud parrotBOT
https://github.com/Vendicated/Vencord/blob/main/src/plugins/messageLogger/index....
**index.tsx: **Lines 30-44
import overlayStyle from "./deleteStyleOverlay.css?managed";
import textStyle from "./deleteStyleText.css?managed";
const i18n = findLazy(m => m.Messages?.["en-US"]);
const styles = findByPropsLazy("edited", "communicationDisabled", "isSystemMessage");
function addDeleteStyle() {
if (Settings.plugins.MessageLogger.deleteStyle === "text") {
enableStyle(textStyle);
disableStyle(overlayStyle);
} else {
disableStyle(textStyle);
enableStyle(overlayStyle);
}
}
thank
cedar marsh
I'll get on pc in a bit and help you
boop
if you can just get the component imported I can take it from there
no rush, just ping me when you do
component is X, found in user profile customization
green vessel
i'm trying to port CompleteTimestamps from betterdiscord... it seems like discord is using moment.js, tried patching a bunch of .calendar() calls but no luck so far
well for now i'm just hardcoding my own custom format, no config yet
green vessel
component is `X`, found in user profile customization
can someone make this gradient thing for free?
green vessel
no one else will see it
i know but i still want it even spoofed
cedar marsh
too much effort
green vessel
i thing i can make it using a theme
lusty rampart
is there a way to add plugin from better discord
viral roost
no
lusty rampart
i have source code can someone add it to plugins thing
austere gulch
no
lusty rampart
damm
austere gulch
check if its here https://github.com/Vendicated/Vencord/discussions/categories/ideas
if not, make a post on there
covert nimbus
is this intentional
austere gulch
yes
vague echo
type couldn't be any longer than ApplicationCommandOptionType
mossy marsh
is there any sort of pnpm watch for web instead of the actual client?
woven lion
pnpm buildWeb --watch
mossy marsh
ty
glacial kelp
Oh yeah I love variables, they all have so nice values?
Look at the code I wrote
Variable ==! 2
Then (Execute[ Do{ True[ Script send "" Hello world"]Timeout 10}]If not {Create Variable = 2 (timeout 3)})
Shutdown
:))))))))
If you don't understand you haven't mastered Script yet
amber condor
can anyone explain to me how i can run a simple piece of JS code after discord loads a page? Like when i click on a channel it loads the page, i want to post-process the page. The tutorial is kinda confusing (i dont have a background in JS, only other langs)
mossy marsh
I'm new to vencord, and discord plugins in general, I'm not quite sure how the patches option works, I looked at the "Shiki Codeblocks" plugin as my idea was similar, here's my current code, ignore the mess:
import { Devs } from "@utils/constants";
import { getPrettierParser, getPrettierStandalone } from "@utils/dependencies";
import Logger from "@utils/Logger";
import definePlugin from "@utils/types";
const logger = new Logger("BetterCodeblocks");
let formatter = (code: string) => code;
export default definePlugin({
name: "PrettyCodeblocks",
description: "Formats codeblocks with Prettier.",
authors: [Devs.Duro],
patches: [
{
find: "codeBlock:{react:function",
replacement: {
match: /codeBlock:\{react:function\((\i),(\i),(\i)\)\{/,
replace: "$&return $self.format($1,$2,$3);",
},
},
],
async start() {
const { default: parser } = await getPrettierParser();
const { default: prettier } = await getPrettierStandalone();
formatter = (code: string) => prettier.format(code, { parser: "typescript", plugins: [parser] });
},
format({ lang, content }: { lang: string; content: string; }) {
const res = formatter(content); // expected to be a formatted code string
logger.info(res);
// TOOD: what do i return here?
}
});
if u do pnpm build --watch u get a tab in ur settings called "Patch Helper"
mossy marsh
ohh
trail ginkgo
and u can test ur patches there but basically
mossy marsh
that's cool
trail ginkgo
each patch changes discord source code
mossy marsh
I just want to basically change the content of the codeblock, but I'm afraid it will mess with the highlight
mossy marsh
each patch changes discord source code
yeah i got that
trail ginkgo
you'll need to find a snippet of text unique to the module u wanna patch
thats the find prop
and then the replacement is just a regex replace
\i being an escape for minified variable names
mossy marsh
yeah i copied your patch and it seemed to work, but im not really sure what to put as the return for the format
I was testing and just returned like <p>hello</p> and it seemed to work, but im not sure how i would still preserve the highlight and stuff with the new content of the codeblock
trail ginkgo
yea its probably best to go in devtools and look at the module ur patching
prettify it (its a button in devtools when ur looking at a file in the sources tab) and read the code and try to understand a bit of whats going on
if its hard to get whats going on (it usually is), u can set a breakpoint and then trigger the code
mossy marsh
good to know
I'm also curious if there's like a priority for the patches, like if my patch changed the content of the codeblock, and another had the same patch, which one would go first? Ideally I would want my patch to run, change the content, and then the ShikiCodeblocks would add the highlighting with the formatted content
trail ginkgo
if its hard to get whats going on (it usually is), u can set a breakpoint and th...
and like, it'll freeze discord at the line of code u set the breakpoint at, u can hover over variables and if they're defined at that point it'll show u the contents
and if u run code in the console while its frozen at a breakpoint it'll run that code with all the variables in scope that ur frozen at
mossy marsh
yeah
trail ginkgo
I'm also curious if there's like a priority for the patches, like if my patch ch...
i think it'd be alphabetical
mossy marsh
alright
trail ginkgo
so my patch would just fail and my plugin wouldnt load
mossy marsh
oh i see
trail ginkgo
mostly its about being mindful about ur patches
mossy marsh
yeah
trail ginkgo
only patch thats necessary
for u, u just need to replace the code content before the code gets rendered
odd pelican
i am here
and now i shall need help for webpack
ok so using vendicated's discord reverse engineering guide (link: https://gist.github.com/Vendicated/dec16d3fd86f761558ce170d016ebc53) if you scroll all the way down, you see this thing
const webpackRequire = webpackChunkdiscord_app.push([
[Symbol()], // Make sure our "chunk" id is unique
{}, // No modules,
require => require // the return value of this function will be the return value of push
]);```
so now he also later says to get the cache you do `webpackRequire.c`
but when I try that it just returns `undefined`
odd pelican
ok do webpackRequire.c
odd pelican
just do webpackRequire.c and you will see what happens
austere gulch
odd pelican
its becuase Im using replugged?
austere gulch
replugged messes with the webpack chunk stuff
austere gulch
probably
odd pelican
grr
austere gulch
i havent actually looked but i'd assume so
anyways replugged and vencord both have our own ways of looking for stuff
which is shown in that guide
well the vencord method is shown at least
:p
odd pelican
if I were to make my own discord client mod, would I have to patch webpack (like vencord did)
austere gulch
you would yes
odd pelican
whats the reason for it tho
austere gulch
webpack is what loads the code and manages imports and stuff
you have to use it to get anything
its all bundled up with webpack
so you have to use webpack to get them back
odd pelican
oh
austere gulch
every bit of discord code is stored in that webpack chunk variable
so it'd make sense you have to mess with that variable to get discords code
xd
woven lion
(basically webpack chunks make it possible for mods to work in the first place)
odd pelican
oh
woven lion
(without them you'd have to jump through massive hoops to patch standard discord code)
amber condor
can anyone explain to me how i can run a simple piece of JS code after discord l...
as of 22-03-2023 10:49 UTC i am still too noob to understand it 🥺
chrome elbow
as of 22-03-2023 10:49 UTC i am still too noob to understand it 🥺
use console?
amber condor
use console?
well but how would i make that automatically tho, thats not possible via console right
chrome elbow
ah
torpid agate
well but how would i make that automatically tho, thats not possible via console...
what are you trying to add
amber condor
what are you trying to add
Well, discord is a bit of a noob. Because when someone sends an embed, it should color the border of the embed based on the platform (twitter=blue, instagram=pink, youtube=red, etc..), but it doesnt always do that for certain links. So i just wanted to "fix" that.
torpid agate
Well, discord is a bit of a noob. Because when someone sends an embed, it should...
so you are making a plug-in?
what language are you using?
covert nimbus
what language are you using?
plugins can only be written in JS/TS 💀
torpid agate
plugins can only be written in JS/TS 💀
ik
they are basically the same language but you can’t use them with the same application
covert nimbus
pretty sure you can use them interchangably, just that TS needs to be compiled to js (which you need to do anyway?)
torpid agate
pretty sure you can use them interchangably, just that TS needs to be compiled t...
if it is that simple why arent we using better dc plug-ins to make plugins for vencord
i just realized how rude that sounded
so i fixed it
woven lion
you are very confused
just because its the same language doesnt mean you can just drop a betterdiscord plugin in to vencord
torpid agate
i thought the whole point of type script is it had a different functions
they use the same syntax and other stuff
but typescript handles info differently
woven lion
that doesnt help with the betterdiscord/vencord compatibility
amber condor
so you are making a plug-in?
yes
amber condor
what language are you using?
JS 💀
TS is just JS but better
still "compiles" to JS tho
covert nimbus
i thought the whole point of type script is it had a different functions
typescript is just JavaScript but with types
torpid agate
that doesnt help with the betterdiscord/vencord compatibility
he said they were interchangeable
covert nimbus
yeah as in the languages
torpid agate
this is all confusing
covert nimbus
fuck now I'm wondering if I'm skilled enough to make bdcompat
woven lion
someone already made a layer i think
i dont know how mature it is
but they got zerespluginlib working on vencord afaik
torpid agate
honest to god i wish i had no friends rn i wanna learn to code but ik they are gonna try to get me to vc the instant i get started
woven lion
go for it xd
torpid agate
i will make bdcompat but better
bd as in better discord?
covert nimbus
bd as in better discord?
yeah
woven lion
bdfdb time
bdfvccl
covert nimbus
okay uhh im on laptop now and i have no idea what the BdApi has https://cdn.discordapp.com/emojis/1060919735560196147.webp?size=48&quality=lossless
time to do some investigation
tame nexus
If I need to add a new store to Vencord should I only do it for my plugin or add it and it types directly to Vencord itself?
dull magnet
Most sane rust code
it makes sense tbf
C code doing the same would look very similar
this is doing extremely hacky stuff 
no but you can opt out of cache with fetch
amber condor
idk how betterdiscord plugins are made (nor do i know vencord tbh lol), but it would be cool to have "subscriptions" that can be compiled into the source code.
for example:
function lowerAllMessages(ctx) {
ctx.message = ctx.message.lower;
}
subscribe(Events.ReceiveMessage, lowerAllMessages);
the function would just be inserted into the source i guess?
austere gulch
we already have flux subscriptions
amber condor
rust 🤤
austere gulch
FluxDispatcher.subscribe("EVENT_NAME", someHandler)
amber condor
do you have a small working example? I'd like to look into it a bit but starting from scratch is too confusing for me
amber condor
cool
i should really setup a TS environment or something because currently im just screwing around in console 🥴
ionic breach
okay maybe im crazy, but i can't get @import url("<file path>") to work in quickCss.css?
it works fine if i have the files uploaded to a github
but if they're in the same directory as the quickcss file they don't seem to work
grim hare
that is correct, you cannot import local files with vencord
odd pelican
fuck now I'm wondering if I'm skilled enough to make bdcompat
tbh i feel that Vencord's api has more tools then BdApi so I guess you could pull it off pretty fast
ok another webpack reverse engineering fail, now since i learned how to reverse engineer discord (sort of), i wanted to give it a go for monkeytype, so I decided to try this
monkeytype is at https://monkeytype.com
i expected require.c to work
as it worked for discord
Ok actually i think it was require.m instead
I did object.keys(require)
tribal helm
a
support for opening profile links
in the app
How do I do that
Instead of it going to the browser, I want it to just open the profile
torpid agate
its a experimental feature and theyll fix it later along the line
amber condor
ERR_PNPM_PATCH_NOT_APPLIED The following patches were not applied: eslint@8.28.0
Either remove them from "patchedDependencies" or update them to match packages in your dependencies.
getting this when trying to pnpm update
anyone know what im supposed to do
dull magnet
dont pnpm update?
dull magnet
pnpm i
amber condor
thanks
alot
wait so i just pnpm watch and then reload discord?
im prob missing something
trail ginkgo
wait so i just `pnpm watch` and then reload discord?
pnpm build --watch
and then yea refresh discord
amber condor
`pnpm build --watch`
somehow doesnt work for me
its just not appearing in my Plugins tab
amber condor
any errors in console?
in pnpm build --watch?
trail ginkgo
no in discord
amber condor
not anything i could find
chrome elbow
maybe patch failed to apply
there is no patch and i tested their file and it works fine
amber condor
no because my first build was like 20 minutes ago
trail ginkgo
eh i gotta work maybe if ur still having issues u can screenshare and i can try and see whats happending
dull magnet
you didnt pnpm inject
amber condor
so there was something else
thanks it works now
well the plugin loads but idk if my code actually logs to the console?
idk goodnight all
dull magnet
which si why authors empty rn
trail ginkgo
ya i swa
mossy marsh
what’s this for
cedar olive
nookies
dull magnet
?
cedar olive
eh nothing lol
dull magnet
27kb wtf
anyway lewi u can now fetch that file for plugins page
in fact lemme do that rn
Done! 
hollow tree
so I changed some lines of a plugin and did pnpm build which made dist folder and pnpm inject which opened the GUI again and it installed properly, now I wanna have my friend install the same thing, can I somehow share the dist folder and make him install this version
grim hare
that is not a very good idea, they wouldn't get any updates and eventually things would start to break because of it
hollow tree
that is not a very good idea, they wouldn't get any updates and eventually thing...
so how do I manage it then, so updates are received but this plugin also gets compiled properly
grim hare
what changes did you make that you want to share?
hollow tree
what changes did you make that you want to share?
I just added a new slash command just like /woke or /echo
it inserts emojis between spaces in text
just copied the command structure from above and made a new emojify function
{
name: "mock",
description: "mOcK PeOpLe",
options: [RequiredMessageOption],
execute: opts => ({
content: mock(findOption(opts, "message", ""))
}),
},
{
name: "emojify",
description: "Emojifies your messages 🤓",
options: [RequiredMessageOption],
execute: opts => ({
content: emojify(findOption(opts, "message", ""))
}),
},
in moreCommands plugin
grim hare
the official way to do it would be to see if you can get your new commands added into the full plugin list by making a pull request
then everyone would have them and your friend wouldn't need to do anything special
hollow tree
the official way to do it would be to see if you can get your new commands added...
well I don't feel like I have created anything here
might have to ask the dev of this plugin to add this probably🤔
grim hare
the not official and not really supported way to do it would be to have your friend follow the same steps you did and make the same edits to the file
hollow tree
yeah then they will also need to install node and stuff
grim hare
might have to ask the dev of this plugin to add this probably🤔
you could do that, yeah, the more commands plugin is kinda made for all those random small commands like that
hollow tree
🙃
@opal fern sorry for the ping but I wanted to know if this could be added to your plugin👀
opal fern
<@702973430449832038> sorry for the ping but I wanted to know if this could be a...
Yeah go ahead
hasty stag
how can i open a link externally from a plugin
hollow tree
Yeah go ahead
so I made these changes (in above messages) , to get random emojis from a list to your plugin would you be willing to add those as a feature in your plugin?
my emojify function (also requires an array of emoji names, not the smartest implementation)
function emojify(input: string): string {
return input.trim()
.replace(
/\s/g,
() =>
" :" +
emojis[Math.floor(emojis.length * Math.random())] +
": "
);
}
Aliucord had a similar plugin that had /clap command which would replace spaces to clap emoji 👏 , I have also modified that for myself as well
opal fern
so I made these changes (in above messages) , to get random emojis from a list t...
You can just make a PR lol
hollow tree
You can just make a PR lol
what's a PR?👀
bright ocean
what's a PR?👀
pull request
opal fern
It's not my code
It's yours
If I were to add it it would be under my name which I don't exactly want
hollow tree
I don't feel like I have done anything here just copied the structure and added a simple function
hollow tree
If I were to add it it would be under my name which I don't exactly want
I don't want the credit I just want the feature for me and my friend (who is not a programmer)