feat: Add .rgba swizzles to vectors with validation

[Manish546-gif]

Overview

This PR implements support for .rgba swizzles on all vector types in TypeGPU, effectively doubling the available swizzle properties while maintaining type safety and preventing component variant mixing.

Problem Statement

Previously, vectors only supported .xyzw swizzles. For graphics programming and color manipulation, having .rgba swizzles is essential for code readability and maintainability, as they provide semantic meaning when working with color values.

Solution

Added complete .rgba swizzle support mirroring the existing .xyzw functionality, with robust validation to prevent mixing component variants (e.g., .xrgy is invalid).

Changes Made

1. TypeScript Type Definitions (packages/typegpu/src/data/wgslTypes.ts)

• Added SwizzleRGBA2, SwizzleRGBA3, SwizzleRGBA4 interfaces mirroring xyzw swizzles
• Updated all 15 vector type interfaces (v2f, v2h, v2i, v2u, v2b, v3f, v3h, v3i, v3u, v3b, v4f, v4h, v4i, v4u, v4b)
• Extended with corresponding SwizzleRGBA interfaces
• Added individual .r, .g, .b, .a component properties

2. Vector Implementation (packages/typegpu/src/data/vectorImpl.ts)

• Added 256 RGBA swizzle getters to VecBase class
  • 2-component: rr, rg, rb, ra, gr, gg, gb, ga, etc. (16 total)
  • 3-component: rrr, rrg, rrb, rra, rgb, bgr, etc. (64 total)
  • 4-component: rrrr, rgba, bgra, abgr, etc. (256 total)
• Added individual component accessors (.r, .g, .b, .a) with getters and setters
• Proper type coercion for component modification

3. Access Property Validation (packages/typegpu/src/tgsl/accessProp.ts)

• Added swizzle validation to prevent mixing xyzw and rgba components
• Returns undefined for invalid mixed swizzles (e.g., .xrgy)
• Ensures compile-time safety for GPU code generation

4. Comprehensive Tests

• vector.test.ts: 50+ new tests covering:

  • Individual component access and modification
  • All swizzle combinations (identity, mixed, repeated)
  • Cross-dimensional swizzles
  • All vector types (float, int, uint, half-float, bool)
  • GPU function resolution

• swizzleMixedValidation.test.ts: 14 tests validating:

  • Pure xyzw swizzles work ✅
  • Pure rgba swizzles work ✅
  • Mixed swizzles are rejected ❌
  • Invalid patterns are rejected ❌

Test Results

✅ All 144 tests passing

• 130 tests from vector.test.ts
• 14 tests from swizzleMixedValidation.test.ts

✅ Zero TypeScript compilation errors

✅ Works with all vector types

Usage Examples

JavaScript/TypeScript

// Individual component access
const color = d.vec4f(1.0, 0.5, 0.25, 1.0);
console.log(color.r);    // 1.0
console.log(color.a);    // 1.0

// Swizzling
const rgb = color.rgb;   // vec3f(1.0, 0.5, 0.25)
const bgr = color.bgr;   // vec3f(0.25, 0.5, 1.0)
const rg = color.rg;     // vec2f(1.0, 0.5)

[reczkok]

Hey, thanks for the contribution :D I left some comments that should be addressed before I can approve this.
I also created #2141 to bring our existing swizzle creator up to date with this. I think it was used to create the rgba swizzles but not committed (since the order of the swizzle implementation is the same as it generates - could be a coincidence though)?

[iwoplaza]

Thanks for the contribution! Left a few comments to address

[iwoplaza]

I would prefer // ts-expect-error comments instead

[iwoplaza]

Not necessary to check if it doesn't throw, as the test will fail if it does

Suggested change

expect(() => tgpu.resolve([main])).not.toThrow();

[iwoplaza]

Suggested change

expect(() => tgpu.resolve([main])).not.toThrow();

[iwoplaza]

In this file you do 2 checks per swizzle type, one to check whether it has that swizzle type, one to check whether it is only that swizzle type. I propose you only check the latter, and use that in both checks. I believe it should still be valid.