From b537f979c4399558fc81946f00870c08b4894b94 Mon Sep 17 00:00:00 2001 From: Jeroen Claassens Date: Sun, 11 Feb 2024 13:19:22 +0100 Subject: [PATCH] fix: properly code config functions --- README.md | 57 +++++++++++++++++--------- assets/readme-templates/CORE_NOTES.md | 41 ++++++++++++++++-- assets/readme-templates/REACT_NOTES.md | 49 +++++++++++++++++++--- packages/core/README.md | 57 +++++++++++++++++--------- packages/core/src/config.ts | 10 ++--- packages/core/src/util.ts | 3 +- packages/react/README.md | 55 +++++++++++++++++-------- packages/react/src/index.ts | 18 ++++++++ 8 files changed, 217 insertions(+), 73 deletions(-) diff --git a/README.md b/README.md index 12ba7f73..64a2478a 100644 --- 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 index d51e2720..447ca397 100644 --- 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 index 7e238cb6..63be3ad4 100644 --- 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 index 6830852e..2b1d5b7d 100644 --- 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 index 7f5416e7..6a3308bd 100644 --- a/packages/core/src/config.ts +++ b/packages/core/src/config.ts @@ -19,16 +19,16 @@ export const defaultDiscordAvatars: Omit = { 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 index 50ff439b..58ed8f15 100644 --- 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]; diff --git a/packages/react/README.md b/packages/react/README.md index 22212343..394b29a0 100644 --- a/packages/react/README.md +++ b/packages/react/README.md @@ -53,7 +53,6 @@ _React Bindings_ - [Live Demo App Directory](#live-demo-app-directory) - [Known limitations](#known-limitations) - [Notes](#notes) - - [TypeScript module augments](#typescript-module-augments) - [Avatar shortcuts](#avatar-shortcuts) - [Profile shortcuts](#profile-shortcuts) - [Theming](#theming) @@ -192,21 +191,6 @@ per React's own documentation. We very strongly recommend using Vite instead. ## Notes -### 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: - -```ts -import type { DiscordMessageOptions } from '@skyra/discord-components-core/dist/types/options'; - -declare global { - // eslint-disable-next-line no-var - var $discordMessage: DiscordMessageOptions | undefined; -} -``` - ### Avatar shortcuts The current avatar shortcut strings available are "blue" (default), "gray", @@ -223,7 +207,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 = { @@ -235,11 +220,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 = { @@ -260,6 +258,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 React code: ```tsx diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 21b823d5..4814a3ca 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -38,3 +38,21 @@ export const DiscordTime = createReactComponent('discord-time', ReactComponents. export const DiscordUnderlined = createReactComponent('discord-underlined', ReactComponents.DiscordUnderlined); /* IMPORTS END */ + +export type { + Avatars, + DiscordButtonProps, + DiscordEmbedProps, + DiscordMessageOptions, + DiscordMessageProps, + DiscordTimestamp, + Emoji, + LightTheme, + Profile +} from '@skyra/discord-components-core'; +export { getConfig, setConfig } from '@skyra/discord-components-core'; + +declare global { + // eslint-disable-next-line no-var + var $discordMessage: ReactComponents.DiscordMessageOptions | undefined; +}