fix: More tree-shakeable and convenient exports (#2068)

Author: iwoplaza

README.md

@@ -138,7 +138,7 @@ API:
 
 ```ts
 import type { StorageFlag, TgpuBuffer, TgpuRoot } from 'typegpu';
-import * as d from 'typegpu/data';
+import { d } from 'typegpu';
 
 // We can define schemas, or functions that return schemas...
 const HeightMap = (width: number, height: number) =>

apps/bun-example/index.ts

@@ -1,14 +1,14 @@
-import tgpu from 'typegpu';
-import * as d from 'typegpu/data';
+import tgpu, { d } from 'typegpu';
 import { randf } from '@typegpu/noise';
 
 const Boid = d.struct({
   pos: d.vec3f,
 });
 
-const createRandomBoid = tgpu.fn([], Boid)(() => {
-  return { pos: randf.inUnitCube() };
-});
+const createRandomBoid = () => {
+  'use gpu';
+  return Boid({ pos: randf.inUnitCube() });
+};
 
 const shaderCode = tgpu.resolve([createRandomBoid]);
 

apps/typegpu-docs/src/components/translator/lib/constants.ts

@@ -21,8 +21,7 @@ fn fs_main() -> @location(0) vec4<f32> {
   return vec4<f32>(1.0, 0.0, 0.0, 1.0);
 }`;
 
-export const DEFAULT_TGSL = `import tgpu from 'typegpu';
-import * as d from 'typegpu/data';
+export const DEFAULT_TGSL = `import tgpu, { d } from 'typegpu';
 
 const Particle = d.struct({
   position: d.vec3f,
@@ -51,13 +50,11 @@ export const updateParicle = tgpu.fn([Particle, d.vec3f, d.f32], Particle)(
   },
 );
 
-export const main = tgpu.fn([])(() => {
-  for (let i = 0; i < layout.$.systemData.particles.length; i++) {
-    const particle = layout.$.systemData.particles[i];
-    layout.$.systemData.particles[i] = updateParicle(
-      particle,
-      layout.$.systemData.gravity,
-      layout.$.systemData.deltaTime,
-    );
+export function main() {
+  'use gpu';
+  const data = layout.$.systemData;
+  for (let i = 0; i < data.particles.length; i++) {
+    const particle = data.particles[i];
+    data.particles[i] = updateParicle(particle, data.gravity, data.deltaTime);
   }
-});`;
+}`;

apps/typegpu-docs/src/content/docs/ecosystem/typegpu-noise.mdx

@@ -24,8 +24,7 @@ Calling utility functions from [TypeGPU functions](/TypeGPU/fundamentals/functio
 In the example below, resolving `randomVec2f` into a shader will include the code for `randf.sample` and all of its dependencies.
 
 ```ts twoslash
-import tgpu from 'typegpu';
-import * as d from 'typegpu/data';
+import tgpu, { d } from 'typegpu';
 // ---cut---
 import { randf } from '@typegpu/noise';
 
@@ -47,7 +46,7 @@ The resolution mechanism handles deduplication out of the box, as well as omits
 so only one definition of `sample` will be included in the final shader.
 
 ```ts twoslash
-import * as d from 'typegpu/data';
+import { d } from 'typegpu';
 // ---cut---
 import { randf } from '@typegpu/noise';
 // `typegpu` is necessary to inject library code into your custom shader
@@ -82,8 +81,7 @@ Each call to `randf.sample` returns the next random float in the sequence, allow
 using a set of `randf.seedN` functions, where `N` is the number of components our seed has.
 
 ```ts twoslash
-import tgpu from 'typegpu';
-import * as d from 'typegpu/data';
+import tgpu, { d } from 'typegpu';
 import { randf } from '@typegpu/noise';
 
 const main = tgpu['~unstable'].fragmentFn({
@@ -146,8 +144,7 @@ The package exports an implementation for both 2D and 3D Perlin noise, `perlin2d
 Using it is as simple as calling the `.sample` function with the desired coordinates, and it returns a value in the range `[-1, 1]`.
 
 ```ts twoslash
-import tgpu from 'typegpu';
-import * as d from 'typegpu/data';
+import tgpu, { d } from 'typegpu';
 // ---cut---
 import { perlin2d } from '@typegpu/noise';
 
@@ -168,8 +165,7 @@ To improve performance, you can precompute the gradients using either a *Static*
 A static cache presumes that the domain of the noise function is fixed, and cannot change between shader invocations.
 
 ```ts twoslash
-import tgpu from 'typegpu';
-import * as d from 'typegpu/data';
+import tgpu, { d } from 'typegpu';
 const root = await tgpu.init();
 import { perlin3d } from '@typegpu/noise';
 
@@ -191,7 +187,7 @@ const pipeline = root['~unstable']
 Or in WebGPU:
 ```ts twoslash
 /// <reference types="@webgpu/types" />
-import * as d from 'typegpu/data';
+import { d } from 'typegpu';
 
 declare const device: GPUDevice;
 import tgpu from 'typegpu';
@@ -226,8 +222,7 @@ without having to recompile the shader, you have to use a dynamic cache. With it
 complex setup.
 
 ```ts twoslash
-import tgpu from 'typegpu';
-import * as d from 'typegpu/data';
+import tgpu, { d } from 'typegpu';
 import { perlin3d } from '@typegpu/noise';
 
 const main = tgpu['~unstable'].computeFn({ workgroupSize: [1] })(() => {
@@ -273,10 +268,8 @@ The package provides convenient way to change PRNG as needed.
 You can easily implement your own PRNG and plug it into the pipeline.
 
 ```ts twoslash
-import tgpu from 'typegpu';
-import * as d from 'typegpu/data';
+import tgpu, { d, std } from 'typegpu';
 import { randf } from '@typegpu/noise';
-import * as std from 'typegpu/std';
 
 const root = await tgpu.init();
 

apps/typegpu-docs/src/content/docs/ecosystem/typegpu-sdf.mdx

@@ -22,8 +22,7 @@ Position, scale and translation of a shape can be adjusted by applying the inver
 Here is an example of a fragment shader that draws a disk of radius 0.25 on the center of a (presumably square) canvas:
 
 ```ts twoslash
-import tgpu from 'typegpu';
-import * as d from 'typegpu/data';
+import tgpu, { d } from 'typegpu';
 import * as sdf from '@typegpu/sdf';
 
 const mainFragment = tgpu['~unstable'].fragmentFn({

apps/typegpu-docs/src/content/docs/ecosystem/typegpu-three/index.mdx

@@ -60,8 +60,7 @@ Calling `t3.toTSL` with a TypeGPU function will return a TSL node, which can the
 <div class="flex-1 w-auto min-w-[0]">
 
 ```ts twoslash
-import tgpu from 'typegpu';
-import * as d from 'typegpu/data';
+import tgpu, { d } from 'typegpu';
 // ---cut---
 import * as THREE from 'three/webgpu';
 import * as t3 from '@typegpu/three';
@@ -113,8 +112,7 @@ There are a handful of builtin TSL node accessors in the `t3` namespace:
 <div class="flex-1 w-auto min-w-[0]">
 
 ```ts twoslash
-import tgpu from 'typegpu';
-import * as d from 'typegpu/data';
+import tgpu, { d } from 'typegpu';
 // ---cut---
 import * as THREE from 'three/webgpu';
 import * as t3 from '@typegpu/three';
@@ -140,9 +138,7 @@ Other TypeGPU functions (user-defined or from libraries) can be called to achiev
 <div class="flex-1 w-auto min-w-[0]">
 
 ```ts twoslash
-import tgpu from 'typegpu';
-import * as d from 'typegpu/data';
-import * as std from 'typegpu/std';
+import tgpu, { d, std } from 'typegpu';
 // ---cut---
 import { perlin3d } from '@typegpu/noise';
 import * as THREE from 'three/webgpu';

apps/typegpu-docs/src/content/docs/fundamentals/bind-groups.mdx

@@ -12,8 +12,7 @@ A bind group is a collection of resources that are bound to a shader. These reso
 It's a way to define what resources are available to a shader and how they are accessed.
 
 ```ts
-import tgpu from 'typegpu';
-import * as d from 'typegpu/data';
+import tgpu, { d } from 'typegpu';
 
 // Defining the layout of resources we want the shader to
 // have access to.

apps/typegpu-docs/src/content/docs/fundamentals/buffers.mdx

@@ -19,8 +19,7 @@ results of parallel computation back to JS. When creating a buffer, a schema for
 As an example, let's create a buffer for storing particles.
 
 ```ts twoslash {22-28}
-import tgpu from 'typegpu';
-import * as d from 'typegpu/data';
+import tgpu, { d } from 'typegpu';
 
 // Defining a struct type
 const Particle = d.struct({
@@ -67,8 +66,7 @@ To create a buffer, you will need to define its schema by composing data types i
 structs and arrays. They will be explored in more detail in [a following chapter](/TypeGPU/fundamentals/data-schemas).
 
 ```ts twoslash
-import tgpu from 'typegpu';
-import * as d from 'typegpu/data';
+import tgpu, { d } from 'typegpu';
 const root = await tgpu.init();
 // ---cut---
 const countBuffer = root.createBuffer(d.u32);
@@ -87,8 +85,7 @@ To be able to use these buffers in WGSL shaders, we have to declare their usage
 
 ```ts twoslash
 // @noErrors
-import tgpu from 'typegpu';
-import * as d from 'typegpu/data';
+import tgpu, { d } from 'typegpu';
 const root = await tgpu.init();
 // ---cut---
 const buffer = root.createBuffer(d.u32)
@@ -101,8 +98,7 @@ You can also add all flags in a single `$usage()`.
 
 ```ts twoslash
 // @noErrors
-import tgpu from 'typegpu';
-import * as d from 'typegpu/data';
+import tgpu, { d } from 'typegpu';
 const root = await tgpu.init();
 // ---cut---
 const buffer = root.createBuffer(d.u32)
@@ -113,8 +109,7 @@ const buffer = root.createBuffer(d.u32)
 :::note
 Along with passing the appropriate flags to WebGPU, the methods will also embed type information into the buffer.
 ```ts twoslash
-import tgpu from 'typegpu';
-import * as d from 'typegpu/data';
+import tgpu, { d } from 'typegpu';
 const root = await tgpu.init();
 // ---cut---
 
@@ -131,8 +126,7 @@ or indirectly through the `.$usage` method.
 
 ```ts twoslash
 /// <reference types="@webgpu/types" />
-import tgpu from 'typegpu';
-import * as d from 'typegpu/data';
+import tgpu, { d } from 'typegpu';
 const root = await tgpu.init();
 const buffer = root.createBuffer(d.f32);
 // ---cut---
@@ -153,8 +147,7 @@ You can also pass an initial value to the `root.createBuffer` function.
 When the buffer is created, it will be mapped at creation, and the initial value will be written to the buffer.
 
 ```ts twoslash
-import tgpu from 'typegpu';
-import * as d from 'typegpu/data';
+import tgpu, { d } from 'typegpu';
 const root = await tgpu.init();
 // ---cut---
 // Will be initialized to `100`
@@ -173,8 +166,7 @@ You can also create a buffer using an existing WebGPU buffer. This is useful whe
 
 ```ts twoslash {7}
 /// <reference types="@webgpu/types" />
-import tgpu from 'typegpu';
-import * as d from 'typegpu/data';
+import tgpu, { d } from 'typegpu';
 const root = await tgpu.init();
 const device = root.device;
 // ---cut---
@@ -200,8 +192,7 @@ method's arguments.
 
 ```ts twoslash
 // @noErrors
-import tgpu from 'typegpu';
-import * as d from 'typegpu/data';
+import tgpu, { d } from 'typegpu';
 const root = await tgpu.init();
 // ---cut---
 const Particle = d.struct({
@@ -240,8 +231,7 @@ The format of the `data` value depends on your schema type:
   - `value`: the new value for that element.
 
 ```ts twoslash
-import tgpu from 'typegpu';
-import * as d from 'typegpu/data';
+import tgpu, { d } from 'typegpu';
 const root = await tgpu.init();
 // ---cut---
 const Planet = d.struct({
@@ -268,8 +258,7 @@ There's also an option to copy value from another typed buffer using the `.copyF
 as long as both buffers have a matching data schema.
 
 ```ts twoslash
-import tgpu from 'typegpu';
-import * as d from 'typegpu/data';
+import tgpu, { d } from 'typegpu';
 const root = await tgpu.init();
 
 const Particle = d.struct({
@@ -289,8 +278,7 @@ To read data from a buffer on the CPU, you can use the `.read()` method.
 It returns a promise that resolves to the data read from the buffer.
 
 ```ts twoslash
-import tgpu from 'typegpu';
-import * as d from 'typegpu/data';
+import tgpu, { d } from 'typegpu';
 const root = await tgpu.init();
 // ---cut---
 const buffer = root.createBuffer(d.arrayOf(d.u32, 10));
@@ -321,8 +309,7 @@ TypeGPU also allows for the use of index buffers. An index buffer is a buffer co
 You may refer to the [pipelines](/TypeGPU/fundamentals/pipelines/#drawing-with-drawindexed) section for usage details.
 
 ```ts twoslash
-import tgpu from 'typegpu';
-import * as d from 'typegpu/data';
+import tgpu, { d } from 'typegpu';
 
 const root = await tgpu.init();
 // ---cut---
@@ -343,8 +330,7 @@ The default option is to create bind group layouts and bind your buffers via bin
 Read more in the chapter dedicated to [bind groups](/TypeGPU/fundamentals/bind-groups).
 
 ```ts twoslash
-import tgpu from 'typegpu';
-import * as d from 'typegpu/data';
+import tgpu, { d } from 'typegpu';
 
 const root = await tgpu.init();
 // ---cut---
@@ -382,8 +368,7 @@ Fixed buffers are created using dedicated root methods.
 | `var<storage, read_write>` | `root.createMutable()`  |
 
 ```ts twoslash
-import tgpu from 'typegpu';
-import * as d from 'typegpu/data';
+import tgpu, { d } from 'typegpu';
 
 const root = await tgpu.init();
 // ---cut---