fix: properly code config functions

skyra-project · Feb 11, 2024 · b537f97 · b537f97
1 parent a4d3be7
commit b537f97
Show file tree

Hide file tree

Showing 8 changed files with 217 additions and 73 deletions.
diff --git a/README.md b/README.md
@@ -67,7 +67,6 @@ _React Bindings_
         - [Important Notes](#important-notes-1)
         - [Live Demo](#live-demo-5)
   - [Notes](#notes)
-    - [TypeScript module augments](#typescript-module-augments)
     - [Avatar shortcuts](#avatar-shortcuts)
     - [Profile shortcuts](#profile-shortcuts)
     - [Theming](#theming)
@@ -347,23 +346,6 @@ that the browser can support. The live demo below uses Vite.
 
 ## Notes
 
-### TypeScript module augments
-
-This module uses a custom object on the browser `window` for configuration.
-Under normal circumstances by simply importing the package (with
-`import @skyra/discord-components-core`) the module augmentations should also be
-loaded. If for whatever reason this does not happen, then you can define them
-manually yourself. You can do so with the following code snippet:
-
-```ts
-import type { DiscordMessageOptions } from '@skyra/discord-components-core';
-
-declare global {
-  // eslint-disable-next-line no-var
-  var $discordMessage: DiscordMessageOptions | undefined;
-}
-```
-
 ### Avatar shortcuts
 
 The current avatar shortcut strings available are "blue" (default), "gray",
@@ -380,7 +362,8 @@ The current avatar shortcut strings available are "blue" (default), "gray",
 ```
 
 If you want to add to or override the shortcuts, you can set them via
-`window.$discordMessage.avatars`.
+`window.$discordMessage.avatars` or by using the `setConfig` function
+(`import { setConfig } from '@skyra/discord-components-core'`).
 
 ```ts
 window.$discordMessage = {
@@ -392,11 +375,24 @@ window.$discordMessage = {
 };
 ```
 
+```ts
+import { setConfig } from '@skyra/discord-components-core';
+
+setConfig({
+  avatars: {
+    default: 'blue',
+    skyra: 'https://github.com/NM-EEA-Y.png',
+    djs: require('./assets/discord-avatar-djs.png') // You can use require syntax as well
+  }
+});
+```
+
 ### Profile shortcuts
 
 Sometimes you'll want to use the same message data across multiple messages. You
 can do so by providing an object of profiles in
-`window.$discordMessage.profiles`.
+`window.$discordMessage.profiles` or by using the `setConfig` function
+(`import { setConfig } from '@skyra/discord-components-core'`).
 
 ```ts
 window.$discordMessage = {
@@ -417,6 +413,27 @@ window.$discordMessage = {
 };
 ```
 
+```ts
+import { setConfig } from '@skyra/discord-components-core';
+
+setConfig({
+  profiles: {
+    skyra: {
+      author: 'Skyra',
+      avatar: 'https://github.com/NM-EEA-Y.png',
+      bot: true,
+      verified: true,
+      roleColor: '#1e88e5'
+    },
+    favna: {
+      author: 'Favna',
+      avatar: 'https://github.com/favna.png',
+      roleColor: '#ff0000'
+    }
+  }
+});
+```
+
 And then in your code:
 
 ```tsx

diff --git a/assets/readme-templates/CORE_NOTES.md b/assets/readme-templates/CORE_NOTES.md
@@ -4,7 +4,7 @@
 
 ### TypeScript module augments
 
-This module uses a custom object on the browser `window` for configuration.
+This library uses a custom object on the browser `window` for configuration.
 Under normal circumstances by simply importing the package (with
 `import @skyra/discord-components-core`) the module augmentations should also be
 loaded. If for whatever reason this does not happen, then you can define them
@@ -35,7 +35,8 @@ The current avatar shortcut strings available are "blue" (default), "gray",
 ```
 
 If you want to add to or override the shortcuts, you can set them via
-`window.$discordMessage.avatars`.
+`window.$discordMessage.avatars` or by using the `setConfig` function
+(`import { setConfig } from '@skyra/discord-components-core'`).
 
 ```ts
 window.$discordMessage = {
@@ -47,11 +48,24 @@ window.$discordMessage = {
 };
 ```
 
+```ts
+import { setConfig } from '@skyra/discord-components-core';
+
+setConfig({
+  avatars: {
+    default: 'blue',
+    skyra: 'https://github.com/NM-EEA-Y.png',
+    djs: require('./assets/discord-avatar-djs.png') // You can use require syntax as well
+  }
+});
+```
+
 ### Profile shortcuts
 
 Sometimes you'll want to use the same message data across multiple messages. You
 can do so by providing an object of profiles in
-`window.$discordMessage.profiles`.
+`window.$discordMessage.profiles` or by using the `setConfig` function
+(`import { setConfig } from '@skyra/discord-components-core'`).
 
 ```ts
 window.$discordMessage = {
@@ -72,6 +86,27 @@ window.$discordMessage = {
 };
 ```
 
+```ts
+import { setConfig } from '@skyra/discord-components-core';
+
+setConfig({
+  profiles: {
+    skyra: {
+      author: 'Skyra',
+      avatar: 'https://github.com/NM-EEA-Y.png',
+      bot: true,
+      verified: true,
+      roleColor: '#1e88e5'
+    },
+    favna: {
+      author: 'Favna',
+      avatar: 'https://github.com/favna.png',
+      roleColor: '#ff0000'
+    }
+  }
+});
+```
+
 And then in your code:
 
 ```tsx

diff --git a/assets/readme-templates/REACT_NOTES.md b/assets/readme-templates/REACT_NOTES.md
@@ -4,12 +4,14 @@
 
 ### TypeScript module augments
 
-This module uses a custom object on the browser `window` for configuration. In
-order to this you will need to include the following snippet in your source code
-when working in TypeScript:
+This library uses a custom object on the browser `window` for configuration.
+Under normal circumstances by simply importing the package (with
+`import @skyra/discord-components-react`) the module augmentations should also
+be loaded. If for whatever reason this does not happen, then you can define them
+manually yourself. You can do so with the following code snippet:
 
 ```ts
-import type { DiscordMessageOptions } from '@skyra/discord-components-core/dist/types/options';
+import type { DiscordMessageOptions } from '@skyra/discord-components-react';
 
 declare global {
   // eslint-disable-next-line no-var
@@ -33,7 +35,8 @@ The current avatar shortcut strings available are "blue" (default), "gray",
 ```
 
 If you want to add to or override the shortcuts, you can set them via
-`window.$discordMessage.avatars`.
+`window.$discordMessage.avatars` or by using the `setConfig` function
+(`import { setConfig } from '@skyra/discord-components-react'`).
 
 ```ts
 window.$discordMessage = {
@@ -45,11 +48,24 @@ window.$discordMessage = {
 };
 ```
 
+```ts
+import { setConfig } from '@skyra/discord-components-react';
+
+setConfig({
+  avatars: {
+    default: 'blue',
+    skyra: 'https://github.com/NM-EEA-Y.png',
+    djs: require('./assets/discord-avatar-djs.png') // You can use require syntax as well
+  }
+});
+```
+
 ### Profile shortcuts
 
 Sometimes you'll want to use the same message data across multiple messages. You
 can do so by providing an object of profiles in
-`window.$discordMessage.profiles`.
+`window.$discordMessage.profiles` or by using the `setConfig` function
+(`import { setConfig } from '@skyra/discord-components-react'`).
 
 ```ts
 window.$discordMessage = {
@@ -70,6 +86,27 @@ window.$discordMessage = {
 };
 ```
 
+```ts
+import { setConfig } from '@skyra/discord-components-react';
+
+setConfig({
+  profiles: {
+    skyra: {
+      author: 'Skyra',
+      avatar: 'https://github.com/NM-EEA-Y.png',
+      bot: true,
+      verified: true,
+      roleColor: '#1e88e5'
+    },
+    favna: {
+      author: 'Favna',
+      avatar: 'https://github.com/favna.png',
+      roleColor: '#ff0000'
+    }
+  }
+});
+```
+
 And then in your React code:
 
 ```tsx

diff --git a/packages/core/README.md b/packages/core/README.md
@@ -68,7 +68,6 @@ _React Bindings_
         - [Important Notes](#important-notes-1)
         - [Live Demo](#live-demo-5)
   - [Notes](#notes)
-    - [TypeScript module augments](#typescript-module-augments)
     - [Avatar shortcuts](#avatar-shortcuts)
     - [Profile shortcuts](#profile-shortcuts)
     - [Theming](#theming)
@@ -355,23 +354,6 @@ that the browser can support. The live demo below uses Vite.
 
 ## Notes
 
-### TypeScript module augments
-
-This module uses a custom object on the browser `window` for configuration.
-Under normal circumstances by simply importing the package (with
-`import @skyra/discord-components-core`) the module augmentations should also be
-loaded. If for whatever reason this does not happen, then you can define them
-manually yourself. You can do so with the following code snippet:
-
-```ts
-import type { DiscordMessageOptions } from '@skyra/discord-components-core';
-
-declare global {
-  // eslint-disable-next-line no-var
-  var $discordMessage: DiscordMessageOptions | undefined;
-}
-```
-
 ### Avatar shortcuts
 
 The current avatar shortcut strings available are "blue" (default), "gray",
@@ -388,7 +370,8 @@ The current avatar shortcut strings available are "blue" (default), "gray",
 ```
 
 If you want to add to or override the shortcuts, you can set them via
-`window.$discordMessage.avatars`.
+`window.$discordMessage.avatars` or by using the `setConfig` function
+(`import { setConfig } from '@skyra/discord-components-core'`).
 
 ```ts
 window.$discordMessage = {
@@ -400,11 +383,24 @@ window.$discordMessage = {
 };
 ```
 
+```ts
+import { setConfig } from '@skyra/discord-components-core';
+
+setConfig({
+  avatars: {
+    default: 'blue',
+    skyra: 'https://github.com/NM-EEA-Y.png',
+    djs: require('./assets/discord-avatar-djs.png') // You can use require syntax as well
+  }
+});
+```
+
 ### Profile shortcuts
 
 Sometimes you'll want to use the same message data across multiple messages. You
 can do so by providing an object of profiles in
-`window.$discordMessage.profiles`.
+`window.$discordMessage.profiles` or by using the `setConfig` function
+(`import { setConfig } from '@skyra/discord-components-core'`).
 
 ```ts
 window.$discordMessage = {
@@ -425,6 +421,27 @@ window.$discordMessage = {
 };
 ```
 
+```ts
+import { setConfig } from '@skyra/discord-components-core';
+
+setConfig({
+  profiles: {
+    skyra: {
+      author: 'Skyra',
+      avatar: 'https://github.com/NM-EEA-Y.png',
+      bot: true,
+      verified: true,
+      roleColor: '#1e88e5'
+    },
+    favna: {
+      author: 'Favna',
+      avatar: 'https://github.com/favna.png',
+      roleColor: '#ff0000'
+    }
+  }
+});
+```
+
 And then in your code:
 
 ```tsx

diff --git a/packages/core/src/config.ts b/packages/core/src/config.ts
@@ -19,16 +19,16 @@ export const defaultDiscordAvatars: Omit<Avatars, 'default'> = {
 	pink: 'https://cdn.discordapp.com/embed/avatars/5.png'
 };
 
-const globalAvatars: Avatars = globalThis.$discordMessage?.avatars ?? ({} as Avatars);
+const globalAvatars: Avatars = getConfig().avatars ?? ({} as Avatars);
 
 export const avatars: Avatars = Object.assign(defaultDiscordAvatars, globalAvatars, {
 	default: defaultDiscordAvatars[globalAvatars.default] ?? globalAvatars.default ?? defaultDiscordAvatars.blue
 });
 
-export const profiles: { [key: string]: Profile } = globalThis.$discordMessage?.profiles ?? {};
+export const profiles: { [key: string]: Profile } = getConfig().profiles ?? {};
 
-export const defaultTheme: string = globalThis.$discordMessage?.defaultTheme === 'light' ? 'light' : 'dark';
+export const defaultTheme: string = getConfig().defaultTheme === 'light' ? 'light' : 'dark';
 
-export const defaultMode: string = globalThis.$discordMessage?.defaultMode === 'compact' ? 'compact' : 'cozy';
+export const defaultMode: string = getConfig().defaultMode === 'compact' ? 'compact' : 'cozy';
 
-export const defaultBackground: string = globalThis.$discordMessage?.defaultBackground === 'none' ? 'none' : 'discord';
+export const defaultBackground: string = getConfig().defaultBackground === 'none' ? 'none' : 'discord';
diff --git a/packages/core/src/util.ts b/packages/core/src/util.ts
@@ -1,3 +1,4 @@
+import { getConfig } from './config.js';
 import type { Emoji, DiscordTimestamp } from './types.js';
 
 const intlDateFormat = new Intl.DateTimeFormat('en-US', { day: '2-digit', month: '2-digit', year: 'numeric' });
@@ -29,4 +30,4 @@ export const validateImageExtension = (url: string) => {
 	if (!IMAGE_EXTENSION.test(url)) throw new Error(`The url of an image for discord-attachment should match the regex ${IMAGE_EXTENSION}`);
 };
 
-export const getGlobalEmojiUrl = (emojiName: string): Emoji | undefined => window.$discordMessage?.emojis?.[emojiName];
+export const getGlobalEmojiUrl = (emojiName: string): Emoji | undefined => getConfig().emojis?.[emojiName];