{
36 | constructor() {
37 | // set width and height
38 | super(930, 280);
39 | // initialize props
40 | this.bootstrap({
41 | displayName: "",
42 | type: "welcome",
43 | avatar: "",
44 | message: "",
45 | });
46 | }
47 |
48 | setDisplayName(value: string) {
49 | this.options.set("displayName", value);
50 | return this;
51 | }
52 |
53 | setType(value: Props["type"]) {
54 | this.options.set("type", value);
55 | return this;
56 | }
57 |
58 | setAvatar(value: string) {
59 | this.options.set("avatar", value);
60 | return this;
61 | }
62 |
63 | setMessage(value: string) {
64 | this.options.set("message", value);
65 | return this;
66 | }
67 |
68 | // this is where you have to define output ui
69 | async render() {
70 | const { type, displayName, avatar, message } = this.options.getOptions();
71 |
72 | // make sure to use the loadImage helper function to load images, otherwise you may get errors
73 | const image = await loadImage(avatar);
74 |
75 | return (
76 |
77 |
78 |
})
82 |
83 |
84 | {type === "welcome" ? "Welcome" : "Goodbye"},{" "}
85 | {displayName}!
86 |
87 |
{message}
88 |
89 |
90 |
Hello, world!
;
10 | // ^^^^^^^^^^^^^^^^^^^^^^ JSX syntax
11 | ```
12 |
13 | Notice how we are not using strings to define the HTML elements. Instead, we are using a syntax that looks like HTML.
14 |
15 | ## But this is not a valid JavaScript syntax!
16 |
17 | You are right! JSX is not a valid JavaScript syntax. It needs to be transformed into a valid JavaScript syntax before it can be executed by the JavaScript engine. This is where the transpiler comes into play. The transpiler is a tool that converts magical stuff, including the JSX syntax into the equivalent JavaScript code. Some of the most popular transpilers for JSX are [Babel](https://babeljs.io/), [TypeScript](https://www.typescriptlang.org/), [SWC](https://swc.rs/), [esbuild](https://esbuild.github.io/), etc.
18 |
19 |
20 | If you are TypeScript user, you dont even need to add anything else to your
21 | project, just use the `@jsx` pragma and you are good to go.
22 |
23 |
24 | ## The JSX pragma
25 |
26 | The JSX pragma is a comment that tells the transpiler how to transform JSX into the equivalent JavaScript code. The pragma is used to define the function that will be called when the JSX syntax is encountered. The pragma is defined at the top of the file and is usually in the form of a comment.
27 |
28 | ```js
29 | /** @jsx JSX.createElement */
30 | /** @jsxFrag JSX.Fragment */
31 | ```
32 |
33 | The above pragma comment tells the transpiler to use the `JSX.createElement` function to transform the JSX syntax into the equivalent JavaScript code. The `JSX.Fragment` is used to wrap multiple elements in a single parent element. These functions are exported by `canvacord` as `JSX` namespace.
34 |
35 | ## TypeScript global JSX pragma
36 |
37 | You can also set the pragma globally in your project by adding the following to your `tsconfig.json` file:
38 |
39 |
40 |
41 | ```json tsconfig.json
42 | {
43 | "compilerOptions": {
44 | "jsx": "react", // Canvacord uses React-like JSX
45 | "jsxFactory": "JSX.createElement", // works as @jsx
46 | "jsxFragmentFactory": "JSX.Fragment" // works as @jsxFrag
47 | }
48 | }
49 | ```
50 |
51 |
52 |
53 | ## Don't want to/Can't use JSX?
54 |
55 | If you don't want to use JSX or can't use JSX in your project, you can still use Canvacord. Canvacord provides a way to create images without using JSX. You can use the `Builder` class to create images without using JSX. The `Builder` class provides a way to create images using a more traditional approach.
56 |
57 | ### Element object
58 |
59 | You can return element object from the render method as an alternative approach to JSX.
60 |
61 | ```js
62 | async render() {
63 | return {
64 | type: 'h1',
65 | props: {
66 | children: 'hello, world',
67 | },
68 | };
69 | }
70 | ```
71 |
72 | ### Calling JSX function
73 |
74 | You can also call the JSX function directly to create elements.
75 |
76 | ```js
77 | async render() {
78 | return JSX.createElement('h1', {}, 'hello, world');
79 | }
80 | ```
81 |
82 | ## Using JSX with Canvacord
83 |
84 |
85 |
86 |
87 |
88 |
89 | ```tsx TypeScript
90 | /** @jsx JSX.createElement */
91 | /** @jsxFrag JSX.Fragment */
92 |
93 | import { JSX } from "canvacord";
94 |
95 | const message = Hello, world!
;
96 | ```
97 |
98 | ```jsx ES Modules
99 | /** @jsx JSX.createElement */
100 | /** @jsxFrag JSX.Fragment */
101 |
102 | import { JSX } from "canvacord";
103 |
104 | const message = Hello, world!
;
105 | ```
106 |
107 | ```jsx CommonJS
108 | /** @jsx JSX.createElement */
109 | /** @jsxFrag JSX.Fragment */
110 |
111 | const { JSX } = require("canvacord");
112 |
113 | const message = Hello, world!
;
114 | ```
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 | ```tsx TypeScript
123 | /** @jsx JSX.createElement */
124 | /** @jsxFrag JSX.Fragment */
125 |
126 | import { JSX } from "canvacord";
127 |
128 | const message = Hello, world!
;
129 | ```
130 |
131 | ```jsx ES Modules
132 | /** @jsx JSX.createElement */
133 | /** @jsxFrag JSX.Fragment */
134 |
135 | import { JSX } from "canvacord";
136 |
137 | const message = Hello, world!
;
138 | ```
139 |
140 | ```jsx CommonJS
141 | /** @jsx JSX.createElement */
142 | /** @jsxFrag JSX.Fragment */
143 |
144 | const { JSX } = require("canvacord");
145 |
146 | const message = Hello, world!
;
147 | ```
148 |
149 |
150 |
151 |
152 |
153 |
--------------------------------------------------------------------------------
/apps/docs/src/components/docs/entities/EntitySymbol.tsx:
--------------------------------------------------------------------------------
1 | import { cn, Heading } from "@edge-ui/react";
2 | import { SquareCode } from "lucide-react";
3 | import Link from "next/link";
4 | import { useRouter } from "next/router";
5 | import { useMemo } from "react";
6 | import {
7 | VscSymbolClass,
8 | VscSymbolEnum,
9 | VscSymbolInterface,
10 | VscSymbolMethod,
11 | VscSymbolProperty,
12 | VscSymbolVariable,
13 | } from "react-icons/vsc";
14 |
15 | type EntityProps = React.PropsWithChildren<{
16 | type: "class" | "function" | "interface" | "property" | "variable" | "enum";
17 | id?: string;
18 | link?: boolean;
19 | source?: string;
20 | }>;
21 |
22 | export function EntitySymbol({
23 | type,
24 | children,
25 | id,
26 | link,
27 | source,
28 | }: EntityProps) {
29 | const router = useRouter();
30 | let c: React.ReactNode;
31 |
32 | const href = useMemo(() => {
33 | const entries = Object.entries(router.query).filter(
34 | (f) => !["scrollTo", "target", "package", "type"].includes(f[0])
35 | );
36 | const href = `${router.asPath.split("?")[0]}${entries
37 | .map((m, i) => `${i === 0 ? "?" : ""}${m[0]}=${m[1]}`)
38 | .join("&")}${entries.length ? "&" : "?"}scrollTo=${id}`;
39 |
40 | return href;
41 | }, []);
42 |
43 | const updateLink = () => {
44 | router.push(href);
45 | };
46 |
47 | switch (type) {
48 | case "class":
49 | c = (
50 |
57 |
58 | {children}
59 |
60 | );
61 | break;
62 | case "property":
63 | c = (
64 |
71 |
72 | {children}
73 |
74 | );
75 | break;
76 | case "function":
77 | c = (
78 |
85 |
86 | {children}
87 |
88 | );
89 | break;
90 | case "interface":
91 | c = (
92 |
99 |
100 | {children}
101 |
102 | );
103 | break;
104 | case "variable":
105 | c = (
106 |
113 |
114 | {children}
115 |
116 | );
117 | break;
118 | case "enum":
119 | c = (
120 |
127 |
128 | {children}
129 |
130 | );
131 | break;
132 | default:
133 | c = (
134 |
139 | {children}
140 |
141 | );
142 | break;
143 | }
144 | if (!link)
145 | return !source ? (
146 | c
147 | ) : (
148 |
149 | {c}{" "}
150 |
151 |
152 |
153 |
154 | );
155 |
156 | return (
157 | <>
158 | {!source ? (
159 | c
160 | ) : (
161 |
162 | {c}{" "}
163 |
164 |
165 |
166 |
167 | )}
168 |
169 | );
170 | }
171 |
--------------------------------------------------------------------------------
/apps/docs/src/components/cmdk/CommandDialog.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | import { DialogProps } from '@radix-ui/react-dialog';
3 | import { Command as CommandPrimitive } from 'cmdk';
4 | import { Search } from 'lucide-react';
5 | import { cn } from '@edge-ui/react';
6 | import { Dialog, DialogContent } from '@edge-ui/react';
7 |
8 | const Command = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => (
9 |
10 | ));
11 | Command.displayName = CommandPrimitive.displayName;
12 |
13 | interface CommandDialogProps extends DialogProps {
14 | shouldFilter?: boolean;
15 | }
16 |
17 | const CommandDialog = ({ children, shouldFilter, ...props }: CommandDialogProps) => {
18 | return (
19 |
29 | );
30 | };
31 |
32 | const CommandInput = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => (
33 |
34 |
35 |
40 |
41 | ));
42 |
43 | CommandInput.displayName = CommandPrimitive.Input.displayName;
44 |
45 | const CommandList = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => (
46 |
47 | ));
48 |
49 | CommandList.displayName = CommandPrimitive.List.displayName;
50 |
51 | const CommandEmpty = React.forwardRef, React.ComponentPropsWithoutRef>((props, ref) => (
52 |
53 | ));
54 |
55 | CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
56 |
57 | const CommandGroup = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => (
58 |
66 | ));
67 |
68 | CommandGroup.displayName = CommandPrimitive.Group.displayName;
69 |
70 | const CommandSeparator = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => (
71 |
72 | ));
73 | CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
74 |
75 | const CommandItem = React.forwardRef, React.ComponentPropsWithoutRef>(({ className, ...props }, ref) => (
76 |
84 | ));
85 |
86 | CommandItem.displayName = CommandPrimitive.Item.displayName;
87 |
88 | const CommandShortcut = ({ className, ...props }: React.HTMLAttributes) => {
89 | return ;
90 | };
91 | CommandShortcut.displayName = 'CommandShortcut';
92 |
93 | export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator };
94 |
--------------------------------------------------------------------------------
/packages/canvacord/src/canvas/ImageFilterer.ts:
--------------------------------------------------------------------------------
1 | import { Canvas, Image, SKRSContext2D } from "@napi-rs/canvas";
2 | import { ImageSource } from "../helpers";
3 | import { CanvasHelper } from "./CanvasHelper";
4 | import { createCanvasImage } from "./utils";
5 |
6 | export class ImageFilterer extends CanvasHelper {
7 | #filters = [] as string[];
8 |
9 | /**
10 | * Draws the image to the canvas.
11 | * @param image The image to draw
12 | * @param x The x position to draw the image
13 | * @param y The y position to draw the image
14 | * @param [width] The width of the image
15 | * @param [height] The height of the image
16 | */
17 | public drawImage(image: ImageSource, x = 0, y = 0, width = this.width, height = this.height) {
18 | this.steps.push(async (ctx) => {
19 | const img = await createCanvasImage(image);
20 | ctx.drawImage(img, x, y, width, height);
21 | });
22 |
23 | return this;
24 | }
25 |
26 | /**
27 | * Applies invert filter to the image.
28 | * @param value The filter intensity
29 | */
30 | public invert(value: number) {
31 | if (typeof value !== "number") throw new TypeError(`Expected "value" to be a number, received ${typeof value}`);
32 | this.#filters.push(`invert(${value}%)`);
33 | return this;
34 | }
35 |
36 | /**
37 | * Applies grayscale filter to the image.
38 | * @param value The filter intensity
39 | */
40 | public grayscale(value = 100) {
41 | this.#filters.push(`grayscale(${value}%)`);
42 | return this;
43 | }
44 |
45 | /**
46 | * Applies sepia filter to the image.
47 | * @param value The filter intensity
48 | */
49 | public sepia(value: number) {
50 | if (typeof value !== "number") throw new TypeError(`Expected "value" to be a number, received ${typeof value}`);
51 | this.#filters.push(`sepia(${value}%)`);
52 | return this;
53 | }
54 |
55 | /**
56 | * Applies opacity filter to the image.
57 | * @param value The filter intensity
58 | */
59 | public opacity(value: number) {
60 | if (typeof value !== "number") throw new TypeError(`Expected "value" to be a number, received ${typeof value}`);
61 | this.#filters.push(`opacity(${value}%)`);
62 | return this;
63 | }
64 |
65 | /**
66 | * Applies saturate filter to the image.
67 | * @param value The filter intensity
68 | */
69 | public saturate(value: number) {
70 | if (typeof value !== "number") throw new TypeError(`Expected "value" to be a number, received ${typeof value}`);
71 | this.#filters.push(`saturate(${value}%)`);
72 | return this;
73 | }
74 |
75 | /**
76 | * Applies hue-rotate filter to the image.
77 | * @param value The degrees to rotate
78 | */
79 | public hueRotate(value: number) {
80 | if (typeof value !== "number") throw new TypeError(`Expected "value" to be a number, received ${typeof value}`);
81 | this.#filters.push(`hue-rotate(${value}deg)`);
82 | return this;
83 | }
84 |
85 | /**
86 | * Applies contrast filter to the image.
87 | * @param value The filter intensity
88 | */
89 | public contrast(value: number) {
90 | if (typeof value !== "number") throw new TypeError(`Expected "value" to be a number, received ${typeof value}`);
91 | this.#filters.push(`contrast(${value}%)`);
92 | return this;
93 | }
94 |
95 | /**
96 | * Applies brightness filter to the image.
97 | * @param value The filter intensity
98 | */
99 | public brightness(value: number) {
100 | if (typeof value !== "number") throw new TypeError(`Expected "value" to be a number, received ${typeof value}`);
101 | this.#filters.push(`brightness(${value}%)`);
102 | return this;
103 | }
104 |
105 | /**
106 | * Applies blur filter to the image.
107 | * @param value The filter intensity
108 | */
109 | public blur(value: number) {
110 | if (typeof value !== "number") throw new TypeError(`Expected "value" to be a number, received ${typeof value}`);
111 | this.#filters.push(`blur(${value}px)`);
112 | return this;
113 | }
114 |
115 | /**
116 | * Applies drop-shadow filter to the image.
117 | * @param config The drop-shadow config
118 | * @param config.x The x offset of the shadow
119 | * @param config.y The y offset of the shadow
120 | * @param config.radius The blur radius of the shadow
121 | * @param config.color The color of the shadow
122 | */
123 | public dropShadow(config: DropShadowConfig) {
124 | const { x, y, radius, color } = config;
125 |
126 | this.#filters.push(`drop-shadow(${[x, y, `${radius}px`, color].join(" ")})`);
127 | return this;
128 | }
129 |
130 | /**
131 | * Renders the applied filters to the canvas.
132 | * @param canvas The canvas to render the filters to
133 | * @param ctx The canvas context
134 | */
135 | public async process(canvas: Canvas, ctx: SKRSContext2D) {
136 | if (this.#filters.length) ctx.filter = this.#filters.join(" ");
137 |
138 | while (this.steps.length > 0) {
139 | // biome-ignore lint: non-null assertion
140 | await this.steps.shift()!(ctx);
141 | }
142 | }
143 | }
144 |
145 | export interface DropShadowConfig {
146 | x: number;
147 | y: number;
148 | radius: number;
149 | color: string;
150 | }
151 |
--------------------------------------------------------------------------------
/packages/canvacord/test/jsxTest.tsx:
--------------------------------------------------------------------------------
1 | import { JSX, Builder, StyleSheet, loadImage } from "../src/index";
2 | import { writeFileSync } from "fs";
3 | import { manropeBold } from "./common";
4 | import path from "path";
5 |
6 | const colors = {
7 | LightGray: "#A0A1A3",
8 | Gray: "#474B4E",
9 | DarkGray: "#272A2D",
10 | White: "#FFFFFF",
11 | Green: "#22A559",
12 | Yellow: "#F0B332",
13 | Red: "#F24043",
14 | Blue: "#8ACDFF",
15 | } as const;
16 |
17 | function RankCard({
18 | avatar,
19 | level,
20 | xp,
21 | requiredXP,
22 | rank,
23 | displayName,
24 | username,
25 | status,
26 | hidePercentage,
27 | }: {
28 | avatar: string;
29 | level: number;
30 | xp: number;
31 | requiredXP: number;
32 | rank: number;
33 | displayName?: string;
34 | username?: string;
35 | status: "online" | "idle" | "dnd" | "invisible";
36 | hidePercentage?: boolean;
37 | }) {
38 | if (!displayName && !username) {
39 | throw new Error(
40 | "A displayName or username is required when instantiating RankCard."
41 | );
42 | }
43 |
44 | const fixed = (v: number) => {
45 | const formatter = new Intl.NumberFormat("en-US", { notation: "compact" });
46 | return formatter.format(v);
47 | };
48 |
49 | const percentage = Math.floor((xp / requiredXP) * 100);
50 |
51 | if (displayName && displayName.length > 30) {
52 | displayName = displayName.substring(0, 30) + "...";
53 | }
54 |
55 | if (username && username.length > 30) {
56 | username = username.substring(0, 30) + "...";
57 | }
58 |
59 | const statusColor =
60 | status === "online"
61 | ? colors.Green
62 | : status === "idle"
63 | ? colors.Yellow
64 | : status === "dnd"
65 | ? colors.Red
66 | : colors.Gray;
67 |
68 | return (
69 |
70 |
71 |
76 |
79 |
80 |
81 |
82 |
83 |
84 | {displayName && (
85 |
90 | {displayName}
91 |
92 | )}
93 | {username && (
94 |
101 | @{username}
102 |
103 | )}
104 |
105 |
106 | {!hidePercentage && (
107 |
{percentage}%
108 | )}
109 |
110 |
115 |
116 |
117 |
118 | LEVEL:
119 | {level}
120 |
121 |
122 |
123 | XP:
124 |
125 | {fixed(xp)}/{fixed(requiredXP)}
126 |
127 |
128 |
129 |
130 | RANK:
131 | #{rank}
132 |
133 |
134 |
135 |