chore(typegpu): Make tgpu.vertexLayout stable (#862)

* chore(typegpu): Version bump to 0.4.1

apps/typegpu-docs/src/components/stackblitz/openInStackBlitz.ts

@@ -61,7 +61,7 @@ ${example.htmlCode}
     },
     "dependencies": {
       "@webgpu/types": "^0.1.44",
-      "typegpu": "^0.4.0"
+      "typegpu": "^0.4.1"
     }
 }`,
       },

apps/typegpu-docs/src/content/examples/simulation/boids-next/index.ts

@@ -181,13 +181,8 @@ const colorPaletteBuffer = root
 
 const TriangleDataArray = (n: number) => d.arrayOf(TriangleData, n);
 
-const vertexLayout = tgpu['~unstable'].vertexLayout((n: number) =>
-  d.arrayOf(d.vec2f, n),
-);
-const instanceLayout = tgpu['~unstable'].vertexLayout(
-  TriangleDataArray,
-  'instance',
-);
+const vertexLayout = tgpu.vertexLayout((n: number) => d.arrayOf(d.vec2f, n));
+const instanceLayout = tgpu.vertexLayout(TriangleDataArray, 'instance');
 
 const renderPipeline = root['~unstable']
   .withVertex(mainVert, {

apps/typegpu-docs/src/content/examples/simulation/boids/index.ts

@@ -273,7 +273,7 @@ const computeModule = root.device.createShaderModule({
   }),
 });
 
-const vertexLayout = tgpu['~unstable'].vertexLayout((n: number) =>
+const vertexLayout = tgpu.vertexLayout((n: number) =>
   d.arrayOf(d.location(0, d.vec2f), n),
 );
 

apps/typegpu-docs/src/content/examples/simulation/confetti/index.ts

@@ -77,11 +77,11 @@ const particleDataStorage = particleDataBuffer.as('mutable');
 
 // layouts
 
-const geometryLayout = tgpu['~unstable']
+const geometryLayout = tgpu
   .vertexLayout((n: number) => d.arrayOf(ParticleGeometry, n), 'instance')
   .$name('geometry');
 
-const dataLayout = tgpu['~unstable']
+const dataLayout = tgpu
   .vertexLayout((n: number) => d.arrayOf(ParticleData, n), 'instance')
   .$name('data');
 

apps/typegpu-docs/src/content/examples/simulation/fluid-with-atomics/index.ts

@@ -341,11 +341,11 @@ const fragment = tgpu['~unstable']
     return d.vec4f(0, 0, std.max(0.5, res), res);
   });
 
-const vertexInstanceLayout = tgpu['~unstable'].vertexLayout(
+const vertexInstanceLayout = tgpu.vertexLayout(
   (n: number) => d.arrayOf(d.u32, n),
   'instance',
 );
-const vertexLayout = tgpu['~unstable'].vertexLayout(
+const vertexLayout = tgpu.vertexLayout(
   (n: number) => d.arrayOf(d.vec2f, n),
   'vertex',
 );

apps/typegpu-docs/src/content/examples/simulation/game-of-life/index.ts

@@ -83,12 +83,12 @@ const squareBuffer = root
   .createBuffer(d.arrayOf(d.u32, 8), [0, 0, 1, 0, 0, 1, 1, 1])
   .$usage('vertex');
 
-const squareVertexLayout = tgpu['~unstable'].vertexLayout(
+const squareVertexLayout = tgpu.vertexLayout(
   (n: number) => d.arrayOf(d.location(1, d.vec2u), n),
   'vertex',
 );
 
-const cellsVertexLayout = tgpu['~unstable'].vertexLayout(
+const cellsVertexLayout = tgpu.vertexLayout(
   (n: number) => d.arrayOf(d.location(0, d.u32), n),
   'instance',
 );

packages/typegpu/package.json

@@ -1,7 +1,7 @@
 {
   "name": "typegpu",
   "private": true,
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "A thin layer between JS and WebGPU/WGSL that improves development experience and allows for faster iteration.",
   "license": "MIT",
   "type": "module",

packages/typegpu/src/index.ts

@@ -21,6 +21,7 @@ import { bindGroupLayout } from './tgpuBindGroupLayout';
 
 export const tgpu = {
   bindGroupLayout,
+  vertexLayout,
 
   init,
   initFromDevice,

packages/typegpu/tests/root.test.ts

@@ -105,7 +105,7 @@ describe('TgpuRoot', () => {
     it('should return the correct GPUVertexBufferLayout for a simple vertex layout', ({
       root,
     }) => {
-      const vertexLayout = tgpu['~unstable'].vertexLayout(
+      const vertexLayout = tgpu.vertexLayout(
         (n: number) => d.arrayOf(d.location(0, d.vec2u), n),
         'vertex',
       );
@@ -132,7 +132,7 @@ describe('TgpuRoot', () => {
         something: d.location(2, d.u32),
       });
 
-      const vertexLayout = tgpu['~unstable'].vertexLayout(
+      const vertexLayout = tgpu.vertexLayout(
         (n: number) => d.disarrayOf(VertexData, n),
         'instance',
       );

packages/typegpu/tests/vertexLayout.test.ts

@@ -78,7 +78,7 @@ describe('ArrayToContainedAttribs', () => {
 
 describe('tgpu.vertexLayout', () => {
   it('creates attributes from loose array of vec3f', () => {
-    const vertexLayout = tgpu['~unstable'].vertexLayout((count: number) =>
+    const vertexLayout = tgpu.vertexLayout((count: number) =>
       d.disarrayOf(d.vec3f, count),
     );
 
@@ -97,7 +97,7 @@ describe('tgpu.vertexLayout', () => {
       c: d.f32, // + 4
     });
 
-    const vertexLayout = tgpu['~unstable'].vertexLayout((count: number) =>
+    const vertexLayout = tgpu.vertexLayout((count: number) =>
       d.disarrayOf(VertexData, count),
     );
 
@@ -128,7 +128,7 @@ describe('tgpu.vertexLayout', () => {
       c: d.f32, // + 4
     });
 
-    const vertexLayout = tgpu['~unstable'].vertexLayout((count: number) =>
+    const vertexLayout = tgpu.vertexLayout((count: number) =>
       d.disarrayOf(VertexData, count),
     );
 
@@ -153,7 +153,7 @@ describe('tgpu.vertexLayout', () => {
   });
 
   it('creates attributes from loose array with f16 variants', () => {
-    const vertexLayout = tgpu['~unstable'].vertexLayout((count: number) =>
+    const vertexLayout = tgpu.vertexLayout((count: number) =>
       d.disarrayOf(d.float16x4, count),
     );
 
@@ -169,9 +169,7 @@ describe('tgpu.vertexLayout', () => {
 describe('connectAttributesToShader', () => {
   it('connects a single f32 attribute', () => {
     const shaderInputLayout = d.f32;
-    const layout = tgpu['~unstable'].vertexLayout((n: number) =>
-      d.arrayOf(d.f32, n),
-    );
+    const layout = tgpu.vertexLayout((n: number) => d.arrayOf(d.f32, n));
     const attrib = layout.attrib;
 
     expect(connectAttributesToShader(shaderInputLayout, attrib)).toEqual({
@@ -194,7 +192,7 @@ describe('connectAttributesToShader', () => {
 
   it('connects a single vec4f attribute (with custom shader location)', () => {
     const shaderInputLayout = d.location(3, d.vec4f);
-    const layout = tgpu['~unstable'].vertexLayout((n: number) =>
+    const layout = tgpu.vertexLayout((n: number) =>
       d.disarrayOf(d.unorm16x4, n),
     );
     const attrib = layout.attrib;
@@ -224,7 +222,7 @@ describe('connectAttributesToShader', () => {
       c: d.u32 /* should get @location(4) automatically */,
     };
 
-    const layout = tgpu['~unstable'].vertexLayout((n: number) =>
+    const layout = tgpu.vertexLayout((n: number) =>
       d.disarrayOf(
         d.unstruct({
           alpha: d.f32, // 4 bytes
@@ -278,7 +276,7 @@ describe('connectAttributesToShader', () => {
       c: d.u32 /* should get @location(4) automatically */,
     };
 
-    const alphaBetaLayout = tgpu['~unstable'].vertexLayout((n: number) =>
+    const alphaBetaLayout = tgpu.vertexLayout((n: number) =>
       d.disarrayOf(
         d.unstruct({
           alpha: d.f32, // 4 bytes
@@ -288,9 +286,7 @@ describe('connectAttributesToShader', () => {
       ),
     );
 
-    const gammaLayout = tgpu['~unstable'].vertexLayout((n: number) =>
-      d.arrayOf(d.u32, n),
-    );
+    const gammaLayout = tgpu.vertexLayout((n: number) => d.arrayOf(d.u32, n));
 
     const result = connectAttributesToShader(shaderInputLayout, {
       // purposefully out of order, which should be controlled by the shader input.
@@ -335,7 +331,7 @@ describe('connectAttributesToShader', () => {
 
   it('connects a single vec4h attribute', () => {
     const shaderInputLayout = d.vec4h;
-    const layout = tgpu['~unstable'].vertexLayout((n: number) =>
+    const layout = tgpu.vertexLayout((n: number) =>
       d.disarrayOf(d.float16x4, n),
     );
     const attrib = layout.attrib;
@@ -366,7 +362,7 @@ describe('connectAttributesToShader', () => {
       d: d.f32,
     };
 
-    const layout = tgpu['~unstable'].vertexLayout((n: number) =>
+    const layout = tgpu.vertexLayout((n: number) =>
       d.disarrayOf(
         d.unstruct({
           alpha: d.f16, // 2 bytes
@@ -421,7 +417,7 @@ describe('connectAttributesToShader', () => {
 
   it('throws when trying to use type that has no attribute representation', () => {
     expect(() =>
-      tgpu['~unstable'].vertexLayout((n: number) => d.disarrayOf(d.vec3h, n)),
+      tgpu.vertexLayout((n: number) => d.disarrayOf(d.vec3h, n)),
     ).toThrow();
   });
 });