Skip to content

Commit 117bb80

Browse files
load1n9load1n9
committed
chore: update docs
1 parent df8276a commit 117bb80

File tree

6 files changed

+763
-17
lines changed

6 files changed

+763
-17
lines changed

‎static/content/docs/api/canvas.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,53 @@ const ctx = canvas.getContext("2d");
5959

6060
The context provides all drawing methods and properties.
6161

62+
### Coordinate Transformations
63+
64+
The Canvas API provides transformation methods to manipulate the coordinate system:
65+
66+
```typescript
67+
// Scale the context
68+
ctx.scale(scaleX: number, scaleY: number): void
69+
70+
// Translate the context
71+
ctx.translate(x: number, y: number): void
72+
73+
// Apply a transformation matrix
74+
ctx.transform(a: number, b: number, c: number, d: number, e: number, f: number): void
75+
76+
// Set the transformation matrix (replaces current transform)
77+
ctx.setTransform(a: number, b: number, c: number, d: number, e: number, f: number): void
78+
79+
// Reset to identity matrix
80+
ctx.resetTransform(): void
81+
82+
// Get current transformation matrix
83+
ctx.getTransform(): DOMMatrix
84+
```
85+
86+
**Example - Using transformations:**
87+
88+
```typescript
89+
const canvas = new OffscreenCanvas(400, 400);
90+
const ctx = canvas.getContext("2d");
91+
92+
// Save the original state
93+
ctx.save();
94+
95+
// Move to center and scale
96+
ctx.translate(200, 200);
97+
ctx.scale(2, 2);
98+
99+
// Draw a rectangle (will be transformed)
100+
ctx.fillRect(-25, -25, 50, 50);
101+
102+
// Restore original state
103+
ctx.restore();
104+
105+
// Reset transformations completely
106+
ctx.resetTransform();
107+
```
108+
62109
### Basic Shapes
63110

64111
#### Rectangles

‎static/content/docs/api/crypto.md‎

Lines changed: 31 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -71,29 +71,34 @@ Generates a digest of the given data using the specified algorithm.
7171

7272
- `algorithm` - The hash algorithm to use (e.g., "SHA-1", "SHA-256", "SHA-384",
7373
"SHA-512")
74-
- `data` - The data to hash (Uint8Array, ArrayBuffer, or other binary data)
74+
- `data` - The data to hash (Uint8Array, ArrayBuffer, TypedArray, or DataView)
7575

76-
**Returns:** `Promise<string>` - A promise that resolves to the hex-encoded hash
77-
78-
**Note:** The current implementation returns a hex string instead of an
79-
ArrayBuffer for convenience. This is non-standard behavior that may change in
80-
future versions.
76+
**Returns:** `Promise<ArrayBuffer>` - A promise that resolves to the hash as an ArrayBuffer
8177

8278
**Example:**
8379

8480
```typescript
8581
const encoder = new TextEncoder();
8682
const data = encoder.encode("Hello, World!");
8783

88-
crypto.subtle.digest("SHA-256", data)
89-
.then((hash) => {
90-
console.log("SHA-256 hash:", hash);
91-
// Output: SHA-256 hash: dffd6021bb2bd5b0af676290809ec3a53191dd81c7f70a4b28688a362182986f
92-
});
84+
const hashBuffer = await crypto.subtle.digest("SHA-256", data);
85+
86+
// Convert to hex string for display
87+
const hashArray = new Uint8Array(hashBuffer);
88+
const hashHex = Array.from(hashArray)
89+
.map(b => b.toString(16).padStart(2, '0'))
90+
.join('');
91+
92+
console.log("SHA-256 hash:", hashHex);
93+
// Output: SHA-256 hash: dffd6021bb2bd5b0af676290809ec3a53191dd81c7f70a4b28688a362182986f
94+
95+
// Working with ArrayBuffer directly
96+
const buffer = new ArrayBuffer(16);
97+
const view = new Uint8Array(buffer);
98+
view.set([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]);
9399

94-
// Using async/await
95-
const hash = await crypto.subtle.digest("SHA-256", data);
96-
console.log("Hash:", hash);
100+
const hash = await crypto.subtle.digest("SHA-512", buffer);
101+
console.log("Hash from ArrayBuffer:", hash);
97102
```
98103

99104
### Supported Hash Algorithms
@@ -136,7 +141,13 @@ const sessionId = crypto.randomUUID();
136141
async function hashPassword(password: string): Promise<string> {
137142
const encoder = new TextEncoder();
138143
const data = encoder.encode(password);
139-
return await crypto.subtle.digest("SHA-256", data);
144+
const hashBuffer = await crypto.subtle.digest("SHA-256", data);
145+
146+
// Convert ArrayBuffer to hex string
147+
const hashArray = new Uint8Array(hashBuffer);
148+
return Array.from(hashArray)
149+
.map(b => b.toString(16).padStart(2, '0'))
150+
.join('');
140151
}
141152

142153
const hashedPassword = await hashPassword("mySecretPassword");
@@ -150,7 +161,11 @@ async function verifyFileIntegrity(
150161
fileData: Uint8Array,
151162
expectedHash: string,
152163
): Promise<boolean> {
153-
const actualHash = await crypto.subtle.digest("SHA-256", fileData);
164+
const hashBuffer = await crypto.subtle.digest("SHA-256", fileData);
165+
const hashArray = new Uint8Array(hashBuffer);
166+
const actualHash = Array.from(hashArray)
167+
.map(b => b.toString(16).padStart(2, '0'))
168+
.join('');
154169
return actualHash === expectedHash;
155170
}
156171

‎static/content/docs/api/file.md‎

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ The File API in Andromeda allows you to:
1919
- Handle file metadata (name, size, type, modification time)
2020
- Work with Blob objects for binary data
2121
- Process files in a standardized way
22+
- Handle FormData for form submissions and multipart data
2223

2324
## Basic Usage
2425

@@ -730,6 +731,207 @@ function isValidFileType(file: File, allowedTypes: string[]): boolean {
730731
}
731732
```
732733
734+
## FormData API
735+
736+
The FormData interface provides a way to construct key/value pairs representing form fields and their values for form submissions and multipart data handling.
737+
738+
### Creating FormData
739+
740+
```typescript
741+
// Create an empty FormData
742+
const formData = new FormData();
743+
744+
// Append different types of data
745+
formData.append("username", "john_doe");
746+
formData.append("email", "john@example.com");
747+
748+
// Append a file
749+
const file = new File(["file content"], "document.txt", { type: "text/plain" });
750+
formData.append("document", file);
751+
752+
// Append a Blob
753+
const blob = new Blob(["binary data"], { type: "application/octet-stream" });
754+
formData.append("data", blob, "data.bin");
755+
```
756+
757+
### FormData Methods
758+
759+
#### `append(name, value, filename?)`
760+
761+
Appends a new value to an existing key, or adds the key/value pair if it doesn't exist.
762+
763+
```typescript
764+
const formData = new FormData();
765+
766+
// Append string values
767+
formData.append("name", "John");
768+
formData.append("age", "30");
769+
770+
// Append files with optional filename
771+
formData.append("profile", file, "profile.jpg");
772+
773+
// Multiple values for the same key
774+
formData.append("hobby", "reading");
775+
formData.append("hobby", "gaming");
776+
```
777+
778+
#### `set(name, value, filename?)`
779+
780+
Sets a new value for an existing key, or adds the key/value pair if it doesn't exist. Unlike `append()`, this replaces existing values.
781+
782+
```typescript
783+
formData.set("name", "Jane"); // Replaces any existing "name" values
784+
formData.set("avatar", avatarFile, "avatar.png");
785+
```
786+
787+
#### `get(name)`
788+
789+
Returns the first value associated with the given name.
790+
791+
```typescript
792+
const name = formData.get("name"); // Returns string or File
793+
console.log("Name:", name);
794+
795+
const file = formData.get("document"); // Returns File object if it was a file
796+
if (file instanceof File) {
797+
console.log("File name:", file.name);
798+
}
799+
```
800+
801+
#### `getAll(name)`
802+
803+
Returns all values associated with the given name.
804+
805+
```typescript
806+
const hobbies = formData.getAll("hobby"); // Returns array of values
807+
console.log("Hobbies:", hobbies); // ["reading", "gaming"]
808+
```
809+
810+
#### `has(name)`
811+
812+
Returns whether a FormData object contains a certain key.
813+
814+
```typescript
815+
if (formData.has("email")) {
816+
console.log("Email field is present");
817+
}
818+
```
819+
820+
#### `delete(name)`
821+
822+
Deletes a key and all its values from the FormData object.
823+
824+
```typescript
825+
formData.delete("temp_field");
826+
```
827+
828+
#### Iteration Methods
829+
830+
FormData supports iteration through its entries:
831+
832+
```typescript
833+
// Iterate over all entries
834+
for (const [key, value] of formData.entries()) {
835+
console.log(`${key}:`, value);
836+
}
837+
838+
// Get all keys
839+
for (const key of formData.keys()) {
840+
console.log("Key:", key);
841+
}
842+
843+
// Get all values
844+
for (const value of formData.values()) {
845+
console.log("Value:", value);
846+
}
847+
848+
// Convert to array
849+
const entries = Array.from(formData.entries());
850+
```
851+
852+
### FormData with Fetch
853+
854+
FormData is commonly used with the Fetch API for submitting forms:
855+
856+
```typescript
857+
async function submitForm() {
858+
const formData = new FormData();
859+
860+
formData.append("username", "user123");
861+
formData.append("profile_pic", profileFile);
862+
formData.append("description", "User profile update");
863+
864+
try {
865+
const response = await fetch("/api/profile", {
866+
method: "POST",
867+
body: formData, // Browser automatically sets Content-Type: multipart/form-data
868+
});
869+
870+
if (response.ok) {
871+
console.log("Profile updated successfully");
872+
}
873+
} catch (error) {
874+
console.error("Upload failed:", error);
875+
}
876+
}
877+
```
878+
879+
### Advanced FormData Usage
880+
881+
```typescript
882+
// Building form data from an HTML form
883+
function createFormDataFromForm(form: HTMLFormElement): FormData {
884+
const formData = new FormData();
885+
886+
const inputs = form.querySelectorAll('input, select, textarea');
887+
inputs.forEach((input) => {
888+
if (input.type === 'file') {
889+
const files = input.files;
890+
if (files) {
891+
for (let i = 0; i < files.length; i++) {
892+
formData.append(input.name, files[i]);
893+
}
894+
}
895+
} else if (input.type === 'checkbox') {
896+
if (input.checked) {
897+
formData.append(input.name, input.value);
898+
}
899+
} else {
900+
formData.append(input.name, input.value);
901+
}
902+
});
903+
904+
return formData;
905+
}
906+
907+
// Cloning FormData
908+
function cloneFormData(original: FormData): FormData {
909+
const clone = new FormData();
910+
911+
for (const [key, value] of original.entries()) {
912+
clone.append(key, value);
913+
}
914+
915+
return clone;
916+
}
917+
918+
// Converting FormData to URL-encoded string
919+
function formDataToUrlEncoded(formData: FormData): string {
920+
const params = new URLSearchParams();
921+
922+
for (const [key, value] of formData.entries()) {
923+
if (typeof value === 'string') {
924+
params.append(key, value);
925+
} else {
926+
// For File/Blob objects, use their name or convert to string
927+
params.append(key, value.name || value.toString());
928+
}
929+
}
930+
931+
return params.toString();
932+
}
933+
```
934+
733935
## Notes
734936
735937
- File objects are immutable once created

‎static/content/docs/api/index.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,8 +65,9 @@ possible.
6565
standards
6666
- Event API - Standard event handling and custom events
6767
- TextEncoder/TextDecoder - Text encoding and decoding utilities
68-
- **[File API](/docs/api/file)** - Web-standard File objects and file metadata
68+
- **[File API](/docs/api/file)** - Web-standard File objects, Blob handling, and FormData
6969
- **[Streams API](/docs/api/streams)** - Web-standard streaming data processing
70+
- **[Web Locks API](/docs/api/web-locks)** - Coordinate access to shared resources with navigator.locks
7071

7172
### Utility APIs
7273

0 commit comments

Comments
 (0)