docs: Update tgpu.fn API (#1247)

Author: iwoplaza

apps/typegpu-docs/src/content/docs/fundamentals/functions/index.mdx

@@ -25,21 +25,18 @@ The following code defines a function that accepts one argument and returns one
 
 ```ts
 const getGradientColor = tgpu['~unstable']
-  .fn(
-    { ratio: d.f32 },
-    d.vec4f,
-  )(`{
+  .fn([d.f32], d.vec4f)(/* wgsl */ `(ratio: f32) -> vec4f {
     let color = mix(vec4f(0.769, 0.392, 1.0, 1), vec4f(0.114, 0.447, 0.941, 1), ratio);
     return color;
-  }`)
-  .$name('getGradientColor');
+  }`);
 
 // or
 
-const getGradientColor = tgpu['~unstable'].fn({ ratio: d.f32 }, d.vec4f)`{
-  let color = mix(vec4f(0.769, 0.392, 1.0, 1), vec4f(0.114, 0.447, 0.941, 1), ratio);
-  return color;
-}`.$name('getGradientColor');
+const getGradientColor = tgpu['~unstable']
+  .fn([d.f32], d.vec4f) /* wgsl */`(ratio: f32) -> vec4f {
+    let color = mix(vec4f(0.769, 0.392, 1.0, 1), vec4f(0.114, 0.447, 0.941, 1), ratio);
+    return color;
+  };
 ```
 
 If you're using Visual Studio Code, you can use an [extension](https://marketplace.visualstudio.com/items?itemName=ggsimm.wgsl-literal) that brings syntax highlighting to the code fragments marked with `/* wgsl */` comments.
@@ -50,18 +47,18 @@ Functions can use external resources passed inside a record via the `$uses` meth
 Externals can be any value or TypeGPU resource that can be resolved to WGSL (functions, buffer usages, slots, accessors, constants, variables, declarations, vectors, matrices, textures, samplers etc.).
 
 ```ts
-const getBlue = tgpu['~unstable'].fn({}, d.vec4f)`{ 
+const getBlue = tgpu['~unstable'].fn([], d.vec4f)`() -> vec4f {
   return vec4f(0.114, 0.447, 0.941, 1); 
 }`;
 
 const purple = d.vec4f(0.769, 0.392, 1.0, 1);
 
-const getGradientColor = tgpu['~unstable'].fn({ ratio: d.f32 }, d.vec4f)`{
-  let color = mix(purple, getBlue(), ratio);
-  return color;
-}`
-  .$uses({ purple, getBlue })
-  .$name('getGradientColor');
+const getGradientColor = tgpu['~unstable']
+  .fn([d.f32], d.vec4f)`(ratio: f32) -> vec4f {
+    let color = mix(purple, getBlue(), ratio);
+    return color;
+  }
+  `.$uses({ purple, getBlue });
 ```
 
 The `getGradientColor` function, when resolved to WGSL, includes the definitions of all used external resources:

apps/typegpu-docs/src/content/docs/tooling/unplugin-typegpu.mdx

@@ -23,41 +23,37 @@ The package includes the following functionalities:
   import tgpu from 'typegpu';
   import * as d from 'typegpu/data';
 
-  const add = tgpu['~unstable'].fn(
-    { a: d.u32, b: d.u32 },
-    d.u32,
-  )(({ a, b }) => a + b);
+  const add = tgpu['~unstable'].fn([d.u32, d.u32], d.u32)(
+    (a, b) => a + b,
+  );
   ```
 
   However, if the implementation function, or the shell, is referenced via a variable, the plugin will not recognize it as TGSL,
   thus to make it work, the function needs to be marked with a `"kernel"` directive.
 
   ```ts
-  const addFn = tgpu['~unstable'].fn({ a: d.u32, b: d.u32 }, d.u32);
+  const addFn = tgpu['~unstable'].fn([d.u32, d.u32], d.u32);
 
-  const add = addFn(({ a, b }) => {
+  const add = addFn((a, b) => {
     'kernel';
     return a + b;
   });
   ```
 
   ```ts
-  const addImpl = ({ a, b }) => {
+  const addImpl = (a, b) => {
     'kernel';
     return a + b;
   };
 
-  const add = tgpu['~unstable'].fn({ a: d.u32, b: d.u32 }, d.u32)(addImpl);
+  const add = tgpu['~unstable'].fn([d.u32, d.u32], d.u32)(addImpl);
   ```
 
   After transpiling the function, the JS implementation is removed from the bundle in order to save space.
   To be able to invoke the function both on GPU and CPU, it needs to be marked with `"kernel & js"` directive;
 
   ```ts
-  const add = tgpu['~unstable'].fn(
-    { a: d.u32, b: d.u32 },
-    d.u32,
-  )(({ a, b }) => {
+  const add = tgpu['~unstable'].fn([d.u32, d.u32], d.u32)((a, b) => {
     'kernel & js';
     return a + b;
   });