update migration guide

docs/guides/basics/getting-started.md

@@ -82,11 +82,11 @@ Loading the library doesn't do much good if we don't *use* it, so the next step
 ```html
 <script>
   const app = new PIXI.Application();
-  await app.init({ width: 640, height: 360 })
+  app.init({ width: 640, height: 360 }).then(()=>{})
 </script>
 ```
 
-What we're doing here is adding a JavaScript code block, and in that block creating a new PIXI.Application instance. [Application](https://pixijs.download/release/docs/app.Application.html) is a helper class that simplifies working with PixiJS.  It creates the renderer, creates the stage, and starts a ticker for updating.  In production, you'll almost certainly want to do these steps yourself for added customization and control - we'll cover doing so in a later guide.  For now, the Application class is a perfect way to start playing with PixiJS without worrying about the details. The `Application` class also has a method `init` that will initialize the application with the given options. This method is asynchronous, so we use the `await` keyword to wait for it to complete. This is because PixiJS uses WebGPU or WebGL under the hood, and the former API asynchronous.
+What we're doing here is adding a JavaScript code block, and in that block creating a new PIXI.Application instance. [Application](https://pixijs.download/release/docs/app.Application.html) is a helper class that simplifies working with PixiJS.  It creates the renderer, creates the stage, and starts a ticker for updating.  In production, you'll almost certainly want to do these steps yourself for added customization and control - we'll cover doing so in a later guide.  For now, the Application class is a perfect way to start playing with PixiJS without worrying about the details. The `Application` class also has a method `init` that will initialize the application with the given options. This method is asynchronous, so we use the `then` keyword to start our logic after the promise has completed. This is because PixiJS uses WebGPU or WebGL under the hood, and the former API asynchronous.
 
 ### Adding the Canvas to the DOM
 
@@ -157,19 +157,20 @@ Here's the whole thing in one place.  Check your file and make sure it matches i
     <script>
       // Create the application helper and add its render target to the page
       const app = new PIXI.Application();
-      await app.init({ width: 640, height: 360 })
-      document.body.appendChild(app.canvas);
-
-      // Create the sprite and add it to the stage
-      let sprite = PIXI.Sprite.from('sample.png');
-      app.stage.addChild(sprite);
-
-      // Add a ticker callback to move the sprite back and forth
-      let elapsed = 0.0;
-      app.ticker.add((ticker) => {
-        elapsed += ticker.deltaTime;
-        sprite.x = 100.0 + Math.cos(elapsed/50.0) * 100.0;
-      });
+      app.init({ width: 640, height: 360 }).then(()=>{
+        document.body.appendChild(app.canvas);
+
+        // Create the sprite and add it to the stage
+        let sprite = PIXI.Sprite.from('sample.png');
+        app.stage.addChild(sprite);
+
+        // Add a ticker callback to move the sprite back and forth
+        let elapsed = 0.0;
+        app.ticker.add((ticker) => {
+          elapsed += ticker.deltaTime;
+          sprite.x = 100.0 + Math.cos(elapsed/50.0) * 100.0;
+        });
+      })
     </script>
   </body>
 </html>

docs/guides/migrations/v8.md

@@ -430,8 +430,11 @@ The act of adding and removing the event when a sprite's texture was changed led
 
   **New:**
   ```ts
+  // WebGL or WebGPU renderer
   const app = new Application<Renderer<HTMLCanvasElement>>()
+  // WebGL specific renderer
   const app = new Application<WebGLRenderer<HTMLCanvasElement>>();
+  // WebGPU specific renderer
   const app = new Application<WebGPURenderer<HTMLCanvasElement>>();
   ```
 
@@ -493,6 +496,19 @@ The act of adding and removing the event when a sprite's texture was changed led
   isMobile.any()
   ```
 
+- `container.getBounds()` now returns a [`Bounds`](https://pixijs.download/release/docs/rendering.Bounds.html) object instead of a [`Rectangle`](https://pixijs.download/release/docs/maths.Rectangle.html) object. You can access the rectangle by using `container.getBounds().rectangle` instead.
+
+  **Old:**
+  ```ts
+  const bounds = container.getBounds();
+  ```
+  **New:**
+  ```ts
+  const bounds = container.getBounds().rectangle
+  ```
+
+- `ParticleContainer` has been removed, you should use normal a regular `Container` instead. The performance improvements that `ParticleContainer` provided are no longer necessary due to the new rendering architecture.
+
 ## 3. Deprecated Features
 
 Certain features from PixiJS v7 have been deprecated in v8. While they will still work, it's recommended to update your code to use the new alternatives. Refer to the deprecated features section for details on what to replace them with.
@@ -625,6 +641,8 @@ Certain features from PixiJS v7 have been deprecated in v8. While they will stil
   });
   ```
 
+- `container.name` is now `container.label`
+
 ## 4. Resources
 
 - [PixiJS v8 Release Notes](https://github.com/pixijs/pixijs/releases?q=v8.0.0&expanded=true)