diff --git a/404.html b/404.html index 83ce76a91..ce456451a 100644 --- a/404.html +++ b/404.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- - + + \ No newline at end of file diff --git a/7.x/branding.html b/7.x/branding.html index 4fa0df67e..0cb0adb1c 100644 --- a/7.x/branding.html +++ b/7.x/branding.html @@ -9,8 +9,8 @@ - - + +
@@ -22,7 +22,7 @@ PNG

PixiJS Logo Full Dark

Mark (Pink)​

Download: SVG PNG

PixiJS Logo Mark Dark

Mark (Light)​

Download: SVG PNG

PixiJS Logo Mark Light

- - + + \ No newline at end of file diff --git a/7.x/examples.html b/7.x/examples.html index 111f26f94..b1ad6ab1d 100644 --- a/7.x/examples.html +++ b/7.x/examples.html @@ -9,13 +9,13 @@ - - + +
Skip to main content
- - + + \ No newline at end of file diff --git a/7.x/examples/advanced/collision-detection.html b/7.x/examples/advanced/collision-detection.html index 482a8f42a..3b3981751 100644 --- a/7.x/examples/advanced/collision-detection.html +++ b/7.x/examples/advanced/collision-detection.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Collision Detection

- - + + \ No newline at end of file diff --git a/7.x/examples/advanced/mouse-trail.html b/7.x/examples/advanced/mouse-trail.html index fe9971421..ac3207041 100644 --- a/7.x/examples/advanced/mouse-trail.html +++ b/7.x/examples/advanced/mouse-trail.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Mouse Trail

- - + + \ No newline at end of file diff --git a/7.x/examples/advanced/scratch-card.html b/7.x/examples/advanced/scratch-card.html index 99fbcc1a3..09f5dceac 100644 --- a/7.x/examples/advanced/scratch-card.html +++ b/7.x/examples/advanced/scratch-card.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Scratch Card

- - + + \ No newline at end of file diff --git a/7.x/examples/advanced/screen-shot.html b/7.x/examples/advanced/screen-shot.html index 4252cff54..344389819 100644 --- a/7.x/examples/advanced/screen-shot.html +++ b/7.x/examples/advanced/screen-shot.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Screen Shot

- - + + \ No newline at end of file diff --git a/7.x/examples/advanced/slots.html b/7.x/examples/advanced/slots.html index d31c35de6..acf1be5d9 100644 --- a/7.x/examples/advanced/slots.html +++ b/7.x/examples/advanced/slots.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Slots

- - + + \ No newline at end of file diff --git a/7.x/examples/advanced/spinners.html b/7.x/examples/advanced/spinners.html index 6f03bd546..b08b8e5ef 100644 --- a/7.x/examples/advanced/spinners.html +++ b/7.x/examples/advanced/spinners.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Spinners

- - + + \ No newline at end of file diff --git a/7.x/examples/advanced/star-warp.html b/7.x/examples/advanced/star-warp.html index 0b01fb9f4..dabce87a5 100644 --- a/7.x/examples/advanced/star-warp.html +++ b/7.x/examples/advanced/star-warp.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Star Warp

- - + + \ No newline at end of file diff --git a/7.x/examples/assets/async.html b/7.x/examples/assets/async.html index 6c48bb1d8..cd6f694b8 100644 --- a/7.x/examples/assets/async.html +++ b/7.x/examples/assets/async.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Async

- - + + \ No newline at end of file diff --git a/7.x/examples/assets/background.html b/7.x/examples/assets/background.html index 9d5d8510b..4d1ec45ad 100644 --- a/7.x/examples/assets/background.html +++ b/7.x/examples/assets/background.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Background

- - + + \ No newline at end of file diff --git a/7.x/examples/assets/bundle.html b/7.x/examples/assets/bundle.html index 93246819b..06844c17d 100644 --- a/7.x/examples/assets/bundle.html +++ b/7.x/examples/assets/bundle.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Bundle

- - + + \ No newline at end of file diff --git a/7.x/examples/assets/multiple.html b/7.x/examples/assets/multiple.html index 6004443c7..a723d55f2 100644 --- a/7.x/examples/assets/multiple.html +++ b/7.x/examples/assets/multiple.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Multiple

- - + + \ No newline at end of file diff --git a/7.x/examples/assets/promise.html b/7.x/examples/assets/promise.html index 624122a0d..1fe7a773a 100644 --- a/7.x/examples/assets/promise.html +++ b/7.x/examples/assets/promise.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Promise

- - + + \ No newline at end of file diff --git a/7.x/examples/basic/blend-modes.html b/7.x/examples/basic/blend-modes.html index 720b2b85e..76ac5c544 100644 --- a/7.x/examples/basic/blend-modes.html +++ b/7.x/examples/basic/blend-modes.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Blend Modes

- - + + \ No newline at end of file diff --git a/7.x/examples/basic/cache-as-bitmap.html b/7.x/examples/basic/cache-as-bitmap.html index 0a68dbbe9..0c40bfd1f 100644 --- a/7.x/examples/basic/cache-as-bitmap.html +++ b/7.x/examples/basic/cache-as-bitmap.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Cache As Bitmap

- - + + \ No newline at end of file diff --git a/7.x/examples/basic/container.html b/7.x/examples/basic/container.html index 4e5772cc9..8acf71923 100644 --- a/7.x/examples/basic/container.html +++ b/7.x/examples/basic/container.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Container

- - + + \ No newline at end of file diff --git a/7.x/examples/basic/particle-container.html b/7.x/examples/basic/particle-container.html index 25fba72d6..1208dc53d 100644 --- a/7.x/examples/basic/particle-container.html +++ b/7.x/examples/basic/particle-container.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Particle Container

- - + + \ No newline at end of file diff --git a/7.x/examples/basic/simple-plane.html b/7.x/examples/basic/simple-plane.html index acb209c3a..9c130127f 100644 --- a/7.x/examples/basic/simple-plane.html +++ b/7.x/examples/basic/simple-plane.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Simple Plane

- - + + \ No newline at end of file diff --git a/7.x/examples/basic/tinting.html b/7.x/examples/basic/tinting.html index f6a27071c..9bd96fcaf 100644 --- a/7.x/examples/basic/tinting.html +++ b/7.x/examples/basic/tinting.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Tinting

- - + + \ No newline at end of file diff --git a/7.x/examples/basic/transparent-background.html b/7.x/examples/basic/transparent-background.html index 92781a46e..4e662c3e3 100644 --- a/7.x/examples/basic/transparent-background.html +++ b/7.x/examples/basic/transparent-background.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Transparent Background

- - + + \ No newline at end of file diff --git a/7.x/examples/events/click.html b/7.x/examples/events/click.html index d6442907d..e74534aa6 100644 --- a/7.x/examples/events/click.html +++ b/7.x/examples/events/click.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Click

- - + + \ No newline at end of file diff --git a/7.x/examples/events/custom-hitarea.html b/7.x/examples/events/custom-hitarea.html index c4802f21c..9583825aa 100644 --- a/7.x/examples/events/custom-hitarea.html +++ b/7.x/examples/events/custom-hitarea.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Custom Hitarea

- - + + \ No newline at end of file diff --git a/7.x/examples/events/custom-mouse-icon.html b/7.x/examples/events/custom-mouse-icon.html index f54db1d84..f8583cdbf 100644 --- a/7.x/examples/events/custom-mouse-icon.html +++ b/7.x/examples/events/custom-mouse-icon.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Custom Mouse Icon

- - + + \ No newline at end of file diff --git a/7.x/examples/events/dragging.html b/7.x/examples/events/dragging.html index dfcfa0466..8bf511c58 100644 --- a/7.x/examples/events/dragging.html +++ b/7.x/examples/events/dragging.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Dragging

- - + + \ No newline at end of file diff --git a/7.x/examples/events/interactivity.html b/7.x/examples/events/interactivity.html index 0dbe712e8..3bb2b3e0b 100644 --- a/7.x/examples/events/interactivity.html +++ b/7.x/examples/events/interactivity.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Interactivity

- - + + \ No newline at end of file diff --git a/7.x/examples/events/logger.html b/7.x/examples/events/logger.html index 1c5f60e2a..71e29084d 100644 --- a/7.x/examples/events/logger.html +++ b/7.x/examples/events/logger.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Logger

- - + + \ No newline at end of file diff --git a/7.x/examples/events/nested-boundary-with-projection.html b/7.x/examples/events/nested-boundary-with-projection.html index 75dfc9212..da70eddc6 100644 --- a/7.x/examples/events/nested-boundary-with-projection.html +++ b/7.x/examples/events/nested-boundary-with-projection.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Nested Boundary With Projection

- - + + \ No newline at end of file diff --git a/7.x/examples/events/pointer-tracker.html b/7.x/examples/events/pointer-tracker.html index 8e3784afc..073025e03 100644 --- a/7.x/examples/events/pointer-tracker.html +++ b/7.x/examples/events/pointer-tracker.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Pointer Tracker

- - + + \ No newline at end of file diff --git a/7.x/examples/events/slider.html b/7.x/examples/events/slider.html index af4e3c6bf..07a1816dc 100644 --- a/7.x/examples/events/slider.html +++ b/7.x/examples/events/slider.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Slider

- - + + \ No newline at end of file diff --git a/7.x/examples/filters-advanced/custom.html b/7.x/examples/filters-advanced/custom.html index 0d958eebf..5bfd9778a 100644 --- a/7.x/examples/filters-advanced/custom.html +++ b/7.x/examples/filters-advanced/custom.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Custom

- - + + \ No newline at end of file diff --git a/7.x/examples/filters-advanced/mouse-blending.html b/7.x/examples/filters-advanced/mouse-blending.html index 66fb57d1c..b7f8c6a8d 100644 --- a/7.x/examples/filters-advanced/mouse-blending.html +++ b/7.x/examples/filters-advanced/mouse-blending.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Mouse Blending

- - + + \ No newline at end of file diff --git a/7.x/examples/filters-advanced/shader-toy-filter-render-texture.html b/7.x/examples/filters-advanced/shader-toy-filter-render-texture.html index 6ffd28826..6266d08e1 100644 --- a/7.x/examples/filters-advanced/shader-toy-filter-render-texture.html +++ b/7.x/examples/filters-advanced/shader-toy-filter-render-texture.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Shader Toy Filter Render Texture

- - + + \ No newline at end of file diff --git a/7.x/examples/filters-basic/blur.html b/7.x/examples/filters-basic/blur.html index a2592c837..e93c5f036 100644 --- a/7.x/examples/filters-basic/blur.html +++ b/7.x/examples/filters-basic/blur.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Blur

- - + + \ No newline at end of file diff --git a/7.x/examples/filters-basic/color-matrix.html b/7.x/examples/filters-basic/color-matrix.html index 4b78fbacc..043298dae 100644 --- a/7.x/examples/filters-basic/color-matrix.html +++ b/7.x/examples/filters-basic/color-matrix.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Color Matrix

- - + + \ No newline at end of file diff --git a/7.x/examples/filters-basic/displacement-map-crawlies.html b/7.x/examples/filters-basic/displacement-map-crawlies.html index 3eee049ed..6bcfc83a6 100644 --- a/7.x/examples/filters-basic/displacement-map-crawlies.html +++ b/7.x/examples/filters-basic/displacement-map-crawlies.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Displacement Map Crawlies

- - + + \ No newline at end of file diff --git a/7.x/examples/filters-basic/displacement-map-flag.html b/7.x/examples/filters-basic/displacement-map-flag.html index 8b656e763..84e7a89db 100644 --- a/7.x/examples/filters-basic/displacement-map-flag.html +++ b/7.x/examples/filters-basic/displacement-map-flag.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Displacement Map Flag

- - + + \ No newline at end of file diff --git a/7.x/examples/graphics/advanced.html b/7.x/examples/graphics/advanced.html index 232f44cde..5ab2e19e9 100644 --- a/7.x/examples/graphics/advanced.html +++ b/7.x/examples/graphics/advanced.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Advanced

- - + + \ No newline at end of file diff --git a/7.x/examples/graphics/dynamic.html b/7.x/examples/graphics/dynamic.html index a67e9b7a9..9bdc33b92 100644 --- a/7.x/examples/graphics/dynamic.html +++ b/7.x/examples/graphics/dynamic.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Dynamic

- - + + \ No newline at end of file diff --git a/7.x/examples/graphics/simple.html b/7.x/examples/graphics/simple.html index 573ba2e33..93fea65bd 100644 --- a/7.x/examples/graphics/simple.html +++ b/7.x/examples/graphics/simple.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Simple

- - + + \ No newline at end of file diff --git a/7.x/examples/masks/filter.html b/7.x/examples/masks/filter.html index 1f3f7c909..2ea15ad3b 100644 --- a/7.x/examples/masks/filter.html +++ b/7.x/examples/masks/filter.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Filter

- - + + \ No newline at end of file diff --git a/7.x/examples/masks/graphics.html b/7.x/examples/masks/graphics.html index e9a7295d1..5b7f3abee 100644 --- a/7.x/examples/masks/graphics.html +++ b/7.x/examples/masks/graphics.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Graphics

- - + + \ No newline at end of file diff --git a/7.x/examples/masks/sprite.html b/7.x/examples/masks/sprite.html index d033eb323..1de1598d1 100644 --- a/7.x/examples/masks/sprite.html +++ b/7.x/examples/masks/sprite.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Sprite

- - + + \ No newline at end of file diff --git a/7.x/examples/mesh-and-shaders/instanced-geometry.html b/7.x/examples/mesh-and-shaders/instanced-geometry.html index 78b3eb994..bf79a5b6e 100644 --- a/7.x/examples/mesh-and-shaders/instanced-geometry.html +++ b/7.x/examples/mesh-and-shaders/instanced-geometry.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Instanced Geometry

- - + + \ No newline at end of file diff --git a/7.x/examples/mesh-and-shaders/interleaving-geometry.html b/7.x/examples/mesh-and-shaders/interleaving-geometry.html index 329f64963..e9b5f0963 100644 --- a/7.x/examples/mesh-and-shaders/interleaving-geometry.html +++ b/7.x/examples/mesh-and-shaders/interleaving-geometry.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Interleaving Geometry

- - + + \ No newline at end of file diff --git a/7.x/examples/mesh-and-shaders/merging-geometry.html b/7.x/examples/mesh-and-shaders/merging-geometry.html index bad569e37..9cefeb4f0 100644 --- a/7.x/examples/mesh-and-shaders/merging-geometry.html +++ b/7.x/examples/mesh-and-shaders/merging-geometry.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Merging Geometry

- - + + \ No newline at end of file diff --git a/7.x/examples/mesh-and-shaders/multi-pass-shader-generated-mesh.html b/7.x/examples/mesh-and-shaders/multi-pass-shader-generated-mesh.html index 05a82bca8..e8778d438 100644 --- a/7.x/examples/mesh-and-shaders/multi-pass-shader-generated-mesh.html +++ b/7.x/examples/mesh-and-shaders/multi-pass-shader-generated-mesh.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Multi Pass Shader Generated Mesh

- - + + \ No newline at end of file diff --git a/7.x/examples/mesh-and-shaders/shader-toy-mesh.html b/7.x/examples/mesh-and-shaders/shader-toy-mesh.html index b3a04f65b..8b8181b08 100644 --- a/7.x/examples/mesh-and-shaders/shader-toy-mesh.html +++ b/7.x/examples/mesh-and-shaders/shader-toy-mesh.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Shader Toy Mesh

- - + + \ No newline at end of file diff --git a/7.x/examples/mesh-and-shaders/shared-shader.html b/7.x/examples/mesh-and-shaders/shared-shader.html index f54752610..15d0c1d1b 100644 --- a/7.x/examples/mesh-and-shaders/shared-shader.html +++ b/7.x/examples/mesh-and-shaders/shared-shader.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Shared Shader

- - + + \ No newline at end of file diff --git a/7.x/examples/mesh-and-shaders/sharing-geometry.html b/7.x/examples/mesh-and-shaders/sharing-geometry.html index 0ee14f20f..46c19f8cf 100644 --- a/7.x/examples/mesh-and-shaders/sharing-geometry.html +++ b/7.x/examples/mesh-and-shaders/sharing-geometry.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Sharing Geometry

- - + + \ No newline at end of file diff --git a/7.x/examples/mesh-and-shaders/textured-mesh-advanced.html b/7.x/examples/mesh-and-shaders/textured-mesh-advanced.html index a16d100e7..8ce72f453 100644 --- a/7.x/examples/mesh-and-shaders/textured-mesh-advanced.html +++ b/7.x/examples/mesh-and-shaders/textured-mesh-advanced.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Textured Mesh Advanced

- - + + \ No newline at end of file diff --git a/7.x/examples/mesh-and-shaders/textured-mesh-basic.html b/7.x/examples/mesh-and-shaders/textured-mesh-basic.html index 62f09533c..5592b850d 100644 --- a/7.x/examples/mesh-and-shaders/textured-mesh-basic.html +++ b/7.x/examples/mesh-and-shaders/textured-mesh-basic.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Textured Mesh Basic

- - + + \ No newline at end of file diff --git a/7.x/examples/mesh-and-shaders/triangle-color.html b/7.x/examples/mesh-and-shaders/triangle-color.html index 68aa32651..1ec250cab 100644 --- a/7.x/examples/mesh-and-shaders/triangle-color.html +++ b/7.x/examples/mesh-and-shaders/triangle-color.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Triangle Color

- - + + \ No newline at end of file diff --git a/7.x/examples/mesh-and-shaders/triangle-textured.html b/7.x/examples/mesh-and-shaders/triangle-textured.html index 8e49d4508..57a7d8ed1 100644 --- a/7.x/examples/mesh-and-shaders/triangle-textured.html +++ b/7.x/examples/mesh-and-shaders/triangle-textured.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Triangle Textured

- - + + \ No newline at end of file diff --git a/7.x/examples/mesh-and-shaders/triangle.html b/7.x/examples/mesh-and-shaders/triangle.html index 55d26e6a8..39df7c1a2 100644 --- a/7.x/examples/mesh-and-shaders/triangle.html +++ b/7.x/examples/mesh-and-shaders/triangle.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Triangle

- - + + \ No newline at end of file diff --git a/7.x/examples/mesh-and-shaders/uniforms.html b/7.x/examples/mesh-and-shaders/uniforms.html index 13e6871c2..8705f379a 100644 --- a/7.x/examples/mesh-and-shaders/uniforms.html +++ b/7.x/examples/mesh-and-shaders/uniforms.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Uniforms

- - + + \ No newline at end of file diff --git a/7.x/examples/offscreen-canvas/basic.html b/7.x/examples/offscreen-canvas/basic.html index ab94d795f..74d6dd4d0 100644 --- a/7.x/examples/offscreen-canvas/basic.html +++ b/7.x/examples/offscreen-canvas/basic.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Basic

- - + + \ No newline at end of file diff --git a/7.x/examples/sprite/animated-sprite-animation-speed.html b/7.x/examples/sprite/animated-sprite-animation-speed.html index 8317aacf8..e8273a721 100644 --- a/7.x/examples/sprite/animated-sprite-animation-speed.html +++ b/7.x/examples/sprite/animated-sprite-animation-speed.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Animated Sprite Animation Speed

- - + + \ No newline at end of file diff --git a/7.x/examples/sprite/animated-sprite-explosion.html b/7.x/examples/sprite/animated-sprite-explosion.html index d150be01a..c8aab4b6a 100644 --- a/7.x/examples/sprite/animated-sprite-explosion.html +++ b/7.x/examples/sprite/animated-sprite-explosion.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Animated Sprite Explosion

- - + + \ No newline at end of file diff --git a/7.x/examples/sprite/animated-sprite-jet.html b/7.x/examples/sprite/animated-sprite-jet.html index 1a6f6115a..8481b82b2 100644 --- a/7.x/examples/sprite/animated-sprite-jet.html +++ b/7.x/examples/sprite/animated-sprite-jet.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Animated Sprite Jet

- - + + \ No newline at end of file diff --git a/7.x/examples/sprite/basic.html b/7.x/examples/sprite/basic.html index e8c120917..d82ada233 100644 --- a/7.x/examples/sprite/basic.html +++ b/7.x/examples/sprite/basic.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Basic

- - + + \ No newline at end of file diff --git a/7.x/examples/sprite/texture-swap.html b/7.x/examples/sprite/texture-swap.html index 3cf29140f..22cf00ff4 100644 --- a/7.x/examples/sprite/texture-swap.html +++ b/7.x/examples/sprite/texture-swap.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Texture Swap

- - + + \ No newline at end of file diff --git a/7.x/examples/sprite/tiling-sprite.html b/7.x/examples/sprite/tiling-sprite.html index abd14cf55..4d4a22821 100644 --- a/7.x/examples/sprite/tiling-sprite.html +++ b/7.x/examples/sprite/tiling-sprite.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Tiling Sprite

- - + + \ No newline at end of file diff --git a/7.x/examples/sprite/video.html b/7.x/examples/sprite/video.html index f5cc1e0c5..60e83150c 100644 --- a/7.x/examples/sprite/video.html +++ b/7.x/examples/sprite/video.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Video

- - + + \ No newline at end of file diff --git a/7.x/examples/text/bitmap-text.html b/7.x/examples/text/bitmap-text.html index f84732cca..9a3275515 100644 --- a/7.x/examples/text/bitmap-text.html +++ b/7.x/examples/text/bitmap-text.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Bitmap Text

- - + + \ No newline at end of file diff --git a/7.x/examples/text/from-font.html b/7.x/examples/text/from-font.html index 8e0e95b7c..82911f2b4 100644 --- a/7.x/examples/text/from-font.html +++ b/7.x/examples/text/from-font.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

From Font

- - + + \ No newline at end of file diff --git a/7.x/examples/text/pixi-text.html b/7.x/examples/text/pixi-text.html index fb64955ce..8bb44c896 100644 --- a/7.x/examples/text/pixi-text.html +++ b/7.x/examples/text/pixi-text.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Pixi Text

- - + + \ No newline at end of file diff --git a/7.x/examples/text/web-font.html b/7.x/examples/text/web-font.html index 5baad4039..9bc88cd6c 100644 --- a/7.x/examples/text/web-font.html +++ b/7.x/examples/text/web-font.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Web Font

- - + + \ No newline at end of file diff --git a/7.x/examples/textures/gradient-basic.html b/7.x/examples/textures/gradient-basic.html index 27df682a8..97e8d40b9 100644 --- a/7.x/examples/textures/gradient-basic.html +++ b/7.x/examples/textures/gradient-basic.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Gradient Basic

- - + + \ No newline at end of file diff --git a/7.x/examples/textures/gradient-resource.html b/7.x/examples/textures/gradient-resource.html index 12a9687cc..d5e7509ee 100644 --- a/7.x/examples/textures/gradient-resource.html +++ b/7.x/examples/textures/gradient-resource.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Gradient Resource

- - + + \ No newline at end of file diff --git a/7.x/examples/textures/render-texture-advanced.html b/7.x/examples/textures/render-texture-advanced.html index 3dbf928e0..9bfb61661 100644 --- a/7.x/examples/textures/render-texture-advanced.html +++ b/7.x/examples/textures/render-texture-advanced.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Render Texture Advanced

- - + + \ No newline at end of file diff --git a/7.x/examples/textures/render-texture-basic.html b/7.x/examples/textures/render-texture-basic.html index f96947a0a..61a190aef 100644 --- a/7.x/examples/textures/render-texture-basic.html +++ b/7.x/examples/textures/render-texture-basic.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Render Texture Basic

- - + + \ No newline at end of file diff --git a/7.x/examples/textures/texture-rotate.html b/7.x/examples/textures/texture-rotate.html index 2137ddac6..a791037b4 100644 --- a/7.x/examples/textures/texture-rotate.html +++ b/7.x/examples/textures/texture-rotate.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Texture Rotate

- - + + \ No newline at end of file diff --git a/7.x/faq.html b/7.x/faq.html index 9ecc17b8e..5ee629fc9 100644 --- a/7.x/faq.html +++ b/7.x/faq.html @@ -9,8 +9,8 @@ - - + +
@@ -22,7 +22,7 @@ are what make it possible to push PixiJS further, faster. Contributions allow us to commission the PixiJS developer community to accelerate feature development and create more in-depth documentation. Support Us by making a contribution via Open Collective. Go on! It will be a massive help AND make you feel good about yourself, win win ;)

Where do I get it?​

Visit our GitHub page to download the very latest version of PixiJS. This is the most up-to-date resource for PixiJS and should always be your first port of call to make sure you are using the latest version. Just click the 'Download' link in the navigation.

How do I get started?​

Right here! Take a look through the Resources section for a wealth of information including documentation, forums, tutorials and the Goodboy blog.

Why should I use PixiJS?​

Because you care about speed. PixiJS' #1 mantra has always been speed. We really do feel the need! We do everything we can to make PixiJS as streamlined, efficient and fast as possible, whilst balancing it with offering as many crucial and valuable features as we can.

Is PixiJS a game engine?​

No. PixiJS is what we've come to think of as a "creation engine". Whilst it is extremely good for making games, the core essence of PixiJS is simply moving things around on screens as quickly and efficiently as possible. It does of course happen that it is absolutely brilliant for making games though!

Who makes PixiJS?​

Outside of the highly active PixiJS community, it is primarily maintained by Mat Groves, Technical Partner of our creative agency Goodboy Digital. One of the huge advantages of creating PixiJS within the framework of a working agency is that it means its features are always driven by genuine industry demands and critically are always trialled "in anger" in our cutting-edge games, sites and apps.

I found a bug. What should I do?​

Two things - lets us know via the PixiJS GitHub community and even better yet, if you know how, post a fix! Our Community is stronger in numbers so we're always keen to welcome new contributors into the team to help us shape what PixiJS becomes next.

- - + + \ No newline at end of file diff --git a/7.x/guides.html b/7.x/guides.html index 3bee87222..7cc0e7180 100644 --- a/7.x/guides.html +++ b/7.x/guides.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Welcome

PixiJS is an open source, web-based rendering system that provides blazing fast performance for games, data visualization, and other graphics intensive projects. These guides are designed to be a companion to the API documentation, providing a structured introduction to using the API to solve problems and build projects.

About The Guides​

If you're new to PixiJS, we suggest you start with the Basics and read through them in order (a good place to start is Getting Started). While PixiJS has a mature API and solid documentation, the guides go over many common issues and questions that developers new to the system encounter.

Other Resources​

As you explore the guides, you may find these resources valuable:

- - + + \ No newline at end of file diff --git a/7.x/guides/basics/architecture-overview.html b/7.x/guides/basics/architecture-overview.html index e54c6f046..880dca2bb 100644 --- a/7.x/guides/basics/architecture-overview.html +++ b/7.x/guides/basics/architecture-overview.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Architecture Overview

OK, now that you've gotten a feel for how easy it is to build a PixiJS application, let's get into the specifics. For the rest of the Basics section, we're going to work from the high level down to the details. We'll start with an overview of how PixiJS is put together.

The Code​

Before we get into how the code is layed out, let's talk about where it lives. PixiJS is an open source product hosted on GitHub. Like any GitHub repo, you can browse and download the raw source files for each PixiJS class, as well as search existing issues & bugs, and even submit your own. PixiJS is written in a JavaScript variant called TypeScript, which enables type-checking in JavaScript via a pre-compile step.

The Components​

PixiJS is a modular rendering engine. Each task required for generating, updating and displaying content is broken out into its own component. Not only does this make the code cleaner, it allows for greater extensibility. Additionally, with the use of the PixiJS Customize tool, it's possible to build a custom PixiJS file containing only the subset of features your project needs, saving download size.

Here's a list of the major components that make up PixiJS. Note that this list isn't exhaustive. Additionally, don't worry too much about how each component works. The goal here is to give you a feel for what's under the hood as we start exploring the engine.

Major Components​

ComponentDescription
Renderer @pixi/coreThe core of the PixiJS system is the renderer, which displays the scene graph and draws it to the screen. The default renderer for PixiJS is based on WebGL under the hood.
Container @pixi/displayMain display object which creates a scene graph: the tree of renderable objects to be displayed, such as sprites, graphics and text. See Scene Graph for more details.
Loader @pixi/loaderThe loader system provides tools for asynchronously loading resources such as images and audio files.
Ticker @pixi/tickerTickers provide periodic callbacks based on a clock. Your game update logic will generally be run in response to a tick once per frame. You can have multiple tickers in use at one time.
Application @pixi/appThe Application is a simple helper that wraps a Loader, Ticker and Renderer into a single, convenient easy-to-use object. Great for getting started quickly, prototyping and building simple projects.
Interaction @pixi/interactionPixiJS supports both touch and mouse-based interaction - making objects clickable, firing hover events, etc.
Accessibility @pixi/accessibilityWoven through our display system is a rich set of tools for enabling keyboard and screen-reader accessibility.
- - + + \ No newline at end of file diff --git a/7.x/guides/basics/getting-started.html b/7.x/guides/basics/getting-started.html index 097c71d45..37868a357 100644 --- a/7.x/guides/basics/getting-started.html +++ b/7.x/guides/basics/getting-started.html @@ -9,8 +9,8 @@ - - + +
@@ -18,7 +18,7 @@ experience developing JavaScript-based applications. If you are a coding veteran, you may find that the level of detail here is not helpful. If that's the case, you may want to skim this guide, then jump into how to work with PixiJS and packers like webpack and npm.

A Note About JavaScript​

One final note. The JavaScript universe is currently in transition from old-school JavaScript (ES5) to the newer ES6 flavor:

// ES5
var x = 5;
setTimeout(function() { alert(x); }, 1000);
// ES6
const x = 5;
setTimeout(() => alert(x), 1000);

ES6 brings a number of major advantages in terms of clearer syntax, better variable scoping, native class support, etc. By now, all major browsers support it. Given this, our examples in these guides will use ES6. This doesn't mean you can't use PixiJS with ES5 programs! Just mentally substitute "var" for "let/const", expand the shorter function-passing syntax, and everything will run just fine.

Components of a PixiJS Application​

OK! With those notes out of the way, let's get started. There are only a few steps required to write a PixiJS application:

Let's walk through them together.

The HTML File​

PixiJS is a JavaScript library that runs in a web page. So the first thing we're going to need is some HTML in a file. In a real PixiJS application, you might want to embed your display within a complex existing page, or you might want your display area to fill the whole page. For this demo, we'll build an empty page to start:

<!doctype html>
<html>
  <head>
  </head>
  <body>
    <h1>Hello PixiJS</h1>
  </body>
</html>

Create a new folder named pixi-test, then copy and paste this HTML into a new file in the pixi-test folder named index.html.

Serving the File​

You will need to run a web server to develop locally with PixiJS. Web browsers prevent loading local files (such as images and audio files) on locally loaded web pages. If you just double-click your new HTML file, you'll get an error when you try to add a sprite to the PixiJS stage.

Running a web server sounds complex and difficult, but it turns out there are a number of simple web servers that will serve this purpose. For this guide, we're going to be working with Mongoose, but you could just as easily use XAMPP or the http-server Node.js package to serve your files.

To start serving your page with Mongoose, go to the Mongoose download page and download the free server for your operating system. Mongoose defaults to serving the files in the folder it's run in, so copy the downloaded executable into the folder you created in the prior step (pixi-test). Double-click the executable, tell your operating system that you trust the file to run, and you'll have a running web server, serving your new folder.

Test that everything is working by opening your browser of choice and entering http://127.0.0.1:8080 in the location bar. (Mongoose by default serves files on port 8080.) You should see "Hello PixiJS" and nothing else. If you get an error at this step, it means you didn't name your file index.html or you mis-configured your web server.

Loading PixiJS​

OK, so we have a web page, and we're serving it. But it's empty. The next step is to actually load the PixiJS library. If we were building a real application, we'd want to download a target version of PixiJS from the Pixi Github repo so that our version wouldn't change on us. But for this sample application, we'll just use the CDN version of PixiJS. Add this line to the <head> section of your index.html file:

<script src="https://pixijs.download/release/pixi.js"></script>

This will include a non-minified version of the latest version of PixiJS when your page loads, ready to be used. We use the non-minified version because we're in development. In production, you'd want to use pixi.min.js instead, which is compressed for faster download and excludes assertions and deprecation warnings that can help when building your project, but take longer to download and run.

Creating an Application​

Loading the library doesn't do much good if we don't use it, so the next step is to start up PixiJS. Start by replacing the line <h1>Hello PixiJS</h1> with a script tag like so:

<script>
  let app = new PIXI.Application({ width: 640, height: 360 });
</script>

What we're doing here is adding a JavaScript code block, and in that block creating a new PIXI.Application instance. Application 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.

Adding the View to the DOM​

When the PIXI.Application class creates the renderer, it builds a Canvas element that it will render to. In order to see what we draw with PixiJS, we need to add this Canvas element to the web page's DOM. Append the following line to your page's script block:

  document.body.appendChild(app.view);

This takes the view created by the application (the Canvas element) and adds it to the body of your page.

Creating a Sprite​

So far all we've been doing is prep work. We haven't actually told PixiJS to draw anything. Let's fix that by adding an image to be displayed.

There are a number of ways to draw images in PixiJS, but the simplest is by using a Sprite. We'll get into the details of how the scene graph works in a later guide, but for now all you need to know is that PixiJS renders a hierarchy of DisplayObjects. A Sprite is a type of DisplayObject that wraps a loaded image resource to allow drawing it, scaling it, rotating it, and so forth.

Before PixiJS can render an image, it needs to be loaded. Just like in any web page, image loading happens asynchronously. We'll talk a lot more about resource loading in later guides. For now, we can use a helper method on the PIXI.Sprite class to handle the image loading for us:

  // Magically load the PNG asynchronously
  let sprite = PIXI.Sprite.from('sample.png');

Download the sample PNG here, and save it into your pixi-test directory next to your index.html.

Adding the Sprite to the Stage​

Finally, we need to add our new sprite to the stage. The stage is simply a Container that is the root of the scene graph. Every child of the stage container will be rendered every frame. By adding our sprite to the stage, we tell PixiJS's renderer we want to draw it.

  app.stage.addChild(sprite);

Writing an Update Loop​

While you can use PixiJS for static content, for most projects you'll want to add animation. Our sample app is actually cranking away, rendering the same sprite in the same place multiple times a second. All we have to do to make the image move is to update its attributes once per frame. To do this, we want to hook into the application's ticker. A ticker is a PixiJS object that runs one or more callbacks each frame. Doing so is surprisingly easy. Add the following to the end of your script block:

  // Add a variable to count up the seconds our demo has been running
  let elapsed = 0.0;
  // Tell our application's ticker to run a new callback every frame, passing
  // in the amount of time that has passed since the last tick
  app.ticker.add((delta) => {
    // Add the time to our total elapsed time
    elapsed += delta;
    // Update the sprite's X position based on the cosine of our elapsed time.  We divide
    // by 50 to slow the animation down a bit...
    sprite.x = 100.0 + Math.cos(elapsed/50.0) * 100.0;
  });

All you need to do is to call app.ticker.add(...), pass it a callback function, and then update your scene in that function. It will get called every frame, and you can move, rotate etc. whatever you'd like to drive your project's animations.

Putting It All Together​

That's it! The simplest PixiJS project!

Here's the whole thing in one place. Check your file and make sure it matches if you're getting errors.

<!doctype html>
<html>
  <head>
    <script src="https://pixijs.download/release/pixi.min.js"></script>
  </head>
  <body>
    <script>
      // Create the application helper and add its render target to the page
      let app = new PIXI.Application({ width: 640, height: 360 });
      document.body.appendChild(app.view);

      // 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((delta) => {
        elapsed += delta;
        sprite.x = 100.0 + Math.cos(elapsed/50.0) * 100.0;
      });
    </script>
  </body>
</html>

Once you have things working, the next thing to do is to read through the rest of the Basics guides to dig into how all this works in much greater depth.

- - + + \ No newline at end of file diff --git a/7.x/guides/basics/render-loop.html b/7.x/guides/basics/render-loop.html index 5d955a2b6..2f1726307 100644 --- a/7.x/guides/basics/render-loop.html +++ b/7.x/guides/basics/render-loop.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Render Loop

Now that you understand the major parts of the system, let's look at how these parts work together to get your project onto the screen. Unlike a web page, PixiJS is constantly updating and re-drawing itself, over and over. You update your objects, then PixiJS renders them to the screen, then the process repeats. We call this cycle the render loop.

The majority of any PixiJS project is contained in this update + render cycle. You code the updates, PixiJS handles the rendering.

Let's walk through what happens each frame of the render loop. There are three main steps.

Running Ticker Callbacks​

The first step is to calculate how much time has elapsed since the last frame, and then call the Application object's ticker callbacks with that time delta. This allows your project's code to animate and update the sprites, etc. on the stage in preparation for rendering.

Updating the Scene Graph​

We'll talk a lot more about what a scene graph is and what it's made of in the next guide, but for now, all you need to know is that it contains the things you're drawing - sprites, text, etc. - and that these objects are in a tree-like hierarchy. After you've updated your game objects by moving, rotating and so forth, PixiJS needs to calculate the new positions and state of every object in the scene, before it can start drawing.

Rendering the Scene Graph​

Now that our game's state has been updated, it's time to draw it to the screen. The rendering system starts with the root of the scene graph (app.stage), and starts rendering each object and its children, until all objects have been drawn. No culling or other cleverness is built into this process. If you have lots of objects outside of the visible portion of the stage, you'll want to investigate disabling them as an optimization.

Frame Rates​

A note about frame rates. The render loop can't be run infinitely fast - drawing things to the screen takes time. In addition, it's not generally useful to have a frame updated more than once per screen update (commonly 60fps, but newer monitors can support 144fps and up). Finally, PixiJS runs in the context of a web browser like Chrome or Firefox. The browser itself has to balance the needs of various internal operations with servicing any open tabs. All this to say, determining when to draw a frame is a complex issue.

In cases where you want to adjust that behavior, you can set the minFPS and maxFPS attributes on a Ticker to give PixiJS hints as to the range of tick speeds you want to support. Just be aware that due to the complex environment, your project cannot guarantee a given FPS. Use the passed delta value in your ticker callbacks to scale any animations to ensure smooth playback.

Custom Render Loops​

What we've just covered is the default render loop provided out of the box by the Application helper class. There are many other ways of creating a render loop that may be helpful for advanced users looking to solve a given problem. While you're prototyping and learning PixiJS, sticking with the Application's provided system is the recommended approach.

- - + + \ No newline at end of file diff --git a/7.x/guides/basics/scene-graph.html b/7.x/guides/basics/scene-graph.html index bed8d5789..78a91f46a 100644 --- a/7.x/guides/basics/scene-graph.html +++ b/7.x/guides/basics/scene-graph.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Scene Graph

Every frame, PixiJS is updating and then rendering the scene graph. Let's talk about what's in the scene graph, and how it impacts how you develop your project. If you've built games before, this should all sound very familiar, but if you're coming from HTML and the DOM, it's worth understanding before we get into specific types of objects you can render.

The Scene Graph Is a Tree​

The scene graph's root node is a container maintained by the application, and referenced with app.stage. When you add a sprite or other renderable object as a child to the stage, it's added to the scene graph and will be rendered and interactable. Most PixiJS objects can also have children, and so as you build more complex scenes, you will end up with a tree of parent-child relationships, rooted at the app's stage.

(A helpful tool for exploring your project is the Pixi.js devtools plugin for Chrome, which allows you to view and manipulate the scene graph in real time as it's running!)

Parents and Children​

When a parent moves, its children move as well. When a parent is rotated, its children are rotated too. Hide a parent, and the children will also be hidden. If you have a game object that's made up of multiple sprites, you can collect them under a container to treat them as a single object in the world, moving and rotating as one.

Each frame, PixiJS runs through the scene graph from the root down through all the children to the leaves to calculate each object's final position, rotation, visibility, transparency, etc. If a parent's alpha is set to 0.5 (making it 50% transparent), all its children will start at 50% transparent as well. If a child is then set to 0.5 alpha, it won't be 50% transparent, it will be 0.5 x 0.5 = 0.25 alpha, or 75% transparent. Similarly, an object's position is relative to its parent, so if a parent is set to an x position of 50 pixels, and the child is set to an x position of 100 pixels, it will be drawn at a screen offset of 150 pixels, or 50 + 100.

Here's an example. We'll create three sprites, each a child of the last, and animate their position, rotation, scale and alpha. Even though each sprite's properties are set to the same values, the parent-child chain amplifies each change:

// Create the application helper and add its render target to the page
const app = new PIXI.Application({ width: 640, height: 360 });
document.body.appendChild(app.view);

// Add a container to center our sprite stack on the page
const container = new PIXI.Container();
container.x = app.screen.width / 2;
container.y = app.screen.height / 2;
app.stage.addChild(container);

// Create the 3 sprites, each a child of the last
const sprites = [];
let parent = container;
for (let i = 0; i < 3; i++) {
  let sprite = PIXI.Sprite.from('assets/images/sample.png');
  sprite.anchor.set(0.5);
  parent.addChild(sprite);
  sprites.push(sprite);
  parent = sprite;
}

// Set all sprite's properties to the same value, animated over time
let elapsed = 0.0;
app.ticker.add((delta) => {
  elapsed += delta / 60;
  const amount = Math.sin(elapsed);
  const scale = 1.0 + 0.25 * amount;
  const alpha = 0.75 + 0.25 * amount;
  const angle = 40 * amount;
  const x = 75 * amount;
  for (let i = 0; i < sprites.length; i++) {
    const sprite = sprites[i];
    sprite.scale.set(scale);
    sprite.alpha = alpha;
    sprite.angle = angle;
    sprite.x = x;
  }
});

The cumulative translation, rotation, scale and skew of any given node in the scene graph is stored in the object's worldTransform property. Similarly, the cumulative alpha value is stored in the worldAlpha property.

Render Order​

So we have a tree of things to draw. Who gets drawn first?

PixiJS renders the tree from the root down. At each level, the current object is rendered, then each child is rendered in order of insertion. So the second child is rendered on top of the first child, and the third over the second.

Check out this example, with two parent objects A & D, and two children B & C under A:

// Create the application helper and add its render target to the page
const app = new PIXI.Application({ width: 640, height: 360 });
document.body.appendChild(app.view);

// Label showing scene graph hierarchy
const label = new PIXI.Text('Scene Graph:\n\napp.stage\n  ┗ A\n     ┗ B\n     ┗ C\n  ┗ D', {fill: '#ffffff'});
label.position = {x: 300, y: 100};
app.stage.addChild(label);

// Helper function to create a block of color with a letter
const letters = [];
function addLetter(letter, parent, color, pos) {
  const bg = new PIXI.Sprite(PIXI.Texture.WHITE);
  bg.width = 100;
  bg.height = 100;
  bg.tint = color;

  const text = new PIXI.Text(letter, {fill: "#ffffff"});
  text.anchor.set(0.5);
  text.position = {x: 50, y: 50};

  const container = new PIXI.Container();
  container.position = pos;
  container.visible = false;
  container.addChild(bg, text);
  parent.addChild(container);

  letters.push(container);
  return container;
}

// Define 4 letters
let a = addLetter('A', app.stage, 0xff0000, {x: 100, y: 100});
let b = addLetter('B', a,         0x00ff00, {x: 20,  y: 20});
let c = addLetter('C', a,         0x0000ff, {x: 20,  y: 40});
let d = addLetter('D', app.stage, 0xff8800, {x: 140, y: 100});

// Display them over time, in order
let elapsed = 0.0;
app.ticker.add((delta) => {
  elapsed += delta / 60.0;
  if (elapsed >= letters.length) { elapsed = 0.0; }
  for (let i = 0; i < letters.length; i ++) {
    letters[i].visible = elapsed >= i;
  }
});

If you'd like to re-order a child object, you can use setChildIndex(). To add a child at a given point in a parent's list, use addChildAt(). Finally, you can enable automatic sorting of an object's children using the sortableChildren option combined with setting the zIndex property on each child.

Culling​

If you're building a project where a large proportion of your DisplayObject's are off-screen (say, a side-scrolling game), you will want to cull those objects. Culling is the process of evaluating if an object (or its children!) is on the screen, and if not, turning off rendering for it. If you don't cull off-screen objects, the renderer will still draw them, even though none of their pixels end up on the screen.

PixiJS doesn't provide built-in support for viewport culling, but you can find 3rd party plugins that might fit your needs. Alternately, if you'd like to build your own culling system, simply run your objects during each tick and set renderable to false on any object that doesn't need to be drawn.

Local vs Global Coordinates​

If you add a sprite to the stage, by default it will show up in the top left corner of the screen. That's the origin of the global coordinate space used by PixiJS. If all your objects were children of the stage, that's the only coordinates you'd need to worry about. But once you introduce containers and children, things get more complicated. A child object at [50, 100] is 50 pixels right and 100 pixels down from its parent.

We call these two coordinate systems "global" and "local" coordinates. When you use position.set(x, y) on an object, you're always working in local coordinates, relative to the object's parent.

The problem is, there are many times when you want to know the global position of an object. For example, if you want to cull offscreen objects to save render time, you need to know if a given child is outside the view rectangle.

To convert from local to global coordinates, you use the toGlobal() function. Here's a sample usage:

// Get the global position of an object, relative to the top-left of the screen
let globalPos = obj.toGlobal(new PIXI.Point(0,0));

This snippet will set globalPos to be the global coordinates for the child object, relative to [0, 0] in the global coordinate system.

Global vs Screen Coordinates​

When your project is working with the host operating system or browser, there is a third coordinate system that comes into play - "screen" coordinates (aka "viewport" coordinates). Screen coordinates represent position relative to the top-left of the canvas element that PixiJS is rendering into. Things like the DOM and native mouse click events work in screen space.

Now, in many cases, screen space is equivalent to world space. This is the case if the size of the canvas is the same as the size of the render view specified when you create you PIXI.Application. By default, this will be the case - you'll create for example an 800x600 application window and add it to your HTML page, and it will stay that size. 100 pixels in world coordinates will equal 100 pixels in screen space. BUT! It is common to stretch the rendered view to have it fill the screen, or to render at a lower resolution and up-scale for speed. In that case, the screen size of the canvas element will change (e.g. via CSS), but the underlying render view will not, resulting in a mis-match between world coordinates and screen coordinates.

- - + + \ No newline at end of file diff --git a/7.x/guides/basics/what-pixijs-is-not.html b/7.x/guides/basics/what-pixijs-is-not.html index fc6bc996d..fa0e6379b 100644 --- a/7.x/guides/basics/what-pixijs-is-not.html +++ b/7.x/guides/basics/what-pixijs-is-not.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

What PixiJS Is Not

While PixiJS can do many things, there are things it can't do, or that require additional tools to accomplish. Newcomers to PixiJS often struggle to identify which tasks PixiJS can solve, and which require outside solutions. If you're about to start a project, it can be helpful to know if PixiJS is a good fit for your needs. The following list is obviously incomplete - PixiJS is also not, for example, a duck - but it includes many common tasks or features that you might expect us to support.

PixiJS Is Not ... A Framework​

PixiJS is a rendering engine, and it supports additional features such as interaction management that are commonly needed when using a render engine. But it is not a framework like Unity or Phaser. Frameworks are designed to do all the things you'd need to do when building a game - user settings management, music playback, object scripting, art pipeline management... the list goes on. PixiJS is designed to do one thing really well - render graphical content. This lets us focus on keeping up with new technology, and makes downloading PixiJS blazingly fast.

... A 3D Renderer​

PixiJS is built for 2D. Platformers, adventure games, interactive ads, custom data visualization... all good. But if you want to render 3D models, you might want to check out babylon.js or three.js.

... A Mobile App​

If you're looking to build mobile games, you can do it with PixiJS, but you'll need to use a deployment system like Apache Cordova if you want access to native bindings. We don't provide access to the camera, location services, notifications, etc.

... A UI Library​

Building a truly generic UI system is a huge challenge, as anyone who has worked with Unity's UI tools can attest. We've chosen to avoid the complexity to stay true to our core focus on speed. While you can certainly build your own UI using PixiJS's scene graph and interaction manager, we don't ship with a UI library out of the box.

... A Data Store​

There are many techniques and technologies that you can use to store settings, scores, and other data. Cookies, Web Storage, server-based storage... there are many solutions, each with advantages and disadvantages. You can use any of them with PixiJS, but we don't provide tools to do so.

... An Audio Library​

At least, not out of the box. Again, web audio technology is a constantly evolving challenge, with constantly changing rules and requirements across many browsers. There are a number of dedicated web audio libraries (such as Howler.js that can be used with PixiJS to play sound effects and music. Alternatively, the PixiJS Sound plugin is designed to work well with PixiJS.

... A Development Environment​

There are a number of tools that are useful for building 2D art and games that you might expect to be a part of PixiJS, but we're a rendering engine, not a development environment. Packing sprite sheets, processing images, building mipmaps or Retina-ready sprites - there are great standalone tools for this type of tooling. Where appropriate throughout the guides, we'll point you to tools that may be useful.

So Is PixiJS Right For Me?​

Only you know! If you're looking for a tightly focused, fast and efficient rendering engine for your next web-based project, PixiJS is likely a great fit.

If you need a full game development framework, with native bindings and a rich UI library, you may want to explore other options.

Or you may not. It can be faster and easier to build just the subset of a full framework that your project needs than it can be to digest a monolithic API with bells and whistles you don't need. There are hundreds of complex, rich games and visual projects that use PixiJS for rendering, with plugins or custom code to add the UI and sound effects. There are benefits to both approaches. Regardless, we hope you have a better feel for what PixiJS can (and cannot!) offer your project.

- - + + \ No newline at end of file diff --git a/7.x/guides/basics/what-pixijs-is.html b/7.x/guides/basics/what-pixijs-is.html index 22753fa11..805e217c6 100644 --- a/7.x/guides/basics/what-pixijs-is.html +++ b/7.x/guides/basics/what-pixijs-is.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

What PixiJS Is

So what exactly is PixiJS? At its heart, PixiJS is a rendering system that uses WebGL (or optionally Canvas) to display images and other 2D visual content. It provides a full scene graph (a hierarchy of objects to render), and provides interaction support to enable handling click and touch events. It is a natural replacement for Flash in the modern HTML5 world, but provides better performance and pixel-level effects that go beyond what Flash could achieve. It is perfect for online games, educational content, interactive ads, data visualization... any web-based application where complex graphics are important. And coupled with technology such as Cordova and Electron, PixiJS apps can be distributed beyond the browser as mobile and desktop applications.

Here's what else you get with PixiJS:

PixiJS Is ... Fast​

One of the major features that distinguishes PixiJS from other web-based rendering solutions is speed. From the ground up, the render pipeline has been built to get the most performance possible out of your users' browsers. Automatic sprite and geometry batching, careful use of WebGL resources, a tight scene graph - no matter your application, speed is valuable, and PixiJS has it to spare.

... More Than Just Sprites​

Drawing images on a page can be handled with HTML5 and the DOM, so why use PixiJS? Beyond performance, the answer is that PixiJS goes well beyond simple images. Draw trails and tracks with SimpleRope. Draw polygons, lines, circles and other primitives with Graphics. Text provides full text rendering support that's just as performant as sprites. And even when drawing simple images, PixiJS natively supports spritesheets for efficient loading and ease of development.

... WebGL Native​

WebGL is the JavaScript API for accessing users' GPUs for fast rendering and advanced effects. PixiJS leverages WebGL to display thousands of moving sprites efficiently even on mobile devices. But using WebGL offers more than just speed. By using the Filter class, you can write shader programs (or use pre-built ones!) to achieve displacement maps, blurring, and other advanced visual effects that cannot be accomplished with just the DOM or Canvas APIs.

... Open Source​

Want to understand how the engine works? Trying to track down a bug? Been burned by closed-source projects going dark? With PixiJS, you get a mature project with full source code access. We're MIT licensed for compatibility, and hosted on GitHub for issue tracking and ease of access.

... Extensible​

Open source helps. So does being based on JavaScript. But the real reason PixiJS is easy to extend is the clean internal API that underlies every part of the system. After years of development and 5 major releases, PixiJS is ready to make your project a success, no matter what your needs.

... Easy to Deploy​

Flash required the player. Unity requires an installer or app store. PixiJS requires... a browser. Deploying PixiJS on the web is exactly like deploying a web site. That's all it is - JavaScript + images + audio, like you've done a hundred times. Your users simply visit a URL, and your game or other content is ready to run. But it doesn't stop at the web. If you want to deploy a mobile app, wrap your PixiJS code in Cordova. Want to deploy a standalone desktop program? Build an Electron wrapper, and you're ready to rock.

- - + + \ No newline at end of file diff --git a/7.x/guides/components/assets.html b/7.x/guides/components/assets.html index ff52115de..30bbcfdd8 100644 --- a/7.x/guides/components/assets.html +++ b/7.x/guides/components/assets.html @@ -9,8 +9,8 @@ - - + +
@@ -23,7 +23,7 @@ See the following example:

However, if you want to take full advantage of @pixi/Assets you should use bundles. Bundles are just a way to group assets together and can be added manually by calling PIXI.Assets.addBundle(...)/PIXI.Assets.loadBundle(...).

  PIXI.Assets.addBundle('animals', {
    bunny: 'bunny.png',
    chicken: 'chicken.png',
    thumper: 'thumper.png',
  });

 const assets = await PIXI.Assets.loadBundle('animals');

However, the best way to handle bundles is to use a manifest and call PIXI.Assets.init({manifest}) with said manifest (or even better, an URL pointing to it). Splitting our assets into bundles that correspond to screens or stages of our app will come in handy for loading in the background while the user is using the app instead of locking them in a single monolithic loading screen.

{
   "bundles":[
      {
         "name":"load-screen",
         "assets":[
            {
               "name":"background",
               "srcs":"sunset.png"
            },
            {
               "name":"bar",
               "srcs":"load-bar.{png,webp}"
            }
         ]
      },
      {
         "name":"game-screen",
         "assets":[
            {
               "name":"character",
               "srcs":"robot.png"
            },
            {
               "name":"enemy",
               "srcs":"bad-guy.png"
            }
         ]
      }
   ]
}
PIXI.Assets.init({manifest: "path/manifest.json"});

Beware that you can only call init once.

Remember there is no downside in repeating URLs since they will all be cached, so if you need the same asset in two bundles you can duplicate the request without any extra cost!

Background loading​

The old approach to loading was to use PIXI.Loader to load all your assets at the beginning of your app, but users are less patient now and want content to be instantly available so the practices are moving towards loading the bare minimum needed to show the user some content and, while they are interacting with that, we keep loading the following content in the background.

Luckily, @pixi/assets has us covered with a system that allows us to load everything in the background and in case we need some assets right now, bump them to the top of the queue so we can minimize loading times.

To achieve this, we have the methods PIXI.Assets.backgroundLoad(...) and PIXI.Assets.backgroundLoadBundle(...) that will passively begin to load these assets in the background. So when you finally come to loading them you will get a promise that resolves to the loaded assets immediately.

When you finally need the assets to show, you call the usual PIXI.Assets.load(...) or PIXI.Assets.loadBundle(...) and you will get the corresponding promise.

The best way to do this is using bundles, see the following example:

We create one bundle for each screen our game will have and set them all to start downloading at the beginning of our app. If the user progresses slowly enough in our app then they should never get to see a loading screen after the first one!

- - + + \ No newline at end of file diff --git a/7.x/guides/components/containers.html b/7.x/guides/components/containers.html index 1f0fb2f08..0b8d86b2e 100644 --- a/7.x/guides/components/containers.html +++ b/7.x/guides/components/containers.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Containers

The Container class provides a simple display object that does what its name implies - collect a set of child objects together. But beyond grouping objects, containers have a few uses that you should be aware of.

Containers as Groups​

Almost every type of display object is also derived from Container - even Sprites! This means that in many cases you can create a parent-child hierarchy with the objects you want to render.

However, it's a good idea not to do this. Standalone Container objects are very cheap to render, and having a proper hierarchy of Container objects, each containing one or more renderable objects, provides flexibility in rendering order. It also future-proofs your code, as when you need to add an additional object to a branch of the tree, your animation logic doesn't need to change - just drop the new object into the proper Container, and your logic moves the Container with no changes to your code.

So that's the primary use for Containers - as groups of renderable objects in a hierarchy.

Check out the container example code.

Masking​

Another common use for Container objects is as hosts for masked content. "Masking" is a technique where parts of your scene graph are only visible within a given area.

Think of a pop-up window. It has a frame made of one or more Sprites, then has a scrollable content area that hides content outside the frame. A Container plus a mask makes that scrollable area easy to implement. Add the Container, set its mask property to a Graphics object with a rect, and add the text, image, etc. content you want to display as children of that masked Container. Any content that extends beyond the rectangular mask will simply not be drawn. Move the contents of the Container to scroll as desired.

// Create the application helper and add its render target to the page
let app = new PIXI.Application({ width: 640, height: 360 });
document.body.appendChild(app.view);

// Create window frame
let frame = new PIXI.Graphics();
frame.beginFill(0x666666);
frame.lineStyle({ color: 0xffffff, width: 4, alignment: 0 });
frame.drawRect(0, 0, 208, 208);
frame.position.set(320 - 104, 180 - 104);
app.stage.addChild(frame);

// Create a graphics object to define our mask
let mask = new PIXI.Graphics();
// Add the rectangular area to show
mask.beginFill(0xffffff);
mask.drawRect(0,0,200,200);
mask.endFill();

// Add container that will hold our masked content
let maskContainer = new PIXI.Container();
// Set the mask to use our graphics object from above
maskContainer.mask = mask;
// Add the mask as a child, so that the mask is positioned relative to its parent
maskContainer.addChild(mask);
// Offset by the window's frame width
maskContainer.position.set(4,4);
// And add the container to the window!
frame.addChild(maskContainer);

// Create contents for the masked container
let text = new PIXI.Text(
  'This text will scroll up and be masked, so you can see how masking works.  Lorem ipsum and all that.\n\n' +
  'You can put anything in the container and it will be masked!',
  {
    fontSize: 24,
    fill: 0x1010ff,
    wordWrap: true,
    wordWrapWidth: 180
  }
);
text.x = 10;
maskContainer.addChild(text);

// Add a ticker callback to scroll the text up and down
let elapsed = 0.0;
app.ticker.add((delta) => {
  // Update the text's y coordinate to scroll it
  elapsed += delta;
  text.y = 10 + -100.0 + Math.cos(elapsed/50.0) * 100.0;
});

There are two types of masks supported by PixiJS:

Use a Graphics object to create a mask with an arbitrary shape - powerful, but doesn't support anti-aliasing

Sprite: Use the alpha channel from a Sprite as your mask, providing anti-aliased edging - not supported on the Canvas renderer

Filtering​

Another common use for Container objects is as hosts for filtered content. Filters are an advanced, WebGL-only feature that allows PixiJS to perform per-pixel effects like blurring and displacements. By setting a filter on a Container, the area of the screen the Container encompasses will be processed by the filter after the Container's contents have been rendered.

Below are list of filters available by default in PixiJS. There is, however, a community repository with many more filters.

FilterDescription
AlphaFilter: @pixi/filter-alphaSimilar to setting alpha property, but flattens the Container instead of applying to children individually.
BlurFilter: @pixi/filter-blurApply a blur effect
ColorMatrixFilter: @pixi/filter-color-matrixA color matrix is a flexible way to apply more complex tints or color transforms (e.g., sepia tone).
DisplacementFilter: @pixi/filter-displacementDisplacement maps create visual offset pixels, for instance creating a wavy water effect.
FXAAFilter: @pixi/filter-fxaaBasic FXAA (Fast Approximate Anti-Aliasing) to create smoothing effect.
NoiseFilter: @pixi/filter-noiseCreate random noise (e.g., grain effect).

Important: Filters should be use somewhat sparingly. They can slow performance and increase memory if used too often in a scene.

- - + + \ No newline at end of file diff --git a/7.x/guides/components/display-object.html b/7.x/guides/components/display-object.html index 1be1a4a76..9f692eaef 100644 --- a/7.x/guides/components/display-object.html +++ b/7.x/guides/components/display-object.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Display Objects

DisplayObject is the core class for anything that can be rendered by the engine. It's the base class for sprites, text, complex graphics, containers, etc., and provides much of the common functionality for those objects. As you're learning PixiJS, it's important to read through the documentation for this class to understand how to move, scale, rotate and compose the visual elements of your project.

Be aware that you won't use DisplayObject directly - you'll use its functions and attributes in derived classes.

Commonly Used Attributes​

The most common attributes you'll use when laying out and animating content in PixiJS are provided by the DisplayObject class:

PropertyDescription
positionX- and Y-position are given in pixels and change the position of the object relative to its parent, also available directly as object.x / object.y
rotationRotation is specified in radians, and turns an object clockwise (0.0 - 2 * Math.PI)
angleAngle is an alias for rotation that is specified in degrees instead of radians (0.0 - 360.0)
pivotPoint the object rotates around, in pixels - also sets origin for child objects
alphaOpacity from 0.0 (fully transparent) to 1.0 (fully opaque), inherited by children
scaleScale is specified as a percent with 1.0 being 100% or actual-size, and can be set independently for the x and y axis
skewSkew transforms the object in x and y similar to the CSS skew() function, and is specified in radians
visibleWhether the object is visible or not, as a boolean value - prevents updating and rendering object and children
renderableWhether the object should be rendered - when false, object will still be updated, but won't be rendered, doesn't affect children
- - + + \ No newline at end of file diff --git a/7.x/guides/components/graphics.html b/7.x/guides/components/graphics.html index 2f518e7a4..e6d91e1ac 100644 --- a/7.x/guides/components/graphics.html +++ b/7.x/guides/components/graphics.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Graphics

Graphics is a complex and much misunderstood tool in the PixiJS toolbox. At first glance, it looks like a tool for drawing shapes. And it is! But it can also be used to generate masks. How does that work?

In this guide, we're going to de-mystify the Graphics object, starting with how to think about what it does.

Check out the graphics example code.

Graphics Is About Building - Not Drawing​

First-time users of the PIXI.Graphics class often struggle with how it works. Let's look at an example snippet that creates a Graphics object and draws a rectangle:

// Create a Graphics object, set a fill color, draw a rectangle
let obj = new PIXI.Graphics();
obj.beginFill(0xff0000);
obj.drawRect(0, 0, 200, 100);

// Add it to the stage to render
app.stage.addChild(obj);

That code will work - you'll end up with a red rectangle on the screen. But it's pretty confusing when you start to think about it. Why am I drawing a rectangle when constructing the object? Isn't drawing something a one-time action? How does the rectangle get drawn the second frame? And it gets even weirder when you create a Graphics object with a bunch of drawThis and drawThat calls, and then you use it as a mask. What???

The problem is that the function names are centered around drawing, which is an action that puts pixels on the screen. But in spite of that, the Graphics object is really about building.

Let's look a bit deeper at that drawRect() call. When you call drawRect(), PixiJS doesn't actually draw anything. Instead, it stores the rectangle you "drew" into a list of geometry for later use. If you then add the Graphics object to the scene, the renderer will come along, and ask the Graphics object to render itself. At that point, your rectangle actually gets drawn - along with any other shapes, lines, etc. that you've added to the geometry list.

Once you understand what's going on, things start to make a lot more sense. When you use a Graphics object as a mask, for example, the masking system uses that list of graphics primitives in the geometry list to constrain which pixels make it to the screen. There's no drawing involved.

That's why it helps to think of the Graphics class not as a drawing tool, but as a geometry building tool.

Types of Primitives​

There are a lot of functions in the PIXI.Graphics class, but as a quick orientation, here's the list of basic primitives you can add:

  • Line
  • Rect
  • RoundRect
  • Circle
  • Ellipse
  • Arc
  • Bezier and Quadratic Curve

In addition, the Graphics Extras package (@pixi/graphics-extras) optionally includes the following complex primitives:

  • Torus
  • Chamfer Rect
  • Fillet Rect
  • Regular Polygon
  • Star
  • Rounded Polygon

The Geometry List​

Inside every Graphics object is a GraphicsGeometry object. The GraphicsGeometry class manages the list of geometry primitives created by the Graphics parent object. For the most part, you will not work directly with this object. The owning Graphics object creates and manages it. However, there are two related cases where you do work with the list.

First, you can re-use geometry from one Graphics object in another. No matter whether you're re-drawing the same shape over and over, or re-using it as a mask over and over, it's more efficient to share identical GraphicsGeometry. You can do this like so:

// Create a master graphics object
let template = new PIXI.Graphics();
// Add a circle
template.drawCircle(100, 100, 50);

// Create 5 duplicate objects
for (let i = 0; i < 5; i++) {
  // Initialize the duplicate using our template's pre-built geometry
  let duplicate = new PIXI.Graphics(template.geometry);
}

This leads to the second time you need to be aware of the underlying GraphicsGeometry object - avoiding memory leaks. Because Graphics objects can share geometry, you must call destroy() when you no longer need them. Failure to do so will prevent the GraphicsGeometry object it owns from being properly de-referenced, and will lead to memory leaks.

Graphics For Display​

OK, so now that we've covered how the PIXI.Graphics class works, let's look at how you use it. The most obvious use of a Graphics object is to draw dynamically generated shapes to the screen.

Doing so is simple. Create the object, call the various builder functions to add your custom primitives, then add the object to the scene graph. Each frame, the renderer will come along, ask the Graphics object to render itself, and each primitive, with associated line and fill styles, will be drawn to the screen.

Graphics as a Mask​

You can also use a Graphics object as a complex mask. To do so, build your object and primitives as usual. Next create a PIXI.Container object that will contain the masked content, and set its mask property to your Graphics object. The children of the container will now be clipped to only show through inside the geometry you've created. This technique works for both WebGL and Canvas-based rendering.

Check out the masking example code.

Caveats and Gotchas​

The Graphics class is a complex beast, and so there are a number of things to be aware of when using it.

Memory Leaks: The first has already been mentioned - call destroy() on any Graphics object you no longer need to avoid memory leaks.

Holes: Holes you create have to be completely contained in the shape or else it may not be able to triangulate correctly.

Changing Geometry: If you want to change the shape of a Graphics object, you don't need to delete and recreate it. Instead you can use the clear() function to reset the contents of the geometry list, then add new primitives as desired. Be careful of performance when doing this every frame.

Performance: Graphics objects are generally quite performant. However, if you build highly complex geometry, you may pass the threshold that permits batching during rendering, which can negatively impact performance. It's better for batching to use many Graphics objects instead of a single Graphics with many shapes.

Transparency: Because the Graphics object renders its primitives sequentially, be careful when using blend modes or partial transparency with overlapping geometry. Blend modes like ADD and MULTIPLY will work on each primitive, not on the final composite image. Similarly, partially transparent Graphics objects will show primitives overlapping. To apply transparency or blend modes to a single flattened surface, consider using AlphaFilter or RenderTexture.

- - + + \ No newline at end of file diff --git a/7.x/guides/components/interaction.html b/7.x/guides/components/interaction.html index 8aa1f46a5..197f62bf7 100644 --- a/7.x/guides/components/interaction.html +++ b/7.x/guides/components/interaction.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Interaction

PixiJS is primarily a rendering system, but it also includes support for interactivity. Adding support for mouse and touch events to your project is simple and consistent.

Event Modes​

The new event-based system that replaced InteractionManager from v6 has expanded the definition of what a DisplayObject means to be interactive. With this we have introduced eventMode which allows you to control how an object responds to interaction events. This is similar to the interactive property in v6 but with more options.

eventModeDescription
noneIgnores all interaction events, similar to CSS's pointer-events: none, good optimization for non-interactive children
passiveDoes not emit events and ignores hit testing on itself but does allow for events and hit testing only its interactive children. If you want to be compatible with v6, set this as your default eventMode (see options in Renderer, Application, etc)
autoDoes not emit events and but is hit tested if parent is interactive. Same as interactive = false in v7
staticEmit events and is hit tested. Same as interaction = true in v7, useful for objects like buttons that do not move.
dynamicEmits events and is hit tested but will also receive mock interaction events fired from a ticker to allow for interaction when the mouse isn't moving. This is useful for elements that independently moving or animating.

Event Types​

PixiJS supports the following event types:

Event TypeDescription
pointercancelFired when a pointer device button is released outside the display object that initially registered a pointerdown.
pointerdownFired when a pointer device button is pressed on the display object.
pointerenterFired when a pointer device enters the display object.
pointerleaveFired when a pointer device leaves the display object.
pointermoveFired when a pointer device is moved while over the display object.
globalpointermoveFired when a pointer device is moved, regardless of hit-testing the current object.
pointeroutFired when a pointer device is moved off the display object.
pointeroverFired when a pointer device is moved onto the display object.
pointertapFired when a pointer device is tapped twice on the display object.
pointerupFired when a pointer device button is released over the display object.
pointerupoutsideFired when a pointer device button is released outside the display object that initially registered a pointerdown.
mousedown Fired when a mouse button is pressed on the display object.
mouseenterFired when the mouse cursor enters the display object.
mouseleaveFired when the mouse cursor leaves the display object.
mousemove Fired when the mouse cursor is moved while over the display object.
globalmousemoveFired when a mouse is moved, regardless of hit-testing the current object.
mouseout Fired when the mouse cursor is moved off the display object.
mouseover Fired when the mouse cursor is moved onto the display object.
mouseup Fired when a mouse button is released over the display object.
mouseupoutside Fired when a mouse button is released outside the display object that initially registered a mousedown.
click Fired when a mouse button is clicked (pressed and released) over the display object.
touchcancel Fired when a touch point is removed outside of the display object that initially registered a touchstart.
touchend Fired when a touch point is removed from the display object.
touchendoutside Fired when a touch point is removed outside of the display object that initially registered a touchstart.
touchmove Fired when a touch point is moved along the display object.
globaltouchmoveFired when a touch point is moved, regardless of hit-testing the current object.
touchstart Fired when a touch point is placed on the display object.
tap Fired when a touch point is tapped twice on the display object.
wheel Fired when a mouse wheel is spun over the display object.
rightclick Fired when a right mouse button is clicked (pressed and released) over the display object.
rightdown Fired when a right mouse button is pressed on the display object.
rightup Fired when a right mouse button is released over the display object.
rightupoutside Fired when a right mouse button is released outside the display object that initially registered a rightdown.

Enabling Interaction​

Any DisplayObject-derived object (Sprite, Container, etc.) can become interactive simply by setting its eventMode property to any of the eventModes listed above. Doing so will cause the object to emit interaction events that can be responded to in order to drive your project's behavior.

Check out the interaction example code.

To respond to clicks and taps, bind to the events fired on the object, like so:

let sprite = PIXI.Sprite.from('/some/texture.png');
sprite.on('pointerdown', (event) => { alert('clicked!'); });
sprite.eventMode = 'static';

Check out the DisplayObject for the list of interaction events supported.

Checking if Object is Interactive​

You can check if an object is interactive by calling the isInteractive property. This will return true if eventMode is set to static or dynamic.

if (sprite.isInteractive()) {
    // sprite is interactive
}

Use Pointer Events​

PixiJS supports three types of interaction events - mouse, touch and pointer. Mouse events are fired by mouse movement, clicks etc. Touch events are fired for touch-capable devices. And pointer events are fired for both.

What this means is that, in many cases, you can write your project to use pointer events and it will just work when used with either mouse or touch input. Given that, the only reason to use non-pointer events is to support different modes of operation based on input type or to support multi-touch interaction. In all other cases, prefer pointer events.

Optimization​

Hit testing requires walking the full object tree, which in complex projects can become an optimization bottleneck. To mitigate this issue, PixiJS Container-derived objects have a property named interactiveChildren. If you have Containers or other objects with complex child trees that you know will never be interactive, you can set this property to false and the hit testing algorithm will skip those children when checking for hover and click events. As an example, if you were building a side-scrolling game, you would probably want to set background.interactiveChildren = false for your background layer with rocks, clouds, flowers, etc. Doing so would speed up hit testing substantially due to the number of unclickable child objects the background layer would contain.

The EventSystem can also be customised to be more performant:

const app = new PIXI.Application({
    /**
     * by default we use `auto` for backwards compatibility.
     * However `passive` is more performant and will be used by default in the future,
     */
    eventMode: 'passive',
    eventFeatures: {
        move: true,
        /** disables the global move events which can be very expensive in large scenes */
        globalMove: false,
        click: true,
        wheel: true,
    }
});
- - + + \ No newline at end of file diff --git a/7.x/guides/components/sprite-sheets.html b/7.x/guides/components/sprite-sheets.html index 828f25842..579aea109 100644 --- a/7.x/guides/components/sprite-sheets.html +++ b/7.x/guides/components/sprite-sheets.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Spritesheets

Now that you understand basic sprites, it's time to talk about a better way to create them - the Spritesheet class.

A Spritesheet is a media format for more efficiently downloading and rendering Sprites. While somewhat more complex to create and use, they are a key tool in optimizing your project.

Anatomy of a Spritesheet​

The basic idea of a spritesheet is to pack a series of images together into a single image, track where each source image ends up, and use that combined image as a shared BaseTexture for the resulting Sprites.

The first step is to collect the images you want to combine. The sprite packer then collects the images, and creates a new combined image.

As this image is being created, the tool building it keeps track of the location of the rectangle where each source image is stored. It then writes out a JSON file with that information.

These two files, in combination, can be passed into a SpriteSheet constructor. The SpriteSheet object then parses the JSON, and creates a series of Texture objects, one for each source image, setting the source rectangle for each based on the JSON data. Each texture uses the same shared BaseTexture as its source.

Doubly Efficient​

SpriteSheets help your project in two ways.

First, by speeding up the loading process. While downloading a SpriteSheet's texture requires moving the same (or even slightly more!) number of bytes, they're grouped into a single file. This means that the user's browser can request and download far fewer files for the same number of Sprites. The number of files itself is a key driver of download speed, because each request requires a round-trip to the webserver, and browsers are limited to how many files they can download simultaneously. Converting a project from individual source images to shared sprite sheets can cut your download time in half, at no cost in quality.

Second, by improving batch rendering. WebGL rendering speed scales roughly with the number of draw calls made. Batching multiple Sprites, etc. into a single draw call is the main secret to how PixiJS can run so blazingly fast. Maximizing batching is a complex topic, but when multiple Sprites all share a common BaseTexture, it makes it more likely that they can be batched together and rendered in a single call.

Creating SpriteSheets​

You can use a 3rd party tool to assemble your sprite sheet files. Here are two that may fit your needs:

ShoeBox: ShoeBox is a free, Adobe AIR-based sprite packing utility that is great for small projects or learning how SpriteSheets work.

TexturePacker: TexturePacker is a more polished tool that supports advanced features and workflows. A free version is available which has all the necessary features for packing spritesheets for PixiJS. It's a good fit for larger projects and professional game development, or projects that need more complex tile mapping features.

Spritesheet data can also be created manually or programmatically, and supplied to a new AnimatedSprite. This may be an easier option if your sprites are already contained in a single image.

// Create object to store sprite sheet data
const atlasData = {
    frames: {
        enemy1: {
            frame: { x: 0, y:0, w:32, h:32 },
            sourceSize: { w: 32, h: 32 },
            spriteSourceSize: { x: 0, y: 0, w: 32, h: 32 }
        },
        enemy2: {
            frame: { x: 32, y:0, w:32, h:32 },
            sourceSize: { w: 32, h: 32 },
            spriteSourceSize: { x: 0, y: 0, w: 32, h: 32 }
        },
    },
    meta: {
        image: 'images/spritesheet.png',
        format: 'RGBA8888',
        size: { w: 128, h: 32 },
        scale: 1
    },
    animations: {
        enemy: ['enemy1','enemy2'] //array of frames by name
    }
}


// Create the SpriteSheet from data and image
const spritesheet = new PIXI.Spritesheet(
    PIXI.BaseTexture.from(atlasData.meta.image),
    atlasData
);

// Generate all the Textures asynchronously
await spritesheet.parse();

// spritesheet is ready to use!
const anim = new PIXI.AnimatedSprite(spritesheet.animations.enemy);

// set the animation speed
anim.animationSpeed = 0.1666;
// play the animation on a loop
anim.play();
// add it to the stage to render
app.stage.addChild(anim);
- - + + \ No newline at end of file diff --git a/7.x/guides/components/sprites.html b/7.x/guides/components/sprites.html index 0c3f7589a..67ce1296e 100644 --- a/7.x/guides/components/sprites.html +++ b/7.x/guides/components/sprites.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Sprites

Sprites are the simplest and most common renderable object in PixiJS. They represent a single image to be displayed on the screen. Each Sprite contains a Texture to be drawn, along with all the transformation and display state required to function in the scene graph.

Creating Sprites​

To create a Sprite, all you need is a Texture (check out the Texture guide). Load a PNG's URL using the PIXI.Loader class, then call PIXI.Sprite.from(url) and you're all set. As a convenience during prototyping, you can pass a non-loaded URL to from() and PixiJS will handle it, but your sprite will "pop in" after it loads if you don't pre-load your textures.

Check out the sprite example code.

Using Sprites​

In our DisplayObject guide, we learned about the DisplayObject class and the various properties it defines. Since Sprite objects are also display objects, you can move a sprite, rotate it, and update any other display property.

Alpha, Tint and Blend Modes​

Alpha is a standard display object property. You can use it to fade sprites into the scene by animating each sprite's alpha from 0.0 to 1.0 over a period of time.

Tinting allows you multiply the color value of every pixel by a single color. For example, if you had a dungeon game, you might show a character's poison status by setting obj.tint = 0x00FF00, which would give a green tint to the character.

Blend modes change how pixel colors are added to the screen when rendering. The three main modes are add, which adds each pixel's RGB channels to whatever is under your sprite (useful for glows and lighting), multiply which works like tint, but on a per-pixel basis, and screen, which overlays the pixels, brightening whatever is underneath them.

Scale vs Width & Height​

One common area of confusion when working with sprites lies in scaling and dimensions. The PIXI.DisplayObject class allows you to set the x and y scale for any object. Sprites, being DisplayObjects, also support scaling. In addition, however, Sprites support explicit width and height attributes that can be used to achieve the same effect, but are in pixels instead of a percentage. This works because a Sprite object owns a Texture, which has an explicit width and height. When you set a Sprite's width, internally PixiJS converts that width into a percentage of the underlying texture's width and updates the object's x-scale. So width and height are really just convenience methods for changing scale, based on pixel dimensions rather than percentages.

Pivot vs Anchor​

If you add a sprite to your stage and rotate it, it will by default rotate around the top-left corner of the image. In some cases, this is what you want. In many cases, however, what you want is for the sprite to rotate around the center of the image it contains, or around an arbitrary point.

There are two ways to achieve this: pivots and anchors

An object's pivot is an offset, expressed in pixels, from the top-left corner of the Sprite. It defaults to (0, 0). If you have a Sprite whose texture is 100px x 50px, and want to set the pivot point to the center of the image, you'd set your pivot to (50, 25) - half the width, and half the height. Note that pivots can be set outside of the image, meaning the pivot may be less than zero or greater than the width/height. This can be useful in setting up complex animation hierarchies, for example. Every DisplayObject has a pivot.

An anchor, in contrast, is only available for Sprites. Anchors are specified in percentages, from 0.0 to 1.0, in each dimension. To rotate around the center point of a texture using anchors, you'd set your Sprite's anchor to (0.5, 0.5) - 50% in width and height. While less common, anchors can also be outside the standard 0.0 - 1.0 range.

The nice thing about anchors is that they are resolution and dimension agnostic. If you set your Sprite to be anchored in the middle then later change the size of the texture, your object will still rotate correctly. If you had instead set a pivot using pixel-based calculations, changing the texture size would require changing your pivot point.

So, generally speaking, you'll want to use anchors when working with Sprites.

One final note: unlike CSS, where setting the transform-origin of the image doesn't move it, in PixiJS setting an anchor or pivot will move your object on the screen. In other words, setting an anchor or pivot affects not just the rotation origin, but also the position of the sprite relative to its parent.

- - + + \ No newline at end of file diff --git a/7.x/guides/components/text.html b/7.x/guides/components/text.html index 5080fa65f..33938b847 100644 --- a/7.x/guides/components/text.html +++ b/7.x/guides/components/text.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Text

Whether it's a high score or a diagram label, text is often the best way to convey information in your projects. Surprisingly, drawing text to the screen with WebGL is a very complex process - there's no built in support for it at all. One of the values PixiJS provides is in hiding this complexity to allow you to draw text in diverse styles, fonts and colors with a few lines of code. In addition, these bits of text are just as much scene objects as sprites - you can tint text, rotate it, alpha-blend it, and otherwise treat it like any other graphical object.

Let's dig into how this works.

There Are Two Kinds of Text​

Because of the challenges of working with text in WebGL, PixiJS provides two very different solutions. In this guide, we're going to go over both methods in some detail to help you make the right choice for your project's needs. Selecting the wrong text type can have a large negative impact on your project's performance and appearance.

The Text Object​

In order to draw text to the screen, you use a Text object. Under the hood, this class draws text to an off-screen buffer using the browser's normal text rendering, then uses that offscreen buffer as the source for drawing the text object. Effectively what this means is that whenever you create or change text, PixiJS creates a new rasterized image of that text, and then treats it like a sprite. This approach allows truly rich text display while keeping rendering speed high.

So when working with PIXI.Text objects, there are two sets of options - standard display object options like position, rotation, etc that work after the text is rasterized internally, and text style options that are used while rasterizing. Because text once rendered is basically just a sprite, there's no need to review the standard options. Instead, let's focus on how text is styled.

Check out the text example code.

Text Styles​

There are a lot of text style options available (see TextStyle), but they break down into 5 main groups:

Font: fontFamily to select the webfont to use, fontSize to specify the size of the text to draw, along with options for font weight, style and variant.

Appearance: Set the color with fill or add a stroke outline, including options for gradient fills.

Drop-Shadows: Set a drop-shadow with dropShadow, with a host of related options to specify offset, blur, opacity, etc.

Layout: Enable with wordWrap and wordWrapWidth, and then customize the lineHeight and align or letterSpacing

Utilities: Add padding or trim extra space to deal with funky font families if needed.

To interactively test out feature of Text Style, check out this tool.

Loading and Using Fonts​

In order for PixiJS to build a PIXI.Text object, you'll need to make sure that the font you want to use is loaded by the browser. Unfortunately, at the time of writing, the PIXI.Loader system does not support loading font files, so you'll need to use a 3rd party font loader to ensure that any custom web fonts you want to use are pre-loaded. It's not enough to add an @font-face declaration in your project's CSS because browsers will happily render text using a fallback font while your custom font loads.

Any javascript library that can load a web font will work, you just want something that will delay starting your project until the font has been fully loaded by the browser.

One such library is FontFaceObserver. Here's a simple example that shows how to use it to ensure the web font "Short Stack" is loaded before your app starts. First, we need a font-face declaration in CSS:

@font-face {
  font-family: Short Stack;
  src: url(short-stack.woff2) format('woff2'),
       url(short-stack.woff) format('woff');
}

Now that the browser knows what our font is and how to find the source files, it's time to use the library to load them:

// Create the loader
let font = new FontFaceObserver('Short Stack', {});
// Start loading the font
font.load().then(() => {
  // Successful load, start up your PixiJS app as usual
  let app = new PIXI.Application({ width: 640, height: 360 });
  document.body.appendChild(app.view);
  // ... etc ...

}, () => {
  // Failed load, log the error or display a message to the user
  alert('Unable to load required font!');
});

Caveats and Gotchas​

While PixiJS does make working with text easy, there are a few things you need to watch out for.

First, changing an existing text string requires re-generating the internal render of that text, which is a slow operation that can impact performance if you change many text objects each frame. If your project requires lots of frequently changing text on the screen at once, consider using a PIXI.BitmapText object (explained below) which uses a fixed bitmap font that doesn't require re-generation when text changes.

Second, be careful when scaling text. Setting a text object's scale to > 1.0 will result in blurry/pixely display, because the text is not re-rendered at the higher resolution needed to look sharp - it's still the same resolution it was when generated. To deal with this, you can render at a higher initial size and down-scale, instead. This will use more memory, but will allow your text to always look clear and crisp.

BitmapText​

In addition to the standard PIXI.Text approach to adding text to your project, PixiJS also supports bitmap fonts. Bitmap fonts are very different from TrueType or other general purpose fonts, in that they consist of a single image containing pre-rendered versions of every letter you want to use. When drawing text with a bitmap font, PixiJS doesn't need to render the font glyphs into a temporary buffer - it can simply copy and stamp out each character of a string from the master font image.

The primary advantage of this approach is speed - changing text frequently is much cheaper and rendering each additional piece of text is much faster due to the shared source texture.

Check out the bitmap text example code.

BitmapFont​

  • 3rd party solutions
  • BitmapFont.from auto-generation

Selecting the Right Approach​

PIXI.Text

  • Static text
  • Small number of text objects
  • High fidelity text rendering (kerning e.g.)
  • Text layout (line & letter spacing)

PIXI.BitmapText

  • Dynamic text
  • Large number of text objects
  • Lower memory
- - + + \ No newline at end of file diff --git a/7.x/guides/components/textures.html b/7.x/guides/components/textures.html index aee965bef..7cef8171f 100644 --- a/7.x/guides/components/textures.html +++ b/7.x/guides/components/textures.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Textures

We're slowly working our way down from the high level to the low. We've talked about the scene graph, and in general about display objects that live in it. We're about to get to sprites and other simple display objects. But before we do, we need to talk about textures.

In PixiJS, textures are one of the core resources used by display objects. A texture, broadly speaking, represents a source of pixels to be used to fill in an area on the screen. The simplest example is a sprite - a rectangle that is completely filled with a single texture. But things can get much more complex.

Life-cycle of a Texture​

Let's examine how textures really work, by following the path your image data travels on its way to the screen.

Here's the flow we're going to follow: Source Image > Loader > BaseTexture > Texture

Serving the Image​

To start with, you have the image you want to display. The first step is to make it available on your server. This may seem obvious, but if you're coming to PixiJS from other game development systems, it's worth remembering that everything has to be loaded over the network. If you're developing locally, please be aware that you must use a webserver to test, or your images won't load due to how browsers treat local file security.

Loading the Image​

To work with the image, the first step is to pull the image file from your webserver into the user's web browser. To do this, we can use PIXI.Texture.from(), which works for quick demos, but in production you'll use the Loader class. A Loader wraps and manages using an <IMG> element to tell the browser to fetch the image, and then notifies you when that has been completed. This process is asynchronous - you request the load, then time passes, then an event fires to let you know the load is completed. We'll go into the loader in a lot more depth in a later guide.

BaseTextures Own the Data​

Once the Loader has done its work, the loaded <IMG> element contains the pixel data we need. But to use it to render something, PixiJS has to take that raw image file and upload it to the GPU. This brings us to the real workhorse of the texture system - the BaseTexture class. Each BaseTexture manages a single pixel source - usually an image, but can also be a Canvas or Video element. BaseTextures allow PixiJS to convert the image to pixels and use those pixels in rendering. In addition, it also contains settings that control how the texture data is rendered, such as the wrap mode (for UV coordinates outside the 0.0-1.0 range) and scale mode (used when scaling a texture).

BaseTextures are automatically cached, so that calling PIXI.Texture.from() repeatedly for the same URL returns the same BaseTexture each time. Destroying a BaseTexture frees the image data associated with it.

Textures are a View on BaseTextures​

So finally, we get to the PIXI.Texture class itself! At this point, you may be wondering what the Texture object does. After all, the BaseTexture manages the pixels and render settings. And the answer is, it doesn't do very much. Textures are light-weight views on an underlying BaseTexture. Their main attribute is the source rectangle within the BaseTexture from which to pull.

If all PixiJS drew were sprites, that would be pretty redundant. But consider SpriteSheets. A SpriteSheet is a single image that contains multiple sprite images arranged within. In a Spritesheet object, a single BaseTexture is referenced by a set of Textures, one for each source image in the original sprite sheet. By sharing a single BaseTexture, the browser only downloads one file, and our batching renderer can blaze through drawing sprites since they all share the same underlying pixel data. The SpriteSheet's Textures pull out just the rectangle of pixels needed by each sprite.

That is why we have both Textures and BaseTextures - to allow sprite sheets, animations, button states, etc to be loaded as a single image, while only displaying the part of the master image that is needed.

Loading Textures​

We will discuss resource loading in a later guide, but one of the most common issues new users face when building a PixiJS project is how best to load their textures. Using PIXI.Texture.from() as we do in our demo snippets will work, but will result in pop-in as each texture is loaded while your objects are already being rendered in the scene graph.

Instead, here's a quick cheat sheet of one good solution:

  1. Show a loading image
  2. Create a Loader
  3. Run all texture-based objects, add their textures to the loader
  4. Start the loader, and optionally update your loading image based on progress callbacks
  5. On loader completion, run all objects and use PIXI.Texture.from() to pull the loaded textures out of the texture cache
  6. Prepare your textures (optional - see below)
  7. Hide your loading image, start rendering your scene graph

Using this workflow ensures that your textures are pre-loaded, to prevent pop-in, and is relatively easy to code.

Regarding preparing textures: Even after you've loaded your textures, the images still need to be pushed to the GPU and decoded. Doing this for a large number of source images can be slow and cause lag spikes when your project first loads. To solve this, you can use the Prepare plugin, which allows you to pre-load textures in a final step before displaying your project.

Unloading Textures​

Once you're done with a Texture, you may wish to free up the memory (both WebGL-managed buffers and browser-based) that it uses. To do so, you should call destroy() on the BaseTexture that owns the data. Remember that Textures don't manage pixel data!

This is a particularly good idea for short-lived imagery like cut-scenes that are large and will only be used once. If you want to remove all textures and wipe the slate clean, you can use the PIXI.utils.destroyTextureCache() function.

Beyond Images​

As we alluded to above, you can make a Texture out of more than just images:

Video: Pass an HTML5 <VIDEO> element to PIXI.BaseTexture.from() to allow you to display video in your project. Since it's a texture, you can tint it, add filters, or even apply it to custom geometry.

Canvas: Similarly, you can wrap an HTML5 <CANVAS> element in a BaseTexture to let you use canvas's drawing methods to dynamically create a texture.

SVG: Pass in an <SVG> element or load a .svg URL, and PixiJS will attempt to rasterize it. For highly network-constrained projects, this can allow for beautiful graphics with minimal network load times.

RenderTexture: A more advanced (but very powerful!) feature is to build a Texture from a RenderTexture. This can allow for building complex geometry using a Geometry object, then baking that geometry down to a simple texture.

Each of these texture sources has caveats and nuances that we can't cover in this guide, but they should give you a feeling for the power of PixiJS's texture system.

Check out the render texture example code.

- - + + \ No newline at end of file diff --git a/7.x/guides/migrations/upgrading.html b/7.x/guides/migrations/upgrading.html index 6f857cc83..077ad64e0 100644 --- a/7.x/guides/migrations/upgrading.html +++ b/7.x/guides/migrations/upgrading.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Upgrading PixiJS

PixiJS uses a lot of peerDependencies internally to define the relationship between packages. This has created unpredictable errors because of how npm resolves peers when bumping/upgrading (e.g., #8382, #8268, #8144, #7209).

When you're upgrading using npm please completely uninstall instead of just changing the version in your package.json:

npm uninstall pixi.js
npm install pixi.js

If you are using any PixiJS community plugins, please make sure to uninstall those too:

npm uninstall pixi.js @pixi/particle-emitter @pixi/sound
npm install pixi.js @pixi/particle-emitter @pixi/sound
- - + + \ No newline at end of file diff --git a/7.x/guides/migrations/v5.html b/7.x/guides/migrations/v5.html index 9f79e7107..89916c588 100644 --- a/7.x/guides/migrations/v5.html +++ b/7.x/guides/migrations/v5.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

v5 Migration Guide

This document is useful for developers who are attempting to upgrading from v4 to v5. This includes gotchas and important context for understanding why your v4 code made need some subtle changes. In general, we've try to be as backward-compatible in v5 with the use of deprecation warnings in the console. There are, however, sometimes when changes are too substantial and require some additional help.

🚧 API Changes​

Making WebGL First-Class​

PixiJS v5 has made WebGL the first-class renderer and made CanvasRenderer to be second-class. Functionally, there's not much that changed from v4, but there are a bunch of subtle internal naming changes which could trip-up some developers upgrading to v5. For instance:

  • WebGLRenderer becomes Renderer
  • renderWebGL becomes render (in DisplayObject, Sprite, Container, etc)
  • _renderWebGL becomes _render (in DisplayObject, Container, etc)

If you created a plugin or project that previously used render on a Container (see #5510), this will probably cause your project to not render correctly. Please consider renaming your user-defined render to something else. In most other cases, you'll get a deprecation warning trying to invoke WebGL-related classes or methods, e.g., new PIXI.WebGLRenderer().

Renderer Parameters​

Specifying options as a third parameter in Renderer constructor is officially dropped (same with PIXI.Application, PIXI.autoDetectRenderer & PIXI.CanvasRenderer). In v4 we supported two function signatures, but in v5 we dropped width, height, options signature. Please add width and height to options.

const renderer = new PIXI.Renderer(800, 600, { transparent: true }); // bad
const renderer = new PIXI.Renderer({ width: 800, height: 600, transparent: true }); // good

  • Note: Adding transparent: true in Renderer or Application constructor options might help with strange artifacts on some devices, but it might reduce FPS. It's much better than preserveDrawingBuffer: true.

  • If you need the v4 default behavior of resizing the canvas using css pixels, add autoDensity: true to the options.

Not everything went to params. To enable WebGL1 even if WebGL2 is available, use

PIXI.settings.PREFER_ENV = PIXI.ENV.WEBGL;

Mesh, Plane, Rope​

PixiJS v5 introduces a new class called PIXI.Mesh. This allows overriding the default shader and the ability to add more attributes to geometry. For example, you can add colors to vertices.

The old v4 Mesh class has moved from PIXI.mesh.Mesh to PIXI.SimpleMesh, it extends PIXI.Mesh.

PIXI.mesh.Rope, PIXI.mesh.Plane, PIXI.mesh.NineSlicePlane have moved to PIXI.SimpleRope, PIXI.SimplePlane and PIXI.NineSlicePlane respectively.

If you used custom shaders or generated meshes in v4, you might be impacted by these changes in v5.

PIXI.SimpleMesh fields vertices, uvs, indices are wrapped inside mesh.geometry attribute buffers. For example, this is how access to buffers provided through mesh.uvBuffer property:

get uvBuffer()
{
    return this.geometry.buffers[1];
}

The indices property shortcut is also missing, but you can access the data inside mesh.geometry.indexBuffer.

You can override buffer data, and notify it that data was changed, in this case buffer will be uploaded to GPU lazily. Previously in v4 mesh had several flags that indicated which attributes have to be updated and their names confused people.

Graphics Holes​

Drawing holes in Graphics was very limited in v4. This only supported non-Shape drawing, like using lineTo, bezierCurveTo, etc. In v5, we improved the hole API by supporting shapes. Unfortunately, there's no deprecation strategy to support the v4 API. For instance, in v4:

const graphic = new PIXI.Graphics()
  .beginFill(0xff0000)
  .moveTo(0, 0)
  .lineTo(100, 0)
  .lineTo(100, 100)
  .lineTo(0, 100)
  .moveTo(10, 10)
  .lineTo(90, 10)
  .lineTo(90, 90)
  .lineTo(10, 90)
  .addHole();

Live example in v4.x

In v5, Graphics has simplified and the API changed from addHole to beginHole and endHole.

const graphic = new PIXI.Graphics()
  .beginFill(0xff0000)
  .drawRect(0, 0, 100, 100)
  .beginHole()
  .drawCircle(50, 50, 30)
  .endHole();

Live example in dev

Filter Padding​

In v4 filters had a default padding of 4 and in v5 this has been changed to a default of 0. This can cause some filters to look broken when used. To fix this issue simply add some padding to the filters you create.

// Glow filter from https://github.com/pixijs/pixi-filters
const filter = new PIXI.filters.GlowFilter();
filter.padding = 4;

Some filters, like BlurFilter, automatically calculate the padding so changes may not be necessary.

Filter Default Vertex Shader​

We reorganized all uniforms dedicated to coordinate system transforms, and renamed them. If your filter doesn't work anymore, check if you use default vertex shader. In that case, you can use old v4 vertex shader code.

All changes are explained in [[Creating Filters|v5-Creating-filters]]

Enable Mipmapping for RenderTexture​

Previously, you may have ended up with code like this in v4 (specifically if you saw Ivan's comment/JSFiddle):

const renderer = PIXI.autoDetectRenderer();
renderer.bindTexture(baseRenderTex, false, 0);
const glTex = baseRenderTex._glTextures[renderer.CONTEXT_UID];
glTex.enableMipmap(); // this is what actually generates mipmaps in WebGL
glTex.enableLinearScaling(); // this is what tells WebGL to USE those mipmaps

In v5, this code is no longer needed.

BaseTexture Resources​

One of the newest features in v5 is that we decoupled all the asset-specific functionality from BaseTexture. We created a new system called "resources" and each BaseTexture now has a resource that wraps some specific asset type. For instance: VideoResource, SVGResource, ImageResource, CanvasResource. In the future, we hope to be able to add other resource types. If there were asset-specific methods or properties being called before, these will probably be on baseTexture.resource.

Also, we removed all of the from* methods from BaseTexture, so you just can call BaseTexture.from and pass in whatever resource. Please see docs for more information about from.

const canvas = document.createElement('canvas');
const baseTexture = PIXI.BaseTexture.from(canvas);

That API also allows to use pure WebGL and 2d context calls, see the gradient example.

BaseTexture.source​

Has been moved to baseTexture.resource.source, moved into resource corresponding to the baseTexture. baseTexture.resource does not exist for RenderTexture, and source does not exist for resources that dont have source.

Graphics Interaction​

If you use transparent interactive graphics trick, make sure that you use specify alpha=0 for all element, not for its parts. How PixiJS deals with shapes that have alpha=0 is considered undefined behaviour. We might change it back, but we have no guarantees about it.

graphics.beginFill(0xffffff, 0.0); //bad
graphics.alpha = 0; //good

📦 Publishing Changes​

Canvas Becomes Legacy​

Since WebGL and WebGL2 are now first-class, we have removed the canvas-based fallback from the default pixi.js package. If you need CanvasRenderer, you should switch to use pixi.js-legacy instead.

import * as PIXI from "pixi.js";
// Will NOT return CanvasRenderer because canvas-based
// functionality was removed from "pixi.js"
const renderer = PIXI.autoDetectRenderer(); // return PIXI.Renderer or throws error

Instead, use the legacy bundle to have access to the canvas rendering.

import * as PIXI from "pixi.js-legacy";
const renderer = PIXI.autoDetectRenderer(); // returns PIXI.Renderer or PIXI.CanvasRenderer

Bundling Changes​

If you're using Rollup, Parcel or another bundler to add PixiJS into your project there are a few subtle changes when moving to v5. Namely, the global PIXI object is no longer created automatically. This was removed from bundling for two purpose: 1) to improve tree-shaking for bundlers, and 2) for security purpose by protecting PIXI.

This is no longer a valid way to import:

import "pixi.js";
const renderer = PIXI.autoDetectRenderer(); // INVALID! No more global.PIXI!

Instead, you should import as a namespace or individual elements:

import * as PIXI from "pixi.js";
const renderer = PIXI.autoDetectRenderer();

// or even better:
import { autoDetectRenderer } from "pixi.js";
const renderer = autoDetectRenderer();

Lastly, some 3rd-party plugins maybe expecting window.PIXI, so you might have to explicitly expose the global like this, however this is not recommended.

import * as PIXI from 'pixi.js';
window.PIXI = PIXI; // some bundlers might prefer "global" instead of "window"

Webpack​

When Webpack and 3rd-party plugins, like pixi-spine, you might have difficulties building the global PIXI object resulting in a runtime error ReferenceError: PIXI is not defined. Usually this can be resolved by using Webpack shimming globals.

For instance, here's your import code:

import * as PIXI from 'pixi.js';
import 'pixi-spine'; // or other plugins that need global 'PIXI' to be defined first

Add a plugins section to your webpack.config.js to let know Webpack that the global PIXI variable make reference to pixi.js module. For instance:

const webpack = require('webpack');

module.exports = {
    entry: '...',
    output: {
        ...
    },
    plugins: [
     new webpack.ProvidePlugin({
       PIXI: 'pixi.js'
     })
   ]
}
- - + + \ No newline at end of file diff --git a/7.x/guides/migrations/v6.html b/7.x/guides/migrations/v6.html index 2eb19bd5a..62ecf916c 100644 --- a/7.x/guides/migrations/v6.html +++ b/7.x/guides/migrations/v6.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

v6 Migration Guide

PixiJS 6 comes with few surface-level breaking changes. This document is not complete.

Typings​

If you're using TypeScript, make sure the follow is added to your tsconfig.json:

{
  "compilerOptions": {
    "moduleResolution": "node",
    // Required for importing 3rd-party dependencies like EventEmitter3
    "esModuleInterop": true
  }
}

Mesh Internals​

If you ever overrode Mesh._renderDefault to take into account more uniforms like this: v5 Reference

if (shader.program.uniformData.translationMatrix)
{
    shader.uniforms.translationMatrix = this.transform.worldTransform.toArray(true);
}

Remove the if, leave the contents, otherwise you might not get correct sync uniform for translationMatrix, or even worse - get null pointer. v6 Reference.

shader.uniforms.translationMatrix = this.transform.worldTransform.toArray(true);
- - + + \ No newline at end of file diff --git a/7.x/guides/migrations/v7.html b/7.x/guides/migrations/v7.html index 087a91239..d6aa5633f 100644 --- a/7.x/guides/migrations/v7.html +++ b/7.x/guides/migrations/v7.html @@ -9,15 +9,15 @@ - - + +
Skip to main content

v7 Migration Guide

First and foremost, PixiJS v7 is a modernization release that reflects changes in the ecosystem since PixiJS was first published over six years ago. Browsers have gotten better, but PixiJS hasn't really taken advantage of some of the new features like fetch, Workers, modern JavaScript language syntax. This release keeps intact much of the high-level DisplayObjects (e.g., Sprite, Graphics, Mesh, etc). Aside from a few things, this release should be medium to low impact for most users.

👋 Dropping Internet Explorer​

Microsoft officially ended support for IE, so we decided to follow. It simplified many of our modernizations since IE was an outliner from Safari/Chrome/Firefox/Edge and mobile browsers. If you need support for IE, please consider using Babel or some other trans-piling tool.

🗑️ Remove Polyfills​

We removed the bundled polyfills such as requestAnimationFrame and Promise. These things are widely available in browsers now. If projects require them, developers should include the polyfills they need for backward-compatibility. Please check out polyfill.io.

💬 Output ES2020 (modules) and ES2017 (browser)​

PixiJS historically only published ES5 (no classes!). A new output standard allows us to use ES2017 features that previously we couldn't use (e.g., String.prototype.startsWith, Array.prototype.contains, etc). Not only does it make the code more readable, but the output looks nicer as well. For modules we are outputting ES2020, which contains syntax like nullish coalescing (??). If your project needs to have backward compatibility, you can use Babel to transpile or polyfill.

🐭 Replaces InteractionManager with EventSystem​

InteractionManager was getting complex and difficult to maintain. Few core team members understood the code. We decided to move to FederatedEvents, which is concise, better aligned with the DOM, and supports things like bubbling. The good news, is you shouldn't have to change code, as it is largely a drop-in replacement. We added addEventListener and removeEventListener APIs to DisplayObject which have the same DOM signature and can be used instead of on and off.

📦 Replaces Loader with Assets​

Similarly, we've been wanting to remove the Loader because of its legacy approach (e.g., XMLHttpRequest). This was forked from resource-loader that has been with PixiJS for a long time. The original design inspiration for Loader was driven largely by Flash/AS3, which now seem dated. There were a few things we wanted out of a new iteration: static loading, loading with Workers, background loading, Promise-based, fewer layers of caching. Here's a quick example of how this will change:

import { Loader, Sprite } from 'pixi.js';

const loader = new Loader();
loader.add('background', 'path/to/assets/background.jpg');
loader.load((loader, resources) => {
  const image = Sprite.from(resources.background.texture);
});

Now becomes:

import { Assets, Sprite } from 'pixi.js';

const texture = await Assets.load('path/to/assets/background.jpg');
const image = Sprite.from(texture);

🤝 Abandon the use of peerDependencies​

PixiJS heavily uses peerDependencies in the package.json within each package. This design choice has plagued Pixi with many issues. It's a breaking change to remove, so now was a good time. We have decided to completely remove peerDependencies, instead opting for nothing. This should make installing and upgrading pixi.js much easier. We are working on updating our tooling for composing a custom version with packages. Edit: As of 7.2.0, we have reverted this change to keep compatibility with some module-based CDNs.

👂 Other Changes​

  • Browser builds have been removed for all packages, with the exception of pixi.js and pixi.js-legacy.
  • Removes Graphics.nextRoundedRectBehavior this is now the default behavior
  • Removes Text.nextLineHeightBehavior this is now the default behavior
  • AbstractBatchRenderer and BatchPluginFactory has been removed. Either extends BatchRenderer or use setShaderGenerator on the default BatchRenderer, (e.g., renderer.plugins.batch)
  • BatchRenderer is installed by default in @pixi/core, no need to Renderer.registerPlugin('batch', BatchRenderer) anymore

Exports from @pixi/core​

The @pixi/core package now depends and re-exports the following packages.

  • @pixi/math
  • @pixi/contants
  • @pixi/utils
  • @pixi/runner
  • @pixi/settings
  • @pixi/ticker

While some packages will still work when installed directly, others will not, since by installing them alongside @pixi/core you will be effectively importing two copies of the same code.  This will lead to errors where changing settings from @pixi/settings doesn't do anything since @pixi/core has its own version of that package. It is recommended that you uninstall these from your project and use @pixi/core instead.

import { Rectangle } from '@pixi/math';
import { settings } from '@pixi/settings';
import { ALPHA_MODES } from '@pixi/constants';
import { string2hex } from '@pixi/utils';

Now becomes:

import { Rectangle, settings, ALPHA_MODES, utils } from '@pixi/core';

const { string2hex } = utils;

Extract and Prepare Systems​

Extract and prepare plugins have been converted to Renderer "systems".

renderer.plugins.extract
renderer.plugins.prepare

Now becomes:

renderer.extract
renderer.prepare

Extensions Self-Install​

Extensions now install themselves, so you should only need to import the class in order to use. For example, in v6:

import { AccessibilityManager } from '@pixi/accessibility';
import { extensions } from '@pixi/core';
extensions.add(AccessibilityManager);

Now becomes:

import '@pixi/accessibility';

Using hitTest with Events​

With the new events system, one of the common APIs that changed is `hitTest.

import {Application} from 'pixi.js';

const app = new Application();
app.renderer.plugins.interaction.hitTest({x, y});

Now becomes:

import {Application, EventBoundary} from 'pixi.js';

const app = new Application();
const boundary = new EventBoundary(app.stage);
boundary.hitTest(x, y);

New Async Extract Methods​

The following methods are now async and return a Promise.

  • CanvasExtract.base64()
  • CanvasExtract.image()
  • Extract.base64()
  • Extract.image()
import {Application, EventBoundary} from 'pixi.js';

const app = new Application();
const dataUri = app.renderer.extract.base64();

Now becomes:

import {Application, EventBoundary} from 'pixi.js';

const app = new Application();
const dataUri = await app.renderer.extract.base64();

Interactive Move Events​

Interaction events in PixiJS now behave like the DOM in v7. This was intentional to align around behavior that would be familiar with developers, but obviously impacts the behavior with pointermove, mousemove, and touchmove.

Like the DOM, move events are now local. This means that if you are outside the bounds of the object, you will not receive a move event. Generally, you should consider adding move events to the stage or parent instead of the DisplayObject itself.

Working example: https://jsfiddle.net/bigtimebuddy/spnv4wm6/

Interactive Property Handlers are Removed​

Property-based handlers were removed from events. This was a feature of the old InteractionManager. For instance:

sprite.pointertap = () => {
 // handler the pointertap
};

Now becomes:

sprite.on('pointertap', () => {
 // handler the pointertap
});

Property buttonMode has been removed​

The property buttonMode was a convenience for toggling the cursor property between pointer and null. It has now been removed.

sprite.buttonMode = true;

Now becomes:

sprite.cursor = 'pointer';

If you would like to re-add this functionality, you can patch DisplayObject's prototype:

import { DisplayObject } from 'pixi.js';

Object.defineProperty(DisplayObject.prototype, 'buttonMode', {
  get() { return this.cursor === 'pointer'; },
  set(value) { this.cursor = value ? 'pointer' : null; },
});

☝️ Suggestions for Upgrading​

If you're planning on transitioning your code from v6, it would be helpful to implement some of the more dramatic changes in v6 first before upgrading to v7:

import { InteractionManager, extensions, Application } from 'pixi.js';
import { EventSystem } from '@pixi/events';

// Uninstall interaction
extensions.remove(InteractionManager);

// Create the renderer or application
const app = new Application();

// Install events
app.renderer.addSystem(EventSystem, 'events');
  • Switch to the Assets package by installing @pixi/assets and swapping for Loader. For more information on implementing Assets, see this guide.
  • Set Graphics.nextRoundedRectBehavior = true, this uses arcs for corner radius instead of bezier curves.
  • Set Text.nextLineHeightBehavior = true, this defaults to the DOM-like behavior for line height.

🏗️ Plugin Supported​

PluginCompatiblePlugin Version Supported
PixiJS Sound✅v5.0.0+
PixiJS HTMLText✅v3.0.0+
PixiJS Filters✅v5.0.0+
PixiJS GIF✅v2.0.0+
PixiJS Spine✅v4.0.0+
PixiJS Particle Emitter✅v5.0.8+
PixiJS Animate❌
PixiJS Layers✅v2.0.0+
PixiJS Lights✅v4.0.0+
PixiJS Graphics Smooth✅v1.0.0+
PixiJS Tilemap❌
- - + + \ No newline at end of file diff --git a/7.x/guides/production/performance-tips.html b/7.x/guides/production/performance-tips.html index 7e6c514a1..43e3437e0 100644 --- a/7.x/guides/production/performance-tips.html +++ b/7.x/guides/production/performance-tips.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Performance Tips

General​

  • Only optimize when you need to! PixiJS can handle a fair amount of content off the bat
  • Be mindful of the complexity of your scene. The more objects you add the slower things will end up
  • Order can help, for example sprite / graphic / sprite / graphic is slower than sprite / sprite / graphic / graphic
  • Some older mobile devices run things a little slower. Passing in the option useContextAlpha: false and antialias: false to the Renderer or Application can help with performance
  • Culling is disabled by default as it's often better to do this at an application level or set objects to be cullable = true. If you are GPU-bound it will improve performance; if you are CPU-bound it will degrade performance

Sprites​

  • Use Spritesheets where possible to minimize total textures
  • Sprites can be batched with up to 16 different textures (dependent on hardware)
  • This is the fastest way to render content
  • On older devices use smaller low resolution textures
  • Add the extention @0.5x.png to the 50% scale-down spritesheet so PixiJS will visually-double them automatically
  • Draw order can be important

Graphics​

  • Graphics objects are fastest when they are not modified constantly (not including the transform, alpha or tint!)
  • Graphics objects are batched when under a certain size (100 points or smaller)
  • Small Graphics objects are as fast as Sprites (rectangles, triangles)
  • Using 100s of graphics complex objects can be slow, in this instance use sprites (you can create a texture)

Texture​

  • Textures are automatically managed by a Texture Garbage Collector
  • You can also manage them yourself by using texture.destroy()
  • If you plan to destroy more than one at once add a random delay to their destruction to remove freezing
  • Delay texture destroy if you plan to delete a lot of textures yourself

Text​

  • Avoid changing it on every frame as this can be expensive (each time it draws to a canvas and then uploads to GPU)
  • Bitmap Text gives much better performance for dynamically changing text
  • Text resolution matches the renderer resolution, decrease resolution yourself by setting the resolution property, which can consume less memory

Masks​

  • Masks can be expensive if too many are used: e.g., 100s of masks will really slow things down
  • Axis-aligned Rectangle masks are the fastest (as the use scissor rect)
  • Graphics masks are second fastest (as they use the stencil buffer)
  • Sprite masks are the third fastest (they uses filters). They are really expensive. Do not use too many in your scene!

Filters​

  • Release memory: displayObject.filters = null
  • If you know the size of them: displayObject.filterArea = new PIXI.Rectangle(x,y,w,h). This can speed things up as it means the object does not need to be measured
  • Filters are expensive, using too many will start to slow things down!

BlendModes​

  • Different blend modes will cause batches to break (de-optimize)
  • SceenSprite / NormalSprite / SceenSprite / NormalSprite would be 4 draw calls
  • SceenSprite / SceenSprite / NormalSprite / NormalSprite would be 2 draw calls

CacheAsBitmap​

  • Setting to true turns an object into a Sprite by caching it as a Texture
  • It has a one time cost when it is activated as it draws the object to a Texture
  • Avoid changing this on elements frequently
  • If you have a complicated item that has lots of sprites / filters AND does not move then this will speed up rendering!
  • Do not need apply to sprites as they are already Textures
  • Do not use if the object where its children are constantly changing as this will slow things down

Events​

  • If an object has no interactive children use interactiveChildren = false. The event system will then be able to avoid crawling through the object
  • Setting hitArea = new PIXI.Rectangle(x,y,w,h) as above should stop the event system from crawling through the object
- - + + \ No newline at end of file diff --git a/7.x/playground.html b/7.x/playground.html index f0d5307b8..9a4bc3d98 100644 --- a/7.x/playground.html +++ b/7.x/playground.html @@ -9,13 +9,13 @@ - - + +
Skip to main content
- - + + \ No newline at end of file diff --git a/7.x/tutorials.html b/7.x/tutorials.html index 4075d8093..42188cc7c 100644 --- a/7.x/tutorials.html +++ b/7.x/tutorials.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

Tutorials

Welcome to the tutorials page! Here you can find hand-crafted exercises to get you started with the PixiJS.

- - + + \ No newline at end of file diff --git a/7.x/tutorials/getting-started.html b/7.x/tutorials/getting-started.html index 741f7387f..f2272ff46 100644 --- a/7.x/tutorials/getting-started.html +++ b/7.x/tutorials/getting-started.html @@ -9,13 +9,13 @@ - - + +
Skip to main content

LOADING...

- - + + \ No newline at end of file diff --git a/assets/js/99d196e7.07d2ebf6.js b/assets/js/99d196e7.07d2ebf6.js new file mode 100644 index 000000000..7cb4fcb8e --- /dev/null +++ b/assets/js/99d196e7.07d2ebf6.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkpixi_docusaurus=self.webpackChunkpixi_docusaurus||[]).push([[1744],{6001:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>o,contentTitle:()=>l,default:()=>d,frontMatter:()=>r,metadata:()=>p,toc:()=>s});var a=n(7462),i=(n(7294),n(3905));const r={},l="v8 Migration Guide",p={unversionedId:"guides/migrations/v8",id:"guides/migrations/v8",title:"v8 Migration Guide",description:"Welcome to the PixiJS v8 Migration Guide! This document is designed to help you smoothly transition your projects from PixiJS v7 to the latest and greatest PixiJS v8. Please follow these steps to ensure a successful migration.",source:"@site/docs/guides/migrations/v8.md",sourceDirName:"guides/migrations",slug:"/guides/migrations/v8",permalink:"/guides/migrations/v8",draft:!1,editUrl:"https://github.com/pixijs/pixijs.com/tree/main/docs/guides/migrations/v8.md",tags:[],version:"current",frontMatter:{},sidebar:"guidesSidebar",previous:{title:"Performance Tips",permalink:"/guides/production/performance-tips"},next:{title:"v7 Migration Guide",permalink:"/guides/migrations/v7"}},o={},s=[{value:"Table of Contents",id:"table-of-contents",level:2},{value:"1. Introduction",id:"1-introduction",level:2},{value:"2. Breaking Changes",id:"2-breaking-changes",level:2},{value:"New Package Structure",id:"new-package-structure",level:3},{value:"Custom Builds",id:"custom-builds",level:4},{value:"Async Initialisation",id:"async-initialisation",level:3},{value:"Graphics API Overhaul",id:"graphics-api-overhaul",level:3},{value:"Other Breaking Changes",id:"other-breaking-changes",level:3},{value:"3. Deprecated Features",id:"3-deprecated-features",level:2},{value:"4. Resources",id:"4-resources",level:2}],m={toc:s};function d(e){let{components:t,...n}=e;return(0,i.kt)("wrapper",(0,a.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"v8-migration-guide"},"v8 Migration Guide"),(0,i.kt)("p",null,"Welcome to the PixiJS v8 Migration Guide! This document is designed to help you smoothly transition your projects from PixiJS v7 to the latest and greatest PixiJS v8. Please follow these steps to ensure a successful migration."),(0,i.kt)("h2",{id:"table-of-contents"},"Table of Contents"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("a",{parentName:"li",href:"#introduction"},"Introduction")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("a",{parentName:"li",href:"#breaking-changes"},"Breaking Changes")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("a",{parentName:"li",href:"#deprecated-features"},"Deprecated Features")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("a",{parentName:"li",href:"#resources"},"Resources"))),(0,i.kt)("h2",{id:"1-introduction"},"1. Introduction"),(0,i.kt)("p",null,"PixiJS v8 introduces several exciting changes and improvements that dramatically enhance the performance of the renderer. While we've made efforts to keep the migration process as smooth as possible, some breaking changes are inevitable. This guide will walk you through the necessary steps to migrate your PixiJS v7 project to PixiJS v8."),(0,i.kt)("h2",{id:"2-breaking-changes"},"2. Breaking Changes"),(0,i.kt)("p",null,"Before diving into the migration process, let's review the breaking changes introduced in PixiJS v8. Make sure to pay close attention to these changes as they may impact your existing codebase."),(0,i.kt)("h3",{id:"new-package-structure"},(0,i.kt)("strong",{parentName:"h3"},"New Package Structure")),(0,i.kt)("p",null," Since version 5, PixiJS has utilized individual sub-packages to organize its codebase into smaller units. However, this approach led to issues, such as conflicting installations of different PixiJS versions, causing complications with internal caches."),(0,i.kt)("p",null," In v8, PixiJS has reverted to a single-package structure. While you can still import specific parts of PixiJS, you only need to install the main package."),(0,i.kt)("p",null," ",(0,i.kt)("strong",{parentName:"p"},"Old:")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { Application } from '@pixi/app';\nimport { Sprite } from '@pixi/sprite';\n")),(0,i.kt)("p",null," ",(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { Application, Sprite } from 'pixi.js';\n")),(0,i.kt)("h4",{id:"custom-builds"},"Custom Builds"),(0,i.kt)("p",null,' PixiJS uses an "extensions" system to add renderer functionality. By default, PixiJS includes many extensions for a comprehensive out-of-the-box experience. However, for full control over features and bundle size, you can manually import specific PixiJS components.'),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"}," // imported by default\n import 'pixi.js/accessibility'\n import 'pixi.js/app'\n import 'pixi.js/events'\n import 'pixi.js/filters'\n import 'pixi.js/sprite-tiling'\n import 'pixi.js/text'\n import 'pixi.js/text-bitmap'\n import 'pixi.js/text-html'\n import 'pixi.js/graphics'\n import 'pixi.js/mesh'\n import 'pixi.js/sprite-nine-slice'\n\n // not added by default, everyone needs to import these manually\n import 'pixi.js/advanced-blend-modes'\n import 'pixi.js/unsafe-eval'\n import 'pixi.js/prepare'\n import 'pixi.js/math-extras'\n import 'pixi.js/dds'\n import 'pixi.js/ktx'\n import 'pixi.js/basis'\n\n import { Application } from 'pixi.js';\n\n const app = new Application();\n\n await app.init({\n manageImports: false, // disable importing the above extensions\n });\n")),(0,i.kt)("p",null," When initializing the application, you can disable the auto-import feature, preventing PixiJS from importing any extensions automatically. You'll need to import them manually, as demonstrated above."),(0,i.kt)("p",null," It should also be noted that the ",(0,i.kt)("inlineCode",{parentName:"p"},"pixi.js/text-bitmap"),", also add ",(0,i.kt)("inlineCode",{parentName:"p"},"Assets")," loading functionality.\nTherefore if you want to load bitmap fonts ",(0,i.kt)("strong",{parentName:"p"},"BEFORE")," initialising the renderer, you will need to import this extension."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"}," import 'pixi.js/text-bitmap'\n import { Assets, Application } from 'pixi.js';\n\n await Assets.load('my-font.fnt'); // If 'pixi.js/text-bitmap' is not imported, this will not load\n await new Application().init();\n")),(0,i.kt)("h3",{id:"async-initialisation"},(0,i.kt)("strong",{parentName:"h3"},"Async Initialisation")),(0,i.kt)("p",null,"PixiJS will now need to be initialised asynchronously. With the introduction of the WebGPU renderer PixiJS will now need to be awaited before being used"),(0,i.kt)("p",null," ",(0,i.kt)("strong",{parentName:"p"},"Old:")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { Application } from 'pixi.js'\n\nconst app = new Application();\n\n// do pixi things\n")),(0,i.kt)("p",null," ",(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { Application } from 'pixi.js'\n\nconst app = new Application();\n\n(async () => {\n await app.init({\n // application options\n });\n\n // do pixi things\n})()\n")),(0,i.kt)("p",null," With this change it also means that the ",(0,i.kt)("inlineCode",{parentName:"p"},"ApplicationOptions")," object can now be passed into the ",(0,i.kt)("inlineCode",{parentName:"p"},"init")," function instead of the constructor."),(0,i.kt)("h3",{id:"graphics-api-overhaul"},(0,i.kt)("strong",{parentName:"h3"},"Graphics API Overhaul")),(0,i.kt)("p",null,"There are a few key changes to the Graphics API. In fact this is probably the most changed part of v8. We have added deprecations where possible but below is the rundown of changes:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Instead of beginning a fill or a stroke and then building a shape, v8 asks you to build your shape and then stroke / fill it. The terminology of ",(0,i.kt)("inlineCode",{parentName:"li"},"Line")," has been replaced with the terminology of ",(0,i.kt)("inlineCode",{parentName:"li"},"Stroke"))),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Old")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"// red rect\nconst graphics = new Graphics()\n .beginFill(0xFF0000);\n .drawRect(50, 50, 100, 100);\n .endFill();\n\n// blur rect with stroke\nconst graphics2 = new Graphics()\n .lineStyle(2, 'white');\n .beginFill('blue');\n .circle(530, 50, 140, 100);\n .endFill();\n\n")),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"New")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"// red rect\nconst graphics = new Graphics()\n .rect(50, 50, 100, 100)\n .fill(0xFF0000)\n\n\n// blur rect with stroke\nconst graphics2 = new Graphics()\n .rect(50, 50, 100, 100)\n .fill('blue')\n .stroke({width:2, color:'white'})\n")),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Shape functions have been renamed. Each drawing function has been simplified into a shorter version of its name. They have the same parameters though:")),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"v7 API Call"),(0,i.kt)("th",{parentName:"tr",align:null},"v8 API Equivalent"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"drawChamferRect"),(0,i.kt)("td",{parentName:"tr",align:null},"chamferRect")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"drawCircle"),(0,i.kt)("td",{parentName:"tr",align:null},"circle")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"drawEllipse"),(0,i.kt)("td",{parentName:"tr",align:null},"ellipse")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"drawFilletRect"),(0,i.kt)("td",{parentName:"tr",align:null},"filletRect")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"drawPolygon"),(0,i.kt)("td",{parentName:"tr",align:null},"poly")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"drawRect"),(0,i.kt)("td",{parentName:"tr",align:null},"rect")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"drawRegularPolygon"),(0,i.kt)("td",{parentName:"tr",align:null},"regularPoly")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"drawRoundedPolygon"),(0,i.kt)("td",{parentName:"tr",align:null},"roundPoly")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"drawRoundedRect"),(0,i.kt)("td",{parentName:"tr",align:null},"roundRect")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"drawRoundedShape"),(0,i.kt)("td",{parentName:"tr",align:null},"roundShape")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"drawStar"),(0,i.kt)("td",{parentName:"tr",align:null},"star")))),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"fills functions expect ",(0,i.kt)("inlineCode",{parentName:"li"},"FillStyle")," options or a color, rather than a string of parameters. This also replaces ",(0,i.kt)("inlineCode",{parentName:"li"},"beginTextureFill"),(0,i.kt)("strong",{parentName:"li"},"Old"))),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"}," const rect = new Graphics()\n .beginTextureFill({texture:Texture.WHITE, alpha:0.5, color:0xFF0000})\n .drawRect(0, 0, 100, 100)\n .endFill()\n .beginFill(0xFFFF00, 0.5)\n .drawRect(100, 0, 100, 100)\n .endFill()\n\n")),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"New")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"}," const rect = new Graphics()\n .rect(0, 0, 100, 100)\n .fill({texture:Texture.WHITE, alpha:0.5, color:0xFF0000})\n .rect(100, 0, 100, 100)\n .fill({color:0xFFFF00, alpha:0.5})\n")),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"stokes functions expect ",(0,i.kt)("inlineCode",{parentName:"li"},"StrokeStyle")," options or a color, rather than a string of parameters. This also replaces ",(0,i.kt)("inlineCode",{parentName:"li"},"lineTextureStyle"),(0,i.kt)("strong",{parentName:"li"},"Old"))),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"}," const rect = new Graphics()\n .lineTextureStyle({texture:Texture.WHITE, width:10, color:0xFF0000})\n .drawRect(0, 0, 100, 100)\n .endFill()\n .lineStyle(2, 0xFEEB77);\n .drawRect(100, 0, 100, 100)\n .endFill()\n\n")),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"New")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"}," const rect = new Graphics()\n .rect(0, 0, 100, 100)\n .stroke({texture:Texture.WHITE, width:10, color:0xFF0000})\n .rect(100, 0, 100, 100)\n .stroke({color:0xFEEB77, width:2})\n")),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"holes now make use of a new ",(0,i.kt)("inlineCode",{parentName:"li"},"cut")," function. As with ",(0,i.kt)("inlineCode",{parentName:"li"},"stroke")," and ",(0,i.kt)("inlineCode",{parentName:"li"},"fill"),", ",(0,i.kt)("inlineCode",{parentName:"li"},"cut")," acts on the previous shape.\n",(0,i.kt)("strong",{parentName:"li"},"Old"))),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"}," const rectAndHole = new Graphics()\n .beginFill(0x00FF00)\n .drawRect(0, 0, 100, 100)\n .beginHole()\n .drawCircle(50, 50, 20)\n .endHole()\n .endFill();\n")),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"New")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"}," const rectAndHole = new Graphics()\n .rect(0, 0, 100, 100)\n .fill(0x00FF00)\n .circle(50, 50, 20)\n .cut();\n")),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"GraphicsGeometry")," has been replaced with ",(0,i.kt)("inlineCode",{parentName:"li"},"GraphicsContext")," this allows for sharing of ",(0,i.kt)("inlineCode",{parentName:"li"},"Graphics")," data more efficiently.\n",(0,i.kt)("strong",{parentName:"li"},"Old"))),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"}," const rect = new Graphics()\n .beginFill(0xFF0000);\n .drawRect(50, 50, 100, 100);\n .endFill();\n\n const geometry = rect.geometry;\n\n const secondRect = new Graphics(geometry);\n\n")),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"New")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"}," const context = new GraphicsContext()\n .rect(50, 50, 100, 100)\n .fill(0xFF0000)\n\n const rect = new Graphics(context);\n const secondRect = new Graphics(context);\n")),(0,i.kt)("h3",{id:"other-breaking-changes"},"Other Breaking Changes"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"DisplayObject")," has been removed. ",(0,i.kt)("inlineCode",{parentName:"p"},"Container")," is now the base class for all PixiJS objects.")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"updateTransform")," has been removed as nodes no longer contain any rendering logic"),(0,i.kt)("p",{parentName:"li"},"We do recognise that many people used this function to do custom logic every frame, so we have added a new ",(0,i.kt)("inlineCode",{parentName:"p"},"onRender")," function that can be used for this purpose."),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"Old:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"class MySprite extends Sprite {\n constructor() {\n super();\n this.updateTransform();\n }\n\n updateTransform() {\n super.updateTransform();\n // do custom logic\n }\n}\n")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"class MySprite extends Sprite {\n constructor() {\n super();\n this.onRender = this._onRender.bind(this);\n }\n\n _onRender() {\n // do custom logic\n }\n}\n"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Mipmap generation changes"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"The BaseTexture ",(0,i.kt)("inlineCode",{parentName:"li"},"mipmap")," property has been renamed to ",(0,i.kt)("inlineCode",{parentName:"li"},"autoGenerateMipmaps"),"."),(0,i.kt)("li",{parentName:"ul"},"Mipmaps for ",(0,i.kt)("inlineCode",{parentName:"li"},"RenderTextures")," have been adjusted so that developer is responsible for updating them mipmaps. Mipmap generation can be expensive, and due to the new reactive way we handle textures we do not want to accidentally generate mipmaps when they are not required.")))),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"const myRenderTexture = RenderTexture.create({width:100, height:100, autoGenerateMipmaps:true})\n\n// do some rendering..\nrenderer.render({target:myRenderTexture, container:scene})\n\n// now refresh mipmaps when you are ready\nmyRenderTexture.source.updateMipmaps();\n")),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Due to the new way PixiJS handles things internally, sprites no longer get notified if a texture's UVs have been modified. The best practice is not to modify texture UVs once they have been created. It's best to have textures ready to go (they are inexpensive to create and store)."),(0,i.kt)("li",{parentName:"ul"},"Sometimes, you might want to employ a special technique that animates the UVs. In this last instance, you will be responsible for updating the sprite (it's worth noting that it may update automatically - but due to the new optimizations, this will not be guaranteed). Updating the source data (e.g., a video texture) will, however, always be reflected immediately.")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"const texture = await Assets.load('bunny.png');\nconst sprite = new Sprite(texture);\n\ntexture.frame.width = texture.frame.width/2;\ntexture.update();\n\n// guarantees the texture changes will be reflected on the sprite\nsprite.onViewUpdate();\n\n\n// alternatively you can hooke into the sprites event\ntexture.on('update', ()=>{sprite.onViewUpdate});\n")),(0,i.kt)("p",null,"The act of adding and removing the event when a sprite's texture was changed led to an unacceptable performance drop, especially when swapping many textures (imagine shooting games with lots of keyframe textures swapping). This is why we now leave that responsibility to the user."),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"New Container culling approach"),(0,i.kt)("p",{parentName:"li"},"With this version of PixiJS we have changed how the ",(0,i.kt)("inlineCode",{parentName:"p"},"cullable")," property works on containers. Previously culling was done for you automatically during the render loop. However, we have moved this logic out and provided users the ability to control when culling happens themselves."),(0,i.kt)("p",{parentName:"li"},"With this change we have added a couple of new properties:"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"cullable")," - Whether or not the container can be culled"),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"cullArea")," - A cull area that will be used instead of the bounds of the container"),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"cullableChildren")," - Whether or not the containers children can be culled. This can help optimise large scenes")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"const container = new GameWorld();\nconst view = new Rectangle(0, 0, 800, 600);\n\ncontainer.cullable = true;\ncontainer.cullArea = new Rectangle(0,0,400,400);\ncontainer.cullableChildren = false;\n\nCuller.shared.cull(myContainer, view);\nrenderer.render(myContainer);\n")),(0,i.kt)("p",{parentName:"li"},"There is also a ",(0,i.kt)("inlineCode",{parentName:"p"},"CullerPlugin")," that can be used to automatically call ",(0,i.kt)("inlineCode",{parentName:"p"},"Culler.shared.cull")," every frame if you want to simulate the old behaviour."),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import {extensions, CullerPlugin} from 'pixi.js'\nextensions.add(CullerPlugin)\n"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Renamed several mesh classes"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"renamed ",(0,i.kt)("inlineCode",{parentName:"li"},"SimpleMesh")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"MeshSimple")),(0,i.kt)("li",{parentName:"ul"},"renamed ",(0,i.kt)("inlineCode",{parentName:"li"},"SimplePlane")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"MeshPlane")),(0,i.kt)("li",{parentName:"ul"},"renamed ",(0,i.kt)("inlineCode",{parentName:"li"},"SimpleRope")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"MeshRope")))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Deprecations for ",(0,i.kt)("inlineCode",{parentName:"p"},"Assets")," removed"),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"Old:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { Assets } from 'pixi.js'\n\nAssets.add('bunny', 'bunny.png')\n")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { Assets } from 'pixi.js'\n\nAssets.add({ alias: 'bunny', src: 'bunny.png' })\n"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"settings")," object has been removed"),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"Old:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { settings, BrowserAdapter } from 'pixi.js'\n\nsettings.RESOLUTION = 1\nsettings.FAIL_IF_MAJOR_PERFORMANCE_CAVEAT = false\nsettings.ADAPTER = BrowserAdapter\n")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { AbstractRenderer, DOMAdapter, BrowserAdapter } from 'pixi.js'\n\n// Can also be passed into the renderer directly e.g `autoDetectRenderer({resolution: 1})`\nAbstractRenderer.defaultOptions.resolution = 1;\n\n// Can also be passed into the renderer directly e.g `autoDetectRenderer({failIfMajorPerformanceCaveat: false})`\nAbstractRenderer.defaultOptions.failIfMajorPerformanceCaveat = false;\n\n// See below for more information about changes to the adapter\nDOMAdapter.set(BrowserAdapter)\n"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Adapter and Web Worker Changes"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"settings.ADAPTER")," has been removed and replaced with ",(0,i.kt)("inlineCode",{parentName:"p"},"DOMAdapter")),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"DOMAdapter")," is a static class that can be used to set the adapter for the entire application"),(0,i.kt)("li",{parentName:"ul"},"PixiJS has two adapters built in ",(0,i.kt)("inlineCode",{parentName:"li"},"BrowserAdapter")," and ",(0,i.kt)("inlineCode",{parentName:"li"},"WebWorkerAdapter"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"BrowserAdapter")," is the default adapter and is used when running in the browser"),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"WebWorkerAdapter")," is used when running in a web worker")))),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"Old:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { settings, WebWorkerAdapter } from 'pixi.js'\n\nsettings.ADAPTER = WebWorkerAdapter\nsettings.ADAPTER.createCanvas()\n")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { DOMAdapter, WebWorkerAdapter } from 'pixi.js'\n\nDOMAdapter.set(WebWorkerAdapter)\nDOMAdapter.get().createCanvas()\n"))))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Application type now accepts Renderer instead of view by @Zyie in ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/pixijs/pixijs/pull/9740"},"https://github.com/pixijs/pixijs/pull/9740")),(0,i.kt)("p",{parentName:"li"},"This is to allow ",(0,i.kt)("inlineCode",{parentName:"p"},"app.renderer")," to be typed correctly"),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"Old:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"const app = new Application()\n")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"const app = new Application>()\nconst app = new Application>();\nconst app = new Application>();\n")))),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"Texture.from")," no longer will load a texture from a URL."),(0,i.kt)("p",{parentName:"li"},"When using ",(0,i.kt)("inlineCode",{parentName:"p"},"Texture.from")," you will need to pass in a source such as ",(0,i.kt)("inlineCode",{parentName:"p"},"CanvasSource"),"/",(0,i.kt)("inlineCode",{parentName:"p"},"ImageSource"),"/",(0,i.kt)("inlineCode",{parentName:"p"},"VideoSource")," or a resource such as ",(0,i.kt)("inlineCode",{parentName:"p"},"HTMLImageElement"),"/",(0,i.kt)("inlineCode",{parentName:"p"},"HTMLCanvasElement"),"/",(0,i.kt)("inlineCode",{parentName:"p"},"HTMLVideoElement")," or a string that has been loaded through ",(0,i.kt)("inlineCode",{parentName:"p"},"Assets.load")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"Old:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { Texture } from 'pixi.js';\n\nconst texture = Texture.from('https://i.imgur.com/IaUrttj.png');\n")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { Assets, Texture } from 'pixi.js';\n\nawait Assets.load('https://i.imgur.com/IaUrttj.png');\nconst texture = Texture.from('https://i.imgur.com/IaUrttj.png');\n")))),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"The ",(0,i.kt)("inlineCode",{parentName:"p"},"Ticker"),"'s callback will now pass the ",(0,i.kt)("inlineCode",{parentName:"p"},"Ticker")," instance instead of the delta time.\nThis is to allow for more control over what unit of time is used."),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"Old:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"Ticker.shared.add((dt)=> {\n bunny.rotation += dt\n});\n")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"Ticker.shared.add((ticker)=> {\n bunny.rotation += ticker.deltaTime;\n});\n"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Text parsers have been renamed"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"TextFormat")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"bitmapFontTextParser")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"XMLStringFormat")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"bitmapFontXMLStringParser")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"XMLFormat")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"bitmapFontXMLParser")))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"The default ",(0,i.kt)("inlineCode",{parentName:"p"},"eventMode")," is now ",(0,i.kt)("inlineCode",{parentName:"p"},"passive")," instead of ",(0,i.kt)("inlineCode",{parentName:"p"},"auto"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"utils")," has been removed. All the functions are available as direct imports."),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"Old:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { utils } from 'pixi.js'\n\nutils.isMobile.any()\n")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { isMobile } from 'pixi.js'\n\nisMobile.any()\n")))),(0,i.kt)("h2",{id:"3-deprecated-features"},"3. Deprecated Features"),(0,i.kt)("p",null,"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."),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Leaf nodes no longer allow children"),(0,i.kt)("p",{parentName:"li"},"Only ",(0,i.kt)("inlineCode",{parentName:"p"},"Containers")," can have children. This means that ",(0,i.kt)("inlineCode",{parentName:"p"},"Sprite"),", ",(0,i.kt)("inlineCode",{parentName:"p"},"Mesh"),", ",(0,i.kt)("inlineCode",{parentName:"p"},"Graphics")," etc can no longer have children."),(0,i.kt)("p",{parentName:"li"},"To replicate the old behaviour you can create a ",(0,i.kt)("inlineCode",{parentName:"p"},"Container")," and add the leaf nodes to it."),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"Old:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"const sprite = new Sprite();\nconst spriteChild = new Sprite();\nsprite.addChild(spriteChild);\n")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"const container = new Container();\nconst sprite = new Sprite();\nconst spriteChild = new Sprite();\n\ncontainer.addChild(sprite);\ncontainer.addChild(spriteChild);\n"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"Application.view")," replaced with ",(0,i.kt)("inlineCode",{parentName:"p"},"Application.canvas")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"Old:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"const app = new Application({ view: document.createElement('canvas') });\ndocument.body.appendChild(app.view);\n")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"const app = new Application();\nawait app.init({ view: document.createElement('canvas') });\ndocument.body.appendChild(app.canvas);\n"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"NineSlicePlane")," renamed to ",(0,i.kt)("inlineCode",{parentName:"p"},"NineSliceSprite"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"SCALE_MODES")," replaced with ",(0,i.kt)("inlineCode",{parentName:"p"},"ScaleMode")," strings"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"SCALE_MODES.NEAREST")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"'nearest'"),","),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"SCALE_MODES.LINEAR")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"'linear'"),","))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"WRAP_MODES")," replaced with ",(0,i.kt)("inlineCode",{parentName:"p"},"WrapMode")," strings"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"WRAP_MODES.CLAMP")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"'clamp'"),","),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"WRAP_MODES.REPEAT")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"'repeat'"),","),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"WRAP_MODES.MIRRORED_REPEAT")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"'mirror-repeat'"),","))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"DRAW_MODES")," replaced with ",(0,i.kt)("inlineCode",{parentName:"p"},"Topology")," strings"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"DRAW_MODES.POINTS")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"'point-list'"),","),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"DRAW_MODES.LINES")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"'line-list'"),","),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"DRAW_MODES.LINE_STRIP")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"'line-strip'"),","),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"DRAW_MODES.TRIANGLES")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"'triangle-list'"),","),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"DRAW_MODES.TRIANGLE_STRIP")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"'triangle-strip'"),","))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Constructors have largely been changed to accept objects instead of multiple arguments"),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"Old:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"const blurFilter = new BlurFilter(8, 4, 1, 5);\nconst displacementFilter = new DisplacementFilter(sprite, 5);\nconst meshGeometry = new MeshGeometry(vertices, uvs, index);\nconst mesh = new Mesh(geometry, shader, state, drawMode);\nconst plane = new PlaneGeometry(width, height, segWidth, segHeight);\nconst nineSlicePlane = new NineSlicePlane(texture, leftWidth, topHeight, rightWidth, bottomHeight);\nconst tileSprite = new TileSprite(texture, width, height);\nconst text = new Text('Hello World', style);\nconst bitmapText = new BitmapText('Hello World', style);\nconst htmlText = new HTMLText('Hello World', style);\n")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"const blurFilter = new BlurFilter({\n blur: 8,\n quality: 4,\n resolution: 1,\n kernelSize: 5,\n});\nconst displacementFilter = new DisplacementFilter({\n sprite,\n scale: 5,\n});\nconst meshGeometry = new MeshGeometry({\n positions: vertices,\n uvs,\n indices: index,\n topology: 'triangle-list';\n shrinkBuffersToFit: boolean;\n});\nconst mesh = new Mesh({\n geometry\n shader\n texture\n});\nconst plane = new PlaneGeometry({\n width,\n height,\n verticesX: segWidth,\n verticesY: segHeight,\n});\nconst nineSliceSprite = new NineSliceSprite({\n texture,\n leftWidth,\n topHeight,\n rightWidth,\n bottomHeight,\n});\nconst tileSprite = new TileSprite({\n texture,\n width,\n height,\n});\nconst text = new Text({\n text: 'Hello World',\n style,\n});\nconst bitmapText = new BitmapText({\n text:'Hello World',\n style,\n});\nconst htmlText = new HTMLText({\n text:'Hello World',\n style,\n});\n")))),(0,i.kt)("h2",{id:"4-resources"},"4. Resources"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"https://github.com/pixijs/pixijs/releases?q=v8.0.0&expanded=true"},"PixiJS v8 Release Notes")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"https://discord.gg/CPTjeb28nH"},"PixiJS Discord")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"https://github.com/pixijs/pixijs/issues"},"PixiJS Issues"))))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/99d196e7.2279c159.js b/assets/js/99d196e7.2279c159.js deleted file mode 100644 index 877fb75ec..000000000 --- a/assets/js/99d196e7.2279c159.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkpixi_docusaurus=self.webpackChunkpixi_docusaurus||[]).push([[1744],{6001:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>o,contentTitle:()=>l,default:()=>d,frontMatter:()=>r,metadata:()=>p,toc:()=>s});var a=n(7462),i=(n(7294),n(3905));const r={},l="v8 Migration Guide",p={unversionedId:"guides/migrations/v8",id:"guides/migrations/v8",title:"v8 Migration Guide",description:"Welcome to the PixiJS v8 Migration Guide! This document is designed to help you smoothly transition your projects from PixiJS v7 to the latest and greatest PixiJS v8. Please follow these steps to ensure a successful migration.",source:"@site/docs/guides/migrations/v8.md",sourceDirName:"guides/migrations",slug:"/guides/migrations/v8",permalink:"/guides/migrations/v8",draft:!1,editUrl:"https://github.com/pixijs/pixijs.com/tree/main/docs/guides/migrations/v8.md",tags:[],version:"current",frontMatter:{},sidebar:"guidesSidebar",previous:{title:"Performance Tips",permalink:"/guides/production/performance-tips"},next:{title:"v7 Migration Guide",permalink:"/guides/migrations/v7"}},o={},s=[{value:"Table of Contents",id:"table-of-contents",level:2},{value:"1. Introduction",id:"1-introduction",level:2},{value:"2. Breaking Changes",id:"2-breaking-changes",level:2},{value:"New Package Structure",id:"new-package-structure",level:3},{value:"Custom Builds",id:"custom-builds",level:4},{value:"Async Initialisation",id:"async-initialisation",level:3},{value:"Graphics API Overhaul",id:"graphics-api-overhaul",level:3},{value:"Other Breaking Changes",id:"other-breaking-changes",level:3},{value:"3. Deprecated Features",id:"3-deprecated-features",level:2},{value:"4. Resources",id:"4-resources",level:2}],m={toc:s};function d(e){let{components:t,...n}=e;return(0,i.kt)("wrapper",(0,a.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"v8-migration-guide"},"v8 Migration Guide"),(0,i.kt)("p",null,"Welcome to the PixiJS v8 Migration Guide! This document is designed to help you smoothly transition your projects from PixiJS v7 to the latest and greatest PixiJS v8. Please follow these steps to ensure a successful migration."),(0,i.kt)("h2",{id:"table-of-contents"},"Table of Contents"),(0,i.kt)("ol",null,(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("a",{parentName:"li",href:"#introduction"},"Introduction")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("a",{parentName:"li",href:"#breaking-changes"},"Breaking Changes")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("a",{parentName:"li",href:"#deprecated-features"},"Deprecated Features")),(0,i.kt)("li",{parentName:"ol"},(0,i.kt)("a",{parentName:"li",href:"#resources"},"Resources"))),(0,i.kt)("h2",{id:"1-introduction"},"1. Introduction"),(0,i.kt)("p",null,"PixiJS v8 introduces several exciting changes and improvements that dramatically enhance the performance of the renderer. While we've made efforts to keep the migration process as smooth as possible, some breaking changes are inevitable. This guide will walk you through the necessary steps to migrate your PixiJS v7 project to PixiJS v8."),(0,i.kt)("h2",{id:"2-breaking-changes"},"2. Breaking Changes"),(0,i.kt)("p",null,"Before diving into the migration process, let's review the breaking changes introduced in PixiJS v8. Make sure to pay close attention to these changes as they may impact your existing codebase."),(0,i.kt)("h3",{id:"new-package-structure"},(0,i.kt)("strong",{parentName:"h3"},"New Package Structure")),(0,i.kt)("p",null," Since version 5, PixiJS has utilized individual sub-packages to organize its codebase into smaller units. However, this approach led to issues, such as conflicting installations of different PixiJS versions, causing complications with internal caches."),(0,i.kt)("p",null," In v8, PixiJS has reverted to a single-package structure. While you can still import specific parts of PixiJS, you only need to install the main package."),(0,i.kt)("p",null," ",(0,i.kt)("strong",{parentName:"p"},"Old:")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { Application } from '@pixi/app';\nimport { Sprite } from '@pixi/sprite';\n")),(0,i.kt)("p",null," ",(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { Application, Sprite } from 'pixi.js';\n")),(0,i.kt)("h4",{id:"custom-builds"},"Custom Builds"),(0,i.kt)("p",null,' PixiJS uses an "extensions" system to add renderer functionality. By default, PixiJS includes many extensions for a comprehensive out-of-the-box experience. However, for full control over features and bundle size, you can manually import specific PixiJS components.'),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"}," // imported by default\n import 'pixi.js/accessibility'\n import 'pixi.js/app'\n import 'pixi.js/events'\n import 'pixi.js/filters'\n import 'pixi.js/sprite-tiling'\n import 'pixi.js/text'\n import 'pixi.js/text-bitmap'\n import 'pixi.js/text-html'\n import 'pixi.js/graphics'\n import 'pixi.js/mesh'\n import 'pixi.js/sprite-nine-slice'\n\n // not added by default, everyone needs to import these manually\n import 'pixi.js/advanced-blend-modes'\n import 'pixi.js/unsafe-eval'\n import 'pixi.js/prepare'\n import 'pixi.js/math-extras'\n import 'pixi.js/dds'\n import 'pixi.js/ktx'\n import 'pixi.js/basis'\n\n import { Application } from 'pixi.js';\n\n const app = new Application();\n\n await app.init({\n manageImports: false, // disable importing the above extensions\n });\n")),(0,i.kt)("p",null," When initializing the application, you can disable the auto-import feature, preventing PixiJS from importing any extensions automatically. You'll need to import them manually, as demonstrated above."),(0,i.kt)("p",null," It should also be noted that the ",(0,i.kt)("inlineCode",{parentName:"p"},"pixi.js/text-bitmap"),", also add ",(0,i.kt)("inlineCode",{parentName:"p"},"Assets")," loading functionality.\nTherefore if you want to load bitmap fonts ",(0,i.kt)("strong",{parentName:"p"},"BEFORE")," initialising the renderer, you will need to import this extension."),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"}," import 'pixi.js/text-bitmap'\n import { Assets, Application } from 'pixi.js';\n\n await Assets.load('my-font.fnt'); // If 'pixi.js/text-bitmap' is not imported, this will not load\n await new Application().init();\n")),(0,i.kt)("h3",{id:"async-initialisation"},(0,i.kt)("strong",{parentName:"h3"},"Async Initialisation")),(0,i.kt)("p",null,"PixiJS will now need to be initialised asynchronously. With the introduction of the WebGPU renderer PixiJS will now need to be awaited before being used"),(0,i.kt)("p",null," ",(0,i.kt)("strong",{parentName:"p"},"Old:")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { Application } from 'pixi.js'\n\nconst app = new Application();\n\n// do pixi things\n")),(0,i.kt)("p",null," ",(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { Application } from 'pixi.js'\n\nconst app = new Application();\n\n(async () => {\n await app.init({\n // application options\n });\n\n // do pixi things\n})()\n")),(0,i.kt)("p",null," With this change it also means that the ",(0,i.kt)("inlineCode",{parentName:"p"},"ApplicationOptions")," object can now be passed into the ",(0,i.kt)("inlineCode",{parentName:"p"},"init")," function instead of the constructor."),(0,i.kt)("h3",{id:"graphics-api-overhaul"},(0,i.kt)("strong",{parentName:"h3"},"Graphics API Overhaul")),(0,i.kt)("p",null,"There are a few key changes to the Graphics API. In fact this is probably the most changed part of v8. We have added deprecations where possible but below is the rundown of changes:"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Instead of beginning a fill or a stroke and then building a shape, v8 asks you to build your shape and then stroke / fill it. The terminology of ",(0,i.kt)("inlineCode",{parentName:"li"},"Line")," has been replaced with the terminology of ",(0,i.kt)("inlineCode",{parentName:"li"},"Stroke"))),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Old")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"// red rect\nconst graphics = new Graphics()\n .beginFill(0xFF0000);\n .drawRect(50, 50, 100, 100);\n .endFill();\n\n// blur rect with stroke\nconst graphics2 = new Graphics()\n .lineStyle(2, 'white');\n .beginFill('blue');\n .circle(530, 50, 140, 100);\n .endFill();\n\n")),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"New")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"// red rect\nconst graphics = new Graphics()\n .rect(50, 50, 100, 100)\n .fill(0xFF0000)\n\n\n// blur rect with stroke\nconst graphics2 = new Graphics()\n .rect(50, 50, 100, 100)\n .fill('blue')\n .stroke({width:2, color:'white'})\n")),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Shape functions have been renamed. Each drawing function has been simplified into a shorter version of its name. They have the same parameters though:")),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"v7 API Call"),(0,i.kt)("th",{parentName:"tr",align:null},"v8 API Equivalent"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"drawChamferRect"),(0,i.kt)("td",{parentName:"tr",align:null},"chamferRect")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"drawCircle"),(0,i.kt)("td",{parentName:"tr",align:null},"circle")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"drawEllipse"),(0,i.kt)("td",{parentName:"tr",align:null},"ellipse")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"drawFilletRect"),(0,i.kt)("td",{parentName:"tr",align:null},"filletRect")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"drawPolygon"),(0,i.kt)("td",{parentName:"tr",align:null},"poly")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"drawRect"),(0,i.kt)("td",{parentName:"tr",align:null},"rect")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"drawRegularPolygon"),(0,i.kt)("td",{parentName:"tr",align:null},"regularPoly")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"drawRoundedPolygon"),(0,i.kt)("td",{parentName:"tr",align:null},"roundPoly")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"drawRoundedRect"),(0,i.kt)("td",{parentName:"tr",align:null},"roundRect")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"drawRoundedShape"),(0,i.kt)("td",{parentName:"tr",align:null},"roundShape")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"drawStar"),(0,i.kt)("td",{parentName:"tr",align:null},"star")))),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"fills functions expect ",(0,i.kt)("inlineCode",{parentName:"li"},"FillStyle")," options or a color, rather than a string of parameters. This also replaces ",(0,i.kt)("inlineCode",{parentName:"li"},"beginTextureFill"),(0,i.kt)("strong",{parentName:"li"},"Old"))),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"}," const rect = new Graphics()\n .beginTextureFill({texture:Texture.WHITE, alpha:0.5, color:0xFF0000})\n .drawRect(0, 0, 100, 100)\n .endFill()\n .beginFill(0xFFFF00, 0.5)\n .drawRect(100, 0, 100, 100)\n .endFill()\n\n")),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"New")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"}," const rect = new Graphics()\n .rect(0, 0, 100, 100)\n .fill({texture:Texture.WHITE, alpha:0.5, color:0xFF0000})\n .rect(100, 0, 100, 100)\n .fill({color:0xFFFF00, alpha:0.5})\n")),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"stokes functions expect ",(0,i.kt)("inlineCode",{parentName:"li"},"StrokeStyle")," options or a color, rather than a string of parameters. This also replaces ",(0,i.kt)("inlineCode",{parentName:"li"},"lineTextureStyle"),(0,i.kt)("strong",{parentName:"li"},"Old"))),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"}," const rect = new Graphics()\n .lineTextureStyle({texture:Texture.WHITE, width:10, color:0xFF0000})\n .drawRect(0, 0, 100, 100)\n .endFill()\n .lineStyle(2, 0xFEEB77);\n .drawRect(100, 0, 100, 100)\n .endFill()\n\n")),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"New")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"}," const rect = new Graphics()\n .rect(0, 0, 100, 100)\n .stroke({texture:Texture.WHITE, width:10, color:0xFF0000})\n .rect(100, 0, 100, 100)\n .stroke({color:0xFEEB77, width:2})\n")),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"holes now make use of a new ",(0,i.kt)("inlineCode",{parentName:"li"},"cut")," function. As with ",(0,i.kt)("inlineCode",{parentName:"li"},"stroke")," and ",(0,i.kt)("inlineCode",{parentName:"li"},"fill"),", ",(0,i.kt)("inlineCode",{parentName:"li"},"cut")," acts on the previous shape.\n",(0,i.kt)("strong",{parentName:"li"},"Old"))),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"}," const rectAndHole = new Graphics()\n .beginFill(0x00FF00)\n .drawRect(0, 0, 100, 100)\n .beginHole()\n .drawCircle(50, 50, 20)\n .endHole()\n .endFill();\n")),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"New")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"}," const rectAndHole = new Graphics()\n .rect(0, 0, 100, 100)\n .fill(0x00FF00)\n .circle(50, 50, 20)\n .cut();\n")),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"GraphicsGeometry")," has been replaced with ",(0,i.kt)("inlineCode",{parentName:"li"},"GraphicsContext")," this allows for sharing of ",(0,i.kt)("inlineCode",{parentName:"li"},"Graphics")," data more efficiently.\n",(0,i.kt)("strong",{parentName:"li"},"Old"))),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"}," const rect = new Graphics()\n .beginFill(0xFF0000);\n .drawRect(50, 50, 100, 100);\n .endFill();\n\n const geometry = rect.geometry;\n\n const secondRect = new Graphics(geometry);\n\n")),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"New")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"}," const context = new GraphicsContext()\n .rect(50, 50, 100, 100)\n .fill(0xFF0000)\n\n const rect = new Graphics(context);\n const secondRect = new Graphics(context);\n")),(0,i.kt)("h3",{id:"other-breaking-changes"},"Other Breaking Changes"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"DisplayObject")," has been removed. ",(0,i.kt)("inlineCode",{parentName:"p"},"Container")," is now the base class for all PixiJS objects."),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"Old:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { DisplayObject } from 'pixi.js'\n\nclass MySprite extends DisplayObject {\n constructor() {\n super();\n }\n}\n")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { Container } from 'pixi.js'\n\nclass MySprite extends Container {\n constructor() {\n super();\n }\n}\n"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"updateTransform")," has been removed as nodes no longer contain any rendering logic"),(0,i.kt)("p",{parentName:"li"},"We do recognise that many people used this function to do custom logic every frame, so we have added a new ",(0,i.kt)("inlineCode",{parentName:"p"},"onRender")," function that can be used for this purpose."),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"Old:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"class MySprite extends Sprite {\n constructor() {\n super();\n this.updateTransform();\n }\n\n updateTransform() {\n super.updateTransform();\n // do custom logic\n }\n}\n")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"class MySprite extends Sprite {\n constructor() {\n super();\n this.onRender = this._onRender.bind(this);\n }\n\n _onRender() {\n // do custom logic\n }\n}\n"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Mipmap generation changes"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"The BaseTexture ",(0,i.kt)("inlineCode",{parentName:"li"},"mipmap")," property has been renamed to ",(0,i.kt)("inlineCode",{parentName:"li"},"autoGenerateMipmaps"),"."),(0,i.kt)("li",{parentName:"ul"},"Mipmaps for ",(0,i.kt)("inlineCode",{parentName:"li"},"RenderTextures")," have been adjusted so that developer is responsible for updating them mipmaps. Mipmap generation can be expensive, and due to the new reactive way we handle textures we do not want to accidentally generate mipmaps when they are not required.")))),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"const myRenderTexture = RenderTexture.create({width:100, height:100, autoGenerateMipmaps:true})\n\n// do some rendering..\nrenderer.render({target:myRenderTexture, container:scene})\n\n// now refresh mipmaps when you are ready\nmyRenderTexture.source.updateMipmaps();\n")),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},"Due to the new way PixiJS handles things internally, sprites no longer get notified if a texture's UVs have been modified. The best practice is not to modify texture UVs once they have been created. It's best to have textures ready to go (they are inexpensive to create and store)."),(0,i.kt)("li",{parentName:"ul"},"Sometimes, you might want to employ a special technique that animates the UVs. In this last instance, you will be responsible for updating the sprite (it's worth noting that it may update automatically - but due to the new optimizations, this will not be guaranteed). Updating the source data (e.g., a video texture) will, however, always be reflected immediately.")),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"const texture = await Assets.load('bunny.png');\nconst sprite = new Sprite(texture);\n\ntexture.frame.width = texture.frame.width/2;\ntexture.update();\n\n// guarantees the texture changes will be reflected on the sprite\nsprite.onViewUpdate();\n\n\n// alternatively you can hooke into the sprites event\ntexture.on('update', ()=>{sprite.onViewUpdate});\n")),(0,i.kt)("p",null,"The act of adding and removing the event when a sprite's texture was changed led to an unacceptable performance drop, especially when swapping many textures (imagine shooting games with lots of keyframe textures swapping). This is why we now leave that responsibility to the user."),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"New Container culling approach"),(0,i.kt)("p",{parentName:"li"},"With this version of PixiJS we have changed how the ",(0,i.kt)("inlineCode",{parentName:"p"},"cullable")," property works on containers. Previously culling was done for you automatically during the render loop. However, we have moved this logic out and provided users the ability to control when culling happens themselves."),(0,i.kt)("p",{parentName:"li"},"With this change we have added a couple of new properties:"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"cullable")," - Whether or not the container can be culled"),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"cullArea")," - A cull area that will be used instead of the bounds of the container"),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"cullableChildren")," - Whether or not the containers children can be culled. This can help optimise large scenes")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"const container = new GameWorld();\nconst view = new Rectangle(0, 0, 800, 600);\n\ncontainer.cullable = true;\ncontainer.cullArea = new Rectangle(0,0,400,400);\ncontainer.cullableChildren = false;\n\nCuller.shared.cull(myContainer, view);\nrenderer.render(myContainer);\n")),(0,i.kt)("p",{parentName:"li"},"There is also a ",(0,i.kt)("inlineCode",{parentName:"p"},"CullerPlugin")," that can be used to automatically call ",(0,i.kt)("inlineCode",{parentName:"p"},"Culler.shared.cull")," every frame if you want to simulate the old behaviour."),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import {extensions, CullerPlugin} from 'pixi.js'\nextensions.add(CullerPlugin)\n"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Renamed several mesh classes"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},"renamed ",(0,i.kt)("inlineCode",{parentName:"li"},"SimpleMesh")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"MeshSimple")),(0,i.kt)("li",{parentName:"ul"},"renamed ",(0,i.kt)("inlineCode",{parentName:"li"},"SimplePlane")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"MeshPlane")),(0,i.kt)("li",{parentName:"ul"},"renamed ",(0,i.kt)("inlineCode",{parentName:"li"},"SimpleRope")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"MeshRope")))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Deprecations for ",(0,i.kt)("inlineCode",{parentName:"p"},"Assets")," removed"),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"Old:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { Assets } from 'pixi.js'\n\nAssets.add('bunny', 'bunny.png')\n")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { Assets } from 'pixi.js'\n\nAssets.add({ alias: 'bunny', src: 'bunny.png' })\n"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"settings")," object has been removed"),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"Old:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { settings, BrowserAdapter } from 'pixi.js'\n\nsettings.RESOLUTION = 1\nsettings.FAIL_IF_MAJOR_PERFORMANCE_CAVEAT = false\nsettings.ADAPTER = BrowserAdapter\n")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { AbstractRenderer, DOMAdapter, BrowserAdapter } from 'pixi.js'\n\n// Can also be passed into the renderer directly e.g `autoDetectRenderer({resolution: 1})`\nAbstractRenderer.defaultOptions.resolution = 1;\n\n// Can also be passed into the renderer directly e.g `autoDetectRenderer({failIfMajorPerformanceCaveat: false})`\nAbstractRenderer.defaultOptions.failIfMajorPerformanceCaveat = false;\n\n// See below for more information about changes to the adapter\nDOMAdapter.set(BrowserAdapter)\n"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Adapter and Web Worker Changes"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"settings.ADAPTER")," has been removed and replaced with ",(0,i.kt)("inlineCode",{parentName:"p"},"DOMAdapter")),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"DOMAdapter")," is a static class that can be used to set the adapter for the entire application"),(0,i.kt)("li",{parentName:"ul"},"PixiJS has two adapters built in ",(0,i.kt)("inlineCode",{parentName:"li"},"BrowserAdapter")," and ",(0,i.kt)("inlineCode",{parentName:"li"},"WebWorkerAdapter"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"BrowserAdapter")," is the default adapter and is used when running in the browser"),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"WebWorkerAdapter")," is used when running in a web worker")))),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"Old:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { settings, WebWorkerAdapter } from 'pixi.js'\n\nsettings.ADAPTER = WebWorkerAdapter\nsettings.ADAPTER.createCanvas()\n")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { DOMAdapter, WebWorkerAdapter } from 'pixi.js'\n\nDOMAdapter.set(WebWorkerAdapter)\nDOMAdapter.get().createCanvas()\n"))))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Application type now accepts Renderer instead of view by @Zyie in ",(0,i.kt)("a",{parentName:"p",href:"https://github.com/pixijs/pixijs/pull/9740"},"https://github.com/pixijs/pixijs/pull/9740")),(0,i.kt)("p",{parentName:"li"},"This is to allow ",(0,i.kt)("inlineCode",{parentName:"p"},"app.renderer")," to be typed correctly"),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"Old:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"const app = new Application()\n")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"const app = new Application>()\nconst app = new Application>();\nconst app = new Application>();\n")))),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"Texture.from")," no longer will load a texture from a URL."),(0,i.kt)("p",{parentName:"li"},"When using ",(0,i.kt)("inlineCode",{parentName:"p"},"Texture.from")," you will need to pass in a source such as ",(0,i.kt)("inlineCode",{parentName:"p"},"CanvasSource"),"/",(0,i.kt)("inlineCode",{parentName:"p"},"ImageSource"),"/",(0,i.kt)("inlineCode",{parentName:"p"},"VideoSource")," or a resource such as ",(0,i.kt)("inlineCode",{parentName:"p"},"HTMLImageElement"),"/",(0,i.kt)("inlineCode",{parentName:"p"},"HTMLCanvasElement"),"/",(0,i.kt)("inlineCode",{parentName:"p"},"HTMLVideoElement")," or a string that has been loaded through ",(0,i.kt)("inlineCode",{parentName:"p"},"Assets.load")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"Old:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { Texture } from 'pixi.js';\n\nconst texture = Texture.from('https://i.imgur.com/IaUrttj.png');\n")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { Assets, Texture } from 'pixi.js';\n\nawait Assets.load('https://i.imgur.com/IaUrttj.png');\nconst texture = Texture.from('https://i.imgur.com/IaUrttj.png');\n")))),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"The ",(0,i.kt)("inlineCode",{parentName:"p"},"Ticker"),"'s callback will now pass the ",(0,i.kt)("inlineCode",{parentName:"p"},"Ticker")," instance instead of the delta time.\nThis is to allow for more control over what unit of time is used."),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"Old:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"Ticker.shared.add((dt)=> {\n bunny.rotation += dt\n});\n")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"Ticker.shared.add((ticker)=> {\n bunny.rotation += ticker.deltaTime;\n});\n"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Text parsers have been renamed"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"TextFormat")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"bitmapFontTextParser")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"XMLStringFormat")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"bitmapFontXMLStringParser")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"XMLFormat")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"bitmapFontXMLParser")))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"The default ",(0,i.kt)("inlineCode",{parentName:"p"},"eventMode")," is now ",(0,i.kt)("inlineCode",{parentName:"p"},"passive")," instead of ",(0,i.kt)("inlineCode",{parentName:"p"},"auto"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"utils")," has been removed. All the functions are available as direct imports."),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"Old:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { utils } from 'pixi.js'\n\nutils.isMobile.any()\n")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"import { isMobile } from 'pixi.js'\n\nisMobile.any()\n")))),(0,i.kt)("h2",{id:"3-deprecated-features"},"3. Deprecated Features"),(0,i.kt)("p",null,"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."),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Leaf nodes no longer allow children"),(0,i.kt)("p",{parentName:"li"},"Only ",(0,i.kt)("inlineCode",{parentName:"p"},"Containers")," can have children. This means that ",(0,i.kt)("inlineCode",{parentName:"p"},"Sprite"),", ",(0,i.kt)("inlineCode",{parentName:"p"},"Mesh"),", ",(0,i.kt)("inlineCode",{parentName:"p"},"Graphics")," etc can no longer have children."),(0,i.kt)("p",{parentName:"li"},"To replicate the old behaviour you can create a ",(0,i.kt)("inlineCode",{parentName:"p"},"Container")," and add the leaf nodes to it."),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"Old:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"const sprite = new Sprite();\nconst spriteChild = new Sprite();\nsprite.addChild(spriteChild);\n")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"const container = new Container();\nconst sprite = new Sprite();\nconst spriteChild = new Sprite();\n\ncontainer.addChild(sprite);\ncontainer.addChild(spriteChild);\n"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"Application.view")," replaced with ",(0,i.kt)("inlineCode",{parentName:"p"},"Application.canvas")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"Old:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"const app = new Application({ view: document.createElement('canvas') });\ndocument.body.appendChild(app.view);\n")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"const app = new Application();\nawait app.init({ view: document.createElement('canvas') });\ndocument.body.appendChild(app.canvas);\n"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"NineSlicePlane")," renamed to ",(0,i.kt)("inlineCode",{parentName:"p"},"NineSliceSprite"))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"SCALE_MODES")," replaced with ",(0,i.kt)("inlineCode",{parentName:"p"},"ScaleMode")," strings"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"SCALE_MODES.NEAREST")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"'nearest'"),","),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"SCALE_MODES.LINEAR")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"'linear'"),","))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"WRAP_MODES")," replaced with ",(0,i.kt)("inlineCode",{parentName:"p"},"WrapMode")," strings"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"WRAP_MODES.CLAMP")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"'clamp'"),","),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"WRAP_MODES.REPEAT")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"'repeat'"),","),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"WRAP_MODES.MIRRORED_REPEAT")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"'mirror-repeat'"),","))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},(0,i.kt)("inlineCode",{parentName:"p"},"DRAW_MODES")," replaced with ",(0,i.kt)("inlineCode",{parentName:"p"},"Topology")," strings"),(0,i.kt)("ul",{parentName:"li"},(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"DRAW_MODES.POINTS")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"'point-list'"),","),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"DRAW_MODES.LINES")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"'line-list'"),","),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"DRAW_MODES.LINE_STRIP")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"'line-strip'"),","),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"DRAW_MODES.TRIANGLES")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"'triangle-list'"),","),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("inlineCode",{parentName:"li"},"DRAW_MODES.TRIANGLE_STRIP")," -> ",(0,i.kt)("inlineCode",{parentName:"li"},"'triangle-strip'"),","))),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("p",{parentName:"li"},"Constructors have largely been changed to accept objects instead of multiple arguments"),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"Old:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"const blurFilter = new BlurFilter(8, 4, 1, 5);\nconst displacementFilter = new DisplacementFilter(sprite, 5);\nconst meshGeometry = new MeshGeometry(vertices, uvs, index);\nconst mesh = new Mesh(geometry, shader, state, drawMode);\nconst plane = new PlaneGeometry(width, height, segWidth, segHeight);\nconst nineSlicePlane = new NineSlicePlane(texture, leftWidth, topHeight, rightWidth, bottomHeight);\nconst tileSprite = new TileSprite(texture, width, height);\nconst text = new Text('Hello World', style);\nconst bitmapText = new BitmapText('Hello World', style);\nconst htmlText = new HTMLText('Hello World', style);\n")),(0,i.kt)("p",{parentName:"li"},(0,i.kt)("strong",{parentName:"p"},"New:")),(0,i.kt)("pre",{parentName:"li"},(0,i.kt)("code",{parentName:"pre",className:"language-ts"},"const blurFilter = new BlurFilter({\n blur: 8,\n quality: 4,\n resolution: 1,\n kernelSize: 5,\n});\nconst displacementFilter = new DisplacementFilter({\n sprite,\n scale: 5,\n});\nconst meshGeometry = new MeshGeometry({\n positions: vertices,\n uvs,\n indices: index,\n topology: 'triangle-list';\n shrinkBuffersToFit: boolean;\n});\nconst mesh = new Mesh({\n geometry\n shader\n texture\n});\nconst plane = new PlaneGeometry({\n width,\n height,\n verticesX: segWidth,\n verticesY: segHeight,\n});\nconst nineSliceSprite = new NineSliceSprite({\n texture,\n leftWidth,\n topHeight,\n rightWidth,\n bottomHeight,\n});\nconst tileSprite = new TileSprite({\n texture,\n width,\n height,\n});\nconst text = new Text({\n text: 'Hello World',\n style,\n});\nconst bitmapText = new BitmapText({\n text:'Hello World',\n style,\n});\nconst htmlText = new HTMLText({\n text:'Hello World',\n style,\n});\n")))),(0,i.kt)("h2",{id:"4-resources"},"4. Resources"),(0,i.kt)("ul",null,(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"https://github.com/pixijs/pixijs/releases?q=v8.0.0&expanded=true"},"PixiJS v8 Release Notes")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"https://discord.gg/CPTjeb28nH"},"PixiJS Discord")),(0,i.kt)("li",{parentName:"ul"},(0,i.kt)("a",{parentName:"li",href:"https://github.com/pixijs/pixijs/issues"},"PixiJS Issues"))))}d.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/main.91242978.js b/assets/js/main.dbd3ff9b.js similarity index 99% rename from assets/js/main.91242978.js rename to assets/js/main.dbd3ff9b.js index c4b0ed389..c3ac81bce 100644 --- a/assets/js/main.91242978.js +++ b/assets/js/main.dbd3ff9b.js @@ -1,2 +1,2 @@ -/*! For license information please see main.91242978.js.LICENSE.txt */ -(self.webpackChunkpixi_docusaurus=self.webpackChunkpixi_docusaurus||[]).push([[6377],{723:(e,t,n)=>{"use strict";n.d(t,{Z:()=>p});n(7294);var r=n(8356),a=n.n(r),i=n(6887);const s={"00efd98b":[()=>Promise.all([n.e(532),n.e(8592),n.e(50)]).then(n.bind(n,2923)),"@site/versioned_docs/version-7.x/examples/graphics/dynamic.md",2923],"0116badf":[()=>Promise.all([n.e(532),n.e(8592),n.e(2984)]).then(n.bind(n,6214)),"@site/versioned_docs/version-7.x/examples/advanced/star-warp.md",6214],"01a85c17":[()=>Promise.all([n.e(532),n.e(4013)]).then(n.bind(n,1223)),"@theme/BlogTagsListPage",1223],"02c0c1be":[()=>Promise.all([n.e(532),n.e(8592),n.e(9643)]).then(n.bind(n,2597)),"@site/versioned_docs/version-7.x/examples/textures/render-texture-basic.md",2597],"0480b142":[()=>Promise.all([n.e(8592),n.e(836)]).then(n.bind(n,3584)),"@site/docs/faq.md",3584],"059a6190":[()=>Promise.all([n.e(532),n.e(8592),n.e(7344)]).then(n.bind(n,8360)),"@site/docs/tutorials/spine-boy-adventure.md",8360],"05a2203a":[()=>Promise.all([n.e(532),n.e(8592),n.e(6120)]).then(n.bind(n,4138)),"@site/versioned_docs/version-7.x/examples/events/logger.md",4138],"0779818e":[()=>Promise.all([n.e(532),n.e(8592),n.e(6686)]).then(n.bind(n,8989)),"@site/docs/examples/filters-advanced/mouse-blending.md",8989],"07a6743f":[()=>Promise.all([n.e(532),n.e(8592),n.e(5600)]).then(n.bind(n,8805)),"@site/versioned_docs/version-7.x/examples/text/from-font.md",8805],"0a78f067":[()=>Promise.all([n.e(532),n.e(8592),n.e(8288)]).then(n.bind(n,9796)),"@site/versioned_docs/version-7.x/examples/basic/tinting.md",9796],"0f70954b":[()=>Promise.all([n.e(532),n.e(8592),n.e(4057)]).then(n.bind(n,5133)),"@site/docs/examples/advanced/scratch-card.md",5133],"125a7167":[()=>Promise.all([n.e(532),n.e(8592),n.e(6959)]).then(n.bind(n,9116)),"@site/docs/examples/events/pointer-tracker.md",9116],"163b7090":[()=>n.e(6657).then(n.t.bind(n,5135,19)),"~blog/default/blog-tags-pixi-js-universe-831.json",5135],"1663c392":[()=>Promise.all([n.e(532),n.e(8592),n.e(5355)]).then(n.bind(n,9068)),"@site/docs/examples/advanced/spinners.md",9068],"172e21b1":[()=>Promise.all([n.e(532),n.e(8592),n.e(4778)]).then(n.bind(n,5406)),"@site/docs/examples/graphics/dynamic.md",5406],17896441:[()=>Promise.all([n.e(532),n.e(8592),n.e(8144),n.e(7918)]).then(n.bind(n,8945)),"@theme/DocItem",8945],"1961e970":[()=>Promise.all([n.e(8592),n.e(5582)]).then(n.bind(n,6456)),"@site/blog/2024-03-05-pixi-v8-launches.md?truncated=true",6456],"1a4e3797":[()=>Promise.all([n.e(532),n.e(7920)]).then(n.bind(n,1473)),"@theme/SearchPage",1473],"1bdfe0fa":[()=>Promise.all([n.e(8592),n.e(7277)]).then(n.bind(n,8688)),"@site/blog/2024-03-05-pixi-v8-launches.md",8688],"1be78505":[()=>Promise.all([n.e(532),n.e(9514)]).then(n.bind(n,9963)),"@theme/DocPage",9963],"1cca9324":[()=>Promise.all([n.e(532),n.e(8592),n.e(4052)]).then(n.bind(n,4605)),"@site/versioned_docs/version-7.x/examples/basic/simple-plane.md",4605],"1d34b751":[()=>Promise.all([n.e(532),n.e(8592),n.e(858)]).then(n.bind(n,3585)),"@site/docs/examples/textures/render-texture-advanced.md",3585],"1df93b7f":[()=>Promise.all([n.e(532),n.e(3237)]).then(n.bind(n,2566)),"@site/src/pages/index.tsx",2566],"214aaae9":[()=>Promise.all([n.e(532),n.e(8592),n.e(4074)]).then(n.bind(n,7820)),"@site/docs/examples/basic/container.md",7820],"21ab5248":[()=>Promise.all([n.e(532),n.e(8592),n.e(1788)]).then(n.bind(n,8380)),"@site/docs/examples/advanced/collision-detection.md",8380],"21e31124":[()=>Promise.all([n.e(532),n.e(8592),n.e(8955)]).then(n.bind(n,5203)),"@site/versioned_docs/version-7.x/examples/sprite/basic.md",5203],"22b3cb6b":[()=>Promise.all([n.e(532),n.e(8592),n.e(8225)]).then(n.bind(n,2674)),"@site/versioned_docs/version-7.x/examples/mesh-and-shaders/triangle-color.md",2674],"22c05754":[()=>Promise.all([n.e(8592),n.e(3661)]).then(n.bind(n,9121)),"@site/docs/guides/basics/architecture-overview.md",9121],"235d3212":[()=>Promise.all([n.e(532),n.e(8592),n.e(1213)]).then(n.bind(n,5081)),"@site/docs/examples/basic/particle-container.md",5081],"24c49760":[()=>Promise.all([n.e(532),n.e(8592),n.e(5676)]).then(n.bind(n,710)),"@site/docs/examples/filters-basic/displacement-map-crawlies.md",710],"255ec184":[()=>Promise.all([n.e(532),n.e(8592),n.e(6020)]).then(n.bind(n,5546)),"@site/versioned_docs/version-7.x/examples/text/bitmap-text.md",5546],"266e878a":[()=>n.e(455).then(n.t.bind(n,2776,19)),"/home/runner/work/pixijs.com/pixijs.com/.docusaurus/@easyops-cn/docusaurus-search-local/default/plugin-route-context-module-100.json",2776],"28d883d1":[()=>Promise.all([n.e(532),n.e(8592),n.e(592)]).then(n.bind(n,2031)),"@site/versioned_docs/version-7.x/examples/sprite/animated-sprite-jet.md",2031],"2917be12":[()=>Promise.all([n.e(532),n.e(8592),n.e(7167)]).then(n.bind(n,8754)),"@site/docs/examples/offscreen-canvas/basic.md",8754],"2c0ff38b":[()=>Promise.all([n.e(532),n.e(8592),n.e(9238)]).then(n.bind(n,2887)),"@site/versioned_docs/version-7.x/examples/basic/blend-modes.md",2887],"2c83f0c9":[()=>Promise.all([n.e(8592),n.e(4066)]).then(n.bind(n,4278)),"@site/docs/guides/basics/render-loop.md",4278],"2f34f036":[()=>Promise.all([n.e(532),n.e(8592),n.e(8986)]).then(n.bind(n,5109)),"@site/docs/examples/events/logger.md",5109],"30e998af":[()=>Promise.all([n.e(532),n.e(8592),n.e(3356)]).then(n.bind(n,369)),"@site/versioned_docs/version-7.x/examples/filters-basic/color-matrix.md",369],"3213b5ef":[()=>Promise.all([n.e(532),n.e(8592),n.e(2301)]).then(n.bind(n,5200)),"@site/versioned_docs/version-7.x/examples/events/dragging.md",5200],"34306e2e":[()=>Promise.all([n.e(532),n.e(8592),n.e(4483)]).then(n.bind(n,8661)),"@site/versioned_docs/version-7.x/examples/basic/particle-container.md",8661],"349596e7":[()=>n.e(9046).then(n.t.bind(n,4392,19)),"~blog/default/blog-tags-pixi-js-b86-list.json",4392],"376e2a12":[()=>Promise.all([n.e(532),n.e(8592),n.e(8146)]).then(n.bind(n,8552)),"@site/versioned_docs/version-7.x/examples/advanced/mouse-trail.md",8552],"376e58ab":[()=>Promise.all([n.e(532),n.e(8592),n.e(2785)]).then(n.bind(n,8230)),"@site/docs/examples/graphics/fill-gradient.md",8230],"379966d3":[()=>n.e(4647).then(n.t.bind(n,3769,19)),"/home/runner/work/pixijs.com/pixijs.com/.docusaurus/docusaurus-plugin-content-docs/default/plugin-route-context-module-100.json",3769],"38922ed0":[()=>Promise.all([n.e(8592),n.e(8697)]).then(n.bind(n,4895)),"@site/versioned_docs/version-7.x/guides/basics/what-pixijs-is-not.md",4895],"38eecf5f":[()=>Promise.all([n.e(532),n.e(8592),n.e(5797)]).then(n.bind(n,6525)),"@site/docs/examples/sprite/tiling-sprite.md",6525],"398ff739":[()=>Promise.all([n.e(532),n.e(8592),n.e(4862)]).then(n.bind(n,6721)),"@site/versioned_docs/version-7.x/examples/mesh-and-shaders/uniforms.md",6721],"39a0bbcc":[()=>Promise.all([n.e(532),n.e(8592),n.e(9206)]).then(n.bind(n,8166)),"@site/docs/examples/basic/blend-modes.md",8166],"39b610d0":[()=>Promise.all([n.e(532),n.e(8592),n.e(1054)]).then(n.bind(n,8517)),"@site/versioned_docs/version-7.x/examples/events/custom-mouse-icon.md",8517],"39d15623":[()=>Promise.all([n.e(532),n.e(8592),n.e(6717)]).then(n.bind(n,7803)),"@site/versioned_docs/version-7.x/examples/assets/promise.md",7803],"39ee1eb1":[()=>n.e(8857).then(n.t.bind(n,7386,19)),"~blog/default/blog-tags-web-gl-f05-list.json",7386],"3c3aaa5e":[()=>Promise.all([n.e(532),n.e(8592),n.e(7743)]).then(n.bind(n,3214)),"@site/versioned_docs/version-7.x/examples/assets/multiple.md",3214],"3c597c45":[()=>Promise.all([n.e(8592),n.e(1732)]).then(n.bind(n,7319)),"@site/docs/guides/migrations/v6.md",7319],"3cb8e442":[()=>n.e(7914).then(n.t.bind(n,4722,19)),"~blog/default/blog-tags-web-gpu-e86-list.json",4722],"3dcf4a41":[()=>Promise.all([n.e(532),n.e(8592),n.e(7306)]).then(n.bind(n,816)),"@site/versioned_docs/version-7.x/examples/mesh-and-shaders/instanced-geometry.md",816],"3fb9768c":[()=>Promise.all([n.e(532),n.e(8592),n.e(9178)]).then(n.bind(n,5616)),"@site/docs/examples/advanced/screen-shot.md",5616],"4016a63b":[()=>Promise.all([n.e(8592),n.e(6997)]).then(n.bind(n,6355)),"@site/versioned_docs/version-7.x/guides/components/display-object.md",6355],"40d1cc3f":[()=>Promise.all([n.e(532),n.e(8592),n.e(7705)]).then(n.bind(n,5954)),"@site/docs/tutorials/choo-choo-train.md",5954],"40d5eb26":[()=>Promise.all([n.e(532),n.e(8592),n.e(9813)]).then(n.bind(n,3839)),"@site/docs/examples/mesh-and-shaders/triangle-textured.md",3839],41736501:[()=>n.e(4213).then(n.t.bind(n,9470,19)),"~blog/default/blog-tags-pixi-js-universe-831-list.json",9470],"4179bc11":[()=>Promise.all([n.e(532),n.e(8592),n.e(30)]).then(n.bind(n,3228)),"@site/versioned_docs/version-7.x/examples/advanced/scratch-card.md",3228],"41ee92be":[()=>Promise.all([n.e(532),n.e(8592),n.e(8374)]).then(n.bind(n,6767)),"@site/docs/examples/text/pixi-text.md",6767],"44f33200":[()=>Promise.all([n.e(532),n.e(8592),n.e(8572)]).then(n.bind(n,5931)),"@site/versioned_docs/version-7.x/examples/filters-advanced/mouse-blending.md",5931],"450ca9db":[()=>Promise.all([n.e(8592),n.e(3865)]).then(n.bind(n,3497)),"@site/docs/guides/components/text.md",3497],"466924ba":[()=>Promise.all([n.e(532),n.e(8592),n.e(5177)]).then(n.bind(n,5993)),"@site/versioned_docs/version-7.x/examples/mesh-and-shaders/multi-pass-shader-generated-mesh.md",5993],"4c07c1d7":[()=>Promise.all([n.e(532),n.e(8592),n.e(3855)]).then(n.bind(n,5896)),"@site/docs/examples/mesh-and-shaders/shader-toy-mesh.md",5896],"4daa86fd":[()=>Promise.all([n.e(532),n.e(8592),n.e(7967)]).then(n.bind(n,6458)),"@site/versioned_docs/version-7.x/examples/events/nested-boundary-with-projection.md",6458],"4dfdded0":[()=>Promise.all([n.e(8592),n.e(9664)]).then(n.bind(n,1040)),"@site/versioned_docs/version-7.x/guides/components/containers.md",1040],"4ede593f":[()=>n.e(9639).then(n.t.bind(n,6102,19)),"~blog/default/blog-tags-web-gpu-e86.json",6102],"50c2b0b5":[()=>Promise.all([n.e(532),n.e(8592),n.e(2163)]).then(n.bind(n,1186)),"@site/versioned_docs/version-7.x/examples/mesh-and-shaders/merging-geometry.md",1186],"519fdf83":[()=>Promise.all([n.e(8592),n.e(239)]).then(n.bind(n,3679)),"@site/versioned_docs/version-7.x/guides/components/sprite-sheets.md",3679],"524d29ea":[()=>n.e(1915).then(n.t.bind(n,4469,19)),"/home/runner/work/pixijs.com/pixijs.com/.docusaurus/docusaurus-plugin-content-blog/default/plugin-route-context-module-100.json",4469],"553ce1ed":[()=>Promise.all([n.e(532),n.e(8592),n.e(7533)]).then(n.bind(n,6877)),"@site/versioned_docs/version-7.x/examples/filters-basic/displacement-map-flag.md",6877],"56ef77ee":[()=>Promise.all([n.e(532),n.e(8592),n.e(4490)]).then(n.bind(n,6772)),"@site/docs/examples/textures/render-texture-basic.md",6772],"57a7450e":[()=>Promise.all([n.e(8592),n.e(6742)]).then(n.bind(n,9555)),"@site/versioned_docs/version-7.x/guides/components/sprites.md",9555],"58ed2303":[()=>Promise.all([n.e(532),n.e(8592),n.e(2124),n.e(1606)]).then(n.bind(n,2801)),"@site/docs/playground/index.md",2801],"5b758207":[()=>Promise.all([n.e(532),n.e(8592),n.e(2463)]).then(n.bind(n,5143)),"@site/docs/examples/basic/mesh-plane.md",5143],"5cfc16b5":[()=>Promise.all([n.e(532),n.e(8592),n.e(7495)]).then(n.bind(n,4995)),"@site/versioned_docs/version-7.x/examples/events/custom-hitarea.md",4995],"5d84aeb0":[()=>Promise.all([n.e(8592),n.e(4441)]).then(n.bind(n,4125)),"@site/versioned_docs/version-7.x/guides/index.md",4125],"5e67e0e9":[()=>Promise.all([n.e(532),n.e(8592),n.e(670)]).then(n.bind(n,7641)),"@site/versioned_docs/version-7.x/examples/mesh-and-shaders/triangle-textured.md",7641],"5e9f5e1a":[()=>Promise.resolve().then(n.bind(n,6809)),"@generated/docusaurus.config",6809],"626aaccf":[()=>Promise.all([n.e(532),n.e(8592),n.e(8831)]).then(n.bind(n,7147)),"@site/versioned_docs/version-7.x/examples/textures/gradient-resource.md",7147],63560707:[()=>Promise.all([n.e(532),n.e(8592),n.e(3322)]).then(n.bind(n,7685)),"@site/docs/examples/mesh-and-shaders/textured-mesh-basic.md",7685],"63a750ce":[()=>Promise.all([n.e(532),n.e(8592),n.e(3997)]).then(n.bind(n,5013)),"@site/docs/examples/advanced/slots.md",5013],"64b0ce6a":[()=>Promise.all([n.e(8592),n.e(8861)]).then(n.bind(n,7116)),"@site/docs/branding.md",7116],"65aa242e":[()=>Promise.all([n.e(532),n.e(8592),n.e(2e3)]).then(n.bind(n,4744)),"@site/docs/examples/text/web-font.md",4744],"65ba9fa8":[()=>Promise.all([n.e(532),n.e(8592),n.e(8328)]).then(n.bind(n,1221)),"@site/docs/examples/events/click.md",1221],"6875c492":[()=>Promise.all([n.e(532),n.e(8592),n.e(8144),n.e(454),n.e(8610)]).then(n.bind(n,1714)),"@theme/BlogTagsPostsPage",1714],"6d055c2c":[()=>Promise.all([n.e(532),n.e(8592),n.e(2737)]).then(n.bind(n,9204)),"@site/docs/examples/textures/texture-rotate.md",9204],"6ea3c477":[()=>Promise.all([n.e(532),n.e(8592),n.e(9927)]).then(n.bind(n,2278)),"@site/docs/examples/basic/render-group.md",2278],"6f626e4c":[()=>Promise.all([n.e(532),n.e(8592),n.e(5842)]).then(n.bind(n,3336)),"@site/docs/tutorials/fish-pond.md",3336],"707eff77":[()=>Promise.all([n.e(8592),n.e(205)]).then(n.bind(n,9797)),"@site/versioned_docs/version-7.x/guides/basics/render-loop.md",9797],"7098f8d5":[()=>Promise.all([n.e(532),n.e(8592),n.e(5422)]).then(n.bind(n,7582)),"@site/versioned_docs/version-7.x/examples/mesh-and-shaders/triangle.md",7582],"72736f73":[()=>Promise.all([n.e(532),n.e(8592),n.e(162)]).then(n.bind(n,9095)),"@site/versioned_docs/version-7.x/examples/filters-advanced/shader-toy-filter-render-texture.md",9095],"73c82306":[()=>Promise.all([n.e(532),n.e(8592),n.e(2793)]).then(n.bind(n,1219)),"@site/versioned_docs/version-7.x/examples/filters-basic/displacement-map-crawlies.md",1219],"775f65b8":[()=>Promise.all([n.e(8592),n.e(2717)]).then(n.bind(n,148)),"@site/versioned_docs/version-7.x/examples/index.md",148],"780ae8a3":[()=>Promise.all([n.e(532),n.e(8592),n.e(5045)]).then(n.bind(n,9117)),"@site/docs/examples/graphics/simple.md",9117],"7a33d139":[()=>Promise.all([n.e(532),n.e(8592),n.e(6577)]).then(n.bind(n,4126)),"@site/docs/examples/mesh-and-shaders/textured-mesh-advanced.md",4126],"7b84543e":[()=>Promise.all([n.e(8592),n.e(5114)]).then(n.bind(n,5835)),"@site/docs/guides/components/interaction.md",5835],"7bef8dff":[()=>Promise.all([n.e(532),n.e(8592),n.e(630)]).then(n.bind(n,9307)),"@site/versioned_docs/version-7.x/examples/advanced/slots.md",9307],"7c92c4a9":[()=>Promise.all([n.e(532),n.e(8592),n.e(6550)]).then(n.bind(n,3323)),"@site/docs/examples/text/bitmap-text.md",3323],"7dfda297":[()=>Promise.all([n.e(8592),n.e(3421)]).then(n.bind(n,4970)),"@site/docs/guides/basics/scene-graph.md",4970],"7f2b0826":[()=>Promise.all([n.e(532),n.e(8592),n.e(5025)]).then(n.bind(n,1458)),"@site/docs/examples/filters-basic/blur.md",1458],"8087412d":[()=>Promise.all([n.e(8592),n.e(9255)]).then(n.bind(n,6797)),"@site/versioned_docs/version-7.x/guides/components/textures.md",6797],"814f3328":[()=>n.e(2535).then(n.t.bind(n,5641,19)),"~blog/default/blog-post-list-prop-default.json",5641],"81bac397":[()=>Promise.all([n.e(8592),n.e(6292)]).then(n.bind(n,6661)),"@site/versioned_docs/version-7.x/guides/basics/scene-graph.md",6661],82290857:[()=>Promise.all([n.e(532),n.e(8592),n.e(4760)]).then(n.bind(n,1774)),"@site/docs/examples/assets/async.md",1774],"82d920fa":[()=>Promise.all([n.e(532),n.e(8592),n.e(33)]).then(n.bind(n,9274)),"@site/versioned_docs/version-7.x/examples/events/interactivity.md",9274],"83f744ee":[()=>Promise.all([n.e(532),n.e(8592),n.e(8790)]).then(n.bind(n,5025)),"@site/docs/examples/text/from-font.md",5025],"851b1605":[()=>Promise.all([n.e(8592),n.e(5225)]).then(n.bind(n,9739)),"@site/docs/guides/components/assets.md",9739],"853af732":[()=>Promise.all([n.e(532),n.e(8592),n.e(4351)]).then(n.bind(n,4672)),"@site/docs/examples/assets/background.md",4672],"8981be27":[()=>Promise.all([n.e(8592),n.e(6991)]).then(n.bind(n,699)),"@site/versioned_docs/version-7.x/guides/migrations/upgrading.md",699],"8a3bb170":[()=>Promise.all([n.e(532),n.e(8592),n.e(5556)]).then(n.bind(n,1406)),"@site/docs/examples/filters-advanced/custom.md",1406],"8b1cdb9c":[()=>Promise.all([n.e(8592),n.e(600)]).then(n.bind(n,1795)),"@site/blog/2023-02-17-pixi-universe.md?truncated=true",1795],"8d3e3538":[()=>Promise.all([n.e(532),n.e(8592),n.e(3714)]).then(n.bind(n,9622)),"@site/versioned_docs/version-7.x/examples/basic/container.md",9622],"8e36650c":[()=>Promise.all([n.e(532),n.e(8592),n.e(3990)]).then(n.bind(n,9567)),"@site/docs/tutorials/getting-started.md",9567],"935c73bf":[()=>Promise.all([n.e(532),n.e(8592),n.e(4325)]).then(n.bind(n,5436)),"@site/docs/examples/events/slider.md",5436],"935f2afb":[()=>n.e(53).then(n.t.bind(n,1109,19)),"~docs/default/version-current-metadata-prop-751.json",1109],"93a32de0":[()=>Promise.all([n.e(8592),n.e(1914)]).then(n.bind(n,689)),"@site/blog/2023-10-03-pixi-v8-beta.md",689],"957563b3":[()=>Promise.all([n.e(8592),n.e(6633)]).then(n.bind(n,2797)),"@site/versioned_docs/version-7.x/guides/migrations/v7.md",2797],"970d385a":[()=>Promise.all([n.e(532),n.e(8592),n.e(1360)]).then(n.bind(n,5253)),"@site/versioned_docs/version-7.x/examples/text/pixi-text.md",5253],"9853713d":[()=>Promise.all([n.e(532),n.e(8592),n.e(2834)]).then(n.bind(n,5618)),"@site/versioned_docs/version-7.x/examples/textures/gradient-basic.md",5618],"99d196e7":[()=>Promise.all([n.e(8592),n.e(1744)]).then(n.bind(n,6001)),"@site/docs/guides/migrations/v8.md",6001],"9bd4f420":[()=>Promise.all([n.e(532),n.e(8592),n.e(691)]).then(n.bind(n,7297)),"@site/versioned_docs/version-7.x/examples/mesh-and-shaders/sharing-geometry.md",7297],"9e4087bc":[()=>n.e(3608).then(n.bind(n,3169)),"@theme/BlogArchivePage",3169],"9f50079f":[()=>Promise.all([n.e(8592),n.e(7020)]).then(n.bind(n,8469)),"@site/versioned_docs/version-7.x/guides/basics/getting-started.md",8469],a0ff8a7f:[()=>Promise.all([n.e(532),n.e(8592),n.e(7714)]).then(n.bind(n,3334)),"@site/versioned_docs/version-7.x/examples/filters-basic/blur.md",3334],a1cfca63:[()=>Promise.all([n.e(532),n.e(8592),n.e(1665)]).then(n.bind(n,5600)),"@site/docs/examples/basic/tinting.md",5600],a329e9bc:[()=>Promise.all([n.e(532),n.e(8592),n.e(2133)]).then(n.bind(n,3861)),"@site/versioned_docs/version-7.x/examples/sprite/tiling-sprite.md",3861],a3ab5221:[()=>Promise.all([n.e(532),n.e(8592),n.e(438)]).then(n.bind(n,9910)),"@site/docs/examples/advanced/mouse-trail.md",9910],a4628688:[()=>Promise.all([n.e(532),n.e(8592),n.e(2837)]).then(n.bind(n,165)),"@site/versioned_docs/version-7.x/examples/assets/bundle.md",165],a691ac6c:[()=>Promise.all([n.e(532),n.e(8592),n.e(4104)]).then(n.bind(n,2087)),"@site/versioned_docs/version-7.x/examples/sprite/texture-swap.md",2087],a6aa9e1f:[()=>Promise.all([n.e(532),n.e(8592),n.e(8144),n.e(454),n.e(3089)]).then(n.bind(n,46)),"@theme/BlogListPage",46],a7023ddc:[()=>n.e(1713).then(n.t.bind(n,3457,19)),"~blog/default/blog-tags-tags-4c2.json",3457],a8908f9f:[()=>Promise.all([n.e(8592),n.e(7453)]).then(n.bind(n,7869)),"@site/docs/guides/basics/what-pixijs-is.md",7869],a9560317:[()=>Promise.all([n.e(532),n.e(8592),n.e(655)]).then(n.bind(n,8987)),"@site/versioned_docs/version-7.x/examples/sprite/animated-sprite-explosion.md",8987],a97eb394:[()=>Promise.all([n.e(532),n.e(8592),n.e(8325)]).then(n.bind(n,8094)),"@site/docs/examples/mesh-and-shaders/multipass-mesh.md",8094],aa76aa86:[()=>Promise.all([n.e(532),n.e(8592),n.e(9835)]).then(n.bind(n,3710)),"@site/docs/examples/advanced/star-warp.md",3710],aa83a31c:[()=>Promise.all([n.e(532),n.e(8592),n.e(5230)]).then(n.bind(n,1520)),"@site/versioned_docs/version-7.x/examples/assets/background.md",1520],ab817877:[()=>Promise.all([n.e(8592),n.e(7999)]).then(n.bind(n,377)),"@site/versioned_docs/version-7.x/guides/components/assets.md",377],ab967234:[()=>Promise.all([n.e(8592),n.e(3079)]).then(n.bind(n,2622)),"@site/versioned_docs/version-7.x/branding.md",2622],acbe3779:[()=>Promise.all([n.e(8592),n.e(2571)]).then(n.bind(n,4974)),"@site/versioned_docs/version-7.x/guides/basics/architecture-overview.md",4974],ad18d975:[()=>Promise.all([n.e(532),n.e(8592),n.e(5433)]).then(n.bind(n,9506)),"@site/versioned_docs/version-7.x/examples/offscreen-canvas/basic.md",9506],adc40f7e:[()=>Promise.all([n.e(532),n.e(8592),n.e(2536)]).then(n.bind(n,6964)),"@site/docs/examples/mesh-and-shaders/shared-geometry.md",6964],adcb3b88:[()=>n.e(4200).then(n.t.bind(n,4819,19)),"~docs/default/version-7-x-metadata-prop-51b.json",4819],b07297df:[()=>Promise.all([n.e(8592),n.e(4366)]).then(n.bind(n,2769)),"@site/docs/guides/components/textures.md",2769],b08ec7e7:[()=>Promise.all([n.e(8592),n.e(2547)]).then(n.bind(n,502)),"@site/docs/guides/components/sprite-sheets.md",502],b1366941:[()=>Promise.all([n.e(532),n.e(8592),n.e(6839)]).then(n.bind(n,7266)),"@site/versioned_docs/version-7.x/examples/advanced/spinners.md",7266],b2b675dd:[()=>n.e(533).then(n.t.bind(n,8017,19)),"~blog/default/blog-c06.json",8017],b2f554cd:[()=>n.e(1477).then(n.t.bind(n,10,19)),"~blog/default/blog-archive-80c.json",10],b3a58e3b:[()=>Promise.all([n.e(532),n.e(8592),n.e(4538)]).then(n.bind(n,7459)),"@site/versioned_docs/version-7.x/examples/sprite/animated-sprite-animation-speed.md",7459],b476edd2:[()=>Promise.all([n.e(532),n.e(8592),n.e(8588)]).then(n.bind(n,3186)),"@site/docs/examples/assets/multiple.md",3186],b5077c39:[()=>Promise.all([n.e(532),n.e(8592),n.e(4625)]).then(n.bind(n,4903)),"@site/docs/examples/graphics/texture.md",4903],b595b833:[()=>Promise.all([n.e(532),n.e(8592),n.e(9108)]).then(n.bind(n,6194)),"@site/docs/examples/graphics/svg.md",6194],b63a576d:[()=>Promise.all([n.e(8592),n.e(3321)]).then(n.bind(n,5153)),"@site/versioned_docs/version-7.x/guides/migrations/v6.md",5153],b6ce3370:[()=>Promise.all([n.e(532),n.e(8592),n.e(7118)]).then(n.bind(n,6494)),"@site/docs/examples/sprite/basic.md",6494],b6eac616:[()=>Promise.all([n.e(532),n.e(8592),n.e(5282)]).then(n.bind(n,8601)),"@site/versioned_docs/version-7.x/examples/filters-advanced/custom.md",8601],b77a9210:[()=>Promise.all([n.e(532),n.e(8592),n.e(2729)]).then(n.bind(n,886)),"@site/versioned_docs/version-7.x/examples/masks/graphics.md",886],b78fa1b6:[()=>Promise.all([n.e(532),n.e(8592),n.e(4266)]).then(n.bind(n,5455)),"@site/versioned_docs/version-7.x/examples/advanced/collision-detection.md",5455],b800a216:[()=>Promise.all([n.e(532),n.e(8592),n.e(2272)]).then(n.bind(n,3849)),"@site/docs/examples/filters-basic/displacement-map-flag.md",3849],b9c97654:[()=>Promise.all([n.e(532),n.e(8592),n.e(6788)]).then(n.bind(n,5885)),"@site/versioned_docs/version-7.x/examples/events/click.md",5885],bbdbc3e3:[()=>Promise.all([n.e(532),n.e(8592),n.e(5157)]).then(n.bind(n,5671)),"@site/versioned_docs/version-7.x/examples/advanced/screen-shot.md",5671],bbe4645e:[()=>Promise.all([n.e(532),n.e(8592),n.e(8004)]).then(n.bind(n,2625)),"@site/docs/examples/graphics/svg-load.md",2625],bf614533:[()=>Promise.all([n.e(8592),n.e(1802)]).then(n.bind(n,5849)),"@site/docs/examples/index.md",5849],c0d1843e:[()=>Promise.all([n.e(532),n.e(8592),n.e(6783)]).then(n.bind(n,4878)),"@site/docs/examples/events/custom-hitarea.md",4878],c11c6136:[()=>Promise.all([n.e(8592),n.e(6726)]).then(n.bind(n,4354)),"@site/versioned_docs/version-7.x/guides/migrations/v5.md",4354],c11dff78:[()=>Promise.all([n.e(532),n.e(8592),n.e(3109)]).then(n.bind(n,4576)),"@site/docs/examples/filters-basic/color-matrix.md",4576],c1411e72:[()=>Promise.all([n.e(532),n.e(8592),n.e(6749)]).then(n.bind(n,1388)),"@site/docs/examples/mesh-and-shaders/shared-shader.md",1388],c15d7808:[()=>Promise.all([n.e(532),n.e(8592),n.e(5921)]).then(n.bind(n,8662)),"@site/docs/examples/masks/graphics.md",8662],c2f95e7f:[()=>Promise.all([n.e(532),n.e(8592),n.e(9880)]).then(n.bind(n,2260)),"@site/docs/examples/assets/promise.md",2260],c57fd77f:[()=>Promise.all([n.e(8592),n.e(4974)]).then(n.bind(n,7184)),"@site/blog/2023-02-17-pixi-universe.md",7184],c60eb825:[()=>Promise.all([n.e(8592),n.e(4391)]).then(n.bind(n,4834)),"@site/docs/guides/basics/what-pixijs-is-not.md",4834],c7b50abb:[()=>Promise.all([n.e(532),n.e(8592),n.e(577)]).then(n.bind(n,5732)),"@site/versioned_docs/version-7.x/examples/events/slider.md",5732],ca5052d5:[()=>Promise.all([n.e(532),n.e(8592),n.e(3513)]).then(n.bind(n,5917)),"@site/docs/examples/sprite/animated-sprite-jet.md",5917],ca5d2e4b:[()=>Promise.all([n.e(532),n.e(8592),n.e(4392)]).then(n.bind(n,1049)),"@site/docs/examples/masks/sprite.md",1049],cadb3db0:[()=>Promise.all([n.e(8592),n.e(2027)]).then(n.bind(n,5449)),"@site/versioned_docs/version-7.x/faq.md",5449],cb629454:[()=>Promise.all([n.e(8592),n.e(2346)]).then(n.bind(n,4542)),"@site/versioned_docs/version-7.x/guides/components/text.md",4542],cb9b87d7:[()=>n.e(9430).then(n.t.bind(n,2422,19)),"~blog/default/blog-tags-pixi-js-b86.json",2422],ccc49370:[()=>Promise.all([n.e(532),n.e(8592),n.e(8144),n.e(6103)]).then(n.bind(n,9178)),"@theme/BlogPostPage",9178],ccd4fa3f:[()=>Promise.all([n.e(532),n.e(8592),n.e(3045)]).then(n.bind(n,7684)),"@site/docs/examples/assets/bundle.md",7684],d03241c9:[()=>Promise.all([n.e(8592),n.e(2871)]).then(n.bind(n,2581)),"@site/docs/guides/index.md",2581],d06f6550:[()=>Promise.all([n.e(532),n.e(8592),n.e(1227)]).then(n.bind(n,4939)),"@site/versioned_docs/version-7.x/examples/mesh-and-shaders/shared-shader.md",4939],d14669b9:[()=>Promise.all([n.e(532),n.e(8592),n.e(3168)]).then(n.bind(n,2186)),"@site/versioned_docs/version-7.x/examples/events/pointer-tracker.md",2186],d361dbd5:[()=>Promise.all([n.e(532),n.e(8592),n.e(4254)]).then(n.bind(n,6909)),"@site/docs/examples/mesh-and-shaders/triangle-color.md",6909],d39fb4c7:[()=>Promise.all([n.e(8592),n.e(8637)]).then(n.bind(n,2983)),"@site/docs/guides/components/graphics.md",2983],d540624c:[()=>Promise.all([n.e(532),n.e(8592),n.e(5518)]).then(n.bind(n,7310)),"@site/versioned_docs/version-7.x/examples/mesh-and-shaders/textured-mesh-advanced.md",7310],d6013015:[()=>Promise.all([n.e(8592),n.e(6935)]).then(n.bind(n,6072)),"@site/docs/guides/basics/getting-started.md",6072],d749e606:[()=>n.e(8698).then(n.t.bind(n,6690,19)),"~blog/default/blog-tags-web-gl-f05.json",6690],d875d54c:[()=>Promise.all([n.e(532),n.e(8592),n.e(6976)]).then(n.bind(n,5854)),"@site/versioned_docs/version-7.x/examples/graphics/simple.md",5854],dcd647f4:[()=>Promise.all([n.e(532),n.e(8592),n.e(788)]).then(n.bind(n,612)),"@site/versioned_docs/version-7.x/examples/mesh-and-shaders/shader-toy-mesh.md",612],dddda0c0:[()=>Promise.all([n.e(532),n.e(8592),n.e(3530)]).then(n.bind(n,2212)),"@site/versioned_docs/version-7.x/examples/textures/texture-rotate.md",2212],ddfb2f43:[()=>Promise.all([n.e(532),n.e(8592),n.e(5217)]).then(n.bind(n,154)),"@site/docs/examples/basic/transparent-background.md",154],ded4db72:[()=>Promise.all([n.e(532),n.e(8592),n.e(8883)]).then(n.bind(n,7005)),"@site/versioned_docs/version-7.x/examples/basic/cache-as-bitmap.md",7005],df4909ff:[()=>Promise.all([n.e(532),n.e(8592),n.e(834)]).then(n.bind(n,5699)),"@site/docs/examples/sprite/video.md",5699],dfd1d8ac:[()=>Promise.all([n.e(8592),n.e(6249)]).then(n.bind(n,6409)),"@site/versioned_docs/version-7.x/tutorials/index.md",6409],e0383bde:[()=>Promise.all([n.e(532),n.e(9486)]).then(n.bind(n,9288)),"@site/src/pages/team.tsx",9288],e114ba49:[()=>Promise.all([n.e(532),n.e(8592),n.e(9446)]).then(n.bind(n,9175)),"@site/docs/examples/graphics/advanced.md",9175],e181efb8:[()=>Promise.all([n.e(532),n.e(8592),n.e(3183)]).then(n.bind(n,2709)),"@site/docs/examples/sprite/animated-sprite-explosion.md",2709],e2085246:[()=>Promise.all([n.e(8592),n.e(9141)]).then(n.bind(n,7497)),"@site/versioned_docs/version-7.x/guides/components/interaction.md",7497],e2a64459:[()=>Promise.all([n.e(532),n.e(8592),n.e(4429)]).then(n.bind(n,5381)),"@site/docs/examples/mesh-and-shaders/triangle.md",5381],e3f62ff9:[()=>Promise.all([n.e(532),n.e(8592),n.e(270)]).then(n.bind(n,5214)),"@site/versioned_docs/version-7.x/examples/mesh-and-shaders/interleaving-geometry.md",5214],e40c1e28:[()=>Promise.all([n.e(532),n.e(8592),n.e(7528)]).then(n.bind(n,4388)),"@site/versioned_docs/version-7.x/examples/masks/sprite.md",4388],e49ba97a:[()=>Promise.all([n.e(532),n.e(8592),n.e(2592)]).then(n.bind(n,4876)),"@site/versioned_docs/version-7.x/examples/textures/render-texture-advanced.md",4876],e4d2136a:[()=>Promise.all([n.e(8592),n.e(2769)]).then(n.bind(n,7571)),"@site/docs/guides/components/sprites.md",7571],e54d87ae:[()=>Promise.all([n.e(8592),n.e(928)]).then(n.bind(n,9926)),"@site/docs/guides/migrations/v5.md",9926],e75d3757:[()=>Promise.all([n.e(8592),n.e(8115)]).then(n.bind(n,8991)),"@site/docs/guides/production/performance-tips.md",8991],e8bda46f:[()=>Promise.all([n.e(532),n.e(8592),n.e(6452)]).then(n.bind(n,9616)),"@site/docs/examples/sprite/texture-swap.md",9616],e8d3bb8a:[()=>Promise.all([n.e(532),n.e(8592),n.e(635)]).then(n.bind(n,5596)),"@site/docs/examples/graphics/mesh-from-path.md",5596],e930a107:[()=>n.e(4449).then(n.t.bind(n,5745,19)),"/home/runner/work/pixijs.com/pixijs.com/.docusaurus/docusaurus-plugin-content-pages/default/plugin-route-context-module-100.json",5745],e9b54131:[()=>Promise.all([n.e(8592),n.e(4728)]).then(n.bind(n,8331)),"@site/docs/guides/advanced/render-groups.md",8331],ebe5baae:[()=>Promise.all([n.e(532),n.e(8592),n.e(7468)]).then(n.bind(n,1355)),"@site/docs/examples/events/dragging.md",1355],ee7b75e9:[()=>Promise.all([n.e(532),n.e(8592),n.e(8270)]).then(n.bind(n,9883)),"@site/docs/examples/sprite/animated-sprite-animation-speed.md",9883],f06afb9a:[()=>Promise.all([n.e(532),n.e(8592),n.e(1780)]).then(n.bind(n,7328)),"@site/versioned_docs/version-7.x/examples/assets/async.md",7328],f1265259:[()=>Promise.all([n.e(532),n.e(8592),n.e(74)]).then(n.bind(n,1105)),"@site/versioned_docs/version-7.x/examples/mesh-and-shaders/textured-mesh-basic.md",1105],f1a1f84c:[()=>Promise.all([n.e(532),n.e(8592),n.e(2896)]).then(n.bind(n,2917)),"@site/docs/examples/events/custom-mouse-icon.md",2917],f3873011:[()=>Promise.all([n.e(8592),n.e(646)]).then(n.bind(n,7204)),"@site/docs/guides/migrations/v7.md",7204],f66eb8c8:[()=>Promise.all([n.e(8592),n.e(8112)]).then(n.bind(n,9823)),"@site/docs/guides/components/containers.md",9823],f69d7ce2:[()=>Promise.all([n.e(532),n.e(8592),n.e(8279)]).then(n.bind(n,1975)),"@site/versioned_docs/version-7.x/examples/text/web-font.md",1975],f6b2664f:[()=>Promise.all([n.e(532),n.e(8592),n.e(7395)]).then(n.bind(n,2060)),"@site/docs/examples/masks/filter.md",2060],f6ba79b8:[()=>Promise.all([n.e(8592),n.e(5791)]).then(n.bind(n,3472)),"@site/versioned_docs/version-7.x/guides/production/performance-tips.md",3472],f6e53413:[()=>Promise.all([n.e(8592),n.e(1905)]).then(n.bind(n,8357)),"@site/versioned_docs/version-7.x/guides/components/graphics.md",8357],f9f83330:[()=>Promise.all([n.e(532),n.e(8592),n.e(2124),n.e(2956)]).then(n.bind(n,686)),"@site/versioned_docs/version-7.x/playground/index.md",686],fa17a3e5:[()=>Promise.all([n.e(532),n.e(8592),n.e(3181)]).then(n.bind(n,4355)),"@site/src/pages/versions.tsx",4355],fbbb91df:[()=>Promise.all([n.e(532),n.e(8592),n.e(8451)]).then(n.bind(n,6007)),"@site/docs/examples/mesh-and-shaders/instanced-geometry.md",6007],fc6bf499:[()=>Promise.all([n.e(532),n.e(8592),n.e(8377)]).then(n.bind(n,3655)),"@site/docs/examples/events/interactivity.md",3655],fcfe3ad8:[()=>Promise.all([n.e(532),n.e(8592),n.e(9297)]).then(n.bind(n,3376)),"@site/versioned_docs/version-7.x/tutorials/getting-started.md",3376],fd2153d2:[()=>Promise.all([n.e(532),n.e(8592),n.e(1844)]).then(n.bind(n,5549)),"@site/versioned_docs/version-7.x/examples/masks/filter.md",5549],fd2bc357:[()=>Promise.all([n.e(532),n.e(8592),n.e(179)]).then(n.bind(n,5048)),"@site/versioned_docs/version-7.x/examples/basic/transparent-background.md",5048],fe1a848a:[()=>Promise.all([n.e(8592),n.e(7567)]).then(n.bind(n,2382)),"@site/blog/2023-10-03-pixi-v8-beta.md?truncated=true",2382],fe2f9022:[()=>Promise.all([n.e(532),n.e(8592),n.e(3395)]).then(n.bind(n,2346)),"@site/versioned_docs/version-7.x/examples/graphics/advanced.md",2346],fea1970e:[()=>Promise.all([n.e(532),n.e(8592),n.e(6836)]).then(n.bind(n,2960)),"@site/docs/tutorials/index.md",2960],ff277fe4:[()=>Promise.all([n.e(8592),n.e(2764)]).then(n.bind(n,3850)),"@site/versioned_docs/version-7.x/guides/basics/what-pixijs-is.md",3850],ff469e05:[()=>Promise.all([n.e(532),n.e(8592),n.e(9953)]).then(n.bind(n,6646)),"@site/versioned_docs/version-7.x/examples/sprite/video.md",6646]};var o=n(5893);function l(e){let{error:t,retry:n,pastDelay:r}=e;return t?(0,o.jsxs)("div",{style:{textAlign:"center",color:"#fff",backgroundColor:"#fa383e",borderColor:"#fa383e",borderStyle:"solid",borderRadius:"0.25rem",borderWidth:"1px",boxSizing:"border-box",display:"block",padding:"1rem",flex:"0 0 50%",marginLeft:"25%",marginRight:"25%",marginTop:"5rem",maxWidth:"50%",width:"100%"},children:[(0,o.jsx)("p",{children:String(t)}),(0,o.jsx)("div",{children:(0,o.jsx)("button",{type:"button",onClick:n,children:"Retry"})})]}):r?(0,o.jsx)("div",{style:{display:"flex",justifyContent:"center",alignItems:"center",height:"100vh"},children:(0,o.jsx)("svg",{id:"loader",style:{width:128,height:110,position:"absolute",top:"calc(100vh - 64%)"},viewBox:"0 0 45 45",xmlns:"http://www.w3.org/2000/svg",stroke:"#61dafb",children:(0,o.jsxs)("g",{fill:"none",fillRule:"evenodd",transform:"translate(1 1)",strokeWidth:"2",children:[(0,o.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,o.jsx)("animate",{attributeName:"r",begin:"1.5s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,o.jsx)("animate",{attributeName:"stroke-opacity",begin:"1.5s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,o.jsx)("animate",{attributeName:"stroke-width",begin:"1.5s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,o.jsxs)("circle",{cx:"22",cy:"22",r:"6",strokeOpacity:"0",children:[(0,o.jsx)("animate",{attributeName:"r",begin:"3s",dur:"3s",values:"6;22",calcMode:"linear",repeatCount:"indefinite"}),(0,o.jsx)("animate",{attributeName:"stroke-opacity",begin:"3s",dur:"3s",values:"1;0",calcMode:"linear",repeatCount:"indefinite"}),(0,o.jsx)("animate",{attributeName:"stroke-width",begin:"3s",dur:"3s",values:"2;0",calcMode:"linear",repeatCount:"indefinite"})]}),(0,o.jsx)("circle",{cx:"22",cy:"22",r:"8",children:(0,o.jsx)("animate",{attributeName:"r",begin:"0s",dur:"1.5s",values:"6;1;2;3;4;5;6",calcMode:"linear",repeatCount:"indefinite"})})]})})}):null}var c=n(9670),u=n(226);function d(e,t){if("*"===e)return a()({loading:l,loader:()=>n.e(4972).then(n.bind(n,4972)),modules:["@theme/NotFound"],webpack:()=>[4972],render(e,t){const n=e.default;return(0,o.jsx)(u.z,{value:{plugin:{name:"native",id:"default"}},children:(0,o.jsx)(n,{...t})})}});const r=i[`${e}-${t}`],d={},p=[],m=[],f=(0,c.Z)(r);return Object.entries(f).forEach((e=>{let[t,n]=e;const r=s[n];r&&(d[t]=r[0],p.push(r[1]),m.push(r[2]))})),a().Map({loading:l,loader:d,modules:p,webpack:()=>m,render(t,n){const a=JSON.parse(JSON.stringify(r));Object.entries(t).forEach((t=>{let[n,r]=t;const i=r.default;if(!i)throw new Error(`The page component at ${e} doesn't have a default export. This makes it impossible to render anything. Consider default-exporting a React component.`);"object"!=typeof i&&"function"!=typeof i||Object.keys(r).filter((e=>"default"!==e)).forEach((e=>{i[e]=r[e]}));let s=a;const o=n.split(".");o.slice(0,-1).forEach((e=>{s=s[e]})),s[o[o.length-1]]=i}));const i=a.__comp;delete a.__comp;const s=a.__context;return delete a.__context,(0,o.jsx)(u.z,{value:s,children:(0,o.jsx)(i,{...a,...n})})}})}const p=[{path:"/blog",component:d("/blog","d5e"),exact:!0},{path:"/blog/archive",component:d("/blog/archive","5d3"),exact:!0},{path:"/blog/pixi-universe",component:d("/blog/pixi-universe","66b"),exact:!0},{path:"/blog/pixi-v8-beta",component:d("/blog/pixi-v8-beta","668"),exact:!0},{path:"/blog/pixi-v8-launches",component:d("/blog/pixi-v8-launches","005"),exact:!0},{path:"/blog/tags",component:d("/blog/tags","a9a"),exact:!0},{path:"/blog/tags/pixi-js",component:d("/blog/tags/pixi-js","f55"),exact:!0},{path:"/blog/tags/pixi-js-universe",component:d("/blog/tags/pixi-js-universe","603"),exact:!0},{path:"/blog/tags/web-gl",component:d("/blog/tags/web-gl","399"),exact:!0},{path:"/blog/tags/web-gpu",component:d("/blog/tags/web-gpu","d31"),exact:!0},{path:"/search",component:d("/search","fb5"),exact:!0},{path:"/team",component:d("/team","075"),exact:!0},{path:"/versions",component:d("/versions","def"),exact:!0},{path:"/7.x",component:d("/7.x","fdd"),routes:[{path:"/7.x/branding",component:d("/7.x/branding","1f8"),exact:!0},{path:"/7.x/examples",component:d("/7.x/examples","b1e"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/advanced/collision-detection",component:d("/7.x/examples/advanced/collision-detection","ce5"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/advanced/mouse-trail",component:d("/7.x/examples/advanced/mouse-trail","0eb"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/advanced/scratch-card",component:d("/7.x/examples/advanced/scratch-card","be2"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/advanced/screen-shot",component:d("/7.x/examples/advanced/screen-shot","b1e"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/advanced/slots",component:d("/7.x/examples/advanced/slots","5f8"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/advanced/spinners",component:d("/7.x/examples/advanced/spinners","80f"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/advanced/star-warp",component:d("/7.x/examples/advanced/star-warp","a6b"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/assets/async",component:d("/7.x/examples/assets/async","e50"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/assets/background",component:d("/7.x/examples/assets/background","6e0"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/assets/bundle",component:d("/7.x/examples/assets/bundle","5e2"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/assets/multiple",component:d("/7.x/examples/assets/multiple","5bb"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/assets/promise",component:d("/7.x/examples/assets/promise","54b"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/basic/blend-modes",component:d("/7.x/examples/basic/blend-modes","f1a"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/basic/cache-as-bitmap",component:d("/7.x/examples/basic/cache-as-bitmap","403"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/basic/container",component:d("/7.x/examples/basic/container","ad0"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/basic/particle-container",component:d("/7.x/examples/basic/particle-container","691"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/basic/simple-plane",component:d("/7.x/examples/basic/simple-plane","400"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/basic/tinting",component:d("/7.x/examples/basic/tinting","dfa"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/basic/transparent-background",component:d("/7.x/examples/basic/transparent-background","0a5"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/events/click",component:d("/7.x/examples/events/click","b7b"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/events/custom-hitarea",component:d("/7.x/examples/events/custom-hitarea","a01"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/events/custom-mouse-icon",component:d("/7.x/examples/events/custom-mouse-icon","80f"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/events/dragging",component:d("/7.x/examples/events/dragging","983"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/events/interactivity",component:d("/7.x/examples/events/interactivity","934"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/events/logger",component:d("/7.x/examples/events/logger","4c6"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/events/nested-boundary-with-projection",component:d("/7.x/examples/events/nested-boundary-with-projection","968"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/events/pointer-tracker",component:d("/7.x/examples/events/pointer-tracker","98e"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/events/slider",component:d("/7.x/examples/events/slider","204"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/filters-advanced/custom",component:d("/7.x/examples/filters-advanced/custom","337"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/filters-advanced/mouse-blending",component:d("/7.x/examples/filters-advanced/mouse-blending","fe2"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/filters-advanced/shader-toy-filter-render-texture",component:d("/7.x/examples/filters-advanced/shader-toy-filter-render-texture","7ec"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/filters-basic/blur",component:d("/7.x/examples/filters-basic/blur","729"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/filters-basic/color-matrix",component:d("/7.x/examples/filters-basic/color-matrix","677"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/filters-basic/displacement-map-crawlies",component:d("/7.x/examples/filters-basic/displacement-map-crawlies","4be"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/filters-basic/displacement-map-flag",component:d("/7.x/examples/filters-basic/displacement-map-flag","dc3"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/graphics/advanced",component:d("/7.x/examples/graphics/advanced","9f7"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/graphics/dynamic",component:d("/7.x/examples/graphics/dynamic","3e9"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/graphics/simple",component:d("/7.x/examples/graphics/simple","455"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/masks/filter",component:d("/7.x/examples/masks/filter","e42"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/masks/graphics",component:d("/7.x/examples/masks/graphics","cf4"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/masks/sprite",component:d("/7.x/examples/masks/sprite","6c9"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/mesh-and-shaders/instanced-geometry",component:d("/7.x/examples/mesh-and-shaders/instanced-geometry","1a5"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/mesh-and-shaders/interleaving-geometry",component:d("/7.x/examples/mesh-and-shaders/interleaving-geometry","b2c"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/mesh-and-shaders/merging-geometry",component:d("/7.x/examples/mesh-and-shaders/merging-geometry","559"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/mesh-and-shaders/multi-pass-shader-generated-mesh",component:d("/7.x/examples/mesh-and-shaders/multi-pass-shader-generated-mesh","713"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/mesh-and-shaders/shader-toy-mesh",component:d("/7.x/examples/mesh-and-shaders/shader-toy-mesh","df3"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/mesh-and-shaders/shared-shader",component:d("/7.x/examples/mesh-and-shaders/shared-shader","8cd"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/mesh-and-shaders/sharing-geometry",component:d("/7.x/examples/mesh-and-shaders/sharing-geometry","315"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/mesh-and-shaders/textured-mesh-advanced",component:d("/7.x/examples/mesh-and-shaders/textured-mesh-advanced","c85"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/mesh-and-shaders/textured-mesh-basic",component:d("/7.x/examples/mesh-and-shaders/textured-mesh-basic","f6e"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/mesh-and-shaders/triangle",component:d("/7.x/examples/mesh-and-shaders/triangle","350"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/mesh-and-shaders/triangle-color",component:d("/7.x/examples/mesh-and-shaders/triangle-color","ae1"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/mesh-and-shaders/triangle-textured",component:d("/7.x/examples/mesh-and-shaders/triangle-textured","721"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/mesh-and-shaders/uniforms",component:d("/7.x/examples/mesh-and-shaders/uniforms","91b"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/offscreen-canvas/basic",component:d("/7.x/examples/offscreen-canvas/basic","787"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/sprite/animated-sprite-animation-speed",component:d("/7.x/examples/sprite/animated-sprite-animation-speed","264"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/sprite/animated-sprite-explosion",component:d("/7.x/examples/sprite/animated-sprite-explosion","126"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/sprite/animated-sprite-jet",component:d("/7.x/examples/sprite/animated-sprite-jet","a73"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/sprite/basic",component:d("/7.x/examples/sprite/basic","550"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/sprite/texture-swap",component:d("/7.x/examples/sprite/texture-swap","7a3"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/sprite/tiling-sprite",component:d("/7.x/examples/sprite/tiling-sprite","d12"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/sprite/video",component:d("/7.x/examples/sprite/video","810"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/text/bitmap-text",component:d("/7.x/examples/text/bitmap-text","24a"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/text/from-font",component:d("/7.x/examples/text/from-font","6d5"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/text/pixi-text",component:d("/7.x/examples/text/pixi-text","cf3"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/text/web-font",component:d("/7.x/examples/text/web-font","979"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/textures/gradient-basic",component:d("/7.x/examples/textures/gradient-basic","793"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/textures/gradient-resource",component:d("/7.x/examples/textures/gradient-resource","54c"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/textures/render-texture-advanced",component:d("/7.x/examples/textures/render-texture-advanced","e6f"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/textures/render-texture-basic",component:d("/7.x/examples/textures/render-texture-basic","f7d"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/examples/textures/texture-rotate",component:d("/7.x/examples/textures/texture-rotate","6cf"),exact:!0,sidebar:"examplesSidebar"},{path:"/7.x/faq",component:d("/7.x/faq","705"),exact:!0},{path:"/7.x/guides",component:d("/7.x/guides","940"),exact:!0,sidebar:"guidesSidebar"},{path:"/7.x/guides/basics/architecture-overview",component:d("/7.x/guides/basics/architecture-overview","710"),exact:!0,sidebar:"guidesSidebar"},{path:"/7.x/guides/basics/getting-started",component:d("/7.x/guides/basics/getting-started","477"),exact:!0,sidebar:"guidesSidebar"},{path:"/7.x/guides/basics/render-loop",component:d("/7.x/guides/basics/render-loop","8f7"),exact:!0,sidebar:"guidesSidebar"},{path:"/7.x/guides/basics/scene-graph",component:d("/7.x/guides/basics/scene-graph","7b4"),exact:!0,sidebar:"guidesSidebar"},{path:"/7.x/guides/basics/what-pixijs-is",component:d("/7.x/guides/basics/what-pixijs-is","9e7"),exact:!0,sidebar:"guidesSidebar"},{path:"/7.x/guides/basics/what-pixijs-is-not",component:d("/7.x/guides/basics/what-pixijs-is-not","9d1"),exact:!0,sidebar:"guidesSidebar"},{path:"/7.x/guides/components/assets",component:d("/7.x/guides/components/assets","bf4"),exact:!0,sidebar:"guidesSidebar"},{path:"/7.x/guides/components/containers",component:d("/7.x/guides/components/containers","fc1"),exact:!0,sidebar:"guidesSidebar"},{path:"/7.x/guides/components/display-object",component:d("/7.x/guides/components/display-object","0bc"),exact:!0,sidebar:"guidesSidebar"},{path:"/7.x/guides/components/graphics",component:d("/7.x/guides/components/graphics","477"),exact:!0,sidebar:"guidesSidebar"},{path:"/7.x/guides/components/interaction",component:d("/7.x/guides/components/interaction","6b3"),exact:!0,sidebar:"guidesSidebar"},{path:"/7.x/guides/components/sprite-sheets",component:d("/7.x/guides/components/sprite-sheets","086"),exact:!0,sidebar:"guidesSidebar"},{path:"/7.x/guides/components/sprites",component:d("/7.x/guides/components/sprites","8fc"),exact:!0,sidebar:"guidesSidebar"},{path:"/7.x/guides/components/text",component:d("/7.x/guides/components/text","d7f"),exact:!0,sidebar:"guidesSidebar"},{path:"/7.x/guides/components/textures",component:d("/7.x/guides/components/textures","508"),exact:!0,sidebar:"guidesSidebar"},{path:"/7.x/guides/migrations/upgrading",component:d("/7.x/guides/migrations/upgrading","5cb"),exact:!0,sidebar:"guidesSidebar"},{path:"/7.x/guides/migrations/v5",component:d("/7.x/guides/migrations/v5","107"),exact:!0,sidebar:"guidesSidebar"},{path:"/7.x/guides/migrations/v6",component:d("/7.x/guides/migrations/v6","64e"),exact:!0,sidebar:"guidesSidebar"},{path:"/7.x/guides/migrations/v7",component:d("/7.x/guides/migrations/v7","20b"),exact:!0,sidebar:"guidesSidebar"},{path:"/7.x/guides/production/performance-tips",component:d("/7.x/guides/production/performance-tips","4a8"),exact:!0,sidebar:"guidesSidebar"},{path:"/7.x/playground",component:d("/7.x/playground","336"),exact:!0},{path:"/7.x/tutorials",component:d("/7.x/tutorials","266"),exact:!0},{path:"/7.x/tutorials/getting-started",component:d("/7.x/tutorials/getting-started","f23"),exact:!0}]},{path:"/",component:d("/","ba2"),exact:!0},{path:"/",component:d("/","666"),routes:[{path:"/branding",component:d("/branding","792"),exact:!0},{path:"/examples",component:d("/examples","522"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/advanced/collision-detection",component:d("/examples/advanced/collision-detection","521"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/advanced/mouse-trail",component:d("/examples/advanced/mouse-trail","377"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/advanced/scratch-card",component:d("/examples/advanced/scratch-card","8ba"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/advanced/screen-shot",component:d("/examples/advanced/screen-shot","108"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/advanced/slots",component:d("/examples/advanced/slots","0fe"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/advanced/spinners",component:d("/examples/advanced/spinners","f58"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/advanced/star-warp",component:d("/examples/advanced/star-warp","1dd"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/assets/async",component:d("/examples/assets/async","90d"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/assets/background",component:d("/examples/assets/background","dc4"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/assets/bundle",component:d("/examples/assets/bundle","641"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/assets/multiple",component:d("/examples/assets/multiple","10f"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/assets/promise",component:d("/examples/assets/promise","0b7"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/basic/blend-modes",component:d("/examples/basic/blend-modes","ec3"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/basic/container",component:d("/examples/basic/container","bf9"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/basic/mesh-plane",component:d("/examples/basic/mesh-plane","d22"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/basic/particle-container",component:d("/examples/basic/particle-container","1da"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/basic/render-group",component:d("/examples/basic/render-group","3ee"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/basic/tinting",component:d("/examples/basic/tinting","eb5"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/basic/transparent-background",component:d("/examples/basic/transparent-background","6a0"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/events/click",component:d("/examples/events/click","e15"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/events/custom-hitarea",component:d("/examples/events/custom-hitarea","efe"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/events/custom-mouse-icon",component:d("/examples/events/custom-mouse-icon","712"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/events/dragging",component:d("/examples/events/dragging","0c4"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/events/interactivity",component:d("/examples/events/interactivity","a8d"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/events/logger",component:d("/examples/events/logger","72d"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/events/pointer-tracker",component:d("/examples/events/pointer-tracker","1b3"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/events/slider",component:d("/examples/events/slider","1e6"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/filters-advanced/custom",component:d("/examples/filters-advanced/custom","0fd"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/filters-advanced/mouse-blending",component:d("/examples/filters-advanced/mouse-blending","984"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/filters-basic/blur",component:d("/examples/filters-basic/blur","eaa"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/filters-basic/color-matrix",component:d("/examples/filters-basic/color-matrix","053"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/filters-basic/displacement-map-crawlies",component:d("/examples/filters-basic/displacement-map-crawlies","c22"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/filters-basic/displacement-map-flag",component:d("/examples/filters-basic/displacement-map-flag","ac7"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/graphics/advanced",component:d("/examples/graphics/advanced","d86"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/graphics/dynamic",component:d("/examples/graphics/dynamic","f14"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/graphics/fill-gradient",component:d("/examples/graphics/fill-gradient","cab"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/graphics/mesh-from-path",component:d("/examples/graphics/mesh-from-path","cd1"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/graphics/simple",component:d("/examples/graphics/simple","e5b"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/graphics/svg",component:d("/examples/graphics/svg","bb3"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/graphics/svg-load",component:d("/examples/graphics/svg-load","282"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/graphics/texture",component:d("/examples/graphics/texture","429"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/masks/filter",component:d("/examples/masks/filter","7d8"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/masks/graphics",component:d("/examples/masks/graphics","b58"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/masks/sprite",component:d("/examples/masks/sprite","15c"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/mesh-and-shaders/instanced-geometry",component:d("/examples/mesh-and-shaders/instanced-geometry","a27"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/mesh-and-shaders/multipass-mesh",component:d("/examples/mesh-and-shaders/multipass-mesh","eab"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/mesh-and-shaders/shader-toy-mesh",component:d("/examples/mesh-and-shaders/shader-toy-mesh","210"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/mesh-and-shaders/shared-geometry",component:d("/examples/mesh-and-shaders/shared-geometry","9a1"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/mesh-and-shaders/shared-shader",component:d("/examples/mesh-and-shaders/shared-shader","d4e"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/mesh-and-shaders/textured-mesh-advanced",component:d("/examples/mesh-and-shaders/textured-mesh-advanced","a9c"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/mesh-and-shaders/textured-mesh-basic",component:d("/examples/mesh-and-shaders/textured-mesh-basic","944"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/mesh-and-shaders/triangle",component:d("/examples/mesh-and-shaders/triangle","0cd"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/mesh-and-shaders/triangle-color",component:d("/examples/mesh-and-shaders/triangle-color","986"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/mesh-and-shaders/triangle-textured",component:d("/examples/mesh-and-shaders/triangle-textured","964"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/offscreen-canvas/basic",component:d("/examples/offscreen-canvas/basic","fe1"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/sprite/animated-sprite-animation-speed",component:d("/examples/sprite/animated-sprite-animation-speed","d21"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/sprite/animated-sprite-explosion",component:d("/examples/sprite/animated-sprite-explosion","a04"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/sprite/animated-sprite-jet",component:d("/examples/sprite/animated-sprite-jet","cc8"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/sprite/basic",component:d("/examples/sprite/basic","d52"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/sprite/texture-swap",component:d("/examples/sprite/texture-swap","13d"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/sprite/tiling-sprite",component:d("/examples/sprite/tiling-sprite","107"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/sprite/video",component:d("/examples/sprite/video","8bf"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/text/bitmap-text",component:d("/examples/text/bitmap-text","e03"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/text/from-font",component:d("/examples/text/from-font","c6f"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/text/pixi-text",component:d("/examples/text/pixi-text","8c6"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/text/web-font",component:d("/examples/text/web-font","852"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/textures/render-texture-advanced",component:d("/examples/textures/render-texture-advanced","8bf"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/textures/render-texture-basic",component:d("/examples/textures/render-texture-basic","72f"),exact:!0,sidebar:"examplesSidebar"},{path:"/examples/textures/texture-rotate",component:d("/examples/textures/texture-rotate","c4e"),exact:!0,sidebar:"examplesSidebar"},{path:"/faq",component:d("/faq","155"),exact:!0},{path:"/guides",component:d("/guides","bc6"),exact:!0,sidebar:"guidesSidebar"},{path:"/guides/advanced/render-groups",component:d("/guides/advanced/render-groups","a58"),exact:!0,sidebar:"guidesSidebar"},{path:"/guides/basics/architecture-overview",component:d("/guides/basics/architecture-overview","dc9"),exact:!0,sidebar:"guidesSidebar"},{path:"/guides/basics/getting-started",component:d("/guides/basics/getting-started","546"),exact:!0,sidebar:"guidesSidebar"},{path:"/guides/basics/render-loop",component:d("/guides/basics/render-loop","da4"),exact:!0,sidebar:"guidesSidebar"},{path:"/guides/basics/scene-graph",component:d("/guides/basics/scene-graph","5ed"),exact:!0,sidebar:"guidesSidebar"},{path:"/guides/basics/what-pixijs-is",component:d("/guides/basics/what-pixijs-is","e8e"),exact:!0,sidebar:"guidesSidebar"},{path:"/guides/basics/what-pixijs-is-not",component:d("/guides/basics/what-pixijs-is-not","c4f"),exact:!0,sidebar:"guidesSidebar"},{path:"/guides/components/assets",component:d("/guides/components/assets","9ec"),exact:!0,sidebar:"guidesSidebar"},{path:"/guides/components/containers",component:d("/guides/components/containers","e9d"),exact:!0,sidebar:"guidesSidebar"},{path:"/guides/components/graphics",component:d("/guides/components/graphics","d57"),exact:!0,sidebar:"guidesSidebar"},{path:"/guides/components/interaction",component:d("/guides/components/interaction","2f3"),exact:!0,sidebar:"guidesSidebar"},{path:"/guides/components/sprite-sheets",component:d("/guides/components/sprite-sheets","579"),exact:!0,sidebar:"guidesSidebar"},{path:"/guides/components/sprites",component:d("/guides/components/sprites","0a4"),exact:!0,sidebar:"guidesSidebar"},{path:"/guides/components/text",component:d("/guides/components/text","e9e"),exact:!0,sidebar:"guidesSidebar"},{path:"/guides/components/textures",component:d("/guides/components/textures","a71"),exact:!0,sidebar:"guidesSidebar"},{path:"/guides/migrations/v5",component:d("/guides/migrations/v5","deb"),exact:!0,sidebar:"guidesSidebar"},{path:"/guides/migrations/v6",component:d("/guides/migrations/v6","bfb"),exact:!0,sidebar:"guidesSidebar"},{path:"/guides/migrations/v7",component:d("/guides/migrations/v7","d7c"),exact:!0,sidebar:"guidesSidebar"},{path:"/guides/migrations/v8",component:d("/guides/migrations/v8","891"),exact:!0,sidebar:"guidesSidebar"},{path:"/guides/production/performance-tips",component:d("/guides/production/performance-tips","233"),exact:!0,sidebar:"guidesSidebar"},{path:"/playground",component:d("/playground","043"),exact:!0},{path:"/tutorials",component:d("/tutorials","e8b"),exact:!0},{path:"/tutorials/choo-choo-train",component:d("/tutorials/choo-choo-train","939"),exact:!0},{path:"/tutorials/fish-pond",component:d("/tutorials/fish-pond","84a"),exact:!0},{path:"/tutorials/getting-started",component:d("/tutorials/getting-started","a2c"),exact:!0},{path:"/tutorials/spine-boy-adventure",component:d("/tutorials/spine-boy-adventure","de9"),exact:!0}]},{path:"*",component:d("*")}]},8934:(e,t,n)=>{"use strict";n.d(t,{_:()=>i,t:()=>s});var r=n(7294),a=n(5893);const i=r.createContext(!1);function s(e){let{children:t}=e;const[n,s]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{s(!0)}),[]),(0,a.jsx)(i.Provider,{value:n,children:t})}},9383:(e,t,n)=>{"use strict";var r=n(7294),a=n(3935),i=n(3727),s=n(405),o=n(412);const l=[n(4367),n(2497),n(3310),n(8320),n(3878)];var c=n(723),u=n(6550),d=n(8790),p=n(5893);function m(e){let{children:t}=e;return(0,p.jsx)(p.Fragment,{children:t})}var f=n(5742),h=n(2263),g=n(4996),b=n(6668),x=n(1944),v=n(4711),y=n(9727),w=n(3320),k=n(197);function S(){const{i18n:{defaultLocale:e,localeConfigs:t}}=(0,h.Z)(),n=(0,v.l)();return(0,p.jsxs)(f.Z,{children:[Object.entries(t).map((e=>{let[t,{htmlLang:r}]=e;return(0,p.jsx)("link",{rel:"alternate",href:n.createUrl({locale:t,fullyQualified:!0}),hrefLang:r},t)})),(0,p.jsx)("link",{rel:"alternate",href:n.createUrl({locale:e,fullyQualified:!0}),hrefLang:"x-default"})]})}function _(e){let{permalink:t}=e;const{siteConfig:{url:n}}=(0,h.Z)(),r=function(){const{siteConfig:{url:e}}=(0,h.Z)(),{pathname:t}=(0,u.TH)();return e+(0,g.Z)(t)}(),a=t?`${n}${t}`:r;return(0,p.jsxs)(f.Z,{children:[(0,p.jsx)("meta",{property:"og:url",content:a}),(0,p.jsx)("link",{rel:"canonical",href:a})]})}function E(){const{i18n:{currentLocale:e}}=(0,h.Z)(),{metadata:t,image:n}=(0,b.L)();return(0,p.jsxs)(p.Fragment,{children:[(0,p.jsxs)(f.Z,{children:[(0,p.jsx)("meta",{name:"twitter:card",content:"summary_large_image"}),(0,p.jsx)("body",{className:y.h})]}),n&&(0,p.jsx)(x.d,{image:n}),(0,p.jsx)(_,{}),(0,p.jsx)(S,{}),(0,p.jsx)(k.Z,{tag:w.HX,locale:e}),(0,p.jsx)(f.Z,{children:t.map(((e,t)=>(0,p.jsx)("meta",{...e},t)))})]})}const T=new Map;function C(e){if(T.has(e.pathname))return{...e,pathname:T.get(e.pathname)};if((0,d.f)(c.Z,e.pathname).some((e=>{let{route:t}=e;return!0===t.exact})))return T.set(e.pathname,e.pathname),e;const t=e.pathname.trim().replace(/(?:\/index)?\.html$/,"")||"/";return T.set(e.pathname,t),{...e,pathname:t}}var P=n(8934),j=n(8940);function L(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r{var r;const a=(null==(r=t.default)?void 0:r[e])??t[e];return null==a?void 0:a(...n)}));return()=>a.forEach((e=>null==e?void 0:e()))}const R=function(e){let{children:t,location:n,previousLocation:a}=e;return(0,r.useLayoutEffect)((()=>{a!==n&&(!function(e){let{location:t,previousLocation:n}=e;if(!n)return;const r=t.pathname===n.pathname,a=t.hash===n.hash,i=t.search===n.search;if(r&&a&&!i)return;const{hash:s}=t;if(s){const e=decodeURIComponent(s.substring(1)),t=document.getElementById(e);null==t||t.scrollIntoView()}else window.scrollTo(0,0)}({location:n,previousLocation:a}),L("onRouteDidUpdate",{previousLocation:a,location:n}))}),[a,n]),t};function N(e){const t=Array.from(new Set([e,decodeURI(e)])).map((e=>(0,d.f)(c.Z,e))).flat();return Promise.all(t.map((e=>null==e.route.component.preload?void 0:e.route.component.preload())))}class A extends r.Component{previousLocation;routeUpdateCleanupCb;constructor(e){super(e),this.previousLocation=null,this.routeUpdateCleanupCb=o.Z.canUseDOM?L("onRouteUpdate",{previousLocation:null,location:this.props.location}):()=>{},this.state={nextRouteHasLoaded:!0}}shouldComponentUpdate(e,t){if(e.location===this.props.location)return t.nextRouteHasLoaded;const n=e.location;return this.previousLocation=this.props.location,this.setState({nextRouteHasLoaded:!1}),this.routeUpdateCleanupCb=L("onRouteUpdate",{previousLocation:this.previousLocation,location:n}),N(n.pathname).then((()=>{this.routeUpdateCleanupCb(),this.setState({nextRouteHasLoaded:!0})})).catch((e=>{console.warn(e),window.location.reload()})),!1}render(){const{children:e,location:t}=this.props;return(0,p.jsx)(R,{previousLocation:this.previousLocation,location:t,children:(0,p.jsx)(u.AW,{location:t,render:()=>e})})}}const O=A,I="docusaurus-base-url-issue-banner-container",D="docusaurus-base-url-issue-banner-suggestion-container",M="__DOCUSAURUS_INSERT_BASEURL_BANNER";function F(e){return`\nwindow['${M}'] = true;\n\ndocument.addEventListener('DOMContentLoaded', maybeInsertBanner);\n\nfunction maybeInsertBanner() {\n var shouldInsert = window['${M}'];\n shouldInsert && insertBanner();\n}\n\nfunction insertBanner() {\n var bannerContainer = document.getElementById('${I}');\n if (!bannerContainer) {\n return;\n }\n var bannerHtml = ${JSON.stringify(function(e){return`\n
\n

Your Docusaurus site did not load properly.

\n

A very common reason is a wrong site baseUrl configuration.

\n

Current configured baseUrl = ${e} ${"/"===e?" (default value)":""}

\n

We suggest trying baseUrl =

\n
\n`}(e)).replace(/{window[M]=!1}),[]),(0,p.jsxs)(p.Fragment,{children:[!o.Z.canUseDOM&&(0,p.jsx)(f.Z,{children:(0,p.jsx)("script",{children:F(e)})}),(0,p.jsx)("div",{id:I})]})}function z(){const{siteConfig:{baseUrl:e,baseUrlIssueBanner:t}}=(0,h.Z)(),{pathname:n}=(0,u.TH)();return t&&n===e?(0,p.jsx)(B,{}):null}function $(){const{siteConfig:{favicon:e,title:t,noIndex:n},i18n:{currentLocale:r,localeConfigs:a}}=(0,h.Z)(),i=(0,g.Z)(e),{htmlLang:s,direction:o}=a[r];return(0,p.jsxs)(f.Z,{children:[(0,p.jsx)("html",{lang:s,dir:o}),(0,p.jsx)("title",{children:t}),(0,p.jsx)("meta",{property:"og:title",content:t}),(0,p.jsx)("meta",{name:"viewport",content:"width=device-width, initial-scale=1.0"}),n&&(0,p.jsx)("meta",{name:"robots",content:"noindex, nofollow"}),e&&(0,p.jsx)("link",{rel:"icon",href:i})]})}var U=n(4763);function q(){const e=(0,d.H)(c.Z),t=(0,u.TH)();return(0,p.jsx)(U.Z,{children:(0,p.jsx)(j.M,{children:(0,p.jsx)(P.t,{children:(0,p.jsxs)(m,{children:[(0,p.jsx)($,{}),(0,p.jsx)(E,{}),(0,p.jsx)(z,{}),(0,p.jsx)(O,{location:C(t),children:e})]})})})})}var H=n(6887);const G=function(e){try{return document.createElement("link").relList.supports(e)}catch{return!1}}("prefetch")?function(e){return new Promise(((t,n)=>{var r;if("undefined"==typeof document)return void n();const a=document.createElement("link");a.setAttribute("rel","prefetch"),a.setAttribute("href",e),a.onload=()=>t(),a.onerror=()=>n();const i=document.getElementsByTagName("head")[0]??(null==(r=document.getElementsByName("script")[0])?void 0:r.parentNode);null==i||i.appendChild(a)}))}:function(e){return new Promise(((t,n)=>{const r=new XMLHttpRequest;r.open("GET",e,!0),r.withCredentials=!0,r.onload=()=>{200===r.status?t():n()},r.send(null)}))};var Q=n(9670);const V=new Set,W=new Set,Z=()=>{var e,t;return(null==(e=navigator.connection)?void 0:e.effectiveType.includes("2g"))||(null==(t=navigator.connection)?void 0:t.saveData)},K={prefetch(e){if(!(e=>!Z()&&!W.has(e)&&!V.has(e))(e))return!1;V.add(e);const t=(0,d.f)(c.Z,e).flatMap((e=>{return t=e.route.path,Object.entries(H).filter((e=>{let[n]=e;return n.replace(/-[^-]+$/,"")===t})).flatMap((e=>{let[,t]=e;return Object.values((0,Q.Z)(t))}));var t}));return Promise.all(t.map((e=>{const t=n.gca(e);return t&&!t.includes("undefined")?G(t).catch((()=>{})):Promise.resolve()})))},preload:e=>!!(e=>!Z()&&!W.has(e))(e)&&(W.add(e),N(e))},Y=Object.freeze(K);if(o.Z.canUseDOM){window.docusaurus=Y;const e=a.hydrate;N(window.location.pathname).then((()=>{e((0,p.jsx)(s.B6,{children:(0,p.jsx)(i.VK,{children:(0,p.jsx)(q,{})})}),document.getElementById("__docusaurus"))}))}},8940:(e,t,n)=>{"use strict";n.d(t,{_:()=>d,M:()=>p});var r=n(7294),a=n(6809);const i=JSON.parse('{"docusaurus-plugin-content-docs":{"default":{"path":"/","versions":[{"name":"current","label":"v8.x (Latest)","isLast":false,"path":"/","mainDocId":"guides/index","docs":[{"id":"branding","path":"/branding"},{"id":"examples/advanced/collision-detection","path":"/examples/advanced/collision-detection","sidebar":"examplesSidebar"},{"id":"examples/advanced/mouse-trail","path":"/examples/advanced/mouse-trail","sidebar":"examplesSidebar"},{"id":"examples/advanced/scratch-card","path":"/examples/advanced/scratch-card","sidebar":"examplesSidebar"},{"id":"examples/advanced/screen-shot","path":"/examples/advanced/screen-shot","sidebar":"examplesSidebar"},{"id":"examples/advanced/slots","path":"/examples/advanced/slots","sidebar":"examplesSidebar"},{"id":"examples/advanced/spinners","path":"/examples/advanced/spinners","sidebar":"examplesSidebar"},{"id":"examples/advanced/star-warp","path":"/examples/advanced/star-warp","sidebar":"examplesSidebar"},{"id":"examples/assets/async","path":"/examples/assets/async","sidebar":"examplesSidebar"},{"id":"examples/assets/background","path":"/examples/assets/background","sidebar":"examplesSidebar"},{"id":"examples/assets/bundle","path":"/examples/assets/bundle","sidebar":"examplesSidebar"},{"id":"examples/assets/multiple","path":"/examples/assets/multiple","sidebar":"examplesSidebar"},{"id":"examples/assets/promise","path":"/examples/assets/promise","sidebar":"examplesSidebar"},{"id":"examples/basic/blend-modes","path":"/examples/basic/blend-modes","sidebar":"examplesSidebar"},{"id":"examples/basic/container","path":"/examples/basic/container","sidebar":"examplesSidebar"},{"id":"examples/basic/mesh-plane","path":"/examples/basic/mesh-plane","sidebar":"examplesSidebar"},{"id":"examples/basic/particle-container","path":"/examples/basic/particle-container","sidebar":"examplesSidebar"},{"id":"examples/basic/render-group","path":"/examples/basic/render-group","sidebar":"examplesSidebar"},{"id":"examples/basic/tinting","path":"/examples/basic/tinting","sidebar":"examplesSidebar"},{"id":"examples/basic/transparent-background","path":"/examples/basic/transparent-background","sidebar":"examplesSidebar"},{"id":"examples/events/click","path":"/examples/events/click","sidebar":"examplesSidebar"},{"id":"examples/events/custom-hitarea","path":"/examples/events/custom-hitarea","sidebar":"examplesSidebar"},{"id":"examples/events/custom-mouse-icon","path":"/examples/events/custom-mouse-icon","sidebar":"examplesSidebar"},{"id":"examples/events/dragging","path":"/examples/events/dragging","sidebar":"examplesSidebar"},{"id":"examples/events/interactivity","path":"/examples/events/interactivity","sidebar":"examplesSidebar"},{"id":"examples/events/logger","path":"/examples/events/logger","sidebar":"examplesSidebar"},{"id":"examples/events/pointer-tracker","path":"/examples/events/pointer-tracker","sidebar":"examplesSidebar"},{"id":"examples/events/slider","path":"/examples/events/slider","sidebar":"examplesSidebar"},{"id":"examples/filters-advanced/custom","path":"/examples/filters-advanced/custom","sidebar":"examplesSidebar"},{"id":"examples/filters-advanced/mouse-blending","path":"/examples/filters-advanced/mouse-blending","sidebar":"examplesSidebar"},{"id":"examples/filters-basic/blur","path":"/examples/filters-basic/blur","sidebar":"examplesSidebar"},{"id":"examples/filters-basic/color-matrix","path":"/examples/filters-basic/color-matrix","sidebar":"examplesSidebar"},{"id":"examples/filters-basic/displacement-map-crawlies","path":"/examples/filters-basic/displacement-map-crawlies","sidebar":"examplesSidebar"},{"id":"examples/filters-basic/displacement-map-flag","path":"/examples/filters-basic/displacement-map-flag","sidebar":"examplesSidebar"},{"id":"examples/graphics/advanced","path":"/examples/graphics/advanced","sidebar":"examplesSidebar"},{"id":"examples/graphics/dynamic","path":"/examples/graphics/dynamic","sidebar":"examplesSidebar"},{"id":"examples/graphics/fill-gradient","path":"/examples/graphics/fill-gradient","sidebar":"examplesSidebar"},{"id":"examples/graphics/mesh-from-path","path":"/examples/graphics/mesh-from-path","sidebar":"examplesSidebar"},{"id":"examples/graphics/simple","path":"/examples/graphics/simple","sidebar":"examplesSidebar"},{"id":"examples/graphics/svg","path":"/examples/graphics/svg","sidebar":"examplesSidebar"},{"id":"examples/graphics/svg-load","path":"/examples/graphics/svg-load","sidebar":"examplesSidebar"},{"id":"examples/graphics/texture","path":"/examples/graphics/texture","sidebar":"examplesSidebar"},{"id":"examples/index","path":"/examples/","sidebar":"examplesSidebar"},{"id":"examples/masks/filter","path":"/examples/masks/filter","sidebar":"examplesSidebar"},{"id":"examples/masks/graphics","path":"/examples/masks/graphics","sidebar":"examplesSidebar"},{"id":"examples/masks/sprite","path":"/examples/masks/sprite","sidebar":"examplesSidebar"},{"id":"examples/mesh-and-shaders/instanced-geometry","path":"/examples/mesh-and-shaders/instanced-geometry","sidebar":"examplesSidebar"},{"id":"examples/mesh-and-shaders/multipass-mesh","path":"/examples/mesh-and-shaders/multipass-mesh","sidebar":"examplesSidebar"},{"id":"examples/mesh-and-shaders/shader-toy-mesh","path":"/examples/mesh-and-shaders/shader-toy-mesh","sidebar":"examplesSidebar"},{"id":"examples/mesh-and-shaders/shared-geometry","path":"/examples/mesh-and-shaders/shared-geometry","sidebar":"examplesSidebar"},{"id":"examples/mesh-and-shaders/shared-shader","path":"/examples/mesh-and-shaders/shared-shader","sidebar":"examplesSidebar"},{"id":"examples/mesh-and-shaders/textured-mesh-advanced","path":"/examples/mesh-and-shaders/textured-mesh-advanced","sidebar":"examplesSidebar"},{"id":"examples/mesh-and-shaders/textured-mesh-basic","path":"/examples/mesh-and-shaders/textured-mesh-basic","sidebar":"examplesSidebar"},{"id":"examples/mesh-and-shaders/triangle","path":"/examples/mesh-and-shaders/triangle","sidebar":"examplesSidebar"},{"id":"examples/mesh-and-shaders/triangle-color","path":"/examples/mesh-and-shaders/triangle-color","sidebar":"examplesSidebar"},{"id":"examples/mesh-and-shaders/triangle-textured","path":"/examples/mesh-and-shaders/triangle-textured","sidebar":"examplesSidebar"},{"id":"examples/offscreen-canvas/basic","path":"/examples/offscreen-canvas/basic","sidebar":"examplesSidebar"},{"id":"examples/sprite/animated-sprite-animation-speed","path":"/examples/sprite/animated-sprite-animation-speed","sidebar":"examplesSidebar"},{"id":"examples/sprite/animated-sprite-explosion","path":"/examples/sprite/animated-sprite-explosion","sidebar":"examplesSidebar"},{"id":"examples/sprite/animated-sprite-jet","path":"/examples/sprite/animated-sprite-jet","sidebar":"examplesSidebar"},{"id":"examples/sprite/basic","path":"/examples/sprite/basic","sidebar":"examplesSidebar"},{"id":"examples/sprite/texture-swap","path":"/examples/sprite/texture-swap","sidebar":"examplesSidebar"},{"id":"examples/sprite/tiling-sprite","path":"/examples/sprite/tiling-sprite","sidebar":"examplesSidebar"},{"id":"examples/sprite/video","path":"/examples/sprite/video","sidebar":"examplesSidebar"},{"id":"examples/text/bitmap-text","path":"/examples/text/bitmap-text","sidebar":"examplesSidebar"},{"id":"examples/text/from-font","path":"/examples/text/from-font","sidebar":"examplesSidebar"},{"id":"examples/text/pixi-text","path":"/examples/text/pixi-text","sidebar":"examplesSidebar"},{"id":"examples/text/web-font","path":"/examples/text/web-font","sidebar":"examplesSidebar"},{"id":"examples/textures/render-texture-advanced","path":"/examples/textures/render-texture-advanced","sidebar":"examplesSidebar"},{"id":"examples/textures/render-texture-basic","path":"/examples/textures/render-texture-basic","sidebar":"examplesSidebar"},{"id":"examples/textures/texture-rotate","path":"/examples/textures/texture-rotate","sidebar":"examplesSidebar"},{"id":"faq","path":"/faq"},{"id":"guides/advanced/render-groups","path":"/guides/advanced/render-groups","sidebar":"guidesSidebar"},{"id":"guides/basics/architecture-overview","path":"/guides/basics/architecture-overview","sidebar":"guidesSidebar"},{"id":"guides/basics/getting-started","path":"/guides/basics/getting-started","sidebar":"guidesSidebar"},{"id":"guides/basics/render-loop","path":"/guides/basics/render-loop","sidebar":"guidesSidebar"},{"id":"guides/basics/scene-graph","path":"/guides/basics/scene-graph","sidebar":"guidesSidebar"},{"id":"guides/basics/what-pixijs-is","path":"/guides/basics/what-pixijs-is","sidebar":"guidesSidebar"},{"id":"guides/basics/what-pixijs-is-not","path":"/guides/basics/what-pixijs-is-not","sidebar":"guidesSidebar"},{"id":"guides/components/assets","path":"/guides/components/assets","sidebar":"guidesSidebar"},{"id":"guides/components/containers","path":"/guides/components/containers","sidebar":"guidesSidebar"},{"id":"guides/components/graphics","path":"/guides/components/graphics","sidebar":"guidesSidebar"},{"id":"guides/components/interaction","path":"/guides/components/interaction","sidebar":"guidesSidebar"},{"id":"guides/components/sprite-sheets","path":"/guides/components/sprite-sheets","sidebar":"guidesSidebar"},{"id":"guides/components/sprites","path":"/guides/components/sprites","sidebar":"guidesSidebar"},{"id":"guides/components/text","path":"/guides/components/text","sidebar":"guidesSidebar"},{"id":"guides/components/textures","path":"/guides/components/textures","sidebar":"guidesSidebar"},{"id":"guides/index","path":"/guides/","sidebar":"guidesSidebar"},{"id":"guides/migrations/v5","path":"/guides/migrations/v5","sidebar":"guidesSidebar"},{"id":"guides/migrations/v6","path":"/guides/migrations/v6","sidebar":"guidesSidebar"},{"id":"guides/migrations/v7","path":"/guides/migrations/v7","sidebar":"guidesSidebar"},{"id":"guides/migrations/v8","path":"/guides/migrations/v8","sidebar":"guidesSidebar"},{"id":"guides/production/performance-tips","path":"/guides/production/performance-tips","sidebar":"guidesSidebar"},{"id":"playground/index","path":"/playground/"},{"id":"tutorials/choo-choo-train","path":"/tutorials/choo-choo-train"},{"id":"tutorials/fish-pond","path":"/tutorials/fish-pond"},{"id":"tutorials/getting-started","path":"/tutorials/getting-started"},{"id":"tutorials/index","path":"/tutorials/"},{"id":"tutorials/spine-boy-adventure","path":"/tutorials/spine-boy-adventure"}],"draftIds":[],"sidebars":{"guidesSidebar":{"link":{"path":"/guides/","label":"guides/index"}},"examplesSidebar":{"link":{"path":"/examples/","label":"examples/index"}}}},{"name":"7.x","label":"v7.x","isLast":true,"path":"/7.x","mainDocId":"guides/index","docs":[{"id":"branding","path":"/7.x/branding"},{"id":"examples/advanced/collision-detection","path":"/7.x/examples/advanced/collision-detection","sidebar":"examplesSidebar"},{"id":"examples/advanced/mouse-trail","path":"/7.x/examples/advanced/mouse-trail","sidebar":"examplesSidebar"},{"id":"examples/advanced/scratch-card","path":"/7.x/examples/advanced/scratch-card","sidebar":"examplesSidebar"},{"id":"examples/advanced/screen-shot","path":"/7.x/examples/advanced/screen-shot","sidebar":"examplesSidebar"},{"id":"examples/advanced/slots","path":"/7.x/examples/advanced/slots","sidebar":"examplesSidebar"},{"id":"examples/advanced/spinners","path":"/7.x/examples/advanced/spinners","sidebar":"examplesSidebar"},{"id":"examples/advanced/star-warp","path":"/7.x/examples/advanced/star-warp","sidebar":"examplesSidebar"},{"id":"examples/assets/async","path":"/7.x/examples/assets/async","sidebar":"examplesSidebar"},{"id":"examples/assets/background","path":"/7.x/examples/assets/background","sidebar":"examplesSidebar"},{"id":"examples/assets/bundle","path":"/7.x/examples/assets/bundle","sidebar":"examplesSidebar"},{"id":"examples/assets/multiple","path":"/7.x/examples/assets/multiple","sidebar":"examplesSidebar"},{"id":"examples/assets/promise","path":"/7.x/examples/assets/promise","sidebar":"examplesSidebar"},{"id":"examples/basic/blend-modes","path":"/7.x/examples/basic/blend-modes","sidebar":"examplesSidebar"},{"id":"examples/basic/cache-as-bitmap","path":"/7.x/examples/basic/cache-as-bitmap","sidebar":"examplesSidebar"},{"id":"examples/basic/container","path":"/7.x/examples/basic/container","sidebar":"examplesSidebar"},{"id":"examples/basic/particle-container","path":"/7.x/examples/basic/particle-container","sidebar":"examplesSidebar"},{"id":"examples/basic/simple-plane","path":"/7.x/examples/basic/simple-plane","sidebar":"examplesSidebar"},{"id":"examples/basic/tinting","path":"/7.x/examples/basic/tinting","sidebar":"examplesSidebar"},{"id":"examples/basic/transparent-background","path":"/7.x/examples/basic/transparent-background","sidebar":"examplesSidebar"},{"id":"examples/events/click","path":"/7.x/examples/events/click","sidebar":"examplesSidebar"},{"id":"examples/events/custom-hitarea","path":"/7.x/examples/events/custom-hitarea","sidebar":"examplesSidebar"},{"id":"examples/events/custom-mouse-icon","path":"/7.x/examples/events/custom-mouse-icon","sidebar":"examplesSidebar"},{"id":"examples/events/dragging","path":"/7.x/examples/events/dragging","sidebar":"examplesSidebar"},{"id":"examples/events/interactivity","path":"/7.x/examples/events/interactivity","sidebar":"examplesSidebar"},{"id":"examples/events/logger","path":"/7.x/examples/events/logger","sidebar":"examplesSidebar"},{"id":"examples/events/nested-boundary-with-projection","path":"/7.x/examples/events/nested-boundary-with-projection","sidebar":"examplesSidebar"},{"id":"examples/events/pointer-tracker","path":"/7.x/examples/events/pointer-tracker","sidebar":"examplesSidebar"},{"id":"examples/events/slider","path":"/7.x/examples/events/slider","sidebar":"examplesSidebar"},{"id":"examples/filters-advanced/custom","path":"/7.x/examples/filters-advanced/custom","sidebar":"examplesSidebar"},{"id":"examples/filters-advanced/mouse-blending","path":"/7.x/examples/filters-advanced/mouse-blending","sidebar":"examplesSidebar"},{"id":"examples/filters-advanced/shader-toy-filter-render-texture","path":"/7.x/examples/filters-advanced/shader-toy-filter-render-texture","sidebar":"examplesSidebar"},{"id":"examples/filters-basic/blur","path":"/7.x/examples/filters-basic/blur","sidebar":"examplesSidebar"},{"id":"examples/filters-basic/color-matrix","path":"/7.x/examples/filters-basic/color-matrix","sidebar":"examplesSidebar"},{"id":"examples/filters-basic/displacement-map-crawlies","path":"/7.x/examples/filters-basic/displacement-map-crawlies","sidebar":"examplesSidebar"},{"id":"examples/filters-basic/displacement-map-flag","path":"/7.x/examples/filters-basic/displacement-map-flag","sidebar":"examplesSidebar"},{"id":"examples/graphics/advanced","path":"/7.x/examples/graphics/advanced","sidebar":"examplesSidebar"},{"id":"examples/graphics/dynamic","path":"/7.x/examples/graphics/dynamic","sidebar":"examplesSidebar"},{"id":"examples/graphics/simple","path":"/7.x/examples/graphics/simple","sidebar":"examplesSidebar"},{"id":"examples/index","path":"/7.x/examples/","sidebar":"examplesSidebar"},{"id":"examples/masks/filter","path":"/7.x/examples/masks/filter","sidebar":"examplesSidebar"},{"id":"examples/masks/graphics","path":"/7.x/examples/masks/graphics","sidebar":"examplesSidebar"},{"id":"examples/masks/sprite","path":"/7.x/examples/masks/sprite","sidebar":"examplesSidebar"},{"id":"examples/mesh-and-shaders/instanced-geometry","path":"/7.x/examples/mesh-and-shaders/instanced-geometry","sidebar":"examplesSidebar"},{"id":"examples/mesh-and-shaders/interleaving-geometry","path":"/7.x/examples/mesh-and-shaders/interleaving-geometry","sidebar":"examplesSidebar"},{"id":"examples/mesh-and-shaders/merging-geometry","path":"/7.x/examples/mesh-and-shaders/merging-geometry","sidebar":"examplesSidebar"},{"id":"examples/mesh-and-shaders/multi-pass-shader-generated-mesh","path":"/7.x/examples/mesh-and-shaders/multi-pass-shader-generated-mesh","sidebar":"examplesSidebar"},{"id":"examples/mesh-and-shaders/shader-toy-mesh","path":"/7.x/examples/mesh-and-shaders/shader-toy-mesh","sidebar":"examplesSidebar"},{"id":"examples/mesh-and-shaders/shared-shader","path":"/7.x/examples/mesh-and-shaders/shared-shader","sidebar":"examplesSidebar"},{"id":"examples/mesh-and-shaders/sharing-geometry","path":"/7.x/examples/mesh-and-shaders/sharing-geometry","sidebar":"examplesSidebar"},{"id":"examples/mesh-and-shaders/textured-mesh-advanced","path":"/7.x/examples/mesh-and-shaders/textured-mesh-advanced","sidebar":"examplesSidebar"},{"id":"examples/mesh-and-shaders/textured-mesh-basic","path":"/7.x/examples/mesh-and-shaders/textured-mesh-basic","sidebar":"examplesSidebar"},{"id":"examples/mesh-and-shaders/triangle","path":"/7.x/examples/mesh-and-shaders/triangle","sidebar":"examplesSidebar"},{"id":"examples/mesh-and-shaders/triangle-color","path":"/7.x/examples/mesh-and-shaders/triangle-color","sidebar":"examplesSidebar"},{"id":"examples/mesh-and-shaders/triangle-textured","path":"/7.x/examples/mesh-and-shaders/triangle-textured","sidebar":"examplesSidebar"},{"id":"examples/mesh-and-shaders/uniforms","path":"/7.x/examples/mesh-and-shaders/uniforms","sidebar":"examplesSidebar"},{"id":"examples/offscreen-canvas/basic","path":"/7.x/examples/offscreen-canvas/basic","sidebar":"examplesSidebar"},{"id":"examples/sprite/animated-sprite-animation-speed","path":"/7.x/examples/sprite/animated-sprite-animation-speed","sidebar":"examplesSidebar"},{"id":"examples/sprite/animated-sprite-explosion","path":"/7.x/examples/sprite/animated-sprite-explosion","sidebar":"examplesSidebar"},{"id":"examples/sprite/animated-sprite-jet","path":"/7.x/examples/sprite/animated-sprite-jet","sidebar":"examplesSidebar"},{"id":"examples/sprite/basic","path":"/7.x/examples/sprite/basic","sidebar":"examplesSidebar"},{"id":"examples/sprite/texture-swap","path":"/7.x/examples/sprite/texture-swap","sidebar":"examplesSidebar"},{"id":"examples/sprite/tiling-sprite","path":"/7.x/examples/sprite/tiling-sprite","sidebar":"examplesSidebar"},{"id":"examples/sprite/video","path":"/7.x/examples/sprite/video","sidebar":"examplesSidebar"},{"id":"examples/text/bitmap-text","path":"/7.x/examples/text/bitmap-text","sidebar":"examplesSidebar"},{"id":"examples/text/from-font","path":"/7.x/examples/text/from-font","sidebar":"examplesSidebar"},{"id":"examples/text/pixi-text","path":"/7.x/examples/text/pixi-text","sidebar":"examplesSidebar"},{"id":"examples/text/web-font","path":"/7.x/examples/text/web-font","sidebar":"examplesSidebar"},{"id":"examples/textures/gradient-basic","path":"/7.x/examples/textures/gradient-basic","sidebar":"examplesSidebar"},{"id":"examples/textures/gradient-resource","path":"/7.x/examples/textures/gradient-resource","sidebar":"examplesSidebar"},{"id":"examples/textures/render-texture-advanced","path":"/7.x/examples/textures/render-texture-advanced","sidebar":"examplesSidebar"},{"id":"examples/textures/render-texture-basic","path":"/7.x/examples/textures/render-texture-basic","sidebar":"examplesSidebar"},{"id":"examples/textures/texture-rotate","path":"/7.x/examples/textures/texture-rotate","sidebar":"examplesSidebar"},{"id":"faq","path":"/7.x/faq"},{"id":"guides/basics/architecture-overview","path":"/7.x/guides/basics/architecture-overview","sidebar":"guidesSidebar"},{"id":"guides/basics/getting-started","path":"/7.x/guides/basics/getting-started","sidebar":"guidesSidebar"},{"id":"guides/basics/render-loop","path":"/7.x/guides/basics/render-loop","sidebar":"guidesSidebar"},{"id":"guides/basics/scene-graph","path":"/7.x/guides/basics/scene-graph","sidebar":"guidesSidebar"},{"id":"guides/basics/what-pixijs-is","path":"/7.x/guides/basics/what-pixijs-is","sidebar":"guidesSidebar"},{"id":"guides/basics/what-pixijs-is-not","path":"/7.x/guides/basics/what-pixijs-is-not","sidebar":"guidesSidebar"},{"id":"guides/components/assets","path":"/7.x/guides/components/assets","sidebar":"guidesSidebar"},{"id":"guides/components/containers","path":"/7.x/guides/components/containers","sidebar":"guidesSidebar"},{"id":"guides/components/display-object","path":"/7.x/guides/components/display-object","sidebar":"guidesSidebar"},{"id":"guides/components/graphics","path":"/7.x/guides/components/graphics","sidebar":"guidesSidebar"},{"id":"guides/components/interaction","path":"/7.x/guides/components/interaction","sidebar":"guidesSidebar"},{"id":"guides/components/sprite-sheets","path":"/7.x/guides/components/sprite-sheets","sidebar":"guidesSidebar"},{"id":"guides/components/sprites","path":"/7.x/guides/components/sprites","sidebar":"guidesSidebar"},{"id":"guides/components/text","path":"/7.x/guides/components/text","sidebar":"guidesSidebar"},{"id":"guides/components/textures","path":"/7.x/guides/components/textures","sidebar":"guidesSidebar"},{"id":"guides/index","path":"/7.x/guides/","sidebar":"guidesSidebar"},{"id":"guides/migrations/upgrading","path":"/7.x/guides/migrations/upgrading","sidebar":"guidesSidebar"},{"id":"guides/migrations/v5","path":"/7.x/guides/migrations/v5","sidebar":"guidesSidebar"},{"id":"guides/migrations/v6","path":"/7.x/guides/migrations/v6","sidebar":"guidesSidebar"},{"id":"guides/migrations/v7","path":"/7.x/guides/migrations/v7","sidebar":"guidesSidebar"},{"id":"guides/production/performance-tips","path":"/7.x/guides/production/performance-tips","sidebar":"guidesSidebar"},{"id":"playground/index","path":"/7.x/playground/"},{"id":"tutorials/getting-started","path":"/7.x/tutorials/getting-started"},{"id":"tutorials/index","path":"/7.x/tutorials/"}],"draftIds":[],"sidebars":{"guidesSidebar":{"link":{"path":"/7.x/guides/","label":"guides/index"}},"examplesSidebar":{"link":{"path":"/7.x/examples/","label":"version-7.x/examples/index"}}}}],"breadcrumbs":true}}}'),s=JSON.parse('{"defaultLocale":"en","locales":["en"],"path":"i18n","currentLocale":"en","localeConfigs":{"en":{"label":"English","direction":"ltr","htmlLang":"en","calendar":"gregory","path":"en"}}}');var o=n(7529);const l=JSON.parse('{"docusaurusVersion":"2.3.1","siteVersion":"0.0.0","pluginVersions":{"docusaurus-plugin-content-docs":{"type":"package","name":"@docusaurus/plugin-content-docs","version":"2.3.1"},"docusaurus-plugin-content-blog":{"type":"package","name":"@docusaurus/plugin-content-blog","version":"2.3.1"},"docusaurus-plugin-content-pages":{"type":"package","name":"@docusaurus/plugin-content-pages","version":"2.3.1"},"docusaurus-plugin-google-analytics":{"type":"package","name":"@docusaurus/plugin-google-analytics","version":"2.3.1"},"docusaurus-plugin-sitemap":{"type":"package","name":"@docusaurus/plugin-sitemap","version":"2.3.1"},"docusaurus-theme-classic":{"type":"package","name":"@docusaurus/theme-classic","version":"2.3.1"},"docusaurus-plugin-sass":{"type":"package","name":"docusaurus-plugin-sass","version":"0.2.3"},"@easyops-cn/docusaurus-search-local":{"type":"package","name":"@easyops-cn/docusaurus-search-local","version":"0.35.0"}}}');var c=n(5893);const u={siteConfig:a.default,siteMetadata:l,globalData:i,i18n:s,codeTranslations:o},d=r.createContext(u);function p(e){let{children:t}=e;return(0,c.jsx)(d.Provider,{value:u,children:t})}},4763:(e,t,n)=>{"use strict";n.d(t,{Z:()=>d});var r=n(7294),a=n(412),i=n(5742),s=n(9860),o=n(5893);function l(e){let{error:t,tryAgain:n}=e;return(0,o.jsxs)("div",{style:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"center",height:"50vh",width:"100%",fontSize:"20px"},children:[(0,o.jsx)("h1",{children:"This page crashed."}),(0,o.jsx)("p",{children:t.message}),(0,o.jsx)("button",{type:"button",onClick:n,children:"Try again"})]})}function c(e){let{error:t,tryAgain:n}=e;return(0,o.jsxs)(d,{fallback:()=>(0,o.jsx)(l,{error:t,tryAgain:n}),children:[(0,o.jsx)(i.Z,{children:(0,o.jsx)("title",{children:"Page Error"})}),(0,o.jsx)(s.Z,{children:(0,o.jsx)(l,{error:t,tryAgain:n})})]})}const u=e=>(0,o.jsx)(c,{...e});class d extends r.Component{constructor(e){super(e),this.state={error:null}}componentDidCatch(e){a.Z.canUseDOM&&this.setState({error:e})}render(){const{children:e}=this.props,{error:t}=this.state;if(t){const e={error:t,tryAgain:()=>this.setState({error:null})};return(this.props.fallback??u)(e)}return e??null}}},412:(e,t,n)=>{"use strict";n.d(t,{Z:()=>a});const r="undefined"!=typeof window&&"document"in window&&"createElement"in window.document,a={canUseDOM:r,canUseEventListeners:r&&("addEventListener"in window||"attachEvent"in window),canUseIntersectionObserver:r&&"IntersectionObserver"in window,canUseViewport:r&&"screen"in window}},5742:(e,t,n)=>{"use strict";n.d(t,{Z:()=>i});n(7294);var r=n(405),a=n(5893);function i(e){return(0,a.jsx)(r.ql,{...e})}},9960:(e,t,n)=>{"use strict";n.d(t,{Z:()=>m});var r=n(7294),a=n(3727),i=n(8780),s=n(2263),o=n(3919),l=n(412),c=n(5893);const u=r.createContext({collectLink:()=>{}});var d=n(4996);function p(e,t){var n;let{isNavLink:p,to:m,href:f,activeClassName:h,isActive:g,"data-noBrokenLinkCheck":b,autoAddBaseUrl:x=!0,...v}=e;const{siteConfig:{trailingSlash:y,baseUrl:w}}=(0,s.Z)(),{withBaseUrl:k}=(0,d.C)(),S=(0,r.useContext)(u),_=(0,r.useRef)(null);(0,r.useImperativeHandle)(t,(()=>_.current));const E=m||f;const T=(0,o.Z)(E),C=null==E?void 0:E.replace("pathname://","");let P=void 0!==C?(j=C,x&&(e=>e.startsWith("/"))(j)?k(j):j):void 0;var j;P&&T&&(P=(0,i.applyTrailingSlash)(P,{trailingSlash:y,baseUrl:w}));const L=(0,r.useRef)(!1),R=p?a.OL:a.rU,N=l.Z.canUseIntersectionObserver,A=(0,r.useRef)(),O=()=>{L.current||null==P||(window.docusaurus.preload(P),L.current=!0)};(0,r.useEffect)((()=>(!N&&T&&null!=P&&window.docusaurus.prefetch(P),()=>{N&&A.current&&A.current.disconnect()})),[A,P,N,T]);const I=(null==(n=P)?void 0:n.startsWith("#"))??!1,D=!P||!T||I;return D||b||S.collectLink(P),D?(0,c.jsx)("a",{ref:_,href:P,...E&&!T&&{target:"_blank",rel:"noopener noreferrer"},...v}):(0,c.jsx)(R,{...v,onMouseEnter:O,onTouchStart:O,innerRef:e=>{_.current=e,N&&e&&T&&(A.current=new window.IntersectionObserver((t=>{t.forEach((t=>{e===t.target&&(t.isIntersecting||t.intersectionRatio>0)&&(A.current.unobserve(e),A.current.disconnect(),null!=P&&window.docusaurus.prefetch(P))}))})),A.current.observe(e))},to:P,...p&&{isActive:g,activeClassName:h}})}const m=r.forwardRef(p)},5999:(e,t,n)=>{"use strict";n.d(t,{Z:()=>c,I:()=>l});var r=n(7294),a=n(5893);function i(e,t){const n=e.split(/(\{\w+\})/).map(((e,n)=>{if(n%2==1){const n=null==t?void 0:t[e.slice(1,-1)];if(void 0!==n)return n}return e}));return n.some((e=>(0,r.isValidElement)(e)))?n.map(((e,t)=>(0,r.isValidElement)(e)?r.cloneElement(e,{key:t}):e)).filter((e=>""!==e)):n.join("")}var s=n(7529);function o(e){let{id:t,message:n}=e;if(void 0===t&&void 0===n)throw new Error("Docusaurus translation declarations must have at least a translation id or a default translation message");return s[t??n]??n??t}function l(e,t){let{message:n,id:r}=e;return i(o({message:n,id:r}),t)}function c(e){let{children:t,id:n,values:r}=e;if(t&&"string"!=typeof t)throw console.warn("Illegal children",t),new Error("The Docusaurus component only accept simple string values");const s=o({message:t,id:n});return(0,a.jsx)(a.Fragment,{children:i(s,r)})}},9935:(e,t,n)=>{"use strict";n.d(t,{m:()=>r});const r="default"},3919:(e,t,n)=>{"use strict";function r(e){return/^(?:\w*:|\/\/)/.test(e)}function a(e){return void 0!==e&&!r(e)}n.d(t,{Z:()=>a,b:()=>r})},4996:(e,t,n)=>{"use strict";n.d(t,{C:()=>s,Z:()=>o});var r=n(7294),a=n(2263),i=n(3919);function s(){const{siteConfig:{baseUrl:e,url:t}}=(0,a.Z)(),n=(0,r.useCallback)(((n,r)=>function(e,t,n,r){let{forcePrependBaseUrl:a=!1,absolute:s=!1}=void 0===r?{}:r;if(!n||n.startsWith("#")||(0,i.b)(n))return n;if(a)return t+n.replace(/^\//,"");if(n===t.replace(/\/$/,""))return t;const o=n.startsWith(t)?n:t+n.replace(/^\//,"");return s?e+o:o}(t,e,n,r)),[t,e]);return{withBaseUrl:n}}function o(e,t){void 0===t&&(t={});const{withBaseUrl:n}=s();return n(e,t)}},2263:(e,t,n)=>{"use strict";n.d(t,{Z:()=>i});var r=n(7294),a=n(8940);function i(){return(0,r.useContext)(a._)}},2389:(e,t,n)=>{"use strict";n.d(t,{Z:()=>i});var r=n(7294),a=n(8934);function i(){return(0,r.useContext)(a._)}},9670:(e,t,n)=>{"use strict";n.d(t,{Z:()=>r});function r(e){const t={};return function e(n,r){Object.entries(n).forEach((n=>{let[a,i]=n;const s=r?`${r}.${a}`:a;var o;"object"==typeof(o=i)&&o&&Object.keys(o).length>0?e(i,s):t[s]=i}))}(e),t}},226:(e,t,n)=>{"use strict";n.d(t,{_:()=>i,z:()=>s});var r=n(7294),a=n(5893);const i=r.createContext(null);function s(e){let{children:t,value:n}=e;const s=r.useContext(i),o=(0,r.useMemo)((()=>function(e){let{parent:t,value:n}=e;if(!t){if(!n)throw new Error("Unexpected: no Docusaurus route context found");if(!("plugin"in n))throw new Error("Unexpected: Docusaurus topmost route context has no `plugin` attribute");return n}const r={...t.data,...null==n?void 0:n.data};return{plugin:t.plugin,data:r}}({parent:s,value:n})),[s,n]);return(0,a.jsx)(i.Provider,{value:o,children:t})}},143:(e,t,n)=>{"use strict";n.d(t,{Iw:()=>h,gA:()=>p,_r:()=>u,Jo:()=>g,zh:()=>d,yW:()=>f,gB:()=>m});var r=n(6550),a=n(2263),i=n(9935);function s(e,t){void 0===t&&(t={});const n=function(){const{globalData:e}=(0,a.Z)();return e}()[e];if(!n&&t.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin.`);return n}const o=e=>e.versions.find((e=>e.isLast));function l(e,t){const n=function(e,t){const n=o(e);return[...e.versions.filter((e=>e!==n)),n].find((e=>!!(0,r.LX)(t,{path:e.path,exact:!1,strict:!1})))}(e,t),a=null==n?void 0:n.docs.find((e=>!!(0,r.LX)(t,{path:e.path,exact:!0,strict:!1})));return{activeVersion:n,activeDoc:a,alternateDocVersions:a?function(t){const n={};return e.versions.forEach((e=>{e.docs.forEach((r=>{r.id===t&&(n[e.name]=r)}))})),n}(a.id):{}}}const c={},u=()=>s("docusaurus-plugin-content-docs")??c,d=e=>function(e,t,n){void 0===t&&(t=i.m),void 0===n&&(n={});const r=s(e),a=null==r?void 0:r[t];if(!a&&n.failfast)throw new Error(`Docusaurus plugin global data not found for "${e}" plugin with id "${t}".`);return a}("docusaurus-plugin-content-docs",e,{failfast:!0});function p(e){void 0===e&&(e={});const t=u(),{pathname:n}=(0,r.TH)();return function(e,t,n){void 0===n&&(n={});const a=Object.entries(e).sort(((e,t)=>t[1].path.localeCompare(e[1].path))).find((e=>{let[,n]=e;return!!(0,r.LX)(t,{path:n.path,exact:!1,strict:!1})})),i=a?{pluginId:a[0],pluginData:a[1]}:void 0;if(!i&&n.failfast)throw new Error(`Can't find active docs plugin for "${t}" pathname, while it was expected to be found. Maybe you tried to use a docs feature that can only be used on a docs-related page? Existing docs plugin paths are: ${Object.values(e).map((e=>e.path)).join(", ")}`);return i}(t,n,e)}function m(e){return d(e).versions}function f(e){const t=d(e);return o(t)}function h(e){const t=d(e),{pathname:n}=(0,r.TH)();return l(t,n)}function g(e){const t=d(e),{pathname:n}=(0,r.TH)();return function(e,t){const n=o(e);return{latestDocSuggestion:l(e,t).alternateDocVersions[n.name],latestVersionSuggestion:n}}(t,n)}},4367:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>r});const r={onRouteDidUpdate(e){let{location:t,previousLocation:n}=e;!n||t.pathname===n.pathname&&t.search===n.search&&t.hash===n.hash||(window.ga("set","page",t.pathname+t.search+t.hash),window.ga("send","pageview"))}}},8320:(e,t,n)=>{"use strict";n.r(t),n.d(t,{default:()=>i});var r=n(4865),a=n.n(r);a().configure({showSpinner:!1});const i={onRouteUpdate(e){let{location:t,previousLocation:n}=e;if(n&&t.pathname!==n.pathname){const e=window.setTimeout((()=>{a().start()}),200);return()=>window.clearTimeout(e)}},onRouteDidUpdate(){a().done()}}},3310:(e,t,n)=>{"use strict";n.r(t);var r=n(7410),a=n(6809);!function(e){const{themeConfig:{prism:t}}=a.default,{additionalLanguages:r}=t;globalThis.Prism=e,r.forEach((e=>{n(6726)(`./prism-${e}`)})),delete globalThis.Prism}(r.Z)},9471:(e,t,n)=>{"use strict";n.d(t,{Z:()=>i});n(7294);const r="iconExternalLink_nPIU";var a=n(5893);function i(e){let{width:t=13.5,height:n=13.5}=e;return(0,a.jsx)("svg",{width:t,height:n,"aria-hidden":"true",viewBox:"0 0 24 24",className:r,children:(0,a.jsx)("path",{fill:"currentColor",d:"M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"})})}},9860:(e,t,n)=>{"use strict";n.d(t,{Z:()=>Yt});var r=n(7294),a=n(6010),i=n(4763),s=n(1944),o=n(6550),l=n(5999),c=n(5936),u=n(5893);const d="docusaurus_skipToContent_fallback";function p(e){e.setAttribute("tabindex","-1"),e.focus(),e.removeAttribute("tabindex")}function m(){const e=(0,r.useRef)(null),{action:t}=(0,o.k6)(),n=(0,r.useCallback)((e=>{e.preventDefault();const t=document.querySelector("main:first-of-type")??document.getElementById(d);t&&p(t)}),[]);return(0,c.S)((n=>{let{location:r}=n;e.current&&!r.hash&&"PUSH"===t&&p(e.current)})),{containerRef:e,onClick:n}}const f=(0,l.I)({id:"theme.common.skipToMainContent",description:"The skip to content label used for accessibility, allowing to rapidly navigate to main content with keyboard tab/enter navigation",message:"Skip to main content"});function h(e){const t=e.children??f,{containerRef:n,onClick:r}=m();return(0,u.jsx)("div",{ref:n,role:"region","aria-label":f,children:(0,u.jsx)("a",{...e,href:`#${d}`,onClick:r,children:t})})}var g=n(5281),b=n(9727);const x="skipToContent_fXgn";function v(){return(0,u.jsx)(h,{className:x})}var y=n(6668),w=n(9689);function k(e){let{width:t=21,height:n=21,color:r="currentColor",strokeWidth:a=1.2,className:i,...s}=e;return(0,u.jsx)("svg",{viewBox:"0 0 15 15",width:t,height:n,...s,children:(0,u.jsx)("g",{stroke:r,strokeWidth:a,children:(0,u.jsx)("path",{d:"M.75.75l13.5 13.5M14.25.75L.75 14.25"})})})}const S="closeButton_CVFx";function _(e){return(0,u.jsx)("button",{type:"button","aria-label":(0,l.I)({id:"theme.AnnouncementBar.closeButtonAriaLabel",message:"Close",description:"The ARIA label for close button of announcement bar"}),...e,className:(0,a.Z)("clean-btn close",S,e.className),children:(0,u.jsx)(k,{width:14,height:14,strokeWidth:3.1})})}const E="content_knG7";function T(e){const{announcementBar:t}=(0,y.L)(),{content:n}=t;return(0,u.jsx)("div",{...e,className:(0,a.Z)(E,e.className),dangerouslySetInnerHTML:{__html:n}})}const C="announcementBar_mb4j",P="announcementBarPlaceholder_vyr4",j="announcementBarClose_gvF7",L="announcementBarContent_xLdY";function R(){const{announcementBar:e}=(0,y.L)(),{isActive:t,close:n}=(0,w.nT)();if(!t)return null;const{backgroundColor:r,textColor:a,isCloseable:i}=e;return(0,u.jsxs)("div",{className:C,style:{backgroundColor:r,color:a},role:"banner",children:[i&&(0,u.jsx)("div",{className:P}),(0,u.jsx)(T,{className:L}),i&&(0,u.jsx)(_,{onClick:n,className:j})]})}var N=n(2961),A=n(2466);var O=n(902),I=n(3102);const D=r.createContext(null);function M(e){let{children:t}=e;const n=function(){const e=(0,N.e)(),t=(0,I.HY)(),[n,a]=(0,r.useState)(!1),i=null!==t.component,s=(0,O.D9)(i);return(0,r.useEffect)((()=>{i&&!s&&a(!0)}),[i,s]),(0,r.useEffect)((()=>{i?e.shown||a(!0):a(!1)}),[e.shown,i]),(0,r.useMemo)((()=>[n,a]),[n])}();return(0,u.jsx)(D.Provider,{value:n,children:t})}function F(e){if(e.component){const t=e.component;return(0,u.jsx)(t,{...e.props})}}function B(){const e=(0,r.useContext)(D);if(!e)throw new O.i6("NavbarSecondaryMenuDisplayProvider");const[t,n]=e,a=(0,r.useCallback)((()=>n(!1)),[n]),i=(0,I.HY)();return(0,r.useMemo)((()=>({shown:t,hide:a,content:F(i)})),[a,i,t])}function z(e){let{header:t,primaryMenu:n,secondaryMenu:r}=e;const{shown:i}=B();return(0,u.jsxs)("div",{className:"navbar-sidebar",children:[t,(0,u.jsxs)("div",{className:(0,a.Z)("navbar-sidebar__items",{"navbar-sidebar__items--show-secondary":i}),children:[(0,u.jsx)("div",{className:"navbar-sidebar__item menu",children:n}),(0,u.jsx)("div",{className:"navbar-sidebar__item menu",children:r})]})]})}var $=n(2949),U=n(2389);function q(e){return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,u.jsx)("path",{fill:"currentColor",d:"M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"})})}function H(e){return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:24,height:24,...e,children:(0,u.jsx)("path",{fill:"currentColor",d:"M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"})})}const G={toggle:"toggle_vylO",toggleButton:"toggleButton_gllP",darkToggleIcon:"darkToggleIcon_wfgR",lightToggleIcon:"lightToggleIcon_pyhR",toggleButtonDisabled:"toggleButtonDisabled_aARS"};function Q(e){let{className:t,value:n,onChange:r}=e;const i=(0,U.Z)(),s=(0,l.I)({message:"Switch between dark and light mode (currently {mode})",id:"theme.colorToggle.ariaLabel",description:"The ARIA label for the navbar color mode toggle"},{mode:"dark"===n?(0,l.I)({message:"dark mode",id:"theme.colorToggle.ariaLabel.mode.dark",description:"The name for the dark color mode"}):(0,l.I)({message:"light mode",id:"theme.colorToggle.ariaLabel.mode.light",description:"The name for the light color mode"})});return(0,u.jsx)("div",{className:(0,a.Z)(G.toggle,t),children:(0,u.jsxs)("button",{className:(0,a.Z)("clean-btn",G.toggleButton,!i&&G.toggleButtonDisabled),type:"button",onClick:()=>r("dark"===n?"light":"dark"),disabled:!i,title:s,"aria-label":s,"aria-live":"polite",children:[(0,u.jsx)(q,{className:(0,a.Z)(G.toggleIcon,G.lightToggleIcon)}),(0,u.jsx)(H,{className:(0,a.Z)(G.toggleIcon,G.darkToggleIcon)})]})})}const V=r.memo(Q);function W(e){let{className:t}=e;const n=(0,y.L)().colorMode.disableSwitch,{colorMode:r,setColorMode:a}=(0,$.I)();return n?null:(0,u.jsx)(V,{className:t,value:r,onChange:a})}var Z=n(1327);function K(){return(0,u.jsx)(Z.Z,{className:"navbar__brand",imageClassName:"navbar__logo",titleClassName:"navbar__title text--truncate"})}function Y(){const e=(0,N.e)();return(0,u.jsx)("button",{type:"button","aria-label":(0,l.I)({id:"theme.docs.sidebar.closeSidebarButtonAriaLabel",message:"Close navigation bar",description:"The ARIA label for close button of mobile sidebar"}),className:"clean-btn navbar-sidebar__close",onClick:()=>e.toggle(),children:(0,u.jsx)(k,{color:"var(--ifm-color-emphasis-600)"})})}function X(){return(0,u.jsxs)("div",{className:"navbar-sidebar__brand",children:[(0,u.jsx)(K,{}),(0,u.jsx)(W,{className:"margin-right--md"}),(0,u.jsx)(Y,{})]})}var J=n(9960),ee=n(4996),te=n(3919);function ne(e,t){return void 0!==e&&void 0!==t&&new RegExp(e,"gi").test(t)}var re=n(9471);function ae(e){let{activeBasePath:t,activeBaseRegex:n,to:r,href:a,label:i,html:s,isDropdownLink:o,prependBaseUrlToHref:l,...c}=e;const d=(0,ee.Z)(r),p=(0,ee.Z)(t),m=(0,ee.Z)(a,{forcePrependBaseUrl:!0}),f=i&&a&&!(0,te.Z)(a),h=s?{dangerouslySetInnerHTML:{__html:s}}:{children:(0,u.jsxs)(u.Fragment,{children:[i,f&&(0,u.jsx)(re.Z,{...o&&{width:12,height:12}})]})};return a?(0,u.jsx)(J.Z,{href:l?m:a,...c,...h}):(0,u.jsx)(J.Z,{to:d,isNavLink:!0,...(t||n)&&{isActive:(e,t)=>n?ne(n,t.pathname):t.pathname.startsWith(p)},...c,...h})}function ie(e){let{className:t,isDropdownItem:n=!1,...r}=e;const i=(0,u.jsx)(ae,{className:(0,a.Z)(n?"dropdown__link":"navbar__item navbar__link",t),isDropdownLink:n,...r});return n?(0,u.jsx)("li",{children:i}):i}function se(e){let{className:t,isDropdownItem:n,...r}=e;return(0,u.jsx)("li",{className:"menu__list-item",children:(0,u.jsx)(ae,{className:(0,a.Z)("menu__link",t),...r})})}function oe(e){let{mobile:t=!1,position:n,...r}=e;const a=t?se:ie;return(0,u.jsx)(a,{...r,activeClassName:r.activeClassName??(t?"menu__link--active":"navbar__link--active")})}var le=n(6043),ce=n(8596),ue=n(2263);function de(e,t){return e.some((e=>function(e,t){return!!(0,ce.Mg)(e.to,t)||!!ne(e.activeBaseRegex,t)||!(!e.activeBasePath||!t.startsWith(e.activeBasePath))}(e,t)))}function pe(e){let{items:t,position:n,className:i,onClick:s,...o}=e;const l=(0,r.useRef)(null),[c,d]=(0,r.useState)(!1);return(0,r.useEffect)((()=>{const e=e=>{l.current&&!l.current.contains(e.target)&&d(!1)};return document.addEventListener("mousedown",e),document.addEventListener("touchstart",e),()=>{document.removeEventListener("mousedown",e),document.removeEventListener("touchstart",e)}}),[l]),(0,u.jsxs)("div",{ref:l,className:(0,a.Z)("navbar__item","dropdown","dropdown--hoverable",{"dropdown--right":"right"===n,"dropdown--show":c}),children:[(0,u.jsx)(ae,{"aria-haspopup":"true","aria-expanded":c,role:"button",href:o.to?void 0:"#",className:(0,a.Z)("navbar__link",i),...o,onClick:o.to?void 0:e=>e.preventDefault(),onKeyDown:e=>{"Enter"===e.key&&(e.preventDefault(),d(!c))},children:o.children??o.label}),(0,u.jsx)("ul",{className:"dropdown__menu",children:t.map(((e,n)=>(0,r.createElement)(dt,{isDropdownItem:!0,onKeyDown:e=>{if(n===t.length-1&&"Tab"===e.key){e.preventDefault(),d(!1);const t=l.current.nextElementSibling;if(t){(t instanceof HTMLAnchorElement?t:t.querySelector("a")).focus()}}},activeClassName:"dropdown__link--active",...e,key:n})))})]})}function me(e){let{items:t,className:n,position:i,onClick:s,...l}=e;const c=function(){const{siteConfig:{baseUrl:e}}=(0,ue.Z)(),{pathname:t}=(0,o.TH)();return t.replace(e,"/")}(),d=de(t,c),{collapsed:p,toggleCollapsed:m,setCollapsed:f}=(0,le.u)({initialState:()=>!d});return(0,r.useEffect)((()=>{d&&f(!d)}),[c,d,f]),(0,u.jsxs)("li",{className:(0,a.Z)("menu__list-item",{"menu__list-item--collapsed":p}),children:[(0,u.jsx)(ae,{role:"button",className:(0,a.Z)("menu__link menu__link--sublist menu__link--sublist-caret",n),...l,onClick:e=>{e.preventDefault(),m()},children:l.children??l.label}),(0,u.jsx)(le.z,{lazy:!0,as:"ul",className:"menu__list",collapsed:p,children:t.map(((e,t)=>(0,r.createElement)(dt,{mobile:!0,isDropdownItem:!0,onClick:s,activeClassName:"menu__link--active",...e,key:t})))})]})}function fe(e){let{mobile:t=!1,...n}=e;const r=t?me:pe;return(0,u.jsx)(r,{...n})}var he=n(4711);function ge(e){let{width:t=20,height:n=20,...r}=e;return(0,u.jsx)("svg",{viewBox:"0 0 24 24",width:t,height:n,"aria-hidden":!0,...r,children:(0,u.jsx)("path",{fill:"currentColor",d:"M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"})})}const be="iconLanguage_nlXk";var xe=n(1029),ve=n(412),ye=n(373),we=n(143),ke=n(22),Se=n(8202),_e=n(3926),Ee=n(1073),Te=n(2539),Ce=n(726);const Pe="searchBar_RVTs",je="dropdownMenu_qbY6",Le="searchBarLeft_MXDe",Re="suggestion_fB_2",Ne="cursor_eG29",Ae="hitTree_kk6K",Oe="hitIcon_a7Zy",Ie="hitPath_ieM4",De="noResultsIcon_EBY5",Me="hitFooter_E9YW",Fe="hitWrapper_sAK8",Be="hitTitle_vyVt",ze="hitAction_NqkB",$e="noResults_l6Q3",Ue="searchBarContainer_NW3z",qe="searchBarLoadingRing_YnHq",He="searchClearButton_qk4g",Ge="searchIndexLoading_EJ1f",Qe="searchHintContainer_Pkmr",Ve="searchHint_iIMx",We="focused_OWtg",Ze="input_FOTf",Ke="hint_URu1",Ye="suggestions_X8XU",Xe="dataset_QiCy",Je="empty_eITn";function et(e){let{document:t,type:n,page:r,metadata:a,tokens:i,isInterOfTree:s,isLastOfTree:o}=e;const l=0===n,c=1===n,u=[];s?u.push(''):o&&u.push('');const d=u.map((e=>`${e}`)),p=`${l?'':c?'':''}`,m=[`${(0,Ce.o)(t.t,(0,Ee.m)(a,"t"),i)}`];if(!s&&!o&&xe.H6){const e=r?(r.b??[]).concat(r.t).concat(t.s&&t.s!==r.t?t.s:[]):t.b;m.push(`${(0,_e.e)(e??[])}`)}else l||m.push(`${(0,Te.C)(r.t||(t.u.startsWith("/docs/api-reference/")?"API Reference":""),i)}`);const f=``;return[...d,p,``,...m,"",f].join("")}function tt(){return`${(0,l.I)({id:"theme.SearchBar.noResultsText",message:"No results"})}`}var nt=n(311);async function rt(){const e=await Promise.all([n.e(8443),n.e(5525)]).then(n.t.bind(n,8443,23)),t=e.default;return t.noConflict?t.noConflict():e.noConflict&&e.noConflict(),t}const at="_highlight";const it=function(e){var t;let{handleSearchBarToggle:n}=e;const{siteConfig:{baseUrl:i}}=(0,ue.Z)(),s=(0,we.gA)();let c=i;try{const{preferredVersion:e}=(0,ye.J)((null==s?void 0:s.pluginId)??xe.gQ);e&&!e.isLast&&(c=e.path+"/")}catch(M){if(xe.l9&&!(M instanceof O.i6))throw M}const d=(0,o.k6)(),p=(0,o.TH)(),m=(0,r.useRef)(null),f=(0,r.useRef)(new Map),h=(0,r.useRef)(!1),[g,b]=(0,r.useState)(!1),[x,v]=(0,r.useState)(!1),[y,w]=(0,r.useState)(""),k=(0,r.useRef)(null),S=(0,r.useRef)(""),[_,E]=(0,r.useState)("");(0,r.useEffect)((()=>{if(!Array.isArray(xe.Kc))return;let e="";if(p.pathname.startsWith(c)){const t=p.pathname.substring(c.length),n=xe.Kc.find((e=>t===e||t.startsWith(`${e}/`)));n&&(e=n)}S.current!==e&&(f.current.delete(e),S.current=e),E(e)}),[p.pathname,c]);const T=!!xe.hG&&Array.isArray(xe.Kc)&&""===_,C=(0,r.useCallback)((async()=>{var e;if(T||f.current.get(_))return;f.current.set(_,"loading"),null==(e=k.current)||e.autocomplete.destroy(),b(!0);const[{wrappedIndexes:t,zhDictionary:n},r]=await Promise.all([(0,ke.w)(c,_),rt()]);if(k.current=r(m.current,{hint:!1,autoselect:!0,openOnFocus:!0,cssClasses:{root:(0,a.Z)(Pe,{[Le]:"left"===xe.pu}),noPrefix:!0,dropdownMenu:je,input:Ze,hint:Ke,suggestions:Ye,suggestion:Re,cursor:Ne,dataset:Xe,empty:Je}},[{source:(0,Se.v)(t,n,xe.qo),templates:{suggestion:et,empty:tt,footer:e=>{let{query:t,isEmpty:n}=e;if(n&&!_)return;const r=(e=>{let{query:t,isEmpty:n}=e;const r=document.createElement("a"),a=new URLSearchParams,s=(0,l.I)({id:"theme.SearchBar.seeAll",message:"See all results"}),o=(0,l.I)({id:"theme.SearchBar.seeAllOutsideContext",message:"See results outside {context}"},{context:_}),u=(0,l.I)({id:"theme.SearchBar.searchInContext",message:"See all results in {context}"},{context:_});let p;if(a.set("q",t),p=_&&n?o:_?u:s,Array.isArray(xe.Kc)&&!n&&a.set("ctx",_),c!==i){if(!c.startsWith(i))throw new Error(`Version url '${c}' does not start with base url '${i}', this is a bug of \`@easyops-cn/docusaurus-search-local\`, please report it.`);a.set("version",c.substring(i.length))}const m=`${i}search?${a.toString()}`;return r.href=m,r.textContent=p,r.addEventListener("click",(e=>{var t;e.ctrlKey||e.metaKey||(e.preventDefault(),null==(t=k.current)||t.autocomplete.close(),d.push(m))})),r})({query:t,isEmpty:n}),a=document.createElement("div");return a.className=Me,a.appendChild(r),a}}}]).on("autocomplete:selected",(function(e,t){var n;let{document:{u:r,h:a},tokens:i}=t;null==(n=m.current)||n.blur();let s=r;if(xe.vc&&i.length>0){const e=new URLSearchParams;for(const t of i)e.append(at,t);s+=`?${e.toString()}`}a&&(s+=a),d.push(s)})).on("autocomplete:closed",(()=>{var e;null==(e=m.current)||e.blur()})),f.current.set(_,"done"),b(!1),h.current){const e=m.current;var s;if(e.value)null==(s=k.current)||s.autocomplete.open();e.focus()}}),[T,_,c,i,d]);(0,r.useEffect)((()=>{if(!xe.vc)return;const e=ve.Z.canUseDOM?new URLSearchParams(p.search).getAll(at):[];setTimeout((()=>{var t;const n=document.querySelector("article");if(!n)return;const r=new xe.vc(n);r.unmark(),0!==e.length&&r.mark(e),w(e.join(" ")),null==(t=k.current)||t.autocomplete.setVal(e.join(" "))}))}),[p.search,p.pathname]);const[P,j]=(0,r.useState)(!1),L=(0,r.useCallback)((()=>{h.current=!0,C(),j(!0),null==n||n(!0)}),[n,C]),R=(0,r.useCallback)((()=>{j(!1),null==n||n(!1)}),[n]),N=(0,r.useCallback)((()=>{C()}),[C]),A=(0,r.useCallback)((e=>{w(e.target.value),e.target.value&&v(!0)}),[]),I=!!ve.Z.canUseDOM&&/mac/i.test((null==(t=navigator.userAgentData)?void 0:t.platform)??navigator.platform);(0,r.useEffect)((()=>{if(!xe.AY)return;const e=e=>{var t;!(I?e.metaKey:e.ctrlKey)||"k"!==e.key&&"K"!==e.key||(e.preventDefault(),null==(t=m.current)||t.focus(),L())};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}}),[I,L]);const D=(0,r.useCallback)((()=>{var e;const t=new URLSearchParams(p.search);t.delete(at);const n=t.toString(),r=p.pathname+(""!=n?`?${n}`:"")+p.hash;r!=p.pathname+p.search+p.hash&&d.push(r),w(""),null==(e=k.current)||e.autocomplete.setVal("")}),[p.pathname,p.search,p.hash,d]);return(0,u.jsxs)("div",{className:(0,a.Z)("navbar__search",Ue,{[Ge]:g&&x,[We]:P}),hidden:T,children:[(0,u.jsx)("input",{placeholder:(0,l.I)({id:"theme.SearchBar.label",message:"Search",description:"The ARIA label and placeholder for search button"}),"aria-label":"Search",className:"navbar__search-input",onMouseEnter:N,onFocus:L,onBlur:R,onChange:A,ref:m,value:y}),(0,u.jsx)(nt.Z,{className:qe}),xe.AY&&xe.t_&&(""!==y?(0,u.jsx)("button",{className:He,onClick:D,children:"\u2715"}):ve.Z.canUseDOM&&(0,u.jsxs)("div",{className:Qe,children:[(0,u.jsx)("kbd",{className:Ve,children:I?"\u2318":"ctrl"}),(0,u.jsx)("kbd",{className:Ve,children:"K"})]}))]})},st="searchBox_ZlJk";function ot(e){let{children:t,className:n}=e;return(0,u.jsx)("div",{className:(0,a.Z)(n,st),children:t})}var lt=n(2802);const ct=e=>e.docs.find((t=>t.id===e.mainDocId));const ut={default:oe,localeDropdown:function(e){let{mobile:t,dropdownItemsBefore:n,dropdownItemsAfter:r,...a}=e;const{i18n:{currentLocale:i,locales:s,localeConfigs:c}}=(0,ue.Z)(),d=(0,he.l)(),{search:p,hash:m}=(0,o.TH)(),f=[...n,...s.map((e=>{const n=`${`pathname://${d.createUrl({locale:e,fullyQualified:!1})}`}${p}${m}`;return{label:c[e].label,lang:c[e].htmlLang,to:n,target:"_self",autoAddBaseUrl:!1,className:e===i?t?"menu__link--active":"dropdown__link--active":""}})),...r],h=t?(0,l.I)({message:"Languages",id:"theme.navbar.mobileLanguageDropdown.label",description:"The label for the mobile language switcher dropdown"}):c[i].label;return(0,u.jsx)(fe,{...a,mobile:t,label:(0,u.jsxs)(u.Fragment,{children:[(0,u.jsx)(ge,{className:be}),h]}),items:f})},search:function(e){let{mobile:t,className:n}=e;return t?null:(0,u.jsx)(ot,{className:n,children:(0,u.jsx)(it,{})})},dropdown:fe,html:function(e){let{value:t,className:n,mobile:r=!1,isDropdownItem:i=!1}=e;const s=i?"li":"div";return(0,u.jsx)(s,{className:(0,a.Z)({navbar__item:!r&&!i,"menu__list-item":r},n),dangerouslySetInnerHTML:{__html:t}})},doc:function(e){let{docId:t,label:n,docsPluginId:r,...a}=e;const{activeDoc:i}=(0,we.Iw)(r),s=(0,lt.vY)(t,r);return null===s?null:(0,u.jsx)(oe,{exact:!0,...a,isActive:()=>(null==i?void 0:i.path)===s.path||!(null==i||!i.sidebar)&&i.sidebar===s.sidebar,label:n??s.id,to:s.path})},docSidebar:function(e){let{sidebarId:t,label:n,docsPluginId:r,...a}=e;const{activeDoc:i}=(0,we.Iw)(r),s=(0,lt.oz)(t,r).link;if(!s)throw new Error(`DocSidebarNavbarItem: Sidebar with ID "${t}" doesn't have anything to be linked to.`);return(0,u.jsx)(oe,{exact:!0,...a,isActive:()=>(null==i?void 0:i.sidebar)===t,label:n??s.label,to:s.path})},docsVersion:function(e){let{label:t,to:n,docsPluginId:r,...a}=e;const i=(0,lt.lO)(r)[0],s=t??i.label,o=n??(e=>e.docs.find((t=>t.id===e.mainDocId)))(i).path;return(0,u.jsx)(oe,{...a,label:s,to:o})},docsVersionDropdown:function(e){let{mobile:t,docsPluginId:n,dropdownActiveClassDisabled:r,dropdownItemsBefore:a,dropdownItemsAfter:i,...s}=e;const{search:c,hash:d}=(0,o.TH)(),p=(0,we.Iw)(n),m=(0,we.gB)(n),{savePreferredVersionName:f}=(0,ye.J)(n),h=[...a,...m.map((e=>{const t=p.alternateDocVersions[e.name]??ct(e);return{label:e.label,to:`${t.path}${c}${d}`,isActive:()=>e===p.activeVersion,onClick:()=>f(e.name)}})),...i],g=(0,lt.lO)(n)[0],b=t&&h.length>1?(0,l.I)({id:"theme.navbar.mobileVersionsDropdown.label",message:"Versions",description:"The label for the navbar versions dropdown on mobile view"}):g.label,x=t&&h.length>1?void 0:ct(g).path;return h.length<=1?(0,u.jsx)(oe,{...s,mobile:t,label:b,to:x,isActive:r?()=>!1:void 0}):(0,u.jsx)(fe,{...s,mobile:t,label:b,to:x,items:h,isActive:r?()=>!1:void 0})}};function dt(e){let{type:t,...n}=e;const r=function(e,t){return e&&"default"!==e?e:"items"in t?"dropdown":"default"}(t,n),a=ut[r];if(!a)throw new Error(`No NavbarItem component found for type "${t}".`);return(0,u.jsx)(a,{...n})}const pt="separator_vN2y",mt="socialItems_fmZ5";function ft(){const e=(0,N.e)(),t=(0,y.L)().navbar.items,n=[],a=[];return t.forEach((e=>{var t;null!=(t=e.className)&&t.includes("header-link")?a.push(e):n.push(e)})),(0,u.jsxs)("ul",{className:"menu__list",children:[n.map(((t,n)=>(0,r.createElement)(dt,{mobile:!0,...t,onClick:()=>e.toggle(),key:n}))),(0,u.jsx)("li",{className:pt}),(0,u.jsx)("ul",{className:mt,children:a.map(((t,n)=>(0,r.createElement)(dt,{mobile:!0,...t,onClick:()=>e.toggle(),key:n})))})]})}function ht(e){return(0,u.jsx)("button",{...e,type:"button",className:"clean-btn navbar-sidebar__back",children:(0,u.jsx)(l.Z,{id:"theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel",description:"The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)",children:"\u2190 Back to main menu"})})}function gt(){const e=0===(0,y.L)().navbar.items.length,t=B();return(0,u.jsxs)(u.Fragment,{children:[!e&&(0,u.jsx)(ht,{onClick:()=>t.hide()}),t.content]})}function bt(){const e=(0,N.e)();var t;return void 0===(t=e.shown)&&(t=!0),(0,r.useEffect)((()=>(document.body.style.overflow=t?"hidden":"visible",()=>{document.body.style.overflow="visible"})),[t]),e.shouldRender?(0,u.jsx)(z,{header:(0,u.jsx)(X,{}),primaryMenu:(0,u.jsx)(ft,{}),secondaryMenu:(0,u.jsx)(gt,{})}):null}const xt="navbarHideable_m1mJ",vt="navbarHidden_jGov";function yt(e){return(0,u.jsx)("div",{role:"presentation",...e,className:(0,a.Z)("navbar-sidebar__backdrop",e.className)})}function wt(e){let{children:t}=e;const{navbar:{hideOnScroll:n,style:i}}=(0,y.L)(),s=(0,N.e)(),{navbarRef:o,isNavbarVisible:d}=function(e){const[t,n]=(0,r.useState)(e),a=(0,r.useRef)(!1),i=(0,r.useRef)(0),s=(0,r.useCallback)((e=>{null!==e&&(i.current=e.getBoundingClientRect().height)}),[]);return(0,A.RF)(((t,r)=>{let{scrollY:s}=t;if(!e)return;if(s=o?n(!1):s+c{if(!e)return;const r=t.location.hash;if(r?document.getElementById(r.substring(1)):void 0)return a.current=!0,void n(!1);n(!0)})),{navbarRef:s,isNavbarVisible:t}}(n);return(0,u.jsxs)("nav",{ref:o,"aria-label":(0,l.I)({id:"theme.NavBar.navAriaLabel",message:"Main",description:"The ARIA label for the main navigation"}),className:(0,a.Z)("navbar","navbar--fixed-top",n&&[xt,!d&&vt],{"navbar--dark":"dark"===i,"navbar--primary":"primary"===i,"navbar-sidebar--show":s.shown}),children:[t,(0,u.jsx)(yt,{onClick:s.toggle}),(0,u.jsx)(bt,{})]})}function kt(e){let{width:t=30,height:n=30,className:r,...a}=e;return(0,u.jsx)("svg",{className:r,width:t,height:n,viewBox:"0 0 30 30","aria-hidden":"true",...a,children:(0,u.jsx)("path",{stroke:"currentColor",strokeLinecap:"round",strokeMiterlimit:"10",strokeWidth:"2",d:"M4 7h22M4 15h22M4 23h22"})})}function St(){const{toggle:e,shown:t}=(0,N.e)();return(0,u.jsx)("button",{onClick:e,"aria-label":(0,l.I)({id:"theme.docs.sidebar.toggleSidebarButtonAriaLabel",message:"Toggle navigation bar",description:"The ARIA label for hamburger menu button of mobile navigation"}),"aria-expanded":t,className:"navbar__toggle clean-btn",type:"button",children:(0,u.jsx)(kt,{})})}const _t="separator_k0sQ",Et="short-search_wbo_",Tt="colorModeToggle_SKOt";function Ct(e){let{items:t}=e;return(0,u.jsx)(u.Fragment,{children:t.map(((e,t)=>(0,r.createElement)(dt,{...e,key:t})))})}function Pt(e){let{left:t,right:n}=e;return(0,u.jsxs)("div",{className:"navbar__inner",children:[(0,u.jsx)("div",{className:"navbar__items",children:t}),(0,u.jsx)("div",{className:"navbar__items navbar__items--right",children:n})]})}function jt(){const e=(0,y.L)().navbar.items,[t,n]=function(e){function t(e){return"left"===(e.position??"right")}return[e.filter(t),e.filter((e=>!t(e)))]}(e),a=e.find((e=>"search"===e.type)),i=[],s=[],o=(0,U.Z)(),[l,c]=(0,r.useState)({socials:!o||window.innerWidth>1423,search:!o||window.innerWidth>1479,mobile:!!o&&window.innerWidth<996}),d=()=>{c({socials:window.innerWidth>1423,search:window.innerWidth>1479,mobile:window.innerWidth<996})};return(0,r.useEffect)((()=>(window.addEventListener("resize",d),()=>{window.removeEventListener("resize",d)})),[l]),(0,r.useEffect)((()=>{d()}),[]),n.forEach((e=>{var t;null!=(t=e.className)&&t.includes("header-link")?s.push(e):i.push(e)})),(0,u.jsx)(Pt,{left:(0,u.jsxs)(u.Fragment,{children:[l.mobile&&(0,u.jsx)(St,{}),(0,u.jsx)(K,{}),(0,u.jsx)(Ct,{items:t})]}),right:(0,u.jsxs)(u.Fragment,{children:[!a&&(0,u.jsx)(ot,{className:`${l.search?"":Et}`,children:(0,u.jsx)(it,{})}),(0,u.jsx)("span",{className:_t}),(0,u.jsx)(Ct,{items:i}),(0,u.jsx)("span",{className:_t}),(0,u.jsx)(W,{className:Tt}),l.socials&&(0,u.jsx)("span",{className:_t}),l.socials&&(0,u.jsx)(Ct,{items:s})]})})}function Lt(){return(0,u.jsx)(wt,{children:(0,u.jsx)(jt,{})})}function Rt(e){let{item:t}=e;const{to:n,href:r,label:a,prependBaseUrlToHref:i,...s}=t,o=(0,ee.Z)(n),l=(0,ee.Z)(r,{forcePrependBaseUrl:!0});return(0,u.jsxs)(J.Z,{className:"footer__link-item",...r?{href:i?l:r}:{to:o},...s,children:[a,r&&!(0,te.Z)(r)&&(0,u.jsx)(re.Z,{})]})}function Nt(e){let{item:t}=e;return t.html?(0,u.jsx)("li",{className:"footer__item",dangerouslySetInnerHTML:{__html:t.html}}):(0,u.jsx)("li",{className:"footer__item",children:(0,u.jsx)(Rt,{item:t})},t.href??t.to)}function At(e){let{column:t}=e;return(0,u.jsxs)("div",{className:"col footer__col",children:[(0,u.jsx)("div",{className:"footer__title",children:t.title}),(0,u.jsx)("ul",{className:"footer__items clean-list",children:t.items.map(((e,t)=>(0,u.jsx)(Nt,{item:e},t)))})]})}function Ot(e){let{columns:t}=e;return(0,u.jsx)("div",{className:"row footer__links",children:t.map(((e,t)=>(0,u.jsx)(At,{column:e},t)))})}function It(){return(0,u.jsx)("span",{className:"footer__link-separator",children:"\xb7"})}function Dt(e){let{item:t}=e;return t.html?(0,u.jsx)("span",{className:"footer__link-item",dangerouslySetInnerHTML:{__html:t.html}}):(0,u.jsx)(Rt,{item:t})}function Mt(e){let{links:t}=e;return(0,u.jsx)("div",{className:"footer__links text--center",children:(0,u.jsx)("div",{className:"footer__links",children:t.map(((e,n)=>(0,u.jsxs)(r.Fragment,{children:[(0,u.jsx)(Dt,{item:e}),t.length!==n+1&&(0,u.jsx)(It,{})]},n)))})})}function Ft(e){let{links:t}=e;return function(e){return"title"in e[0]}(t)?(0,u.jsx)(Ot,{columns:t}):(0,u.jsx)(Mt,{links:t})}var Bt=n(941);const zt="footerLogoLink_DDai";function $t(e){let{logo:t}=e;const{withBaseUrl:n}=(0,ee.C)(),r={light:n(t.src),dark:n(t.srcDark??t.src)};return(0,u.jsx)(Bt.Z,{className:(0,a.Z)("footer__logo",t.className),alt:t.alt,sources:r,width:t.width,height:t.height,style:t.style})}function Ut(e){let{logo:t}=e;return t.href?(0,u.jsx)(J.Z,{href:t.href,className:zt,target:t.target,children:(0,u.jsx)($t,{logo:t})}):(0,u.jsx)($t,{logo:t})}function qt(e){let{copyright:t}=e;return(0,u.jsx)("div",{className:"footer__copyright",dangerouslySetInnerHTML:{__html:t}})}function Ht(e){let{style:t,links:n,logo:r,copyright:i}=e;return(0,u.jsx)("footer",{className:(0,a.Z)("footer",{"footer--dark":"dark"===t}),children:(0,u.jsxs)("div",{className:"container container-fluid",children:[n,(r||i)&&(0,u.jsxs)("div",{className:"footer__bottom text--center",children:[r&&(0,u.jsx)("div",{className:"margin-bottom--sm",children:r}),i]})]})})}function Gt(){(0,ue.Z)();const{footer:e}=(0,y.L)(),{pathname:t}=(0,o.TH)();if(!e||["examples","tutorials","playground"].some((e=>t.includes(e))))return null;const{copyright:n,links:r,logo:a,style:i}=e;return(0,u.jsx)(Ht,{style:i,links:r&&r.length>0&&(0,u.jsx)(Ft,{links:r}),logo:a&&(0,u.jsx)(Ut,{logo:a}),copyright:n&&(0,u.jsx)(qt,{copyright:n})})}const Qt=r.memo(Gt),Vt=(0,O.Qc)([$.S,w.pl,A.OC,ye.L5,s.VC,function(e){let{children:t}=e;return(0,u.jsx)(I.n2,{children:(0,u.jsx)(N.M,{children:(0,u.jsx)(M,{children:t})})})}]);function Wt(e){let{children:t}=e;return(0,u.jsx)(Vt,{children:t})}function Zt(e){let{error:t,tryAgain:n}=e;return(0,u.jsx)("main",{className:"container margin-vert--xl",children:(0,u.jsx)("div",{className:"row",children:(0,u.jsxs)("div",{className:"col col--6 col--offset-3",children:[(0,u.jsx)("h1",{className:"hero__title",children:(0,u.jsx)(l.Z,{id:"theme.ErrorPageContent.title",description:"The title of the fallback page when the page crashed",children:"This page crashed."})}),(0,u.jsx)("p",{children:t.message}),(0,u.jsx)("div",{children:(0,u.jsx)("button",{type:"button",onClick:n,children:(0,u.jsx)(l.Z,{id:"theme.ErrorPageContent.tryAgain",description:"The label of the button to try again when the page crashed",children:"Try again"})})})]})})})}const Kt="mainWrapper_z2l0";function Yt(e){const{children:t,noFooter:n,wrapperClassName:r,title:o,description:l}=e;return(0,b.t)(),(0,u.jsxs)(Wt,{children:[(0,u.jsx)(s.d,{title:o,description:l}),(0,u.jsx)(v,{}),(0,u.jsx)(R,{}),(0,u.jsx)(Lt,{}),(0,u.jsx)("div",{id:d,className:(0,a.Z)(g.k.wrapper.main,Kt,r),children:(0,u.jsx)(i.Z,{fallback:e=>(0,u.jsx)(Zt,{...e}),children:t})}),!n&&(0,u.jsx)(Qt,{})]})}},1327:(e,t,n)=>{"use strict";n.d(t,{Z:()=>u});n(7294);var r=n(9960),a=n(4996),i=n(2263),s=n(6668),o=n(941),l=n(5893);function c(e){let{logo:t,alt:n,imageClassName:r}=e;const i={light:(0,a.Z)(t.src),dark:(0,a.Z)(t.srcDark||t.src)},s=(0,l.jsx)(o.Z,{className:t.className,sources:i,height:t.height,width:t.width,alt:n,style:t.style});return r?(0,l.jsx)("div",{className:r,children:s}):s}function u(e){const{siteConfig:{title:t}}=(0,i.Z)(),{navbar:{title:n,logo:o}}=(0,s.L)(),{imageClassName:u,titleClassName:d,...p}=e,m=(0,a.Z)((null==o?void 0:o.href)||"/"),f=n?"":t,h=(null==o?void 0:o.alt)??f;return(0,l.jsxs)(r.Z,{to:m,...p,...(null==o?void 0:o.target)&&{target:o.target},children:[o&&(0,l.jsx)(c,{logo:o,alt:h,imageClassName:u}),null!=n&&(0,l.jsx)("b",{className:d,children:n})]})}},197:(e,t,n)=>{"use strict";n.d(t,{Z:()=>i});n(7294);var r=n(5742),a=n(5893);function i(e){let{locale:t,version:n,tag:i}=e;const s=t;return(0,a.jsxs)(r.Z,{children:[t&&(0,a.jsx)("meta",{name:"docusaurus_locale",content:t}),n&&(0,a.jsx)("meta",{name:"docusaurus_version",content:n}),i&&(0,a.jsx)("meta",{name:"docusaurus_tag",content:i}),s&&(0,a.jsx)("meta",{name:"docsearch:language",content:s}),n&&(0,a.jsx)("meta",{name:"docsearch:version",content:n}),i&&(0,a.jsx)("meta",{name:"docsearch:docusaurus_tag",content:i})]})}},941:(e,t,n)=>{"use strict";n.d(t,{Z:()=>l});n(7294);var r=n(6010),a=n(2389),i=n(2949);const s={themedImage:"themedImage_ToTc","themedImage--light":"themedImage--light_HNdA","themedImage--dark":"themedImage--dark_i4oU"};var o=n(5893);function l(e){const t=(0,a.Z)(),{colorMode:n}=(0,i.I)(),{sources:l,className:c,alt:u,...d}=e,p=t?"dark"===n?["dark"]:["light"]:["light","dark"];return(0,o.jsx)(o.Fragment,{children:p.map((e=>(0,o.jsx)("img",{src:l[e],alt:u,className:(0,r.Z)(s.themedImage,s[`themedImage--${e}`],c),...d},e)))})}},6043:(e,t,n)=>{"use strict";n.d(t,{u:()=>s,z:()=>f});var r=n(7294),a=n(412),i=n(5893);function s(e){let{initialState:t}=e;const[n,a]=(0,r.useState)(t??!1),i=(0,r.useCallback)((()=>{a((e=>!e))}),[]);return{collapsed:n,setCollapsed:a,toggleCollapsed:i}}const o={display:"none",overflow:"hidden",height:"0px"},l={display:"block",overflow:"visible",height:"auto"};function c(e,t){const n=t?o:l;e.style.display=n.display,e.style.overflow=n.overflow,e.style.height=n.height}function u(e){let{collapsibleRef:t,collapsed:n,animation:a}=e;const i=(0,r.useRef)(!1);(0,r.useEffect)((()=>{const e=t.current;function r(){const t=e.scrollHeight,n=(null==a?void 0:a.duration)??function(e){const t=e/36;return Math.round(10*(4+15*t**.25+t/5))}(t);return{transition:`height ${n}ms ${(null==a?void 0:a.easing)??"ease-in-out"}`,height:`${t}px`}}function s(){const t=r();e.style.transition=t.transition,e.style.height=t.height}if(!i.current)return c(e,n),void(i.current=!0);return e.style.willChange="height",function(){const t=requestAnimationFrame((()=>{n?(s(),requestAnimationFrame((()=>{e.style.height=o.height,e.style.overflow=o.overflow}))):(e.style.display="block",requestAnimationFrame((()=>{s()})))}));return()=>cancelAnimationFrame(t)}()}),[t,n,a])}function d(e){if(!a.Z.canUseDOM)return e?o:l}function p(e){let{as:t="div",collapsed:n,children:a,animation:s,onCollapseTransitionEnd:o,className:l,disableSSRStyle:p}=e;const m=(0,r.useRef)(null);return u({collapsibleRef:m,collapsed:n,animation:s}),(0,i.jsx)(t,{ref:m,style:p?void 0:d(n),onTransitionEnd:e=>{"height"===e.propertyName&&(c(m.current,n),null==o||o(n))},className:l,children:a})}function m(e){let{collapsed:t,...n}=e;const[a,s]=(0,r.useState)(!t),[o,l]=(0,r.useState)(t);return(0,r.useLayoutEffect)((()=>{t||s(!0)}),[t]),(0,r.useLayoutEffect)((()=>{a&&l(t)}),[a,t]),a?(0,i.jsx)(p,{...n,collapsed:o}):null}function f(e){let{lazy:t,...n}=e;const r=t?m:p;return(0,i.jsx)(r,{...n})}},9689:(e,t,n)=>{"use strict";n.d(t,{nT:()=>h,pl:()=>f});var r=n(7294),a=n(2389),i=n(12),s=n(902),o=n(6668),l=n(5893);const c=(0,i.WA)("docusaurus.announcement.dismiss"),u=(0,i.WA)("docusaurus.announcement.id"),d=()=>"true"===c.get(),p=e=>c.set(String(e)),m=r.createContext(null);function f(e){let{children:t}=e;const n=function(){const{announcementBar:e}=(0,o.L)(),t=(0,a.Z)(),[n,i]=(0,r.useState)((()=>!!t&&d()));(0,r.useEffect)((()=>{i(d())}),[]);const s=(0,r.useCallback)((()=>{p(!0),i(!0)}),[]);return(0,r.useEffect)((()=>{if(!e)return;const{id:t}=e;let n=u.get();"annoucement-bar"===n&&(n="announcement-bar");const r=t!==n;u.set(t),r&&p(!1),!r&&d()||i(!1)}),[e]),(0,r.useMemo)((()=>({isActive:!!e&&!n,close:s})),[e,n,s])}();return(0,l.jsx)(m.Provider,{value:n,children:t})}function h(){const e=(0,r.useContext)(m);if(!e)throw new s.i6("AnnouncementBarProvider");return e}},2949:(e,t,n)=>{"use strict";n.d(t,{I:()=>b,S:()=>g});var r=n(7294),a=n(412),i=n(902),s=n(12),o=n(6668),l=n(5893);const c=r.createContext(void 0),u="theme",d=(0,s.WA)(u),p="light",m="dark",f=e=>e===m?m:p;function h(){const{colorMode:{defaultMode:e,disableSwitch:t,respectPrefersColorScheme:n}}=(0,o.L)(),[i,s]=(0,r.useState)((e=>a.Z.canUseDOM?f(document.documentElement.getAttribute("data-theme")):f(e))(e));(0,r.useEffect)((()=>{t&&d.del()}),[t]);const l=(0,r.useCallback)((function(t,r){void 0===r&&(r={});const{persist:a=!0}=r;t?(s(t),a&&(e=>{d.set(f(e))})(t)):(s(n?window.matchMedia("(prefers-color-scheme: dark)").matches?m:p:e),d.del())}),[n,e]);(0,r.useEffect)((()=>{document.documentElement.setAttribute("data-theme",f(i))}),[i]),(0,r.useEffect)((()=>{if(t)return;const e=e=>{if(e.key!==u)return;const t=d.get();null!==t&&l(f(t))};return window.addEventListener("storage",e),()=>window.removeEventListener("storage",e)}),[t,l]);const c=(0,r.useRef)(!1);return(0,r.useEffect)((()=>{if(t&&!n)return;const e=window.matchMedia("(prefers-color-scheme: dark)"),r=()=>{window.matchMedia("print").matches||c.current?c.current=window.matchMedia("print").matches:l(null)};return e.addListener(r),()=>e.removeListener(r)}),[l,t,n]),(0,r.useMemo)((()=>({colorMode:i,setColorMode:l,get isDarkTheme(){return i===m},setLightTheme(){l(p)},setDarkTheme(){l(m)}})),[i,l])}function g(e){let{children:t}=e;const n=h();return(0,l.jsx)(c.Provider,{value:n,children:t})}function b(){const e=(0,r.useContext)(c);if(null==e)throw new i.i6("ColorModeProvider","Please see https://docusaurus.io/docs/api/themes/configuration#use-color-mode.");return e}},373:(e,t,n)=>{"use strict";n.d(t,{J:()=>y,L5:()=>x});var r=n(7294),a=n(143),i=n(9935),s=n(6668),o=n(2802),l=n(902),c=n(12),u=n(5893);const d=e=>`docs-preferred-version-${e}`,p=(e,t,n)=>{(0,c.WA)(d(e),{persistence:t}).set(n)},m=(e,t)=>(0,c.WA)(d(e),{persistence:t}).get(),f=(e,t)=>{(0,c.WA)(d(e),{persistence:t}).del()};const h=r.createContext(null);function g(){const e=(0,a._r)(),t=(0,s.L)().docs.versionPersistence,n=(0,r.useMemo)((()=>Object.keys(e)),[e]),[i,o]=(0,r.useState)((()=>(e=>Object.fromEntries(e.map((e=>[e,{preferredVersionName:null}]))))(n)));(0,r.useEffect)((()=>{o(function(e){let{pluginIds:t,versionPersistence:n,allDocsData:r}=e;function a(e){const t=m(e,n);return r[e].versions.some((e=>e.name===t))?{preferredVersionName:t}:(f(e,n),{preferredVersionName:null})}return Object.fromEntries(t.map((e=>[e,a(e)])))}({allDocsData:e,versionPersistence:t,pluginIds:n}))}),[e,t,n]);return[i,(0,r.useMemo)((()=>({savePreferredVersion:function(e,n){p(e,t,n),o((t=>({...t,[e]:{preferredVersionName:n}})))}})),[t])]}function b(e){let{children:t}=e;const n=g();return(0,u.jsx)(h.Provider,{value:n,children:t})}function x(e){let{children:t}=e;return o.cE?(0,u.jsx)(b,{children:t}):(0,u.jsx)(u.Fragment,{children:t})}function v(){const e=(0,r.useContext)(h);if(!e)throw new l.i6("DocsPreferredVersionContextProvider");return e}function y(e){void 0===e&&(e=i.m);const t=(0,a.zh)(e),[n,s]=v(),{preferredVersionName:o}=n[e];return{preferredVersion:t.versions.find((e=>e.name===o))??null,savePreferredVersionName:(0,r.useCallback)((t=>{s.savePreferredVersion(e,t)}),[s,e])}}},1116:(e,t,n)=>{"use strict";n.d(t,{V:()=>c,b:()=>l});var r=n(7294),a=n(902),i=n(5893);const s=Symbol("EmptyContext"),o=r.createContext(s);function l(e){let{children:t,name:n,items:a}=e;const s=(0,r.useMemo)((()=>n&&a?{name:n,items:a}:null),[n,a]);return(0,i.jsx)(o.Provider,{value:s,children:t})}function c(){const e=(0,r.useContext)(o);if(e===s)throw new a.i6("DocsSidebarProvider");return e}},2961:(e,t,n)=>{"use strict";n.d(t,{M:()=>m,e:()=>f});var r=n(7294),a=n(3102),i=n(7524),s=n(6550),o=(n(1688),n(902));function l(e){!function(e){const t=(0,s.k6)(),n=(0,o.zX)(e);(0,r.useEffect)((()=>t.block(((e,t)=>n(e,t)))),[t,n])}(((t,n)=>{if("POP"===n)return e(t,n)}))}var c=n(6668),u=n(5893);const d=r.createContext(void 0);function p(){const e=function(){const e=(0,a.HY)(),{items:t}=(0,c.L)().navbar;return 0===t.length&&!e.component}(),t=(0,i.i)(),n=!e&&"mobile"===t,[s,o]=(0,r.useState)(!1);l((()=>{if(s)return o(!1),!1}));const u=(0,r.useCallback)((()=>{o((e=>!e))}),[]);return(0,r.useEffect)((()=>{"desktop"===t&&o(!1)}),[t]),(0,r.useMemo)((()=>({disabled:e,shouldRender:n,toggle:u,shown:s})),[e,n,u,s])}function m(e){let{children:t}=e;const n=p();return(0,u.jsx)(d.Provider,{value:n,children:t})}function f(){const e=r.useContext(d);if(void 0===e)throw new o.i6("NavbarMobileSidebarProvider");return e}},3102:(e,t,n)=>{"use strict";n.d(t,{HY:()=>l,Zo:()=>c,n2:()=>o});var r=n(7294),a=n(902),i=n(5893);const s=r.createContext(null);function o(e){let{children:t}=e;const n=(0,r.useState)({component:null,props:null});return(0,i.jsx)(s.Provider,{value:n,children:t})}function l(){const e=(0,r.useContext)(s);if(!e)throw new a.i6("NavbarSecondaryMenuContentProvider");return e[0]}function c(e){let{component:t,props:n}=e;const i=(0,r.useContext)(s);if(!i)throw new a.i6("NavbarSecondaryMenuContentProvider");const[,o]=i,l=(0,a.Ql)(n);return(0,r.useEffect)((()=>{o({component:t,props:l})}),[o,t,l]),(0,r.useEffect)((()=>()=>o({component:null,props:null})),[o]),null}},9727:(e,t,n)=>{"use strict";n.d(t,{h:()=>a,t:()=>i});var r=n(7294);const a="navigation-with-keyboard";function i(){(0,r.useEffect)((()=>{function e(e){"keydown"===e.type&&"Tab"===e.key&&document.body.classList.add(a),"mousedown"===e.type&&document.body.classList.remove(a)}return document.addEventListener("keydown",e),document.addEventListener("mousedown",e),()=>{document.body.classList.remove(a),document.removeEventListener("keydown",e),document.removeEventListener("mousedown",e)}}),[])}},7524:(e,t,n)=>{"use strict";n.d(t,{i:()=>c});var r=n(7294),a=n(412);const i="desktop",s="mobile",o="ssr";function l(){return a.Z.canUseDOM?window.innerWidth>996?i:s:o}function c(){const[e,t]=(0,r.useState)((()=>l()));return(0,r.useEffect)((()=>{function e(){t(l())}return window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),clearTimeout(undefined)}}),[]),e}},5281:(e,t,n)=>{"use strict";n.d(t,{k:()=>r});const r={page:{blogListPage:"blog-list-page",blogPostPage:"blog-post-page",blogTagsListPage:"blog-tags-list-page",blogTagPostListPage:"blog-tags-post-list-page",docsDocPage:"docs-doc-page",docsTagsListPage:"docs-tags-list-page",docsTagDocListPage:"docs-tags-doc-list-page",mdxPage:"mdx-page"},wrapper:{main:"main-wrapper",blogPages:"blog-wrapper",docsPages:"docs-wrapper",mdxPages:"mdx-wrapper"},common:{editThisPage:"theme-edit-this-page",lastUpdated:"theme-last-updated",backToTopButton:"theme-back-to-top-button",codeBlock:"theme-code-block",admonition:"theme-admonition",admonitionType:e=>`theme-admonition-${e}`},layout:{},docs:{docVersionBanner:"theme-doc-version-banner",docVersionBadge:"theme-doc-version-badge",docBreadcrumbs:"theme-doc-breadcrumbs",docMarkdown:"theme-doc-markdown",docTocMobile:"theme-doc-toc-mobile",docTocDesktop:"theme-doc-toc-desktop",docFooter:"theme-doc-footer",docFooterTagsRow:"theme-doc-footer-tags-row",docFooterEditMetaRow:"theme-doc-footer-edit-meta-row",docSidebarContainer:"theme-doc-sidebar-container",docSidebarMenu:"theme-doc-sidebar-menu",docSidebarItemCategory:"theme-doc-sidebar-item-category",docSidebarItemLink:"theme-doc-sidebar-item-link",docSidebarItemCategoryLevel:e=>`theme-doc-sidebar-item-category-level-${e}`,docSidebarItemLinkLevel:e=>`theme-doc-sidebar-item-link-level-${e}`},blog:{}}},2802:(e,t,n)=>{"use strict";n.d(t,{Wl:()=>p,_F:()=>f,cE:()=>d,hI:()=>y,lO:()=>b,vY:()=>v,oz:()=>x,s1:()=>g});var r=n(7294),a=n(6550),i=n(8790),s=n(143),o=n(373),l=n(1116);function c(e){return Array.from(new Set(e))}var u=n(8596);const d=!!s._r;function p(e){if(e.href)return e.href;for(const t of e.items){if("link"===t.type)return t.href;if("category"===t.type){const e=p(t);if(e)return e}}}const m=(e,t)=>void 0!==e&&(0,u.Mg)(e,t);function f(e,t){return"link"===e.type?m(e.href,t):"category"===e.type&&(m(e.href,t)||((e,t)=>e.some((e=>f(e,t))))(e.items,t))}function h(e){let{sidebarItems:t,pathname:n,onlyCategories:r=!1}=e;const a=[];return function e(t){for(const i of t)if("category"===i.type&&((0,u.Mg)(i.href,n)||e(i.items))||"link"===i.type&&(0,u.Mg)(i.href,n)){return r&&"category"!==i.type||a.unshift(i),!0}return!1}(t),a}function g(){var e;const t=(0,l.V)(),{pathname:n}=(0,a.TH)();return!1!==(null==(e=(0,s.gA)())?void 0:e.pluginData.breadcrumbs)&&t?h({sidebarItems:t.items,pathname:n}):null}function b(e){const{activeVersion:t}=(0,s.Iw)(e),{preferredVersion:n}=(0,o.J)(e),a=(0,s.yW)(e);return(0,r.useMemo)((()=>c([t,n,a].filter(Boolean))),[t,n,a])}function x(e,t){const n=b(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.sidebars?Object.entries(e.sidebars):[])),r=t.find((t=>t[0]===e));if(!r)throw new Error(`Can't find any sidebar with id "${e}" in version${n.length>1?"s":""} ${n.map((e=>e.name)).join(", ")}".\n Available sidebar ids are:\n - ${Object.keys(t).join("\n- ")}`);return r[1]}),[e,n])}function v(e,t){const n=b(t);return(0,r.useMemo)((()=>{const t=n.flatMap((e=>e.docs)),r=t.find((t=>t.id===e));if(!r){if(n.flatMap((e=>e.draftIds)).includes(e))return null;throw new Error(`DocNavbarItem: couldn't find any doc with id "${e}" in version${n.length>1?"s":""} ${n.map((e=>e.name)).join(", ")}".\nAvailable doc ids are:\n- ${c(t.map((e=>e.id))).join("\n- ")}`)}return r}),[e,n])}function y(e){let{route:t,versionMetadata:n}=e;const r=(0,a.TH)(),s=t.routes,o=s.find((e=>(0,a.LX)(r.pathname,e)));if(!o)return null;const l=o.sidebar,c=l?n.docsSidebars[l]:void 0;return{docElement:(0,i.H)(s),sidebarName:l,sidebarItems:c}}},1944:(e,t,n)=>{"use strict";n.d(t,{FG:()=>m,d:()=>d,VC:()=>f});var r=n(7294),a=n(6010),i=n(5742),s=n(226);function o(){const e=r.useContext(s._);if(!e)throw new Error("Unexpected: no Docusaurus route context found");return e}var l=n(4996),c=n(2263);var u=n(5893);function d(e){let{title:t,description:n,keywords:r,image:a,children:s}=e;const o=function(e){const{siteConfig:t}=(0,c.Z)(),{title:n,titleDelimiter:r}=t;return null!=e&&e.trim().length?`${e.trim()} ${r} ${n}`:n}(t),{withBaseUrl:d}=(0,l.C)(),p=a?d(a,{absolute:!0}):void 0;return(0,u.jsxs)(i.Z,{children:[t&&(0,u.jsx)("title",{children:o}),t&&(0,u.jsx)("meta",{property:"og:title",content:o}),n&&(0,u.jsx)("meta",{name:"description",content:n}),n&&(0,u.jsx)("meta",{property:"og:description",content:n}),r&&(0,u.jsx)("meta",{name:"keywords",content:Array.isArray(r)?r.join(","):r}),p&&(0,u.jsx)("meta",{property:"og:image",content:p}),p&&(0,u.jsx)("meta",{name:"twitter:image",content:p}),s]})}const p=r.createContext(void 0);function m(e){let{className:t,children:n}=e;const s=r.useContext(p),o=(0,a.Z)(s,t);return(0,u.jsxs)(p.Provider,{value:o,children:[(0,u.jsx)(i.Z,{children:(0,u.jsx)("html",{className:o})}),n]})}function f(e){let{children:t}=e;const n=o(),r=`plugin-${n.plugin.name.replace(/docusaurus-(?:plugin|theme)-(?:content-)?/gi,"")}`;const i=`plugin-id-${n.plugin.id}`;return(0,u.jsx)(m,{className:(0,a.Z)(r,i),children:t})}},902:(e,t,n)=>{"use strict";n.d(t,{D9:()=>l,Qc:()=>d,Ql:()=>u,i6:()=>c,zX:()=>o});var r=n(7294),a=n(412),i=n(5893);const s=a.Z.canUseDOM?r.useLayoutEffect:r.useEffect;function o(e){const t=(0,r.useRef)(e);return s((()=>{t.current=e}),[e]),(0,r.useCallback)((function(){return t.current(...arguments)}),[])}function l(e){const t=(0,r.useRef)();return s((()=>{t.current=e})),t.current}class c extends Error{constructor(e,t){var n,r,a;super(),this.name="ReactContextError",this.message=`Hook ${(null==(n=this.stack)||null==(r=n.split("\n")[1])||null==(a=r.match(/at (?:\w+\.)?(?\w+)/))?void 0:a.groups.name)??""} is called outside the <${e}>. ${t??""}`}}function u(e){const t=Object.entries(e);return t.sort(((e,t)=>e[0].localeCompare(t[0]))),(0,r.useMemo)((()=>e),t.flat())}function d(e){return t=>{let{children:n}=t;return(0,i.jsx)(i.Fragment,{children:e.reduceRight(((e,t)=>(0,i.jsx)(t,{children:e})),n)})}}},8596:(e,t,n)=>{"use strict";n.d(t,{Mg:()=>s,Ns:()=>o});var r=n(7294),a=n(723),i=n(2263);function s(e,t){const n=e=>{var t;return null==(t=!e||e.endsWith("/")?e:`${e}/`)?void 0:t.toLowerCase()};return n(e)===n(t)}function o(){const{baseUrl:e}=(0,i.Z)().siteConfig;return(0,r.useMemo)((()=>function(e){let{baseUrl:t,routes:n}=e;function r(e){return e.path===t&&!0===e.exact}function a(e){return e.path===t&&!e.exact}return function e(t){if(0===t.length)return;return t.find(r)||e(t.filter(a).flatMap((e=>e.routes??[])))}(n)}({routes:a.Z,baseUrl:e})),[e])}},2466:(e,t,n)=>{"use strict";n.d(t,{Ct:()=>m,OC:()=>c,RF:()=>p});var r=n(7294),a=n(412),i=n(2389),s=n(902),o=n(5893);const l=r.createContext(void 0);function c(e){let{children:t}=e;const n=function(){const e=(0,r.useRef)(!0);return(0,r.useMemo)((()=>({scrollEventsEnabledRef:e,enableScrollEvents:()=>{e.current=!0},disableScrollEvents:()=>{e.current=!1}})),[])}();return(0,o.jsx)(l.Provider,{value:n,children:t})}function u(){const e=(0,r.useContext)(l);if(null==e)throw new s.i6("ScrollControllerProvider");return e}const d=()=>a.Z.canUseDOM?{scrollX:window.pageXOffset,scrollY:window.pageYOffset}:null;function p(e,t){void 0===t&&(t=[]);const{scrollEventsEnabledRef:n}=u(),a=(0,r.useRef)(d()),i=(0,s.zX)(e);(0,r.useEffect)((()=>{const e=()=>{if(!n.current)return;const e=d();i(e,a.current),a.current=e},t={passive:!0};return e(),window.addEventListener("scroll",e,t),()=>window.removeEventListener("scroll",e,t)}),[i,n,...t])}function m(){const e=(0,r.useRef)(null),t=(0,i.Z)()&&"smooth"===getComputedStyle(document.documentElement).scrollBehavior;return{startScroll:n=>{e.current=t?function(e){return window.scrollTo({top:e,behavior:"smooth"}),()=>{}}(n):function(e){let t=null;const n=document.documentElement.scrollTop>e;return function r(){const a=document.documentElement.scrollTop;(n&&a>e||!n&&at&&cancelAnimationFrame(t)}(n)},cancelScroll:()=>null==e.current?void 0:e.current()}}},3320:(e,t,n)=>{"use strict";n.d(t,{HX:()=>r,os:()=>a});n(2263);const r="default";function a(e,t){return`docs-${e}-${t}`}},12:(e,t,n)=>{"use strict";n.d(t,{WA:()=>l});n(7294),n(1688);const r="localStorage";function a(e){let{key:t,oldValue:n,newValue:r,storage:a}=e;if(n===r)return;const i=document.createEvent("StorageEvent");i.initStorageEvent("storage",!1,!1,t,n,r,window.location.href,a),window.dispatchEvent(i)}function i(e){if(void 0===e&&(e=r),"undefined"==typeof window)throw new Error("Browser storage is not available on Node.js/Docusaurus SSR process.");if("none"===e)return null;try{return window[e]}catch(n){return t=n,s||(console.warn("Docusaurus browser storage is not available.\nPossible reasons: running Docusaurus in an iframe, in an incognito browser session, or using too strict browser privacy settings.",t),s=!0),null}var t}let s=!1;const o={get:()=>null,set:()=>{},del:()=>{},listen:()=>()=>{}};function l(e,t){if("undefined"==typeof window)return function(e){function t(){throw new Error(`Illegal storage API usage for storage key "${e}".\nDocusaurus storage APIs are not supposed to be called on the server-rendering process.\nPlease only call storage APIs in effects and event handlers.`)}return{get:t,set:t,del:t,listen:t}}(e);const n=i(null==t?void 0:t.persistence);return null===n?o:{get:()=>{try{return n.getItem(e)}catch(t){return console.error(`Docusaurus storage error, can't get key=${e}`,t),null}},set:t=>{try{const r=n.getItem(e);n.setItem(e,t),a({key:e,oldValue:r,newValue:t,storage:n})}catch(r){console.error(`Docusaurus storage error, can't set ${e}=${t}`,r)}},del:()=>{try{const t=n.getItem(e);n.removeItem(e),a({key:e,oldValue:t,newValue:null,storage:n})}catch(t){console.error(`Docusaurus storage error, can't delete key=${e}`,t)}},listen:t=>{try{const r=r=>{r.storageArea===n&&r.key===e&&t(r)};return window.addEventListener("storage",r),()=>window.removeEventListener("storage",r)}catch(r){return console.error(`Docusaurus storage error, can't listen for changes of key=${e}`,r),()=>{}}}}}},4711:(e,t,n)=>{"use strict";n.d(t,{l:()=>i});var r=n(2263),a=n(6550);function i(){const{siteConfig:{baseUrl:e,url:t},i18n:{defaultLocale:n,currentLocale:i}}=(0,r.Z)(),{pathname:s}=(0,a.TH)(),o=i===n?e:e.replace(`/${i}/`,"/"),l=s.replace(e,"");return{createUrl:function(e){let{locale:r,fullyQualified:a}=e;return`${a?t:""}${function(e){return e===n?`${o}`:`${o}${e}/`}(r)}${l}`}}}},5936:(e,t,n)=>{"use strict";n.d(t,{S:()=>s});var r=n(7294),a=n(6550),i=n(902);function s(e){const t=(0,a.TH)(),n=(0,i.D9)(t),s=(0,i.zX)(e);(0,r.useEffect)((()=>{n&&t!==n&&s({location:t,previousLocation:n})}),[s,t,n])}},6668:(e,t,n)=>{"use strict";n.d(t,{L:()=>a});var r=n(2263);function a(){return(0,r.Z)().siteConfig.themeConfig}},8802:(e,t)=>{"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=function(e,t){const{trailingSlash:n,baseUrl:r}=t;if(e.startsWith("#"))return e;if(void 0===n)return e;const[a]=e.split(/[#?]/),i="/"===a||a===r?a:(s=a,n?function(e){return e.endsWith("/")?e:`${e}/`}(s):function(e){return e.endsWith("/")?e.slice(0,-1):e}(s));var s;return e.replace(a,i)}},8780:function(e,t,n){"use strict";var r=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(t,"__esModule",{value:!0}),t.applyTrailingSlash=t.blogPostContainerID=void 0,t.blogPostContainerID="post-content";var a=n(8802);Object.defineProperty(t,"applyTrailingSlash",{enumerable:!0,get:function(){return r(a).default}})},311:(e,t,n)=>{"use strict";n.d(t,{Z:()=>s});n(7294);var r=n(6010);const a="loadingRing_RJI3";var i=n(5893);function s(e){let{className:t}=e;return(0,i.jsxs)("div",{className:(0,r.Z)(a,t),children:[(0,i.jsx)("div",{}),(0,i.jsx)("div",{}),(0,i.jsx)("div",{}),(0,i.jsx)("div",{})]})}},22:(e,t,n)=>{"use strict";n.d(t,{w:()=>o});var r=n(1336),a=n.n(r),i=n(1029);const s=new Map;function o(e,t){const n=`${e}${t}`;let r=s.get(n);return r||(r=async function(e,t){{const n=`${e}${i.J.replace("{dir}",t?`-${t.replace(/\//g,"-")}`:"")}`;if(new URL(n,location.origin).origin!==location.origin)throw new Error("Unexpected version url");const r=await(await fetch(n)).json(),s=r.map(((e,t)=>{let{documents:n,index:r}=e;return{type:t,documents:n,index:a().Index.load(r)}})),o=r.reduce(((e,t)=>{for(const n of t.index.invertedIndex)/\p{Unified_Ideograph}/u.test(n[0][0])&&e.add(n[0]);return e}),new Set);return{wrappedIndexes:s,zhDictionary:Array.from(o)}}return{wrappedIndexes:[],zhDictionary:[]}}(e,t),s.set(n,r)),r}},8202:(e,t,n)=>{"use strict";n.d(t,{v:()=>l});var r=n(1336),a=n.n(r);var i=n(1029);function s(e){return o(e).concat(o(e.filter((e=>{const t=e[e.length-1];return!t.trailing&&t.maybeTyping})),!0))}function o(e,t){return e.map((e=>({tokens:e.map((e=>e.value)),term:e.map((e=>({value:e.value,presence:a().Query.presence.REQUIRED,wildcard:(t?e.trailing||e.maybeTyping:e.trailing)?a().Query.wildcard.TRAILING:a().Query.wildcard.NONE})))})))}function l(e,t,n){return function(r,o){const l=function(e,t){if(1===t.length&&["ja","jp","th"].includes(t[0]))return a()[t[0]].tokenizer(e).map((e=>e.toString()));let n=/[^-\s]+/g;return t.includes("zh")&&(n=/\w+|\p{Unified_Ideograph}+/gu),e.toLowerCase().match(n)||[]}(r,i.dK);if(0===l.length)return void o([]);const c=function(e,t){const n=function(e,t){const n=[];return function e(r,a){if(0===r.length)return void n.push(a);const i=r[0];if(/\p{Unified_Ideograph}/u.test(i)){const n=function(e,t){const n=[];return function e(r,a){let i=0,s=!1;for(const o of t)if(r.substr(0,o.length)===o){const t={missed:a.missed,term:a.term.concat({value:o})};r.length>o.length?e(r.substr(o.length),t):n.push(t),s=!0}else for(let t=o.length-1;t>i;t-=1){const l=o.substr(0,t);if(r.substr(0,t)===l){i=t;const o={missed:a.missed,term:a.term.concat({value:l,trailing:!0})};r.length>t?e(r.substr(t),o):n.push(o),s=!0;break}}s||(r.length>0?e(r.substr(1),{missed:a.missed+1,term:a.term}):a.term.length>0&&n.push(a))}(e,{missed:0,term:[]}),n.sort(((e,t)=>{const n=e.missed>0?1:0,r=t.missed>0?1:0;return n!==r?n-r:e.term.length-t.term.length})).map((e=>e.term))}(i,t);for(const t of n){const n=a.concat(...t);e(r.slice(1),n)}}else{const t=a.concat({value:i});e(r.slice(1),t)}}(e,[]),n}(e,t);if(0===n.length)return[{tokens:e,term:e.map((e=>({value:e,presence:a().Query.presence.REQUIRED,wildcard:a().Query.wildcard.LEADING|a().Query.wildcard.TRAILING})))}];for(const a of n)a[a.length-1].maybeTyping=!0;const r=[];for(const s of i.dK)if("en"===s)i._k||r.unshift(a().stopWordFilter);else{const e=a()[s];e.stopWordFilter&&r.unshift(e.stopWordFilter)}let o;if(r.length>0){const e=e=>r.reduce(((e,t)=>e.filter((e=>t(e.value)))),e);o=[];const t=[];for(const r of n){const n=e(r);o.push(n),n.length0&&t.push(n)}n.push(...t)}else o=n.slice();const l=[];for(const a of o)if(a.length>2)for(let e=a.length-1;e>=0;e-=1)l.push(a.slice(0,e).concat(a.slice(e+1)));return s(n).concat(s(l))}(l,t),u=[];e:for(const{term:t,tokens:a}of c)for(const{documents:r,index:i,type:s}of e)if(u.push(...i.query((e=>{for(const n of t)e.term(n.value,{wildcard:n.wildcard,presence:n.presence})})).slice(0,n).filter((e=>!u.some((t=>t.document.i.toString()===e.ref)))).slice(0,n-u.length).map((t=>{const n=r.find((e=>e.i.toString()===t.ref));return{document:n,type:s,page:0!==s&&e[0].documents.find((e=>e.i===n.p)),metadata:t.matchData.metadata,tokens:a,score:t.score}}))),u.length>=n)break e;!function(e){e.forEach(((e,t)=>{e.index=t})),e.sort(((t,n)=>{let r=t.type>0&&t.page?e.findIndex((e=>e.document===t.page)):t.index,a=n.type>0&&n.page?e.findIndex((e=>e.document===n.page)):n.index;return-1===r&&(r=t.index),-1===a&&(a=n.index),r===a?0===t.type?-1:0===n.type?1:t.index-n.index:r-a}))}(u),function(e){e.forEach(((t,n)=>{n>0&&t.page&&e.some((e=>e.document===t.page))&&(n{"use strict";function r(e){return e.join(" \u203a ")}n.d(t,{e:()=>r})},1690:(e,t,n)=>{"use strict";function r(e){return e.replace(/&/g,"&").replace(//g,">").replace(/"/g,""").replace(/'/g,"'")}n.d(t,{X:()=>r})},1073:(e,t,n)=>{"use strict";function r(e,t){const n=[];for(const r of Object.values(e))r[t]&&n.push(...r[t].position);return n.sort(((e,t)=>e[0]-t[0]||t[1]-e[1]))}n.d(t,{m:()=>r})},2539:(e,t,n)=>{"use strict";n.d(t,{C:()=>a});var r=n(1690);function a(e,t,n){const i=[];for(const s of t){const n=e.toLowerCase().indexOf(s);if(n>=0){n>0&&i.push(a(e.substr(0,n),t)),i.push(`${(0,r.X)(e.substr(n,s.length))}`);const o=n+s.length;o${(0,r.X)(e)}`:(0,r.X)(e):i.join("")}},726:(e,t,n)=>{"use strict";n.d(t,{o:()=>l});var r=n(1690),a=n(2539);const i=/\w+|\p{Unified_Ideograph}/u;function s(e){const t=[];let n=0,r=e;for(;r.length>0;){const a=r.match(i);if(!a){t.push(r);break}a.index>0&&t.push(r.substring(0,a.index)),t.push(a[0]),n+=a.index+a[0].length,r=e.substring(n)}return t}var o=n(1029);function l(e,t,n,i){void 0===i&&(i=o.Hk);const{chunkIndex:l,chunks:c}=function(e,t,n){const i=[];let o=0,l=0,c=-1;for(;ol){const t=s(e.substring(l,u)).map((e=>({html:(0,r.X)(e),textLength:e.length})));for(const e of t)i.push(e)}-1===c&&(c=i.length),l=u+d,i.push({html:(0,a.C)(e.substring(u,l),n,!0),textLength:d})}}if(l({html:(0,r.X)(e),textLength:e.length})));for(const e of t)i.push(e)}return{chunkIndex:c,chunks:i}}(e,t,n),u=c.slice(0,l),d=c[l],p=[d.html],m=c.slice(l+1);let f=d.textLength,h=0,g=0,b=!1,x=!1;for(;f0){const e=u.pop();f+e.textLength<=i?(p.unshift(e.html),h+=e.textLength,f+=e.textLength):(b=!0,u.length=0)}else{if(!(m.length>0))break;{const e=m.shift();f+e.textLength<=i?(p.push(e.html),g+=e.textLength,f+=e.textLength):(x=!0,m.length=0)}}return(b||u.length>0)&&p.unshift("\u2026"),(x||m.length>0)&&p.push("\u2026"),p.join("")}},1029:(e,t,n)=>{"use strict";n.d(t,{vc:()=>a(),gQ:()=>f,H6:()=>u,hG:()=>b,l9:()=>h,dK:()=>i,_k:()=>s,pu:()=>m,AY:()=>d,t_:()=>p,Kc:()=>g,J:()=>o,Hk:()=>c,qo:()=>l,pQ:()=>x});n(1336);var r=n(813),a=n.n(r);const i=["en"],s=!1,o="search-index{dir}.json?_=8255fcee",l=8,c=50,u=!0,d=!0,p=!0,m="right",f=void 0,h=!0,g=["guides","examples","tutorials","blog"],b=!1,x=!0},6010:(e,t,n)=>{"use strict";function r(e){var t,n,a="";if("string"==typeof e||"number"==typeof e)a+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;ta});const a=function(){for(var e,t,n=0,a="";n{"use strict";n.d(t,{lX:()=>y,q_:()=>T,ob:()=>m,PP:()=>P,Ep:()=>p});var r=n(7462);function a(e){return"/"===e.charAt(0)}function i(e,t){for(var n=t,r=n+1,a=e.length;r=0;p--){var m=s[p];"."===m?i(s,p):".."===m?(i(s,p),d++):d&&(i(s,p),d--)}if(!c)for(;d--;d)s.unshift("..");!c||""===s[0]||s[0]&&a(s[0])||s.unshift("");var f=s.join("/");return n&&"/"!==f.substr(-1)&&(f+="/"),f};var o=n(8776);function l(e){return"/"===e.charAt(0)?e:"/"+e}function c(e){return"/"===e.charAt(0)?e.substr(1):e}function u(e,t){return function(e,t){return 0===e.toLowerCase().indexOf(t.toLowerCase())&&-1!=="/?#".indexOf(e.charAt(t.length))}(e,t)?e.substr(t.length):e}function d(e){return"/"===e.charAt(e.length-1)?e.slice(0,-1):e}function p(e){var t=e.pathname,n=e.search,r=e.hash,a=t||"/";return n&&"?"!==n&&(a+="?"===n.charAt(0)?n:"?"+n),r&&"#"!==r&&(a+="#"===r.charAt(0)?r:"#"+r),a}function m(e,t,n,a){var i;"string"==typeof e?(i=function(e){var t=e||"/",n="",r="",a=t.indexOf("#");-1!==a&&(r=t.substr(a),t=t.substr(0,a));var i=t.indexOf("?");return-1!==i&&(n=t.substr(i),t=t.substr(0,i)),{pathname:t,search:"?"===n?"":n,hash:"#"===r?"":r}}(e),i.state=t):(void 0===(i=(0,r.Z)({},e)).pathname&&(i.pathname=""),i.search?"?"!==i.search.charAt(0)&&(i.search="?"+i.search):i.search="",i.hash?"#"!==i.hash.charAt(0)&&(i.hash="#"+i.hash):i.hash="",void 0!==t&&void 0===i.state&&(i.state=t));try{i.pathname=decodeURI(i.pathname)}catch(o){throw o instanceof URIError?new URIError('Pathname "'+i.pathname+'" could not be decoded. This is likely caused by an invalid percent-encoding.'):o}return n&&(i.key=n),a?i.pathname?"/"!==i.pathname.charAt(0)&&(i.pathname=s(i.pathname,a.pathname)):i.pathname=a.pathname:i.pathname||(i.pathname="/"),i}function f(){var e=null;var t=[];return{setPrompt:function(t){return e=t,function(){e===t&&(e=null)}},confirmTransitionTo:function(t,n,r,a){if(null!=e){var i="function"==typeof e?e(t,n):e;"string"==typeof i?"function"==typeof r?r(i,a):a(!0):a(!1!==i)}else a(!0)},appendListener:function(e){var n=!0;function r(){n&&e.apply(void 0,arguments)}return t.push(r),function(){n=!1,t=t.filter((function(e){return e!==r}))}},notifyListeners:function(){for(var e=arguments.length,n=new Array(e),r=0;rt?n.splice(t,n.length-t,a):n.push(a),d({action:r,location:a,index:t,entries:n})}}))},replace:function(e,t){var r="REPLACE",a=m(e,t,h(),y.location);u.confirmTransitionTo(a,r,n,(function(e){e&&(y.entries[y.index]=a,d({action:r,location:a}))}))},go:v,goBack:function(){v(-1)},goForward:function(){v(1)},canGo:function(e){var t=y.index+e;return t>=0&&t{"use strict";var r=n(9864),a={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},i={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},s={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},o={};function l(e){return r.isMemo(e)?s:o[e.$$typeof]||a}o[r.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},o[r.Memo]=s;var c=Object.defineProperty,u=Object.getOwnPropertyNames,d=Object.getOwnPropertySymbols,p=Object.getOwnPropertyDescriptor,m=Object.getPrototypeOf,f=Object.prototype;e.exports=function e(t,n,r){if("string"!=typeof n){if(f){var a=m(n);a&&a!==f&&e(t,a,r)}var s=u(n);d&&(s=s.concat(d(n)));for(var o=l(t),h=l(n),g=0;g{"use strict";e.exports=function(e,t,n,r,a,i,s,o){if(!e){var l;if(void 0===t)l=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,r,a,i,s,o],u=0;(l=new Error(t.replace(/%s/g,(function(){return c[u++]})))).name="Invariant Violation"}throw l.framesToPop=1,l}}},5826:e=>{e.exports=Array.isArray||function(e){return"[object Array]"==Object.prototype.toString.call(e)}},1336:(e,t,n)=>{var r,a;!function(){var i,s,o,l,c,u,d,p,m,f,h,g,b,x,v,y,w,k,S,_,E,T,C,P,j,L,R,N,A,O,I=function(e){var t=new I.Builder;return t.pipeline.add(I.trimmer,I.stopWordFilter,I.stemmer),t.searchPipeline.add(I.stemmer),e.call(t,t),t.build()};I.version="2.3.9",I.utils={},I.utils.warn=(i=this,function(e){i.console&&console.warn&&console.warn(e)}),I.utils.asString=function(e){return null==e?"":e.toString()},I.utils.clone=function(e){if(null==e)return e;for(var t=Object.create(null),n=Object.keys(e),r=0;r0){var l=I.utils.clone(t)||{};l.position=[s,o],l.index=a.length,a.push(new I.Token(n.slice(s,i),l))}s=i+1}}return a},I.tokenizer.separator=/[\s\-]+/,I.Pipeline=function(){this._stack=[]},I.Pipeline.registeredFunctions=Object.create(null),I.Pipeline.registerFunction=function(e,t){t in this.registeredFunctions&&I.utils.warn("Overwriting existing registered function: "+t),e.label=t,I.Pipeline.registeredFunctions[e.label]=e},I.Pipeline.warnIfFunctionNotRegistered=function(e){e.label&&e.label in this.registeredFunctions||I.utils.warn("Function is not registered with pipeline. This may cause problems when serialising the index.\n",e)},I.Pipeline.load=function(e){var t=new I.Pipeline;return e.forEach((function(e){var n=I.Pipeline.registeredFunctions[e];if(!n)throw new Error("Cannot load unregistered function: "+e);t.add(n)})),t},I.Pipeline.prototype.add=function(){var e=Array.prototype.slice.call(arguments);e.forEach((function(e){I.Pipeline.warnIfFunctionNotRegistered(e),this._stack.push(e)}),this)},I.Pipeline.prototype.after=function(e,t){I.Pipeline.warnIfFunctionNotRegistered(t);var n=this._stack.indexOf(e);if(-1==n)throw new Error("Cannot find existingFn");n+=1,this._stack.splice(n,0,t)},I.Pipeline.prototype.before=function(e,t){I.Pipeline.warnIfFunctionNotRegistered(t);var n=this._stack.indexOf(e);if(-1==n)throw new Error("Cannot find existingFn");this._stack.splice(n,0,t)},I.Pipeline.prototype.remove=function(e){var t=this._stack.indexOf(e);-1!=t&&this._stack.splice(t,1)},I.Pipeline.prototype.run=function(e){for(var t=this._stack.length,n=0;n1&&(ie&&(n=a),i!=e);)r=n-t,a=t+Math.floor(r/2),i=this.elements[2*a];return i==e||i>e?2*a:io?c+=2:s==o&&(t+=n[l+1]*r[c+1],l+=2,c+=2);return t},I.Vector.prototype.similarity=function(e){return this.dot(e)/this.magnitude()||0},I.Vector.prototype.toArray=function(){for(var e=new Array(this.elements.length/2),t=1,n=0;t0){var i,s=a.str.charAt(0);s in a.node.edges?i=a.node.edges[s]:(i=new I.TokenSet,a.node.edges[s]=i),1==a.str.length&&(i.final=!0),r.push({node:i,editsRemaining:a.editsRemaining,str:a.str.slice(1)})}if(0!=a.editsRemaining){if("*"in a.node.edges)var o=a.node.edges["*"];else{o=new I.TokenSet;a.node.edges["*"]=o}if(0==a.str.length&&(o.final=!0),r.push({node:o,editsRemaining:a.editsRemaining-1,str:a.str}),a.str.length>1&&r.push({node:a.node,editsRemaining:a.editsRemaining-1,str:a.str.slice(1)}),1==a.str.length&&(a.node.final=!0),a.str.length>=1){if("*"in a.node.edges)var l=a.node.edges["*"];else{l=new I.TokenSet;a.node.edges["*"]=l}1==a.str.length&&(l.final=!0),r.push({node:l,editsRemaining:a.editsRemaining-1,str:a.str.slice(1)})}if(a.str.length>1){var c,u=a.str.charAt(0),d=a.str.charAt(1);d in a.node.edges?c=a.node.edges[d]:(c=new I.TokenSet,a.node.edges[d]=c),1==a.str.length&&(c.final=!0),r.push({node:c,editsRemaining:a.editsRemaining-1,str:u+a.str.slice(2)})}}}return n},I.TokenSet.fromString=function(e){for(var t=new I.TokenSet,n=t,r=0,a=e.length;r=e;t--){var n=this.uncheckedNodes[t],r=n.child.toString();r in this.minimizedNodes?n.parent.edges[n.char]=this.minimizedNodes[r]:(n.child._str=r,this.minimizedNodes[r]=n.child),this.uncheckedNodes.pop()}},I.Index=function(e){this.invertedIndex=e.invertedIndex,this.fieldVectors=e.fieldVectors,this.tokenSet=e.tokenSet,this.fields=e.fields,this.pipeline=e.pipeline},I.Index.prototype.search=function(e){return this.query((function(t){new I.QueryParser(e,t).parse()}))},I.Index.prototype.query=function(e){for(var t=new I.Query(this.fields),n=Object.create(null),r=Object.create(null),a=Object.create(null),i=Object.create(null),s=Object.create(null),o=0;o1?1:e},I.Builder.prototype.k1=function(e){this._k1=e},I.Builder.prototype.add=function(e,t){var n=e[this._ref],r=Object.keys(this._fields);this._documents[n]=t||{},this.documentCount+=1;for(var a=0;a=this.length)return I.QueryLexer.EOS;var e=this.str.charAt(this.pos);return this.pos+=1,e},I.QueryLexer.prototype.width=function(){return this.pos-this.start},I.QueryLexer.prototype.ignore=function(){this.start==this.pos&&(this.pos+=1),this.start=this.pos},I.QueryLexer.prototype.backup=function(){this.pos-=1},I.QueryLexer.prototype.acceptDigitRun=function(){var e,t;do{t=(e=this.next()).charCodeAt(0)}while(t>47&&t<58);e!=I.QueryLexer.EOS&&this.backup()},I.QueryLexer.prototype.more=function(){return this.pos1&&(e.backup(),e.emit(I.QueryLexer.TERM)),e.ignore(),e.more())return I.QueryLexer.lexText},I.QueryLexer.lexEditDistance=function(e){return e.ignore(),e.acceptDigitRun(),e.emit(I.QueryLexer.EDIT_DISTANCE),I.QueryLexer.lexText},I.QueryLexer.lexBoost=function(e){return e.ignore(),e.acceptDigitRun(),e.emit(I.QueryLexer.BOOST),I.QueryLexer.lexText},I.QueryLexer.lexEOS=function(e){e.width()>0&&e.emit(I.QueryLexer.TERM)},I.QueryLexer.termSeparator=I.tokenizer.separator,I.QueryLexer.lexText=function(e){for(;;){var t=e.next();if(t==I.QueryLexer.EOS)return I.QueryLexer.lexEOS;if(92!=t.charCodeAt(0)){if(":"==t)return I.QueryLexer.lexField;if("~"==t)return e.backup(),e.width()>0&&e.emit(I.QueryLexer.TERM),I.QueryLexer.lexEditDistance;if("^"==t)return e.backup(),e.width()>0&&e.emit(I.QueryLexer.TERM),I.QueryLexer.lexBoost;if("+"==t&&1===e.width())return e.emit(I.QueryLexer.PRESENCE),I.QueryLexer.lexText;if("-"==t&&1===e.width())return e.emit(I.QueryLexer.PRESENCE),I.QueryLexer.lexText;if(t.match(I.QueryLexer.termSeparator))return I.QueryLexer.lexTerm}else e.escapeCharacter()}},I.QueryParser=function(e,t){this.lexer=new I.QueryLexer(e),this.query=t,this.currentClause={},this.lexemeIdx=0},I.QueryParser.prototype.parse=function(){this.lexer.run(),this.lexemes=this.lexer.lexemes;for(var e=I.QueryParser.parseClause;e;)e=e(this);return this.query},I.QueryParser.prototype.peekLexeme=function(){return this.lexemes[this.lexemeIdx]},I.QueryParser.prototype.consumeLexeme=function(){var e=this.peekLexeme();return this.lexemeIdx+=1,e},I.QueryParser.prototype.nextClause=function(){var e=this.currentClause;this.query.clause(e),this.currentClause={}},I.QueryParser.parseClause=function(e){var t=e.peekLexeme();if(null!=t)switch(t.type){case I.QueryLexer.PRESENCE:return I.QueryParser.parsePresence;case I.QueryLexer.FIELD:return I.QueryParser.parseField;case I.QueryLexer.TERM:return I.QueryParser.parseTerm;default:var n="expected either a field or a term, found "+t.type;throw t.str.length>=1&&(n+=" with value '"+t.str+"'"),new I.QueryParseError(n,t.start,t.end)}},I.QueryParser.parsePresence=function(e){var t=e.consumeLexeme();if(null!=t){switch(t.str){case"-":e.currentClause.presence=I.Query.presence.PROHIBITED;break;case"+":e.currentClause.presence=I.Query.presence.REQUIRED;break;default:var n="unrecognised presence operator'"+t.str+"'";throw new I.QueryParseError(n,t.start,t.end)}var r=e.peekLexeme();if(null==r){n="expecting term or field, found nothing";throw new I.QueryParseError(n,t.start,t.end)}switch(r.type){case I.QueryLexer.FIELD:return I.QueryParser.parseField;case I.QueryLexer.TERM:return I.QueryParser.parseTerm;default:n="expecting term or field, found '"+r.type+"'";throw new I.QueryParseError(n,r.start,r.end)}}},I.QueryParser.parseField=function(e){var t=e.consumeLexeme();if(null!=t){if(-1==e.query.allFields.indexOf(t.str)){var n=e.query.allFields.map((function(e){return"'"+e+"'"})).join(", "),r="unrecognised field '"+t.str+"', possible fields: "+n;throw new I.QueryParseError(r,t.start,t.end)}e.currentClause.fields=[t.str];var a=e.peekLexeme();if(null==a){r="expecting term, found nothing";throw new I.QueryParseError(r,t.start,t.end)}if(a.type===I.QueryLexer.TERM)return I.QueryParser.parseTerm;r="expecting term, found '"+a.type+"'";throw new I.QueryParseError(r,a.start,a.end)}},I.QueryParser.parseTerm=function(e){var t=e.consumeLexeme();if(null!=t){e.currentClause.term=t.str.toLowerCase(),-1!=t.str.indexOf("*")&&(e.currentClause.usePipeline=!1);var n=e.peekLexeme();if(null!=n)switch(n.type){case I.QueryLexer.TERM:return e.nextClause(),I.QueryParser.parseTerm;case I.QueryLexer.FIELD:return e.nextClause(),I.QueryParser.parseField;case I.QueryLexer.EDIT_DISTANCE:return I.QueryParser.parseEditDistance;case I.QueryLexer.BOOST:return I.QueryParser.parseBoost;case I.QueryLexer.PRESENCE:return e.nextClause(),I.QueryParser.parsePresence;default:var r="Unexpected lexeme type '"+n.type+"'";throw new I.QueryParseError(r,n.start,n.end)}else e.nextClause()}},I.QueryParser.parseEditDistance=function(e){var t=e.consumeLexeme();if(null!=t){var n=parseInt(t.str,10);if(isNaN(n)){var r="edit distance must be numeric";throw new I.QueryParseError(r,t.start,t.end)}e.currentClause.editDistance=n;var a=e.peekLexeme();if(null!=a)switch(a.type){case I.QueryLexer.TERM:return e.nextClause(),I.QueryParser.parseTerm;case I.QueryLexer.FIELD:return e.nextClause(),I.QueryParser.parseField;case I.QueryLexer.EDIT_DISTANCE:return I.QueryParser.parseEditDistance;case I.QueryLexer.BOOST:return I.QueryParser.parseBoost;case I.QueryLexer.PRESENCE:return e.nextClause(),I.QueryParser.parsePresence;default:r="Unexpected lexeme type '"+a.type+"'";throw new I.QueryParseError(r,a.start,a.end)}else e.nextClause()}},I.QueryParser.parseBoost=function(e){var t=e.consumeLexeme();if(null!=t){var n=parseInt(t.str,10);if(isNaN(n)){var r="boost must be numeric";throw new I.QueryParseError(r,t.start,t.end)}e.currentClause.boost=n;var a=e.peekLexeme();if(null!=a)switch(a.type){case I.QueryLexer.TERM:return e.nextClause(),I.QueryParser.parseTerm;case I.QueryLexer.FIELD:return e.nextClause(),I.QueryParser.parseField;case I.QueryLexer.EDIT_DISTANCE:return I.QueryParser.parseEditDistance;case I.QueryLexer.BOOST:return I.QueryParser.parseBoost;case I.QueryLexer.PRESENCE:return e.nextClause(),I.QueryParser.parsePresence;default:r="Unexpected lexeme type '"+a.type+"'";throw new I.QueryParseError(r,a.start,a.end)}else e.nextClause()}},void 0===(a="function"==typeof(r=function(){return I})?r.call(t,n,t,e):r)||(e.exports=a)}()},813:function(e){e.exports=function(){"use strict";var e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},t=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},n=function(){function e(e,t){for(var n=0;n1&&void 0!==arguments[1])||arguments[1],a=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[],i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:5e3;t(this,e),this.ctx=n,this.iframes=r,this.exclude=a,this.iframesTimeout=i}return n(e,[{key:"getContexts",value:function(){var e=[];return(void 0!==this.ctx&&this.ctx?NodeList.prototype.isPrototypeOf(this.ctx)?Array.prototype.slice.call(this.ctx):Array.isArray(this.ctx)?this.ctx:"string"==typeof this.ctx?Array.prototype.slice.call(document.querySelectorAll(this.ctx)):[this.ctx]:[]).forEach((function(t){var n=e.filter((function(e){return e.contains(t)})).length>0;-1!==e.indexOf(t)||n||e.push(t)})),e}},{key:"getIframeContents",value:function(e,t){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:function(){},r=void 0;try{var a=e.contentWindow;if(r=a.document,!a||!r)throw new Error("iframe inaccessible")}catch(i){n()}r&&t(r)}},{key:"isIframeBlank",value:function(e){var t="about:blank",n=e.getAttribute("src").trim();return e.contentWindow.location.href===t&&n!==t&&n}},{key:"observeIframeLoad",value:function(e,t,n){var r=this,a=!1,i=null,s=function s(){if(!a){a=!0,clearTimeout(i);try{r.isIframeBlank(e)||(e.removeEventListener("load",s),r.getIframeContents(e,t,n))}catch(o){n()}}};e.addEventListener("load",s),i=setTimeout(s,this.iframesTimeout)}},{key:"onIframeReady",value:function(e,t,n){try{"complete"===e.contentWindow.document.readyState?this.isIframeBlank(e)?this.observeIframeLoad(e,t,n):this.getIframeContents(e,t,n):this.observeIframeLoad(e,t,n)}catch(r){n()}}},{key:"waitForIframes",value:function(e,t){var n=this,r=0;this.forEachIframe(e,(function(){return!0}),(function(e){r++,n.waitForIframes(e.querySelector("html"),(function(){--r||t()}))}),(function(e){e||t()}))}},{key:"forEachIframe",value:function(t,n,r){var a=this,i=arguments.length>3&&void 0!==arguments[3]?arguments[3]:function(){},s=t.querySelectorAll("iframe"),o=s.length,l=0;s=Array.prototype.slice.call(s);var c=function(){--o<=0&&i(l)};o||c(),s.forEach((function(t){e.matches(t,a.exclude)?c():a.onIframeReady(t,(function(e){n(t)&&(l++,r(e)),c()}),c)}))}},{key:"createIterator",value:function(e,t,n){return document.createNodeIterator(e,t,n,!1)}},{key:"createInstanceOnIframe",value:function(t){return new e(t.querySelector("html"),this.iframes)}},{key:"compareNodeIframe",value:function(e,t,n){if(e.compareDocumentPosition(n)&Node.DOCUMENT_POSITION_PRECEDING){if(null===t)return!0;if(t.compareDocumentPosition(n)&Node.DOCUMENT_POSITION_FOLLOWING)return!0}return!1}},{key:"getIteratorNode",value:function(e){var t=e.previousNode();return{prevNode:t,node:(null===t||e.nextNode())&&e.nextNode()}}},{key:"checkIframeFilter",value:function(e,t,n,r){var a=!1,i=!1;return r.forEach((function(e,t){e.val===n&&(a=t,i=e.handled)})),this.compareNodeIframe(e,t,n)?(!1!==a||i?!1===a||i||(r[a].handled=!0):r.push({val:n,handled:!0}),!0):(!1===a&&r.push({val:n,handled:!1}),!1)}},{key:"handleOpenIframes",value:function(e,t,n,r){var a=this;e.forEach((function(e){e.handled||a.getIframeContents(e.val,(function(e){a.createInstanceOnIframe(e).forEachNode(t,n,r)}))}))}},{key:"iterateThroughNodes",value:function(e,t,n,r,a){for(var i=this,s=this.createIterator(t,e,r),o=[],l=[],c=void 0,u=void 0,d=function(){var e=i.getIteratorNode(s);return u=e.prevNode,c=e.node};d();)this.iframes&&this.forEachIframe(t,(function(e){return i.checkIframeFilter(c,u,e,o)}),(function(t){i.createInstanceOnIframe(t).forEachNode(e,(function(e){return l.push(e)}),r)})),l.push(c);l.forEach((function(e){n(e)})),this.iframes&&this.handleOpenIframes(o,e,n,r),a()}},{key:"forEachNode",value:function(e,t,n){var r=this,a=arguments.length>3&&void 0!==arguments[3]?arguments[3]:function(){},i=this.getContexts(),s=i.length;s||a(),i.forEach((function(i){var o=function(){r.iterateThroughNodes(e,i,t,n,(function(){--s<=0&&a()}))};r.iframes?r.waitForIframes(i,o):o()}))}}],[{key:"matches",value:function(e,t){var n="string"==typeof t?[t]:t,r=e.matches||e.matchesSelector||e.msMatchesSelector||e.mozMatchesSelector||e.oMatchesSelector||e.webkitMatchesSelector;if(r){var a=!1;return n.every((function(t){return!r.call(e,t)||(a=!0,!1)})),a}return!1}}]),e}(),i=function(){function i(e){t(this,i),this.ctx=e,this.ie=!1;var n=window.navigator.userAgent;(n.indexOf("MSIE")>-1||n.indexOf("Trident")>-1)&&(this.ie=!0)}return n(i,[{key:"log",value:function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"debug",r=this.opt.log;this.opt.debug&&"object"===(void 0===r?"undefined":e(r))&&"function"==typeof r[n]&&r[n]("mark.js: "+t)}},{key:"escapeStr",value:function(e){return e.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g,"\\$&")}},{key:"createRegExp",value:function(e){return"disabled"!==this.opt.wildcards&&(e=this.setupWildcardsRegExp(e)),e=this.escapeStr(e),Object.keys(this.opt.synonyms).length&&(e=this.createSynonymsRegExp(e)),(this.opt.ignoreJoiners||this.opt.ignorePunctuation.length)&&(e=this.setupIgnoreJoinersRegExp(e)),this.opt.diacritics&&(e=this.createDiacriticsRegExp(e)),e=this.createMergedBlanksRegExp(e),(this.opt.ignoreJoiners||this.opt.ignorePunctuation.length)&&(e=this.createJoinersRegExp(e)),"disabled"!==this.opt.wildcards&&(e=this.createWildcardsRegExp(e)),e=this.createAccuracyRegExp(e)}},{key:"createSynonymsRegExp",value:function(e){var t=this.opt.synonyms,n=this.opt.caseSensitive?"":"i",r=this.opt.ignoreJoiners||this.opt.ignorePunctuation.length?"\0":"";for(var a in t)if(t.hasOwnProperty(a)){var i=t[a],s="disabled"!==this.opt.wildcards?this.setupWildcardsRegExp(a):this.escapeStr(a),o="disabled"!==this.opt.wildcards?this.setupWildcardsRegExp(i):this.escapeStr(i);""!==s&&""!==o&&(e=e.replace(new RegExp("("+this.escapeStr(s)+"|"+this.escapeStr(o)+")","gm"+n),r+"("+this.processSynomyms(s)+"|"+this.processSynomyms(o)+")"+r))}return e}},{key:"processSynomyms",value:function(e){return(this.opt.ignoreJoiners||this.opt.ignorePunctuation.length)&&(e=this.setupIgnoreJoinersRegExp(e)),e}},{key:"setupWildcardsRegExp",value:function(e){return(e=e.replace(/(?:\\)*\?/g,(function(e){return"\\"===e.charAt(0)?"?":"\x01"}))).replace(/(?:\\)*\*/g,(function(e){return"\\"===e.charAt(0)?"*":"\x02"}))}},{key:"createWildcardsRegExp",value:function(e){var t="withSpaces"===this.opt.wildcards;return e.replace(/\u0001/g,t?"[\\S\\s]?":"\\S?").replace(/\u0002/g,t?"[\\S\\s]*?":"\\S*")}},{key:"setupIgnoreJoinersRegExp",value:function(e){return e.replace(/[^(|)\\]/g,(function(e,t,n){var r=n.charAt(t+1);return/[(|)\\]/.test(r)||""===r?e:e+"\0"}))}},{key:"createJoinersRegExp",value:function(e){var t=[],n=this.opt.ignorePunctuation;return Array.isArray(n)&&n.length&&t.push(this.escapeStr(n.join(""))),this.opt.ignoreJoiners&&t.push("\\u00ad\\u200b\\u200c\\u200d"),t.length?e.split(/\u0000+/).join("["+t.join("")+"]*"):e}},{key:"createDiacriticsRegExp",value:function(e){var t=this.opt.caseSensitive?"":"i",n=this.opt.caseSensitive?["a\xe0\xe1\u1ea3\xe3\u1ea1\u0103\u1eb1\u1eaf\u1eb3\u1eb5\u1eb7\xe2\u1ea7\u1ea5\u1ea9\u1eab\u1ead\xe4\xe5\u0101\u0105","A\xc0\xc1\u1ea2\xc3\u1ea0\u0102\u1eb0\u1eae\u1eb2\u1eb4\u1eb6\xc2\u1ea6\u1ea4\u1ea8\u1eaa\u1eac\xc4\xc5\u0100\u0104","c\xe7\u0107\u010d","C\xc7\u0106\u010c","d\u0111\u010f","D\u0110\u010e","e\xe8\xe9\u1ebb\u1ebd\u1eb9\xea\u1ec1\u1ebf\u1ec3\u1ec5\u1ec7\xeb\u011b\u0113\u0119","E\xc8\xc9\u1eba\u1ebc\u1eb8\xca\u1ec0\u1ebe\u1ec2\u1ec4\u1ec6\xcb\u011a\u0112\u0118","i\xec\xed\u1ec9\u0129\u1ecb\xee\xef\u012b","I\xcc\xcd\u1ec8\u0128\u1eca\xce\xcf\u012a","l\u0142","L\u0141","n\xf1\u0148\u0144","N\xd1\u0147\u0143","o\xf2\xf3\u1ecf\xf5\u1ecd\xf4\u1ed3\u1ed1\u1ed5\u1ed7\u1ed9\u01a1\u1edf\u1ee1\u1edb\u1edd\u1ee3\xf6\xf8\u014d","O\xd2\xd3\u1ece\xd5\u1ecc\xd4\u1ed2\u1ed0\u1ed4\u1ed6\u1ed8\u01a0\u1ede\u1ee0\u1eda\u1edc\u1ee2\xd6\xd8\u014c","r\u0159","R\u0158","s\u0161\u015b\u0219\u015f","S\u0160\u015a\u0218\u015e","t\u0165\u021b\u0163","T\u0164\u021a\u0162","u\xf9\xfa\u1ee7\u0169\u1ee5\u01b0\u1eeb\u1ee9\u1eed\u1eef\u1ef1\xfb\xfc\u016f\u016b","U\xd9\xda\u1ee6\u0168\u1ee4\u01af\u1eea\u1ee8\u1eec\u1eee\u1ef0\xdb\xdc\u016e\u016a","y\xfd\u1ef3\u1ef7\u1ef9\u1ef5\xff","Y\xdd\u1ef2\u1ef6\u1ef8\u1ef4\u0178","z\u017e\u017c\u017a","Z\u017d\u017b\u0179"]:["a\xe0\xe1\u1ea3\xe3\u1ea1\u0103\u1eb1\u1eaf\u1eb3\u1eb5\u1eb7\xe2\u1ea7\u1ea5\u1ea9\u1eab\u1ead\xe4\xe5\u0101\u0105A\xc0\xc1\u1ea2\xc3\u1ea0\u0102\u1eb0\u1eae\u1eb2\u1eb4\u1eb6\xc2\u1ea6\u1ea4\u1ea8\u1eaa\u1eac\xc4\xc5\u0100\u0104","c\xe7\u0107\u010dC\xc7\u0106\u010c","d\u0111\u010fD\u0110\u010e","e\xe8\xe9\u1ebb\u1ebd\u1eb9\xea\u1ec1\u1ebf\u1ec3\u1ec5\u1ec7\xeb\u011b\u0113\u0119E\xc8\xc9\u1eba\u1ebc\u1eb8\xca\u1ec0\u1ebe\u1ec2\u1ec4\u1ec6\xcb\u011a\u0112\u0118","i\xec\xed\u1ec9\u0129\u1ecb\xee\xef\u012bI\xcc\xcd\u1ec8\u0128\u1eca\xce\xcf\u012a","l\u0142L\u0141","n\xf1\u0148\u0144N\xd1\u0147\u0143","o\xf2\xf3\u1ecf\xf5\u1ecd\xf4\u1ed3\u1ed1\u1ed5\u1ed7\u1ed9\u01a1\u1edf\u1ee1\u1edb\u1edd\u1ee3\xf6\xf8\u014dO\xd2\xd3\u1ece\xd5\u1ecc\xd4\u1ed2\u1ed0\u1ed4\u1ed6\u1ed8\u01a0\u1ede\u1ee0\u1eda\u1edc\u1ee2\xd6\xd8\u014c","r\u0159R\u0158","s\u0161\u015b\u0219\u015fS\u0160\u015a\u0218\u015e","t\u0165\u021b\u0163T\u0164\u021a\u0162","u\xf9\xfa\u1ee7\u0169\u1ee5\u01b0\u1eeb\u1ee9\u1eed\u1eef\u1ef1\xfb\xfc\u016f\u016bU\xd9\xda\u1ee6\u0168\u1ee4\u01af\u1eea\u1ee8\u1eec\u1eee\u1ef0\xdb\xdc\u016e\u016a","y\xfd\u1ef3\u1ef7\u1ef9\u1ef5\xffY\xdd\u1ef2\u1ef6\u1ef8\u1ef4\u0178","z\u017e\u017c\u017aZ\u017d\u017b\u0179"],r=[];return e.split("").forEach((function(a){n.every((function(n){if(-1!==n.indexOf(a)){if(r.indexOf(n)>-1)return!1;e=e.replace(new RegExp("["+n+"]","gm"+t),"["+n+"]"),r.push(n)}return!0}))})),e}},{key:"createMergedBlanksRegExp",value:function(e){return e.replace(/[\s]+/gim,"[\\s]+")}},{key:"createAccuracyRegExp",value:function(e){var t=this,n="!\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~\xa1\xbf",r=this.opt.accuracy,a="string"==typeof r?r:r.value,i="string"==typeof r?[]:r.limiters,s="";switch(i.forEach((function(e){s+="|"+t.escapeStr(e)})),a){case"partially":default:return"()("+e+")";case"complementary":return"()([^"+(s="\\s"+(s||this.escapeStr(n)))+"]*"+e+"[^"+s+"]*)";case"exactly":return"(^|\\s"+s+")("+e+")(?=$|\\s"+s+")"}}},{key:"getSeparatedKeywords",value:function(e){var t=this,n=[];return e.forEach((function(e){t.opt.separateWordSearch?e.split(" ").forEach((function(e){e.trim()&&-1===n.indexOf(e)&&n.push(e)})):e.trim()&&-1===n.indexOf(e)&&n.push(e)})),{keywords:n.sort((function(e,t){return t.length-e.length})),length:n.length}}},{key:"isNumeric",value:function(e){return Number(parseFloat(e))==e}},{key:"checkRanges",value:function(e){var t=this;if(!Array.isArray(e)||"[object Object]"!==Object.prototype.toString.call(e[0]))return this.log("markRanges() will only accept an array of objects"),this.opt.noMatch(e),[];var n=[],r=0;return e.sort((function(e,t){return e.start-t.start})).forEach((function(e){var a=t.callNoMatchOnInvalidRanges(e,r),i=a.start,s=a.end;a.valid&&(e.start=i,e.length=s-i,n.push(e),r=s)})),n}},{key:"callNoMatchOnInvalidRanges",value:function(e,t){var n=void 0,r=void 0,a=!1;return e&&void 0!==e.start?(r=(n=parseInt(e.start,10))+parseInt(e.length,10),this.isNumeric(e.start)&&this.isNumeric(e.length)&&r-t>0&&r-n>0?a=!0:(this.log("Ignoring invalid or overlapping range: "+JSON.stringify(e)),this.opt.noMatch(e))):(this.log("Ignoring invalid range: "+JSON.stringify(e)),this.opt.noMatch(e)),{start:n,end:r,valid:a}}},{key:"checkWhitespaceRanges",value:function(e,t,n){var r=void 0,a=!0,i=n.length,s=t-i,o=parseInt(e.start,10)-s;return(r=(o=o>i?i:o)+parseInt(e.length,10))>i&&(r=i,this.log("End range automatically set to the max value of "+i)),o<0||r-o<0||o>i||r>i?(a=!1,this.log("Invalid range: "+JSON.stringify(e)),this.opt.noMatch(e)):""===n.substring(o,r).replace(/\s+/g,"")&&(a=!1,this.log("Skipping whitespace only range: "+JSON.stringify(e)),this.opt.noMatch(e)),{start:o,end:r,valid:a}}},{key:"getTextNodes",value:function(e){var t=this,n="",r=[];this.iterator.forEachNode(NodeFilter.SHOW_TEXT,(function(e){r.push({start:n.length,end:(n+=e.textContent).length,node:e})}),(function(e){return t.matchesExclude(e.parentNode)?NodeFilter.FILTER_REJECT:NodeFilter.FILTER_ACCEPT}),(function(){e({value:n,nodes:r})}))}},{key:"matchesExclude",value:function(e){return a.matches(e,this.opt.exclude.concat(["script","style","title","head","html"]))}},{key:"wrapRangeInTextNode",value:function(e,t,n){var r=this.opt.element?this.opt.element:"mark",a=e.splitText(t),i=a.splitText(n-t),s=document.createElement(r);return s.setAttribute("data-markjs","true"),this.opt.className&&s.setAttribute("class",this.opt.className),s.textContent=a.textContent,a.parentNode.replaceChild(s,a),i}},{key:"wrapRangeInMappedTextNode",value:function(e,t,n,r,a){var i=this;e.nodes.every((function(s,o){var l=e.nodes[o+1];if(void 0===l||l.start>t){if(!r(s.node))return!1;var c=t-s.start,u=(n>s.end?s.end:n)-s.start,d=e.value.substr(0,s.start),p=e.value.substr(u+s.start);if(s.node=i.wrapRangeInTextNode(s.node,c,u),e.value=d+p,e.nodes.forEach((function(t,n){n>=o&&(e.nodes[n].start>0&&n!==o&&(e.nodes[n].start-=u),e.nodes[n].end-=u)})),n-=u,a(s.node.previousSibling,s.start),!(n>s.end))return!1;t=s.end}return!0}))}},{key:"wrapMatches",value:function(e,t,n,r,a){var i=this,s=0===t?0:t+1;this.getTextNodes((function(t){t.nodes.forEach((function(t){t=t.node;for(var a=void 0;null!==(a=e.exec(t.textContent))&&""!==a[s];)if(n(a[s],t)){var o=a.index;if(0!==s)for(var l=1;l{"use strict";n.r(t)},2497:(e,t,n)=>{"use strict";n.r(t)},4865:function(e,t,n){var r,a;r=function(){var e,t,n={version:"0.2.0"},r=n.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'
'};function a(e,t,n){return en?n:e}function i(e){return 100*(-1+e)}function s(e,t,n){var a;return(a="translate3d"===r.positionUsing?{transform:"translate3d("+i(e)+"%,0,0)"}:"translate"===r.positionUsing?{transform:"translate("+i(e)+"%,0)"}:{"margin-left":i(e)+"%"}).transition="all "+t+"ms "+n,a}n.configure=function(e){var t,n;for(t in e)void 0!==(n=e[t])&&e.hasOwnProperty(t)&&(r[t]=n);return this},n.status=null,n.set=function(e){var t=n.isStarted();e=a(e,r.minimum,1),n.status=1===e?null:e;var i=n.render(!t),c=i.querySelector(r.barSelector),u=r.speed,d=r.easing;return i.offsetWidth,o((function(t){""===r.positionUsing&&(r.positionUsing=n.getPositioningCSS()),l(c,s(e,u,d)),1===e?(l(i,{transition:"none",opacity:1}),i.offsetWidth,setTimeout((function(){l(i,{transition:"all "+u+"ms linear",opacity:0}),setTimeout((function(){n.remove(),t()}),u)}),u)):setTimeout(t,u)})),this},n.isStarted=function(){return"number"==typeof n.status},n.start=function(){n.status||n.set(0);var e=function(){setTimeout((function(){n.status&&(n.trickle(),e())}),r.trickleSpeed)};return r.trickle&&e(),this},n.done=function(e){return e||n.status?n.inc(.3+.5*Math.random()).set(1):this},n.inc=function(e){var t=n.status;return t?("number"!=typeof e&&(e=(1-t)*a(Math.random()*t,.1,.95)),t=a(t+e,0,.994),n.set(t)):n.start()},n.trickle=function(){return n.inc(Math.random()*r.trickleRate)},e=0,t=0,n.promise=function(r){return r&&"resolved"!==r.state()?(0===t&&n.start(),e++,t++,r.always((function(){0==--t?(e=0,n.done()):n.set((e-t)/e)})),this):this},n.render=function(e){if(n.isRendered())return document.getElementById("nprogress");u(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=r.template;var a,s=t.querySelector(r.barSelector),o=e?"-100":i(n.status||0),c=document.querySelector(r.parent);return l(s,{transition:"all 0 linear",transform:"translate3d("+o+"%,0,0)"}),r.showSpinner||(a=t.querySelector(r.spinnerSelector))&&m(a),c!=document.body&&u(c,"nprogress-custom-parent"),c.appendChild(t),t},n.remove=function(){d(document.documentElement,"nprogress-busy"),d(document.querySelector(r.parent),"nprogress-custom-parent");var e=document.getElementById("nprogress");e&&m(e)},n.isRendered=function(){return!!document.getElementById("nprogress")},n.getPositioningCSS=function(){var e=document.body.style,t="WebkitTransform"in e?"Webkit":"MozTransform"in e?"Moz":"msTransform"in e?"ms":"OTransform"in e?"O":"";return t+"Perspective"in e?"translate3d":t+"Transform"in e?"translate":"margin"};var o=function(){var e=[];function t(){var n=e.shift();n&&n(t)}return function(n){e.push(n),1==e.length&&t()}}(),l=function(){var e=["Webkit","O","Moz","ms"],t={};function n(e){return e.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,(function(e,t){return t.toUpperCase()}))}function r(t){var n=document.body.style;if(t in n)return t;for(var r,a=e.length,i=t.charAt(0).toUpperCase()+t.slice(1);a--;)if((r=e[a]+i)in n)return r;return t}function a(e){return e=n(e),t[e]||(t[e]=r(e))}function i(e,t,n){t=a(t),e.style[t]=n}return function(e,t){var n,r,a=arguments;if(2==a.length)for(n in t)void 0!==(r=t[n])&&t.hasOwnProperty(n)&&i(e,n,r);else i(e,a[1],a[2])}}();function c(e,t){return("string"==typeof e?e:p(e)).indexOf(" "+t+" ")>=0}function u(e,t){var n=p(e),r=n+t;c(n,t)||(e.className=r.substring(1))}function d(e,t){var n,r=p(e);c(e,t)&&(n=r.replace(" "+t+" "," "),e.className=n.substring(1,n.length-1))}function p(e){return(" "+(e.className||"")+" ").replace(/\s+/gi," ")}function m(e){e&&e.parentNode&&e.parentNode.removeChild(e)}return n},void 0===(a="function"==typeof r?r.call(t,n,t,e):r)||(e.exports=a)},7418:e=>{"use strict";var t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable;function a(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(e){r[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(a){return!1}}()?Object.assign:function(e,i){for(var s,o,l=a(e),c=1;c{var r=n(5826);e.exports=m,e.exports.parse=i,e.exports.compile=function(e,t){return o(i(e,t),t)},e.exports.tokensToFunction=o,e.exports.tokensToRegExp=p;var a=new RegExp(["(\\\\.)","([\\/.])?(?:(?:\\:(\\w+)(?:\\(((?:\\\\.|[^\\\\()])+)\\))?|\\(((?:\\\\.|[^\\\\()])+)\\))([+*?])?|(\\*))"].join("|"),"g");function i(e,t){for(var n,r=[],i=0,s=0,o="",u=t&&t.delimiter||"/";null!=(n=a.exec(e));){var d=n[0],p=n[1],m=n.index;if(o+=e.slice(s,m),s=m+d.length,p)o+=p[1];else{var f=e[s],h=n[2],g=n[3],b=n[4],x=n[5],v=n[6],y=n[7];o&&(r.push(o),o="");var w=null!=h&&null!=f&&f!==h,k="+"===v||"*"===v,S="?"===v||"*"===v,_=n[2]||u,E=b||x;r.push({name:g||i++,prefix:h||"",delimiter:_,optional:S,repeat:k,partial:w,asterisk:!!y,pattern:E?c(E):y?".*":"[^"+l(_)+"]+?"})}}return s{"use strict";n.d(t,{Z:()=>i});var r=function(){var e=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,n={},r={util:{encode:function e(t){return t instanceof a?new a(t.type,e(t.content),t.alias):Array.isArray(t)?t.map(e):t.replace(/&/g,"&").replace(/=d.reach);S+=k.value.length,k=k.next){var _=k.value;if(t.length>e.length)return;if(!(_ instanceof a)){var E,T=1;if(x){if(!(E=i(w,S,e,b))||E.index>=e.length)break;var C=E.index,P=E.index+E[0].length,j=S;for(j+=k.value.length;C>=j;)j+=(k=k.next).value.length;if(S=j-=k.value.length,k.value instanceof a)continue;for(var L=k;L!==t.tail&&(jd.reach&&(d.reach=O);var I=k.prev;if(N&&(I=l(t,I,N),S+=N.length),c(t,I,T),k=l(t,I,new a(p,g?r.tokenize(R,g):R,v,R)),A&&l(t,k,A),T>1){var D={cause:p+","+f,reach:O};s(e,t,n,k.prev,S,D),d&&D.reach>d.reach&&(d.reach=D.reach)}}}}}}function o(){var e={value:null,prev:null,next:null},t={value:null,prev:e,next:null};e.next=t,this.head=e,this.tail=t,this.length=0}function l(e,t,n){var r=t.next,a={value:n,prev:t,next:r};return t.next=a,r.prev=a,e.length++,a}function c(e,t,n){for(var r=t.next,a=0;a"+i.content+""},r}(),a=r;r.default=r,a.languages.markup={comment:{pattern://,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern://i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},a.languages.markup.tag.inside["attr-value"].inside.entity=a.languages.markup.entity,a.languages.markup.doctype.inside["internal-subset"].inside=a.languages.markup,a.hooks.add("wrap",(function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))})),Object.defineProperty(a.languages.markup.tag,"addInlined",{value:function(e,t){var n={};n["language-"+t]={pattern:/(^$)/i,lookbehind:!0,inside:a.languages[t]},n.cdata=/^$/i;var r={"included-cdata":{pattern://i,inside:n}};r["language-"+t]={pattern:/[\s\S]+/,inside:a.languages[t]};var i={};i[e]={pattern:RegExp(/(<__[^>]*>)(?:))*\]\]>|(?!)/.source.replace(/__/g,(function(){return e})),"i"),lookbehind:!0,greedy:!0,inside:r},a.languages.insertBefore("markup","cdata",i)}}),Object.defineProperty(a.languages.markup.tag,"addAttribute",{value:function(e,t){a.languages.markup.tag.inside["special-attr"].push({pattern:RegExp(/(^|["'\s])/.source+"(?:"+e+")"+/\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))/.source,"i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[t,"language-"+t],inside:a.languages[t]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),a.languages.html=a.languages.markup,a.languages.mathml=a.languages.markup,a.languages.svg=a.languages.markup,a.languages.xml=a.languages.extend("markup",{}),a.languages.ssml=a.languages.xml,a.languages.atom=a.languages.xml,a.languages.rss=a.languages.xml,function(e){var t="\\b(?:BASH|BASHOPTS|BASH_ALIASES|BASH_ARGC|BASH_ARGV|BASH_CMDS|BASH_COMPLETION_COMPAT_DIR|BASH_LINENO|BASH_REMATCH|BASH_SOURCE|BASH_VERSINFO|BASH_VERSION|COLORTERM|COLUMNS|COMP_WORDBREAKS|DBUS_SESSION_BUS_ADDRESS|DEFAULTS_PATH|DESKTOP_SESSION|DIRSTACK|DISPLAY|EUID|GDMSESSION|GDM_LANG|GNOME_KEYRING_CONTROL|GNOME_KEYRING_PID|GPG_AGENT_INFO|GROUPS|HISTCONTROL|HISTFILE|HISTFILESIZE|HISTSIZE|HOME|HOSTNAME|HOSTTYPE|IFS|INSTANCE|JOB|LANG|LANGUAGE|LC_ADDRESS|LC_ALL|LC_IDENTIFICATION|LC_MEASUREMENT|LC_MONETARY|LC_NAME|LC_NUMERIC|LC_PAPER|LC_TELEPHONE|LC_TIME|LESSCLOSE|LESSOPEN|LINES|LOGNAME|LS_COLORS|MACHTYPE|MAILCHECK|MANDATORY_PATH|NO_AT_BRIDGE|OLDPWD|OPTERR|OPTIND|ORBIT_SOCKETDIR|OSTYPE|PAPERSIZE|PATH|PIPESTATUS|PPID|PS1|PS2|PS3|PS4|PWD|RANDOM|REPLY|SECONDS|SELINUX_INIT|SESSION|SESSIONTYPE|SESSION_MANAGER|SHELL|SHELLOPTS|SHLVL|SSH_AUTH_SOCK|TERM|UID|UPSTART_EVENTS|UPSTART_INSTANCE|UPSTART_JOB|UPSTART_SESSION|USER|WINDOWID|XAUTHORITY|XDG_CONFIG_DIRS|XDG_CURRENT_DESKTOP|XDG_DATA_DIRS|XDG_GREETER_DATA_DIR|XDG_MENU_PREFIX|XDG_RUNTIME_DIR|XDG_SEAT|XDG_SEAT_PATH|XDG_SESSION_DESKTOP|XDG_SESSION_ID|XDG_SESSION_PATH|XDG_SESSION_TYPE|XDG_VTNR|XMODIFIERS)\\b",n={pattern:/(^(["']?)\w+\2)[ \t]+\S.*/,lookbehind:!0,alias:"punctuation",inside:null},r={bash:n,environment:{pattern:RegExp("\\$"+t),alias:"constant"},variable:[{pattern:/\$?\(\([\s\S]+?\)\)/,greedy:!0,inside:{variable:[{pattern:/(^\$\(\([\s\S]+)\)\)/,lookbehind:!0},/^\$\(\(/],number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee]-?\d+)?/,operator:/--|\+\+|\*\*=?|<<=?|>>=?|&&|\|\||[=!+\-*/%<>^&|]=?|[?~:]/,punctuation:/\(\(?|\)\)?|,|;/}},{pattern:/\$\((?:\([^)]+\)|[^()])+\)|`[^`]+`/,greedy:!0,inside:{variable:/^\$\(|^`|\)$|`$/}},{pattern:/\$\{[^}]+\}/,greedy:!0,inside:{operator:/:[-=?+]?|[!\/]|##?|%%?|\^\^?|,,?/,punctuation:/[\[\]]/,environment:{pattern:RegExp("(\\{)"+t),lookbehind:!0,alias:"constant"}}},/\$(?:\w+|[#?*!@$])/],entity:/\\(?:[abceEfnrtv\\"]|O?[0-7]{1,3}|U[0-9a-fA-F]{8}|u[0-9a-fA-F]{4}|x[0-9a-fA-F]{1,2})/};e.languages.bash={shebang:{pattern:/^#!\s*\/.*/,alias:"important"},comment:{pattern:/(^|[^"{\\$])#.*/,lookbehind:!0},"function-name":[{pattern:/(\bfunction\s+)[\w-]+(?=(?:\s*\(?:\s*\))?\s*\{)/,lookbehind:!0,alias:"function"},{pattern:/\b[\w-]+(?=\s*\(\s*\)\s*\{)/,alias:"function"}],"for-or-select":{pattern:/(\b(?:for|select)\s+)\w+(?=\s+in\s)/,alias:"variable",lookbehind:!0},"assign-left":{pattern:/(^|[\s;|&]|[<>]\()\w+(?=\+?=)/,inside:{environment:{pattern:RegExp("(^|[\\s;|&]|[<>]\\()"+t),lookbehind:!0,alias:"constant"}},alias:"variable",lookbehind:!0},string:[{pattern:/((?:^|[^<])<<-?\s*)(\w+)\s[\s\S]*?(?:\r?\n|\r)\2/,lookbehind:!0,greedy:!0,inside:r},{pattern:/((?:^|[^<])<<-?\s*)(["'])(\w+)\2\s[\s\S]*?(?:\r?\n|\r)\3/,lookbehind:!0,greedy:!0,inside:{bash:n}},{pattern:/(^|[^\\](?:\\\\)*)"(?:\\[\s\S]|\$\([^)]+\)|\$(?!\()|`[^`]+`|[^"\\`$])*"/,lookbehind:!0,greedy:!0,inside:r},{pattern:/(^|[^$\\])'[^']*'/,lookbehind:!0,greedy:!0},{pattern:/\$'(?:[^'\\]|\\[\s\S])*'/,greedy:!0,inside:{entity:r.entity}}],environment:{pattern:RegExp("\\$?"+t),alias:"constant"},variable:r.variable,function:{pattern:/(^|[\s;|&]|[<>]\()(?:add|apropos|apt|apt-cache|apt-get|aptitude|aspell|automysqlbackup|awk|basename|bash|bc|bconsole|bg|bzip2|cal|cat|cfdisk|chgrp|chkconfig|chmod|chown|chroot|cksum|clear|cmp|column|comm|composer|cp|cron|crontab|csplit|curl|cut|date|dc|dd|ddrescue|debootstrap|df|diff|diff3|dig|dir|dircolors|dirname|dirs|dmesg|docker|docker-compose|du|egrep|eject|env|ethtool|expand|expect|expr|fdformat|fdisk|fg|fgrep|file|find|fmt|fold|format|free|fsck|ftp|fuser|gawk|git|gparted|grep|groupadd|groupdel|groupmod|groups|grub-mkconfig|gzip|halt|head|hg|history|host|hostname|htop|iconv|id|ifconfig|ifdown|ifup|import|install|ip|jobs|join|kill|killall|less|link|ln|locate|logname|logrotate|look|lpc|lpr|lprint|lprintd|lprintq|lprm|ls|lsof|lynx|make|man|mc|mdadm|mkconfig|mkdir|mke2fs|mkfifo|mkfs|mkisofs|mknod|mkswap|mmv|more|most|mount|mtools|mtr|mutt|mv|nano|nc|netstat|nice|nl|node|nohup|notify-send|npm|nslookup|op|open|parted|passwd|paste|pathchk|ping|pkill|pnpm|podman|podman-compose|popd|pr|printcap|printenv|ps|pushd|pv|quota|quotacheck|quotactl|ram|rar|rcp|reboot|remsync|rename|renice|rev|rm|rmdir|rpm|rsync|scp|screen|sdiff|sed|sendmail|seq|service|sftp|sh|shellcheck|shuf|shutdown|sleep|slocate|sort|split|ssh|stat|strace|su|sudo|sum|suspend|swapon|sync|tac|tail|tar|tee|time|timeout|top|touch|tr|traceroute|tsort|tty|umount|uname|unexpand|uniq|units|unrar|unshar|unzip|update-grub|uptime|useradd|userdel|usermod|users|uudecode|uuencode|v|vcpkg|vdir|vi|vim|virsh|vmstat|wait|watch|wc|wget|whereis|which|who|whoami|write|xargs|xdg-open|yarn|yes|zenity|zip|zsh|zypper)(?=$|[)\s;|&])/,lookbehind:!0},keyword:{pattern:/(^|[\s;|&]|[<>]\()(?:case|do|done|elif|else|esac|fi|for|function|if|in|select|then|until|while)(?=$|[)\s;|&])/,lookbehind:!0},builtin:{pattern:/(^|[\s;|&]|[<>]\()(?:\.|:|alias|bind|break|builtin|caller|cd|command|continue|declare|echo|enable|eval|exec|exit|export|getopts|hash|help|let|local|logout|mapfile|printf|pwd|read|readarray|readonly|return|set|shift|shopt|source|test|times|trap|type|typeset|ulimit|umask|unalias|unset)(?=$|[)\s;|&])/,lookbehind:!0,alias:"class-name"},boolean:{pattern:/(^|[\s;|&]|[<>]\()(?:false|true)(?=$|[)\s;|&])/,lookbehind:!0},"file-descriptor":{pattern:/\B&\d\b/,alias:"important"},operator:{pattern:/\d?<>|>\||\+=|=[=~]?|!=?|<<[<-]?|[&\d]?>>|\d[<>]&?|[<>][&=]?|&[>&]?|\|[&|]?/,inside:{"file-descriptor":{pattern:/^\d/,alias:"important"}}},punctuation:/\$?\(\(?|\)\)?|\.\.|[{}[\];\\]/,number:{pattern:/(^|\s)(?:[1-9]\d*|0)(?:[.,]\d+)?\b/,lookbehind:!0}},n.inside=e.languages.bash;for(var a=["comment","function-name","for-or-select","assign-left","string","environment","function","keyword","builtin","boolean","file-descriptor","operator","punctuation","number"],i=r.variable[1].inside,s=0;s]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/},a.languages.c=a.languages.extend("clike",{comment:{pattern:/\/\/(?:[^\r\n\\]|\\(?:\r\n?|\n|(?![\r\n])))*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},"class-name":{pattern:/(\b(?:enum|struct)\s+(?:__attribute__\s*\(\([\s\S]*?\)\)\s*)?)\w+|\b[a-z]\w*_t\b/,lookbehind:!0},keyword:/\b(?:_Alignas|_Alignof|_Atomic|_Bool|_Complex|_Generic|_Imaginary|_Noreturn|_Static_assert|_Thread_local|__attribute__|asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|inline|int|long|register|return|short|signed|sizeof|static|struct|switch|typedef|typeof|union|unsigned|void|volatile|while)\b/,function:/\b[a-z_]\w*(?=\s*\()/i,number:/(?:\b0x(?:[\da-f]+(?:\.[\da-f]*)?|\.[\da-f]+)(?:p[+-]?\d+)?|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?)[ful]{0,4}/i,operator:/>>=?|<<=?|->|([-+&|:])\1|[?:~]|[-+*/%&|^!=<>]=?/}),a.languages.insertBefore("c","string",{char:{pattern:/'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n]){0,32}'/,greedy:!0}}),a.languages.insertBefore("c","string",{macro:{pattern:/(^[\t ]*)#\s*[a-z](?:[^\r\n\\/]|\/(?!\*)|\/\*(?:[^*]|\*(?!\/))*\*\/|\\(?:\r\n|[\s\S]))*/im,lookbehind:!0,greedy:!0,alias:"property",inside:{string:[{pattern:/^(#\s*include\s*)<[^>]+>/,lookbehind:!0},a.languages.c.string],char:a.languages.c.char,comment:a.languages.c.comment,"macro-name":[{pattern:/(^#\s*define\s+)\w+\b(?!\()/i,lookbehind:!0},{pattern:/(^#\s*define\s+)\w+\b(?=\()/i,lookbehind:!0,alias:"function"}],directive:{pattern:/^(#\s*)[a-z]+/,lookbehind:!0,alias:"keyword"},"directive-hash":/^#/,punctuation:/##|\\(?=[\r\n])/,expression:{pattern:/\S[\s\S]*/,inside:a.languages.c}}}}),a.languages.insertBefore("c","function",{constant:/\b(?:EOF|NULL|SEEK_CUR|SEEK_END|SEEK_SET|__DATE__|__FILE__|__LINE__|__TIMESTAMP__|__TIME__|__func__|stderr|stdin|stdout)\b/}),delete a.languages.c.boolean,function(e){var t=/\b(?:alignas|alignof|asm|auto|bool|break|case|catch|char|char16_t|char32_t|char8_t|class|co_await|co_return|co_yield|compl|concept|const|const_cast|consteval|constexpr|constinit|continue|decltype|default|delete|do|double|dynamic_cast|else|enum|explicit|export|extern|final|float|for|friend|goto|if|import|inline|int|int16_t|int32_t|int64_t|int8_t|long|module|mutable|namespace|new|noexcept|nullptr|operator|override|private|protected|public|register|reinterpret_cast|requires|return|short|signed|sizeof|static|static_assert|static_cast|struct|switch|template|this|thread_local|throw|try|typedef|typeid|typename|uint16_t|uint32_t|uint64_t|uint8_t|union|unsigned|using|virtual|void|volatile|wchar_t|while)\b/,n=/\b(?!)\w+(?:\s*\.\s*\w+)*\b/.source.replace(//g,(function(){return t.source}));e.languages.cpp=e.languages.extend("c",{"class-name":[{pattern:RegExp(/(\b(?:class|concept|enum|struct|typename)\s+)(?!)\w+/.source.replace(//g,(function(){return t.source}))),lookbehind:!0},/\b[A-Z]\w*(?=\s*::\s*\w+\s*\()/,/\b[A-Z_]\w*(?=\s*::\s*~\w+\s*\()/i,/\b\w+(?=\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>\s*::\s*\w+\s*\()/],keyword:t,number:{pattern:/(?:\b0b[01']+|\b0x(?:[\da-f']+(?:\.[\da-f']*)?|\.[\da-f']+)(?:p[+-]?[\d']+)?|(?:\b[\d']+(?:\.[\d']*)?|\B\.[\d']+)(?:e[+-]?[\d']+)?)[ful]{0,4}/i,greedy:!0},operator:/>>=?|<<=?|->|--|\+\+|&&|\|\||[?:~]|<=>|[-+*/%&|^!=<>]=?|\b(?:and|and_eq|bitand|bitor|not|not_eq|or|or_eq|xor|xor_eq)\b/,boolean:/\b(?:false|true)\b/}),e.languages.insertBefore("cpp","string",{module:{pattern:RegExp(/(\b(?:import|module)\s+)/.source+"(?:"+/"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|<[^<>\r\n]*>/.source+"|"+/(?:\s*:\s*)?|:\s*/.source.replace(//g,(function(){return n}))+")"),lookbehind:!0,greedy:!0,inside:{string:/^[<"][\s\S]+/,operator:/:/,punctuation:/\./}},"raw-string":{pattern:/R"([^()\\ ]{0,16})\([\s\S]*?\)\1"/,alias:"string",greedy:!0}}),e.languages.insertBefore("cpp","keyword",{"generic-function":{pattern:/\b(?!operator\b)[a-z_]\w*\s*<(?:[^<>]|<[^<>]*>)*>(?=\s*\()/i,inside:{function:/^\w+/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:e.languages.cpp}}}}),e.languages.insertBefore("cpp","operator",{"double-colon":{pattern:/::/,alias:"punctuation"}}),e.languages.insertBefore("cpp","class-name",{"base-clause":{pattern:/(\b(?:class|struct)\s+\w+\s*:\s*)[^;{}"'\s]+(?:\s+[^;{}"'\s]+)*(?=\s*[;{])/,lookbehind:!0,greedy:!0,inside:e.languages.extend("cpp",{})}}),e.languages.insertBefore("inside","double-colon",{"class-name":/\b[a-z_]\w*\b(?!\s*::)/i},e.languages.cpp["base-clause"])}(a),function(e){var t=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;e.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+t.source+"|"+/(?:[^\\\r\n()"']|\\[\s\S])*/.source+")\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+t.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+t.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:t,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},e.languages.css.atrule.inside.rest=e.languages.css;var n=e.languages.markup;n&&(n.tag.addInlined("style","css"),n.tag.addAttribute("style","css"))}(a),function(e){var t,n=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;e.languages.css.selector={pattern:e.languages.css.selector.pattern,lookbehind:!0,inside:t={"pseudo-element":/:(?:after|before|first-letter|first-line|selection)|::[-\w]+/,"pseudo-class":/:[-\w]+/,class:/\.[-\w]+/,id:/#[-\w]+/,attribute:{pattern:RegExp("\\[(?:[^[\\]\"']|"+n.source+")*\\]"),greedy:!0,inside:{punctuation:/^\[|\]$/,"case-sensitivity":{pattern:/(\s)[si]$/i,lookbehind:!0,alias:"keyword"},namespace:{pattern:/^(\s*)(?:(?!\s)[-*\w\xA0-\uFFFF])*\|(?!=)/,lookbehind:!0,inside:{punctuation:/\|$/}},"attr-name":{pattern:/^(\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+/,lookbehind:!0},"attr-value":[n,{pattern:/(=\s*)(?:(?!\s)[-\w\xA0-\uFFFF])+(?=\s*$)/,lookbehind:!0}],operator:/[|~*^$]?=/}},"n-th":[{pattern:/(\(\s*)[+-]?\d*[\dn](?:\s*[+-]\s*\d+)?(?=\s*\))/,lookbehind:!0,inside:{number:/[\dn]+/,operator:/[+-]/}},{pattern:/(\(\s*)(?:even|odd)(?=\s*\))/i,lookbehind:!0}],combinator:/>|\+|~|\|\|/,punctuation:/[(),]/}},e.languages.css.atrule.inside["selector-function-argument"].inside=t,e.languages.insertBefore("css","property",{variable:{pattern:/(^|[^-\w\xA0-\uFFFF])--(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*/i,lookbehind:!0}});var r={pattern:/(\b\d+)(?:%|[a-z]+(?![\w-]))/,lookbehind:!0},a={pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0};e.languages.insertBefore("css","function",{operator:{pattern:/(\s)[+\-*\/](?=\s)/,lookbehind:!0},hexcode:{pattern:/\B#[\da-f]{3,8}\b/i,alias:"color"},color:[{pattern:/(^|[^\w-])(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)(?![\w-])/i,lookbehind:!0},{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:r,number:a,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:r,number:a})}(a),a.languages.javascript=a.languages.extend("clike",{"class-name":[a.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp(/(^|[^\w$])/.source+"(?:"+/NaN|Infinity/.source+"|"+/0[bB][01]+(?:_[01]+)*n?/.source+"|"+/0[oO][0-7]+(?:_[0-7]+)*n?/.source+"|"+/0[xX][\dA-Fa-f]+(?:_[\dA-Fa-f]+)*n?/.source+"|"+/\d+(?:_\d+)*n/.source+"|"+/(?:\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\.\d+(?:_\d+)*)(?:[Ee][+-]?\d+(?:_\d+)*)?/.source+")"+/(?![\w$])/.source),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),a.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,a.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*\]|\\.|[^/\\\[\r\n])+\/[dgimyus]{0,7}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:a.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:a.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:a.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:a.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:a.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),a.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:a.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),a.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),a.languages.markup&&(a.languages.markup.tag.addInlined("script","javascript"),a.languages.markup.tag.addAttribute(/on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)/.source,"javascript")),a.languages.js=a.languages.javascript,function(e){var t=/#(?!\{).+/,n={pattern:/#\{[^}]+\}/,alias:"variable"};e.languages.coffeescript=e.languages.extend("javascript",{comment:t,string:[{pattern:/'(?:\\[\s\S]|[^\\'])*'/,greedy:!0},{pattern:/"(?:\\[\s\S]|[^\\"])*"/,greedy:!0,inside:{interpolation:n}}],keyword:/\b(?:and|break|by|catch|class|continue|debugger|delete|do|each|else|extend|extends|false|finally|for|if|in|instanceof|is|isnt|let|loop|namespace|new|no|not|null|of|off|on|or|own|return|super|switch|then|this|throw|true|try|typeof|undefined|unless|until|when|while|window|with|yes|yield)\b/,"class-member":{pattern:/@(?!\d)\w+/,alias:"variable"}}),e.languages.insertBefore("coffeescript","comment",{"multiline-comment":{pattern:/###[\s\S]+?###/,alias:"comment"},"block-regex":{pattern:/\/{3}[\s\S]*?\/{3}/,alias:"regex",inside:{comment:t,interpolation:n}}}),e.languages.insertBefore("coffeescript","string",{"inline-javascript":{pattern:/`(?:\\[\s\S]|[^\\`])*`/,inside:{delimiter:{pattern:/^`|`$/,alias:"punctuation"},script:{pattern:/[\s\S]+/,alias:"language-javascript",inside:e.languages.javascript}}},"multiline-string":[{pattern:/'''[\s\S]*?'''/,greedy:!0,alias:"string"},{pattern:/"""[\s\S]*?"""/,greedy:!0,alias:"string",inside:{interpolation:n}}]}),e.languages.insertBefore("coffeescript","keyword",{property:/(?!\d)\w+(?=\s*:(?!:))/}),delete e.languages.coffeescript["template-string"],e.languages.coffee=e.languages.coffeescript}(a),function(e){var t=/[*&][^\s[\]{},]+/,n=/!(?:<[\w\-%#;/?:@&=+$,.!~*'()[\]]+>|(?:[a-zA-Z\d-]*!)?[\w\-%#;/?:@&=+$.~*'()]+)?/,r="(?:"+n.source+"(?:[ \t]+"+t.source+")?|"+t.source+"(?:[ \t]+"+n.source+")?)",a=/(?:[^\s\x00-\x08\x0e-\x1f!"#%&'*,\-:>?@[\]`{|}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]|[?:-])(?:[ \t]*(?:(?![#:])|:))*/.source.replace(//g,(function(){return/[^\s\x00-\x08\x0e-\x1f,[\]{}\x7f-\x84\x86-\x9f\ud800-\udfff\ufffe\uffff]/.source})),i=/"(?:[^"\\\r\n]|\\.)*"|'(?:[^'\\\r\n]|\\.)*'/.source;function s(e,t){t=(t||"").replace(/m/g,"")+"m";var n=/([:\-,[{]\s*(?:\s<>[ \t]+)?)(?:<>)(?=[ \t]*(?:$|,|\]|\}|(?:[\r\n]\s*)?#))/.source.replace(/<>/g,(function(){return r})).replace(/<>/g,(function(){return e}));return RegExp(n,t)}e.languages.yaml={scalar:{pattern:RegExp(/([\-:]\s*(?:\s<>[ \t]+)?[|>])[ \t]*(?:((?:\r?\n|\r)[ \t]+)\S[^\r\n]*(?:\2[^\r\n]+)*)/.source.replace(/<>/g,(function(){return r}))),lookbehind:!0,alias:"string"},comment:/#.*/,key:{pattern:RegExp(/((?:^|[:\-,[{\r\n?])[ \t]*(?:<>[ \t]+)?)<>(?=\s*:\s)/.source.replace(/<>/g,(function(){return r})).replace(/<>/g,(function(){return"(?:"+a+"|"+i+")"}))),lookbehind:!0,greedy:!0,alias:"atrule"},directive:{pattern:/(^[ \t]*)%.+/m,lookbehind:!0,alias:"important"},datetime:{pattern:s(/\d{4}-\d\d?-\d\d?(?:[tT]|[ \t]+)\d\d?:\d{2}:\d{2}(?:\.\d*)?(?:[ \t]*(?:Z|[-+]\d\d?(?::\d{2})?))?|\d{4}-\d{2}-\d{2}|\d\d?:\d{2}(?::\d{2}(?:\.\d*)?)?/.source),lookbehind:!0,alias:"number"},boolean:{pattern:s(/false|true/.source,"i"),lookbehind:!0,alias:"important"},null:{pattern:s(/null|~/.source,"i"),lookbehind:!0,alias:"important"},string:{pattern:s(i),lookbehind:!0,greedy:!0},number:{pattern:s(/[+-]?(?:0x[\da-f]+|0o[0-7]+|(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?|\.inf|\.nan)/.source,"i"),lookbehind:!0},tag:n,important:t,punctuation:/---|[:[\]{}\-,|>?]|\.\.\./},e.languages.yml=e.languages.yaml}(a),function(e){var t=/(?:\\.|[^\\\n\r]|(?:\n|\r\n?)(?![\r\n]))/.source;function n(e){return e=e.replace(//g,(function(){return t})),RegExp(/((?:^|[^\\])(?:\\{2})*)/.source+"(?:"+e+")")}var r=/(?:\\.|``(?:[^`\r\n]|`(?!`))+``|`[^`\r\n]+`|[^\\|\r\n`])+/.source,a=/\|?__(?:\|__)+\|?(?:(?:\n|\r\n?)|(?![\s\S]))/.source.replace(/__/g,(function(){return r})),i=/\|?[ \t]*:?-{3,}:?[ \t]*(?:\|[ \t]*:?-{3,}:?[ \t]*)+\|?(?:\n|\r\n?)/.source;e.languages.markdown=e.languages.extend("markup",{}),e.languages.insertBefore("markdown","prolog",{"front-matter-block":{pattern:/(^(?:\s*[\r\n])?)---(?!.)[\s\S]*?[\r\n]---(?!.)/,lookbehind:!0,greedy:!0,inside:{punctuation:/^---|---$/,"front-matter":{pattern:/\S+(?:\s+\S+)*/,alias:["yaml","language-yaml"],inside:e.languages.yaml}}},blockquote:{pattern:/^>(?:[\t ]*>)*/m,alias:"punctuation"},table:{pattern:RegExp("^"+a+i+"(?:"+a+")*","m"),inside:{"table-data-rows":{pattern:RegExp("^("+a+i+")(?:"+a+")*$"),lookbehind:!0,inside:{"table-data":{pattern:RegExp(r),inside:e.languages.markdown},punctuation:/\|/}},"table-line":{pattern:RegExp("^("+a+")"+i+"$"),lookbehind:!0,inside:{punctuation:/\||:?-{3,}:?/}},"table-header-row":{pattern:RegExp("^"+a+"$"),inside:{"table-header":{pattern:RegExp(r),alias:"important",inside:e.languages.markdown},punctuation:/\|/}}}},code:[{pattern:/((?:^|\n)[ \t]*\n|(?:^|\r\n?)[ \t]*\r\n?)(?: {4}|\t).+(?:(?:\n|\r\n?)(?: {4}|\t).+)*/,lookbehind:!0,alias:"keyword"},{pattern:/^```[\s\S]*?^```$/m,greedy:!0,inside:{"code-block":{pattern:/^(```.*(?:\n|\r\n?))[\s\S]+?(?=(?:\n|\r\n?)^```$)/m,lookbehind:!0},"code-language":{pattern:/^(```).+/,lookbehind:!0},punctuation:/```/}}],title:[{pattern:/\S.*(?:\n|\r\n?)(?:==+|--+)(?=[ \t]*$)/m,alias:"important",inside:{punctuation:/==+$|--+$/}},{pattern:/(^\s*)#.+/m,lookbehind:!0,alias:"important",inside:{punctuation:/^#+|#+$/}}],hr:{pattern:/(^\s*)([*-])(?:[\t ]*\2){2,}(?=\s*$)/m,lookbehind:!0,alias:"punctuation"},list:{pattern:/(^\s*)(?:[*+-]|\d+\.)(?=[\t ].)/m,lookbehind:!0,alias:"punctuation"},"url-reference":{pattern:/!?\[[^\]]+\]:[\t ]+(?:\S+|<(?:\\.|[^>\\])+>)(?:[\t ]+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\)))?/,inside:{variable:{pattern:/^(!?\[)[^\]]+/,lookbehind:!0},string:/(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|\((?:\\.|[^)\\])*\))$/,punctuation:/^[\[\]!:]|[<>]/},alias:"url"},bold:{pattern:n(/\b__(?:(?!_)|_(?:(?!_))+_)+__\b|\*\*(?:(?!\*)|\*(?:(?!\*))+\*)+\*\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^..)[\s\S]+(?=..$)/,lookbehind:!0,inside:{}},punctuation:/\*\*|__/}},italic:{pattern:n(/\b_(?:(?!_)|__(?:(?!_))+__)+_\b|\*(?:(?!\*)|\*\*(?:(?!\*))+\*\*)+\*/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^.)[\s\S]+(?=.$)/,lookbehind:!0,inside:{}},punctuation:/[*_]/}},strike:{pattern:n(/(~~?)(?:(?!~))+\2/.source),lookbehind:!0,greedy:!0,inside:{content:{pattern:/(^~~?)[\s\S]+(?=\1$)/,lookbehind:!0,inside:{}},punctuation:/~~?/}},"code-snippet":{pattern:/(^|[^\\`])(?:``[^`\r\n]+(?:`[^`\r\n]+)*``(?!`)|`[^`\r\n]+`(?!`))/,lookbehind:!0,greedy:!0,alias:["code","keyword"]},url:{pattern:n(/!?\[(?:(?!\]))+\](?:\([^\s)]+(?:[\t ]+"(?:\\.|[^"\\])*")?\)|[ \t]?\[(?:(?!\]))+\])/.source),lookbehind:!0,greedy:!0,inside:{operator:/^!/,content:{pattern:/(^\[)[^\]]+(?=\])/,lookbehind:!0,inside:{}},variable:{pattern:/(^\][ \t]?\[)[^\]]+(?=\]$)/,lookbehind:!0},url:{pattern:/(^\]\()[^\s)]+/,lookbehind:!0},string:{pattern:/(^[ \t]+)"(?:\\.|[^"\\])*"(?=\)$)/,lookbehind:!0}}}}),["url","bold","italic","strike"].forEach((function(t){["url","bold","italic","strike","code-snippet"].forEach((function(n){t!==n&&(e.languages.markdown[t].inside.content.inside[n]=e.languages.markdown[n])}))})),e.hooks.add("after-tokenize",(function(e){"markdown"!==e.language&&"md"!==e.language||function e(t){if(t&&"string"!=typeof t)for(var n=0,r=t.length;n",quot:'"'},l=String.fromCodePoint||String.fromCharCode;e.languages.md=e.languages.markdown}(a),a.languages.graphql={comment:/#.*/,description:{pattern:/(?:"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*")(?=\s*[a-z_])/i,greedy:!0,alias:"string",inside:{"language-markdown":{pattern:/(^"(?:"")?)(?!\1)[\s\S]+(?=\1$)/,lookbehind:!0,inside:a.languages.markdown}}},string:{pattern:/"""(?:[^"]|(?!""")")*"""|"(?:\\.|[^\\"\r\n])*"/,greedy:!0},number:/(?:\B-|\b)\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,boolean:/\b(?:false|true)\b/,variable:/\$[a-z_]\w*/i,directive:{pattern:/@[a-z_]\w*/i,alias:"function"},"attr-name":{pattern:/\b[a-z_]\w*(?=\s*(?:\((?:[^()"]|"(?:\\.|[^\\"\r\n])*")*\))?:)/i,greedy:!0},"atom-input":{pattern:/\b[A-Z]\w*Input\b/,alias:"class-name"},scalar:/\b(?:Boolean|Float|ID|Int|String)\b/,constant:/\b[A-Z][A-Z_\d]*\b/,"class-name":{pattern:/(\b(?:enum|implements|interface|on|scalar|type|union)\s+|&\s*|:\s*|\[)[A-Z_]\w*/,lookbehind:!0},fragment:{pattern:/(\bfragment\s+|\.{3}\s*(?!on\b))[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-mutation":{pattern:/(\bmutation\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},"definition-query":{pattern:/(\bquery\s+)[a-zA-Z_]\w*/,lookbehind:!0,alias:"function"},keyword:/\b(?:directive|enum|extend|fragment|implements|input|interface|mutation|on|query|repeatable|scalar|schema|subscription|type|union)\b/,operator:/[!=|&]|\.{3}/,"property-query":/\w+(?=\s*\()/,object:/\w+(?=\s*\{)/,punctuation:/[!(){}\[\]:=,]/,property:/\w+/},a.hooks.add("after-tokenize",(function(e){if("graphql"===e.language)for(var t=e.tokens.filter((function(e){return"string"!=typeof e&&"comment"!==e.type&&"scalar"!==e.type})),n=0;n0)){var o=p(/^\{$/,/^\}$/);if(-1===o)continue;for(var l=n;l=0&&m(c,"variable-input")}}}}function u(e){return t[n+e]}function d(e,t){t=t||0;for(var n=0;n?|<|>)?|>[>=]?|\b(?:AND|BETWEEN|DIV|ILIKE|IN|IS|LIKE|NOT|OR|REGEXP|RLIKE|SOUNDS LIKE|XOR)\b/i,punctuation:/[;[\]()`,.]/},function(e){var t=e.languages.javascript["template-string"],n=t.pattern.source,r=t.inside.interpolation,a=r.inside["interpolation-punctuation"],i=r.pattern.source;function s(t,r){if(e.languages[t])return{pattern:RegExp("((?:"+r+")\\s*)"+n),lookbehind:!0,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},"embedded-code":{pattern:/[\s\S]+/,alias:t}}}}function o(e,t){return"___"+t.toUpperCase()+"_"+e+"___"}function l(t,n,r){var a={code:t,grammar:n,language:r};return e.hooks.run("before-tokenize",a),a.tokens=e.tokenize(a.code,a.grammar),e.hooks.run("after-tokenize",a),a.tokens}function c(t){var n={};n["interpolation-punctuation"]=a;var i=e.tokenize(t,n);if(3===i.length){var s=[1,1];s.push.apply(s,l(i[1],e.languages.javascript,"javascript")),i.splice.apply(i,s)}return new e.Token("interpolation",i,r.alias,t)}function u(t,n,r){var a=e.tokenize(t,{interpolation:{pattern:RegExp(i),lookbehind:!0}}),s=0,u={},d=l(a.map((function(e){if("string"==typeof e)return e;for(var n,a=e.content;-1!==t.indexOf(n=o(s++,r)););return u[n]=a,n})).join(""),n,r),p=Object.keys(u);return s=0,function e(t){for(var n=0;n=p.length)return;var r=t[n];if("string"==typeof r||"string"==typeof r.content){var a=p[s],i="string"==typeof r?r:r.content,o=i.indexOf(a);if(-1!==o){++s;var l=i.substring(0,o),d=c(u[a]),m=i.substring(o+a.length),f=[];if(l&&f.push(l),f.push(d),m){var h=[m];e(h),f.push.apply(f,h)}"string"==typeof r?(t.splice.apply(t,[n,1].concat(f)),n+=f.length-1):r.content=f}}else{var g=r.content;Array.isArray(g)?e(g):e([g])}}}(d),new e.Token(r,d,"language-"+r,t)}e.languages.javascript["template-string"]=[s("css",/\b(?:styled(?:\([^)]*\))?(?:\s*\.\s*\w+(?:\([^)]*\))*)*|css(?:\s*\.\s*(?:global|resolve))?|createGlobalStyle|keyframes)/.source),s("html",/\bhtml|\.\s*(?:inner|outer)HTML\s*\+?=/.source),s("svg",/\bsvg/.source),s("markdown",/\b(?:markdown|md)/.source),s("graphql",/\b(?:gql|graphql(?:\s*\.\s*experimental)?)/.source),s("sql",/\bsql/.source),t].filter(Boolean);var d={javascript:!0,js:!0,typescript:!0,ts:!0,jsx:!0,tsx:!0};function p(e){return"string"==typeof e?e:Array.isArray(e)?e.map(p).join(""):p(e.content)}e.hooks.add("after-tokenize",(function(t){t.language in d&&function t(n){for(var r=0,a=n.length;r]|<(?:[^<>]|<[^<>]*>)*>)*>)?/,lookbehind:!0,greedy:!0,inside:null},builtin:/\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown)\b/}),e.languages.typescript.keyword.push(/\b(?:abstract|declare|is|keyof|readonly|require)\b/,/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,/\btype\b(?=\s*(?:[\{*]|$))/),delete e.languages.typescript.parameter,delete e.languages.typescript["literal-property"];var t=e.languages.extend("typescript",{});delete t["class-name"],e.languages.typescript["class-name"].inside=t,e.languages.insertBefore("typescript","function",{decorator:{pattern:/@[$\w\xA0-\uFFFF]+/,inside:{at:{pattern:/^@/,alias:"operator"},function:/^[\s\S]+/}},"generic-function":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,greedy:!0,inside:{function:/^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,generic:{pattern:/<[\s\S]+/,alias:"class-name",inside:t}}}}),e.languages.ts=e.languages.typescript}(a),function(e){function t(e,t){return RegExp(e.replace(//g,(function(){return/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/.source})),t)}e.languages.insertBefore("javascript","function-variable",{"method-variable":{pattern:RegExp("(\\.\\s*)"+e.languages.javascript["function-variable"].pattern.source),lookbehind:!0,alias:["function-variable","method","function","property-access"]}}),e.languages.insertBefore("javascript","function",{method:{pattern:RegExp("(\\.\\s*)"+e.languages.javascript.function.source),lookbehind:!0,alias:["function","property-access"]}}),e.languages.insertBefore("javascript","constant",{"known-class-name":[{pattern:/\b(?:(?:Float(?:32|64)|(?:Int|Uint)(?:8|16|32)|Uint8Clamped)?Array|ArrayBuffer|BigInt|Boolean|DataView|Date|Error|Function|Intl|JSON|(?:Weak)?(?:Map|Set)|Math|Number|Object|Promise|Proxy|Reflect|RegExp|String|Symbol|WebAssembly)\b/,alias:"class-name"},{pattern:/\b(?:[A-Z]\w*)Error\b/,alias:"class-name"}]}),e.languages.insertBefore("javascript","keyword",{imports:{pattern:t(/(\bimport\b\s*)(?:(?:\s*,\s*(?:\*\s*as\s+|\{[^{}]*\}))?|\*\s*as\s+|\{[^{}]*\})(?=\s*\bfrom\b)/.source),lookbehind:!0,inside:e.languages.javascript},exports:{pattern:t(/(\bexport\b\s*)(?:\*(?:\s*as\s+)?(?=\s*\bfrom\b)|\{[^{}]*\})/.source),lookbehind:!0,inside:e.languages.javascript}}),e.languages.javascript.keyword.unshift({pattern:/\b(?:as|default|export|from|import)\b/,alias:"module"},{pattern:/\b(?:await|break|catch|continue|do|else|finally|for|if|return|switch|throw|try|while|yield)\b/,alias:"control-flow"},{pattern:/\bnull\b/,alias:["null","nil"]},{pattern:/\bundefined\b/,alias:"nil"}),e.languages.insertBefore("javascript","operator",{spread:{pattern:/\.{3}/,alias:"operator"},arrow:{pattern:/=>/,alias:"operator"}}),e.languages.insertBefore("javascript","punctuation",{"property-access":{pattern:t(/(\.\s*)#?/.source),lookbehind:!0},"maybe-class-name":{pattern:/(^|[^$\w\xA0-\uFFFF])[A-Z][$\w\xA0-\uFFFF]+/,lookbehind:!0},dom:{pattern:/\b(?:document|(?:local|session)Storage|location|navigator|performance|window)\b/,alias:"variable"},console:{pattern:/\bconsole(?=\s*\.)/,alias:"class-name"}});for(var n=["function","function-variable","method","method-variable","property-access"],r=0;r*\.{3}(?:[^{}]|)*\})/.source;function i(e,t){return e=e.replace(//g,(function(){return n})).replace(//g,(function(){return r})).replace(//g,(function(){return a})),RegExp(e,t)}a=i(a).source,e.languages.jsx=e.languages.extend("markup",t),e.languages.jsx.tag.pattern=i(/<\/?(?:[\w.:-]+(?:+(?:[\w.:$-]+(?:=(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s{'"/>=]+|))?|))**\/?)?>/.source),e.languages.jsx.tag.inside.tag.pattern=/^<\/?[^\s>\/]*/,e.languages.jsx.tag.inside["attr-value"].pattern=/=(?!\{)(?:"(?:\\[\s\S]|[^\\"])*"|'(?:\\[\s\S]|[^\\'])*'|[^\s'">]+)/,e.languages.jsx.tag.inside.tag.inside["class-name"]=/^[A-Z]\w*(?:\.[A-Z]\w*)*$/,e.languages.jsx.tag.inside.comment=t.comment,e.languages.insertBefore("inside","attr-name",{spread:{pattern:i(//.source),inside:e.languages.jsx}},e.languages.jsx.tag),e.languages.insertBefore("inside","special-attr",{script:{pattern:i(/=/.source),alias:"language-javascript",inside:{"script-punctuation":{pattern:/^=(?=\{)/,alias:"punctuation"},rest:e.languages.jsx}}},e.languages.jsx.tag);var s=function(e){return e?"string"==typeof e?e:"string"==typeof e.content?e.content:e.content.map(s).join(""):""},o=function(t){for(var n=[],r=0;r0&&n[n.length-1].tagName===s(a.content[0].content[1])&&n.pop():"/>"===a.content[a.content.length-1].content||n.push({tagName:s(a.content[0].content[1]),openedBraces:0}):n.length>0&&"punctuation"===a.type&&"{"===a.content?n[n.length-1].openedBraces++:n.length>0&&n[n.length-1].openedBraces>0&&"punctuation"===a.type&&"}"===a.content?n[n.length-1].openedBraces--:i=!0),(i||"string"==typeof a)&&n.length>0&&0===n[n.length-1].openedBraces){var l=s(a);r0&&("string"==typeof t[r-1]||"plain-text"===t[r-1].type)&&(l=s(t[r-1])+l,t.splice(r-1,1),r--),t[r]=new e.Token("plain-text",l,null,l)}a.content&&"string"!=typeof a.content&&o(a.content)}};e.hooks.add("after-tokenize",(function(e){"jsx"!==e.language&&"tsx"!==e.language||o(e.tokens)}))}(a),function(e){e.languages.diff={coord:[/^(?:\*{3}|-{3}|\+{3}).*$/m,/^@@.*@@$/m,/^\d.*$/m]};var t={"deleted-sign":"-","deleted-arrow":"<","inserted-sign":"+","inserted-arrow":">",unchanged:" ",diff:"!"};Object.keys(t).forEach((function(n){var r=t[n],a=[];/^\w+$/.test(n)||a.push(/\w+/.exec(n)[0]),"diff"===n&&a.push("bold"),e.languages.diff[n]={pattern:RegExp("^(?:["+r+"].*(?:\r\n?|\n|(?![\\s\\S])))+","m"),alias:a,inside:{line:{pattern:/(.)(?=[\s\S]).*(?:\r\n?|\n)?/,lookbehind:!0},prefix:{pattern:/[\s\S]/,alias:/\w+/.exec(n)[0]}}}})),Object.defineProperty(e.languages.diff,"PREFIXES",{value:t})}(a),a.languages.git={comment:/^#.*/m,deleted:/^[-\u2013].*/m,inserted:/^\+.*/m,string:/("|')(?:\\.|(?!\1)[^\\\r\n])*\1/,command:{pattern:/^.*\$ git .*$/m,inside:{parameter:/\s--?\w+/}},coord:/^@@.*@@$/m,"commit-sha1":/^commit \w{40}$/m},a.languages.go=a.languages.extend("clike",{string:{pattern:/(^|[^\\])"(?:\\.|[^"\\\r\n])*"|`[^`]*`/,lookbehind:!0,greedy:!0},keyword:/\b(?:break|case|chan|const|continue|default|defer|else|fallthrough|for|func|go(?:to)?|if|import|interface|map|package|range|return|select|struct|switch|type|var)\b/,boolean:/\b(?:_|false|iota|nil|true)\b/,number:[/\b0(?:b[01_]+|o[0-7_]+)i?\b/i,/\b0x(?:[a-f\d_]+(?:\.[a-f\d_]*)?|\.[a-f\d_]+)(?:p[+-]?\d+(?:_\d+)*)?i?(?!\w)/i,/(?:\b\d[\d_]*(?:\.[\d_]*)?|\B\.\d[\d_]*)(?:e[+-]?[\d_]+)?i?(?!\w)/i],operator:/[*\/%^!=]=?|\+[=+]?|-[=-]?|\|[=|]?|&(?:=|&|\^=?)?|>(?:>=?|=)?|<(?:<=?|=|-)?|:=|\.\.\./,builtin:/\b(?:append|bool|byte|cap|close|complex|complex(?:64|128)|copy|delete|error|float(?:32|64)|u?int(?:8|16|32|64)?|imag|len|make|new|panic|print(?:ln)?|real|recover|rune|string|uintptr)\b/}),a.languages.insertBefore("go","string",{char:{pattern:/'(?:\\.|[^'\\\r\n]){0,10}'/,greedy:!0}}),delete a.languages.go["class-name"],function(e){function t(e,t){return"___"+e.toUpperCase()+t+"___"}Object.defineProperties(e.languages["markup-templating"]={},{buildPlaceholders:{value:function(n,r,a,i){if(n.language===r){var s=n.tokenStack=[];n.code=n.code.replace(a,(function(e){if("function"==typeof i&&!i(e))return e;for(var a,o=s.length;-1!==n.code.indexOf(a=t(r,o));)++o;return s[o]=e,a})),n.grammar=e.languages.markup}}},tokenizePlaceholders:{value:function(n,r){if(n.language===r&&n.tokenStack){n.grammar=e.languages[r];var a=0,i=Object.keys(n.tokenStack);!function s(o){for(var l=0;l=i.length);l++){var c=o[l];if("string"==typeof c||c.content&&"string"==typeof c.content){var u=i[a],d=n.tokenStack[u],p="string"==typeof c?c:c.content,m=t(r,u),f=p.indexOf(m);if(f>-1){++a;var h=p.substring(0,f),g=new e.Token(r,e.tokenize(d,n.grammar),"language-"+r,d),b=p.substring(f+m.length),x=[];h&&x.push.apply(x,s([h])),x.push(g),b&&x.push.apply(x,s([b])),"string"==typeof c?o.splice.apply(o,[l,1].concat(x)):c.content=x}}else c.content&&s(c.content)}return o}(n.tokens)}}}})}(a),function(e){e.languages.handlebars={comment:/\{\{![\s\S]*?\}\}/,delimiter:{pattern:/^\{\{\{?|\}\}\}?$/,alias:"punctuation"},string:/(["'])(?:\\.|(?!\1)[^\\\r\n])*\1/,number:/\b0x[\dA-Fa-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:[Ee][+-]?\d+)?/,boolean:/\b(?:false|true)\b/,block:{pattern:/^(\s*(?:~\s*)?)[#\/]\S+?(?=\s*(?:~\s*)?$|\s)/,lookbehind:!0,alias:"keyword"},brackets:{pattern:/\[[^\]]+\]/,inside:{punctuation:/\[|\]/,variable:/[\s\S]+/}},punctuation:/[!"#%&':()*+,.\/;<=>@\[\\\]^`{|}~]/,variable:/[^!"#%&'()*+,\/;<=>@\[\\\]^`{|}~\s]+/},e.hooks.add("before-tokenize",(function(t){e.languages["markup-templating"].buildPlaceholders(t,"handlebars",/\{\{\{[\s\S]+?\}\}\}|\{\{[\s\S]+?\}\}/g)})),e.hooks.add("after-tokenize",(function(t){e.languages["markup-templating"].tokenizePlaceholders(t,"handlebars")})),e.languages.hbs=e.languages.handlebars}(a),a.languages.json={property:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?=\s*:)/,lookbehind:!0,greedy:!0},string:{pattern:/(^|[^\\])"(?:\\.|[^\\"\r\n])*"(?!\s*:)/,lookbehind:!0,greedy:!0},comment:{pattern:/\/\/.*|\/\*[\s\S]*?(?:\*\/|$)/,greedy:!0},number:/-?\b\d+(?:\.\d+)?(?:e[+-]?\d+)?\b/i,punctuation:/[{}[\],]/,operator:/:/,boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"}},a.languages.webmanifest=a.languages.json,a.languages.less=a.languages.extend("css",{comment:[/\/\*[\s\S]*?\*\//,{pattern:/(^|[^\\])\/\/.*/,lookbehind:!0}],atrule:{pattern:/@[\w-](?:\((?:[^(){}]|\([^(){}]*\))*\)|[^(){};\s]|\s+(?!\s))*?(?=\s*\{)/,inside:{punctuation:/[:()]/}},selector:{pattern:/(?:@\{[\w-]+\}|[^{};\s@])(?:@\{[\w-]+\}|\((?:[^(){}]|\([^(){}]*\))*\)|[^(){};@\s]|\s+(?!\s))*?(?=\s*\{)/,inside:{variable:/@+[\w-]+/}},property:/(?:@\{[\w-]+\}|[\w-])+(?:\+_?)?(?=\s*:)/,operator:/[+\-*\/]/}),a.languages.insertBefore("less","property",{variable:[{pattern:/@[\w-]+\s*:/,inside:{punctuation:/:/}},/@@?[\w-]+/],"mixin-usage":{pattern:/([{;]\s*)[.#](?!\d)[\w-].*?(?=[(;])/,lookbehind:!0,alias:"function"}}),a.languages.makefile={comment:{pattern:/(^|[^\\])#(?:\\(?:\r\n|[\s\S])|[^\\\r\n])*/,lookbehind:!0},string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"builtin-target":{pattern:/\.[A-Z][^:#=\s]+(?=\s*:(?!=))/,alias:"builtin"},target:{pattern:/^(?:[^:=\s]|[ \t]+(?![\s:]))+(?=\s*:(?!=))/m,alias:"symbol",inside:{variable:/\$+(?:(?!\$)[^(){}:#=\s]+|(?=[({]))/}},variable:/\$+(?:(?!\$)[^(){}:#=\s]+|\([@*%<^+?][DF]\)|(?=[({]))/,keyword:/-include\b|\b(?:define|else|endef|endif|export|ifn?def|ifn?eq|include|override|private|sinclude|undefine|unexport|vpath)\b/,function:{pattern:/(\()(?:abspath|addsuffix|and|basename|call|dir|error|eval|file|filter(?:-out)?|findstring|firstword|flavor|foreach|guile|if|info|join|lastword|load|notdir|or|origin|patsubst|realpath|shell|sort|strip|subst|suffix|value|warning|wildcard|word(?:list|s)?)(?=[ \t])/,lookbehind:!0},operator:/(?:::|[?:+!])?=|[|@]/,punctuation:/[:;(){}]/},a.languages.objectivec=a.languages.extend("c",{string:{pattern:/@?"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"/,greedy:!0},keyword:/\b(?:asm|auto|break|case|char|const|continue|default|do|double|else|enum|extern|float|for|goto|if|in|inline|int|long|register|return|self|short|signed|sizeof|static|struct|super|switch|typedef|typeof|union|unsigned|void|volatile|while)\b|(?:@interface|@end|@implementation|@protocol|@class|@public|@protected|@private|@property|@try|@catch|@finally|@throw|@synthesize|@dynamic|@selector)\b/,operator:/-[->]?|\+\+?|!=?|<>?=?|==?|&&?|\|\|?|[~^%?*\/@]/}),delete a.languages.objectivec["class-name"],a.languages.objc=a.languages.objectivec,a.languages.ocaml={comment:{pattern:/\(\*[\s\S]*?\*\)/,greedy:!0},char:{pattern:/'(?:[^\\\r\n']|\\(?:.|[ox]?[0-9a-f]{1,3}))'/i,greedy:!0},string:[{pattern:/"(?:\\(?:[\s\S]|\r\n)|[^\\\r\n"])*"/,greedy:!0},{pattern:/\{([a-z_]*)\|[\s\S]*?\|\1\}/,greedy:!0}],number:[/\b(?:0b[01][01_]*|0o[0-7][0-7_]*)\b/i,/\b0x[a-f0-9][a-f0-9_]*(?:\.[a-f0-9_]*)?(?:p[+-]?\d[\d_]*)?(?!\w)/i,/\b\d[\d_]*(?:\.[\d_]*)?(?:e[+-]?\d[\d_]*)?(?!\w)/i],directive:{pattern:/\B#\w+/,alias:"property"},label:{pattern:/\B~\w+/,alias:"property"},"type-variable":{pattern:/\B'\w+/,alias:"function"},variant:{pattern:/`\w+/,alias:"symbol"},keyword:/\b(?:as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|match|method|module|mutable|new|nonrec|object|of|open|private|rec|sig|struct|then|to|try|type|val|value|virtual|when|where|while|with)\b/,boolean:/\b(?:false|true)\b/,"operator-like-punctuation":{pattern:/\[[<>|]|[>|]\]|\{<|>\}/,alias:"punctuation"},operator:/\.[.~]|:[=>]|[=<>@^|&+\-*\/$%!?~][!$%&*+\-.\/:<=>?@^|~]*|\b(?:and|asr|land|lor|lsl|lsr|lxor|mod|or)\b/,punctuation:/;;|::|[(){}\[\].,:;#]|\b_\b/},a.languages.python={comment:{pattern:/(^|[^\\])#.*/,lookbehind:!0,greedy:!0},"string-interpolation":{pattern:/(?:f|fr|rf)(?:("""|''')[\s\S]*?\1|("|')(?:\\.|(?!\2)[^\\\r\n])*\2)/i,greedy:!0,inside:{interpolation:{pattern:/((?:^|[^{])(?:\{\{)*)\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}]|\{(?!\{)(?:[^{}])+\})+\})+\}/,lookbehind:!0,inside:{"format-spec":{pattern:/(:)[^:(){}]+(?=\}$)/,lookbehind:!0},"conversion-option":{pattern:/![sra](?=[:}]$)/,alias:"punctuation"},rest:null}},string:/[\s\S]+/}},"triple-quoted-string":{pattern:/(?:[rub]|br|rb)?("""|''')[\s\S]*?\1/i,greedy:!0,alias:"string"},string:{pattern:/(?:[rub]|br|rb)?("|')(?:\\.|(?!\1)[^\\\r\n])*\1/i,greedy:!0},function:{pattern:/((?:^|\s)def[ \t]+)[a-zA-Z_]\w*(?=\s*\()/g,lookbehind:!0},"class-name":{pattern:/(\bclass\s+)\w+/i,lookbehind:!0},decorator:{pattern:/(^[\t ]*)@\w+(?:\.\w+)*/m,lookbehind:!0,alias:["annotation","punctuation"],inside:{punctuation:/\./}},keyword:/\b(?:_(?=\s*:)|and|as|assert|async|await|break|case|class|continue|def|del|elif|else|except|exec|finally|for|from|global|if|import|in|is|lambda|match|nonlocal|not|or|pass|print|raise|return|try|while|with|yield)\b/,builtin:/\b(?:__import__|abs|all|any|apply|ascii|basestring|bin|bool|buffer|bytearray|bytes|callable|chr|classmethod|cmp|coerce|compile|complex|delattr|dict|dir|divmod|enumerate|eval|execfile|file|filter|float|format|frozenset|getattr|globals|hasattr|hash|help|hex|id|input|int|intern|isinstance|issubclass|iter|len|list|locals|long|map|max|memoryview|min|next|object|oct|open|ord|pow|property|range|raw_input|reduce|reload|repr|reversed|round|set|setattr|slice|sorted|staticmethod|str|sum|super|tuple|type|unichr|unicode|vars|xrange|zip)\b/,boolean:/\b(?:False|None|True)\b/,number:/\b0(?:b(?:_?[01])+|o(?:_?[0-7])+|x(?:_?[a-f0-9])+)\b|(?:\b\d+(?:_\d+)*(?:\.(?:\d+(?:_\d+)*)?)?|\B\.\d+(?:_\d+)*)(?:e[+-]?\d+(?:_\d+)*)?j?(?!\w)/i,operator:/[-+%=]=?|!=|:=|\*\*?=?|\/\/?=?|<[<=>]?|>[=>]?|[&|^~]/,punctuation:/[{}[\];(),.:]/},a.languages.python["string-interpolation"].inside.interpolation.inside.rest=a.languages.python,a.languages.py=a.languages.python,a.languages.reason=a.languages.extend("clike",{string:{pattern:/"(?:\\(?:\r\n|[\s\S])|[^\\\r\n"])*"/,greedy:!0},"class-name":/\b[A-Z]\w*/,keyword:/\b(?:and|as|assert|begin|class|constraint|do|done|downto|else|end|exception|external|for|fun|function|functor|if|in|include|inherit|initializer|lazy|let|method|module|mutable|new|nonrec|object|of|open|or|private|rec|sig|struct|switch|then|to|try|type|val|virtual|when|while|with)\b/,operator:/\.{3}|:[:=]|\|>|->|=(?:==?|>)?|<=?|>=?|[|^?'#!~`]|[+\-*\/]\.?|\b(?:asr|land|lor|lsl|lsr|lxor|mod)\b/}),a.languages.insertBefore("reason","class-name",{char:{pattern:/'(?:\\x[\da-f]{2}|\\o[0-3][0-7][0-7]|\\\d{3}|\\.|[^'\\\r\n])'/,greedy:!0},constructor:/\b[A-Z]\w*\b(?!\s*\.)/,label:{pattern:/\b[a-z]\w*(?=::)/,alias:"symbol"}}),delete a.languages.reason.function,function(e){e.languages.sass=e.languages.extend("css",{comment:{pattern:/^([ \t]*)\/[\/*].*(?:(?:\r?\n|\r)\1[ \t].+)*/m,lookbehind:!0,greedy:!0}}),e.languages.insertBefore("sass","atrule",{"atrule-line":{pattern:/^(?:[ \t]*)[@+=].+/m,greedy:!0,inside:{atrule:/(?:@[\w-]+|[+=])/}}}),delete e.languages.sass.atrule;var t=/\$[-\w]+|#\{\$[-\w]+\}/,n=[/[+*\/%]|[=!]=|<=?|>=?|\b(?:and|not|or)\b/,{pattern:/(\s)-(?=\s)/,lookbehind:!0}];e.languages.insertBefore("sass","property",{"variable-line":{pattern:/^[ \t]*\$.+/m,greedy:!0,inside:{punctuation:/:/,variable:t,operator:n}},"property-line":{pattern:/^[ \t]*(?:[^:\s]+ *:.*|:[^:\s].*)/m,greedy:!0,inside:{property:[/[^:\s]+(?=\s*:)/,{pattern:/(:)[^:\s]+/,lookbehind:!0}],punctuation:/:/,variable:t,operator:n,important:e.languages.sass.important}}}),delete e.languages.sass.property,delete e.languages.sass.important,e.languages.insertBefore("sass","punctuation",{selector:{pattern:/^([ \t]*)\S(?:,[^,\r\n]+|[^,\r\n]*)(?:,[^,\r\n]+)*(?:,(?:\r?\n|\r)\1[ \t]+\S(?:,[^,\r\n]+|[^,\r\n]*)(?:,[^,\r\n]+)*)*/m,lookbehind:!0,greedy:!0}})}(a),a.languages.scss=a.languages.extend("css",{comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},atrule:{pattern:/@[\w-](?:\([^()]+\)|[^()\s]|\s+(?!\s))*?(?=\s+[{;])/,inside:{rule:/@[\w-]+/}},url:/(?:[-a-z]+-)?url(?=\()/i,selector:{pattern:/(?=\S)[^@;{}()]?(?:[^@;{}()\s]|\s+(?!\s)|#\{\$[-\w]+\})+(?=\s*\{(?:\}|\s|[^}][^:{}]*[:{][^}]))/,inside:{parent:{pattern:/&/,alias:"important"},placeholder:/%[-\w]+/,variable:/\$[-\w]+|#\{\$[-\w]+\}/}},property:{pattern:/(?:[-\w]|\$[-\w]|#\{\$[-\w]+\})+(?=\s*:)/,inside:{variable:/\$[-\w]+|#\{\$[-\w]+\}/}}}),a.languages.insertBefore("scss","atrule",{keyword:[/@(?:content|debug|each|else(?: if)?|extend|for|forward|function|if|import|include|mixin|return|use|warn|while)\b/i,{pattern:/( )(?:from|through)(?= )/,lookbehind:!0}]}),a.languages.insertBefore("scss","important",{variable:/\$[-\w]+|#\{\$[-\w]+\}/}),a.languages.insertBefore("scss","function",{"module-modifier":{pattern:/\b(?:as|hide|show|with)\b/i,alias:"keyword"},placeholder:{pattern:/%[-\w]+/,alias:"selector"},statement:{pattern:/\B!(?:default|optional)\b/i,alias:"keyword"},boolean:/\b(?:false|true)\b/,null:{pattern:/\bnull\b/,alias:"keyword"},operator:{pattern:/(\s)(?:[-+*\/%]|[=!]=|<=?|>=?|and|not|or)(?=\s)/,lookbehind:!0}}),a.languages.scss.atrule.inside.rest=a.languages.scss,function(e){var t={pattern:/(\b\d+)(?:%|[a-z]+)/,lookbehind:!0},n={pattern:/(^|[^\w.-])-?(?:\d+(?:\.\d+)?|\.\d+)/,lookbehind:!0},r={comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0},url:{pattern:/\burl\((["']?).*?\1\)/i,greedy:!0},string:{pattern:/("|')(?:(?!\1)[^\\\r\n]|\\(?:\r\n|[\s\S]))*\1/,greedy:!0},interpolation:null,func:null,important:/\B!(?:important|optional)\b/i,keyword:{pattern:/(^|\s+)(?:(?:else|for|if|return|unless)(?=\s|$)|@[\w-]+)/,lookbehind:!0},hexcode:/#[\da-f]{3,6}/i,color:[/\b(?:AliceBlue|AntiqueWhite|Aqua|Aquamarine|Azure|Beige|Bisque|Black|BlanchedAlmond|Blue|BlueViolet|Brown|BurlyWood|CadetBlue|Chartreuse|Chocolate|Coral|CornflowerBlue|Cornsilk|Crimson|Cyan|DarkBlue|DarkCyan|DarkGoldenRod|DarkGr[ae]y|DarkGreen|DarkKhaki|DarkMagenta|DarkOliveGreen|DarkOrange|DarkOrchid|DarkRed|DarkSalmon|DarkSeaGreen|DarkSlateBlue|DarkSlateGr[ae]y|DarkTurquoise|DarkViolet|DeepPink|DeepSkyBlue|DimGr[ae]y|DodgerBlue|FireBrick|FloralWhite|ForestGreen|Fuchsia|Gainsboro|GhostWhite|Gold|GoldenRod|Gr[ae]y|Green|GreenYellow|HoneyDew|HotPink|IndianRed|Indigo|Ivory|Khaki|Lavender|LavenderBlush|LawnGreen|LemonChiffon|LightBlue|LightCoral|LightCyan|LightGoldenRodYellow|LightGr[ae]y|LightGreen|LightPink|LightSalmon|LightSeaGreen|LightSkyBlue|LightSlateGr[ae]y|LightSteelBlue|LightYellow|Lime|LimeGreen|Linen|Magenta|Maroon|MediumAquaMarine|MediumBlue|MediumOrchid|MediumPurple|MediumSeaGreen|MediumSlateBlue|MediumSpringGreen|MediumTurquoise|MediumVioletRed|MidnightBlue|MintCream|MistyRose|Moccasin|NavajoWhite|Navy|OldLace|Olive|OliveDrab|Orange|OrangeRed|Orchid|PaleGoldenRod|PaleGreen|PaleTurquoise|PaleVioletRed|PapayaWhip|PeachPuff|Peru|Pink|Plum|PowderBlue|Purple|Red|RosyBrown|RoyalBlue|SaddleBrown|Salmon|SandyBrown|SeaGreen|SeaShell|Sienna|Silver|SkyBlue|SlateBlue|SlateGr[ae]y|Snow|SpringGreen|SteelBlue|Tan|Teal|Thistle|Tomato|Transparent|Turquoise|Violet|Wheat|White|WhiteSmoke|Yellow|YellowGreen)\b/i,{pattern:/\b(?:hsl|rgb)\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*\)\B|\b(?:hsl|rgb)a\(\s*\d{1,3}\s*,\s*\d{1,3}%?\s*,\s*\d{1,3}%?\s*,\s*(?:0|0?\.\d+|1)\s*\)\B/i,inside:{unit:t,number:n,function:/[\w-]+(?=\()/,punctuation:/[(),]/}}],entity:/\\[\da-f]{1,8}/i,unit:t,boolean:/\b(?:false|true)\b/,operator:[/~|[+!\/%<>?=]=?|[-:]=|\*[*=]?|\.{2,3}|&&|\|\||\B-\B|\b(?:and|in|is(?: a| defined| not|nt)?|not|or)\b/],number:n,punctuation:/[{}()\[\];:,]/};r.interpolation={pattern:/\{[^\r\n}:]+\}/,alias:"variable",inside:{delimiter:{pattern:/^\{|\}$/,alias:"punctuation"},rest:r}},r.func={pattern:/[\w-]+\([^)]*\).*/,inside:{function:/^[^(]+/,rest:r}},e.languages.stylus={"atrule-declaration":{pattern:/(^[ \t]*)@.+/m,lookbehind:!0,inside:{atrule:/^@[\w-]+/,rest:r}},"variable-declaration":{pattern:/(^[ \t]*)[\w$-]+\s*.?=[ \t]*(?:\{[^{}]*\}|\S.*|$)/m,lookbehind:!0,inside:{variable:/^\S+/,rest:r}},statement:{pattern:/(^[ \t]*)(?:else|for|if|return|unless)[ \t].+/m,lookbehind:!0,inside:{keyword:/^\S+/,rest:r}},"property-declaration":{pattern:/((?:^|\{)([ \t]*))(?:[\w-]|\{[^}\r\n]+\})+(?:\s*:\s*|[ \t]+)(?!\s)[^{\r\n]*(?:;|[^{\r\n,]$(?!(?:\r?\n|\r)(?:\{|\2[ \t])))/m,lookbehind:!0,inside:{property:{pattern:/^[^\s:]+/,inside:{interpolation:r.interpolation}},rest:r}},selector:{pattern:/(^[ \t]*)(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\)|(?![\w-]))|\{[^}\r\n]+\})+)(?:(?:\r?\n|\r)(?:\1(?:(?=\S)(?:[^{}\r\n:()]|::?[\w-]+(?:\([^)\r\n]*\)|(?![\w-]))|\{[^}\r\n]+\})+)))*(?:,$|\{|(?=(?:\r?\n|\r)(?:\{|\1[ \t])))/m,lookbehind:!0,inside:{interpolation:r.interpolation,comment:r.comment,punctuation:/[{},]/}},func:r.func,string:r.string,comment:{pattern:/(^|[^\\])(?:\/\*[\s\S]*?\*\/|\/\/.*)/,lookbehind:!0,greedy:!0},interpolation:r.interpolation,punctuation:/[{}()\[\];:.]/}}(a),function(e){var t=e.util.clone(e.languages.typescript);e.languages.tsx=e.languages.extend("jsx",t),delete e.languages.tsx.parameter,delete e.languages.tsx["literal-property"];var n=e.languages.tsx.tag;n.pattern=RegExp(/(^|[^\w$]|(?=<\/))/.source+"(?:"+n.pattern.source+")",n.pattern.flags),n.lookbehind=!0}(a),a.languages.wasm={comment:[/\(;[\s\S]*?;\)/,{pattern:/;;.*/,greedy:!0}],string:{pattern:/"(?:\\[\s\S]|[^"\\])*"/,greedy:!0},keyword:[{pattern:/\b(?:align|offset)=/,inside:{operator:/=/}},{pattern:/\b(?:(?:f32|f64|i32|i64)(?:\.(?:abs|add|and|ceil|clz|const|convert_[su]\/i(?:32|64)|copysign|ctz|demote\/f64|div(?:_[su])?|eqz?|extend_[su]\/i32|floor|ge(?:_[su])?|gt(?:_[su])?|le(?:_[su])?|load(?:(?:8|16|32)_[su])?|lt(?:_[su])?|max|min|mul|neg?|nearest|or|popcnt|promote\/f32|reinterpret\/[fi](?:32|64)|rem_[su]|rot[lr]|shl|shr_[su]|sqrt|store(?:8|16|32)?|sub|trunc(?:_[su]\/f(?:32|64))?|wrap\/i64|xor))?|memory\.(?:grow|size))\b/,inside:{punctuation:/\./}},/\b(?:anyfunc|block|br(?:_if|_table)?|call(?:_indirect)?|data|drop|elem|else|end|export|func|get_(?:global|local)|global|if|import|local|loop|memory|module|mut|nop|offset|param|result|return|select|set_(?:global|local)|start|table|tee_local|then|type|unreachable)\b/],variable:/\$[\w!#$%&'*+\-./:<=>?@\\^`|~]+/,number:/[+-]?\b(?:\d(?:_?\d)*(?:\.\d(?:_?\d)*)?(?:[eE][+-]?\d(?:_?\d)*)?|0x[\da-fA-F](?:_?[\da-fA-F])*(?:\.[\da-fA-F](?:_?[\da-fA-D])*)?(?:[pP][+-]?\d(?:_?\d)*)?)\b|\binf\b|\bnan(?::0x[\da-fA-F](?:_?[\da-fA-D])*)?\b/,punctuation:/[()]/};const i=a},9901:e=>{e.exports&&(e.exports={core:{meta:{path:"components/prism-core.js",option:"mandatory"},core:"Core"},themes:{meta:{path:"themes/{id}.css",link:"index.html?theme={id}",exclusive:!0},prism:{title:"Default",option:"default"},"prism-dark":"Dark","prism-funky":"Funky","prism-okaidia":{title:"Okaidia",owner:"ocodia"},"prism-twilight":{title:"Twilight",owner:"remybach"},"prism-coy":{title:"Coy",owner:"tshedor"},"prism-solarizedlight":{title:"Solarized Light",owner:"hectormatos2011 "},"prism-tomorrow":{title:"Tomorrow Night",owner:"Rosey"}},languages:{meta:{path:"components/prism-{id}",noCSS:!0,examplesPath:"examples/prism-{id}",addCheckAll:!0},markup:{title:"Markup",alias:["html","xml","svg","mathml","ssml","atom","rss"],aliasTitles:{html:"HTML",xml:"XML",svg:"SVG",mathml:"MathML",ssml:"SSML",atom:"Atom",rss:"RSS"},option:"default"},css:{title:"CSS",option:"default",modify:"markup"},clike:{title:"C-like",option:"default"},javascript:{title:"JavaScript",require:"clike",modify:"markup",optional:"regex",alias:"js",option:"default"},abap:{title:"ABAP",owner:"dellagustin"},abnf:{title:"ABNF",owner:"RunDevelopment"},actionscript:{title:"ActionScript",require:"javascript",modify:"markup",owner:"Golmote"},ada:{title:"Ada",owner:"Lucretia"},agda:{title:"Agda",owner:"xy-ren"},al:{title:"AL",owner:"RunDevelopment"},antlr4:{title:"ANTLR4",alias:"g4",owner:"RunDevelopment"},apacheconf:{title:"Apache Configuration",owner:"GuiTeK"},apex:{title:"Apex",require:["clike","sql"],owner:"RunDevelopment"},apl:{title:"APL",owner:"ngn"},applescript:{title:"AppleScript",owner:"Golmote"},aql:{title:"AQL",owner:"RunDevelopment"},arduino:{title:"Arduino",require:"cpp",alias:"ino",owner:"dkern"},arff:{title:"ARFF",owner:"Golmote"},armasm:{title:"ARM Assembly",alias:"arm-asm",owner:"RunDevelopment"},arturo:{title:"Arturo",alias:"art",optional:["bash","css","javascript","markup","markdown","sql"],owner:"drkameleon"},asciidoc:{alias:"adoc",title:"AsciiDoc",owner:"Golmote"},aspnet:{title:"ASP.NET (C#)",require:["markup","csharp"],owner:"nauzilus"},asm6502:{title:"6502 Assembly",owner:"kzurawel"},asmatmel:{title:"Atmel AVR Assembly",owner:"cerkit"},autohotkey:{title:"AutoHotkey",owner:"aviaryan"},autoit:{title:"AutoIt",owner:"Golmote"},avisynth:{title:"AviSynth",alias:"avs",owner:"Zinfidel"},"avro-idl":{title:"Avro IDL",alias:"avdl",owner:"RunDevelopment"},awk:{title:"AWK",alias:"gawk",aliasTitles:{gawk:"GAWK"},owner:"RunDevelopment"},bash:{title:"Bash",alias:["sh","shell"],aliasTitles:{sh:"Shell",shell:"Shell"},owner:"zeitgeist87"},basic:{title:"BASIC",owner:"Golmote"},batch:{title:"Batch",owner:"Golmote"},bbcode:{title:"BBcode",alias:"shortcode",aliasTitles:{shortcode:"Shortcode"},owner:"RunDevelopment"},bbj:{title:"BBj",owner:"hyyan"},bicep:{title:"Bicep",owner:"johnnyreilly"},birb:{title:"Birb",require:"clike",owner:"Calamity210"},bison:{title:"Bison",require:"c",owner:"Golmote"},bnf:{title:"BNF",alias:"rbnf",aliasTitles:{rbnf:"RBNF"},owner:"RunDevelopment"},bqn:{title:"BQN",owner:"yewscion"},brainfuck:{title:"Brainfuck",owner:"Golmote"},brightscript:{title:"BrightScript",owner:"RunDevelopment"},bro:{title:"Bro",owner:"wayward710"},bsl:{title:"BSL (1C:Enterprise)",alias:"oscript",aliasTitles:{oscript:"OneScript"},owner:"Diversus23"},c:{title:"C",require:"clike",owner:"zeitgeist87"},csharp:{title:"C#",require:"clike",alias:["cs","dotnet"],owner:"mvalipour"},cpp:{title:"C++",require:"c",owner:"zeitgeist87"},cfscript:{title:"CFScript",require:"clike",alias:"cfc",owner:"mjclemente"},chaiscript:{title:"ChaiScript",require:["clike","cpp"],owner:"RunDevelopment"},cil:{title:"CIL",owner:"sbrl"},cilkc:{title:"Cilk/C",require:"c",alias:"cilk-c",owner:"OpenCilk"},cilkcpp:{title:"Cilk/C++",require:"cpp",alias:["cilk-cpp","cilk"],owner:"OpenCilk"},clojure:{title:"Clojure",owner:"troglotit"},cmake:{title:"CMake",owner:"mjrogozinski"},cobol:{title:"COBOL",owner:"RunDevelopment"},coffeescript:{title:"CoffeeScript",require:"javascript",alias:"coffee",owner:"R-osey"},concurnas:{title:"Concurnas",alias:"conc",owner:"jasontatton"},csp:{title:"Content-Security-Policy",owner:"ScottHelme"},cooklang:{title:"Cooklang",owner:"ahue"},coq:{title:"Coq",owner:"RunDevelopment"},crystal:{title:"Crystal",require:"ruby",owner:"MakeNowJust"},"css-extras":{title:"CSS Extras",require:"css",modify:"css",owner:"milesj"},csv:{title:"CSV",owner:"RunDevelopment"},cue:{title:"CUE",owner:"RunDevelopment"},cypher:{title:"Cypher",owner:"RunDevelopment"},d:{title:"D",require:"clike",owner:"Golmote"},dart:{title:"Dart",require:"clike",owner:"Golmote"},dataweave:{title:"DataWeave",owner:"machaval"},dax:{title:"DAX",owner:"peterbud"},dhall:{title:"Dhall",owner:"RunDevelopment"},diff:{title:"Diff",owner:"uranusjr"},django:{title:"Django/Jinja2",require:"markup-templating",alias:"jinja2",owner:"romanvm"},"dns-zone-file":{title:"DNS zone file",owner:"RunDevelopment",alias:"dns-zone"},docker:{title:"Docker",alias:"dockerfile",owner:"JustinBeckwith"},dot:{title:"DOT (Graphviz)",alias:"gv",optional:"markup",owner:"RunDevelopment"},ebnf:{title:"EBNF",owner:"RunDevelopment"},editorconfig:{title:"EditorConfig",owner:"osipxd"},eiffel:{title:"Eiffel",owner:"Conaclos"},ejs:{title:"EJS",require:["javascript","markup-templating"],owner:"RunDevelopment",alias:"eta",aliasTitles:{eta:"Eta"}},elixir:{title:"Elixir",owner:"Golmote"},elm:{title:"Elm",owner:"zwilias"},etlua:{title:"Embedded Lua templating",require:["lua","markup-templating"],owner:"RunDevelopment"},erb:{title:"ERB",require:["ruby","markup-templating"],owner:"Golmote"},erlang:{title:"Erlang",owner:"Golmote"},"excel-formula":{title:"Excel Formula",alias:["xlsx","xls"],owner:"RunDevelopment"},fsharp:{title:"F#",require:"clike",owner:"simonreynolds7"},factor:{title:"Factor",owner:"catb0t"},false:{title:"False",owner:"edukisto"},"firestore-security-rules":{title:"Firestore security rules",require:"clike",owner:"RunDevelopment"},flow:{title:"Flow",require:"javascript",owner:"Golmote"},fortran:{title:"Fortran",owner:"Golmote"},ftl:{title:"FreeMarker Template Language",require:"markup-templating",owner:"RunDevelopment"},gml:{title:"GameMaker Language",alias:"gamemakerlanguage",require:"clike",owner:"LiarOnce"},gap:{title:"GAP (CAS)",owner:"RunDevelopment"},gcode:{title:"G-code",owner:"RunDevelopment"},gdscript:{title:"GDScript",owner:"RunDevelopment"},gedcom:{title:"GEDCOM",owner:"Golmote"},gettext:{title:"gettext",alias:"po",owner:"RunDevelopment"},gherkin:{title:"Gherkin",owner:"hason"},git:{title:"Git",owner:"lgiraudel"},glsl:{title:"GLSL",require:"c",owner:"Golmote"},gn:{title:"GN",alias:"gni",owner:"RunDevelopment"},"linker-script":{title:"GNU Linker Script",alias:"ld",owner:"RunDevelopment"},go:{title:"Go",require:"clike",owner:"arnehormann"},"go-module":{title:"Go module",alias:"go-mod",owner:"RunDevelopment"},gradle:{title:"Gradle",require:"clike",owner:"zeabdelkhalek-badido18"},graphql:{title:"GraphQL",optional:"markdown",owner:"Golmote"},groovy:{title:"Groovy",require:"clike",owner:"robfletcher"},haml:{title:"Haml",require:"ruby",optional:["css","css-extras","coffeescript","erb","javascript","less","markdown","scss","textile"],owner:"Golmote"},handlebars:{title:"Handlebars",require:"markup-templating",alias:["hbs","mustache"],aliasTitles:{mustache:"Mustache"},owner:"Golmote"},haskell:{title:"Haskell",alias:"hs",owner:"bholst"},haxe:{title:"Haxe",require:"clike",optional:"regex",owner:"Golmote"},hcl:{title:"HCL",owner:"outsideris"},hlsl:{title:"HLSL",require:"c",owner:"RunDevelopment"},hoon:{title:"Hoon",owner:"matildepark"},http:{title:"HTTP",optional:["csp","css","hpkp","hsts","javascript","json","markup","uri"],owner:"danielgtaylor"},hpkp:{title:"HTTP Public-Key-Pins",owner:"ScottHelme"},hsts:{title:"HTTP Strict-Transport-Security",owner:"ScottHelme"},ichigojam:{title:"IchigoJam",owner:"BlueCocoa"},icon:{title:"Icon",owner:"Golmote"},"icu-message-format":{title:"ICU Message Format",owner:"RunDevelopment"},idris:{title:"Idris",alias:"idr",owner:"KeenS",require:"haskell"},ignore:{title:".ignore",owner:"osipxd",alias:["gitignore","hgignore","npmignore"],aliasTitles:{gitignore:".gitignore",hgignore:".hgignore",npmignore:".npmignore"}},inform7:{title:"Inform 7",owner:"Golmote"},ini:{title:"Ini",owner:"aviaryan"},io:{title:"Io",owner:"AlesTsurko"},j:{title:"J",owner:"Golmote"},java:{title:"Java",require:"clike",owner:"sherblot"},javadoc:{title:"JavaDoc",require:["markup","java","javadoclike"],modify:"java",optional:"scala",owner:"RunDevelopment"},javadoclike:{title:"JavaDoc-like",modify:["java","javascript","php"],owner:"RunDevelopment"},javastacktrace:{title:"Java stack trace",owner:"RunDevelopment"},jexl:{title:"Jexl",owner:"czosel"},jolie:{title:"Jolie",require:"clike",owner:"thesave"},jq:{title:"JQ",owner:"RunDevelopment"},jsdoc:{title:"JSDoc",require:["javascript","javadoclike","typescript"],modify:"javascript",optional:["actionscript","coffeescript"],owner:"RunDevelopment"},"js-extras":{title:"JS Extras",require:"javascript",modify:"javascript",optional:["actionscript","coffeescript","flow","n4js","typescript"],owner:"RunDevelopment"},json:{title:"JSON",alias:"webmanifest",aliasTitles:{webmanifest:"Web App Manifest"},owner:"CupOfTea696"},json5:{title:"JSON5",require:"json",owner:"RunDevelopment"},jsonp:{title:"JSONP",require:"json",owner:"RunDevelopment"},jsstacktrace:{title:"JS stack trace",owner:"sbrl"},"js-templates":{title:"JS Templates",require:"javascript",modify:"javascript",optional:["css","css-extras","graphql","markdown","markup","sql"],owner:"RunDevelopment"},julia:{title:"Julia",owner:"cdagnino"},keepalived:{title:"Keepalived Configure",owner:"dev-itsheng"},keyman:{title:"Keyman",owner:"mcdurdin"},kotlin:{title:"Kotlin",alias:["kt","kts"],aliasTitles:{kts:"Kotlin Script"},require:"clike",owner:"Golmote"},kumir:{title:"KuMir (\u041a\u0443\u041c\u0438\u0440)",alias:"kum",owner:"edukisto"},kusto:{title:"Kusto",owner:"RunDevelopment"},latex:{title:"LaTeX",alias:["tex","context"],aliasTitles:{tex:"TeX",context:"ConTeXt"},owner:"japborst"},latte:{title:"Latte",require:["clike","markup-templating","php"],owner:"nette"},less:{title:"Less",require:"css",optional:"css-extras",owner:"Golmote"},lilypond:{title:"LilyPond",require:"scheme",alias:"ly",owner:"RunDevelopment"},liquid:{title:"Liquid",require:"markup-templating",owner:"cinhtau"},lisp:{title:"Lisp",alias:["emacs","elisp","emacs-lisp"],owner:"JuanCaicedo"},livescript:{title:"LiveScript",owner:"Golmote"},llvm:{title:"LLVM IR",owner:"porglezomp"},log:{title:"Log file",optional:"javastacktrace",owner:"RunDevelopment"},lolcode:{title:"LOLCODE",owner:"Golmote"},lua:{title:"Lua",owner:"Golmote"},magma:{title:"Magma (CAS)",owner:"RunDevelopment"},makefile:{title:"Makefile",owner:"Golmote"},markdown:{title:"Markdown",require:"markup",optional:"yaml",alias:"md",owner:"Golmote"},"markup-templating":{title:"Markup templating",require:"markup",owner:"Golmote"},mata:{title:"Mata",owner:"RunDevelopment"},matlab:{title:"MATLAB",owner:"Golmote"},maxscript:{title:"MAXScript",owner:"RunDevelopment"},mel:{title:"MEL",owner:"Golmote"},mermaid:{title:"Mermaid",owner:"RunDevelopment"},metafont:{title:"METAFONT",owner:"LaeriExNihilo"},mizar:{title:"Mizar",owner:"Golmote"},mongodb:{title:"MongoDB",owner:"airs0urce",require:"javascript"},monkey:{title:"Monkey",owner:"Golmote"},moonscript:{title:"MoonScript",alias:"moon",owner:"RunDevelopment"},n1ql:{title:"N1QL",owner:"TMWilds"},n4js:{title:"N4JS",require:"javascript",optional:"jsdoc",alias:"n4jsd",owner:"bsmith-n4"},"nand2tetris-hdl":{title:"Nand To Tetris HDL",owner:"stephanmax"},naniscript:{title:"Naninovel Script",owner:"Elringus",alias:"nani"},nasm:{title:"NASM",owner:"rbmj"},neon:{title:"NEON",owner:"nette"},nevod:{title:"Nevod",owner:"nezaboodka"},nginx:{title:"nginx",owner:"volado"},nim:{title:"Nim",owner:"Golmote"},nix:{title:"Nix",owner:"Golmote"},nsis:{title:"NSIS",owner:"idleberg"},objectivec:{title:"Objective-C",require:"c",alias:"objc",owner:"uranusjr"},ocaml:{title:"OCaml",owner:"Golmote"},odin:{title:"Odin",owner:"edukisto"},opencl:{title:"OpenCL",require:"c",modify:["c","cpp"],owner:"Milania1"},openqasm:{title:"OpenQasm",alias:"qasm",owner:"RunDevelopment"},oz:{title:"Oz",owner:"Golmote"},parigp:{title:"PARI/GP",owner:"Golmote"},parser:{title:"Parser",require:"markup",owner:"Golmote"},pascal:{title:"Pascal",alias:"objectpascal",aliasTitles:{objectpascal:"Object Pascal"},owner:"Golmote"},pascaligo:{title:"Pascaligo",owner:"DefinitelyNotAGoat"},psl:{title:"PATROL Scripting Language",owner:"bertysentry"},pcaxis:{title:"PC-Axis",alias:"px",owner:"RunDevelopment"},peoplecode:{title:"PeopleCode",alias:"pcode",owner:"RunDevelopment"},perl:{title:"Perl",owner:"Golmote"},php:{title:"PHP",require:"markup-templating",owner:"milesj"},phpdoc:{title:"PHPDoc",require:["php","javadoclike"],modify:"php",owner:"RunDevelopment"},"php-extras":{title:"PHP Extras",require:"php",modify:"php",owner:"milesj"},"plant-uml":{title:"PlantUML",alias:"plantuml",owner:"RunDevelopment"},plsql:{title:"PL/SQL",require:"sql",owner:"Golmote"},powerquery:{title:"PowerQuery",alias:["pq","mscript"],owner:"peterbud"},powershell:{title:"PowerShell",owner:"nauzilus"},processing:{title:"Processing",require:"clike",owner:"Golmote"},prolog:{title:"Prolog",owner:"Golmote"},promql:{title:"PromQL",owner:"arendjr"},properties:{title:".properties",owner:"Golmote"},protobuf:{title:"Protocol Buffers",require:"clike",owner:"just-boris"},pug:{title:"Pug",require:["markup","javascript"],optional:["coffeescript","ejs","handlebars","less","livescript","markdown","scss","stylus","twig"],owner:"Golmote"},puppet:{title:"Puppet",owner:"Golmote"},pure:{title:"Pure",optional:["c","cpp","fortran"],owner:"Golmote"},purebasic:{title:"PureBasic",require:"clike",alias:"pbfasm",owner:"HeX0R101"},purescript:{title:"PureScript",require:"haskell",alias:"purs",owner:"sriharshachilakapati"},python:{title:"Python",alias:"py",owner:"multipetros"},qsharp:{title:"Q#",require:"clike",alias:"qs",owner:"fedonman"},q:{title:"Q (kdb+ database)",owner:"Golmote"},qml:{title:"QML",require:"javascript",owner:"RunDevelopment"},qore:{title:"Qore",require:"clike",owner:"temnroegg"},r:{title:"R",owner:"Golmote"},racket:{title:"Racket",require:"scheme",alias:"rkt",owner:"RunDevelopment"},cshtml:{title:"Razor C#",alias:"razor",require:["markup","csharp"],optional:["css","css-extras","javascript","js-extras"],owner:"RunDevelopment"},jsx:{title:"React JSX",require:["markup","javascript"],optional:["jsdoc","js-extras","js-templates"],owner:"vkbansal"},tsx:{title:"React TSX",require:["jsx","typescript"]},reason:{title:"Reason",require:"clike",owner:"Golmote"},regex:{title:"Regex",owner:"RunDevelopment"},rego:{title:"Rego",owner:"JordanSh"},renpy:{title:"Ren'py",alias:"rpy",owner:"HyuchiaDiego"},rescript:{title:"ReScript",alias:"res",owner:"vmarcosp"},rest:{title:"reST (reStructuredText)",owner:"Golmote"},rip:{title:"Rip",owner:"ravinggenius"},roboconf:{title:"Roboconf",owner:"Golmote"},robotframework:{title:"Robot Framework",alias:"robot",owner:"RunDevelopment"},ruby:{title:"Ruby",require:"clike",alias:"rb",owner:"samflores"},rust:{title:"Rust",owner:"Golmote"},sas:{title:"SAS",optional:["groovy","lua","sql"],owner:"Golmote"},sass:{title:"Sass (Sass)",require:"css",optional:"css-extras",owner:"Golmote"},scss:{title:"Sass (SCSS)",require:"css",optional:"css-extras",owner:"MoOx"},scala:{title:"Scala",require:"java",owner:"jozic"},scheme:{title:"Scheme",owner:"bacchus123"},"shell-session":{title:"Shell session",require:"bash",alias:["sh-session","shellsession"],owner:"RunDevelopment"},smali:{title:"Smali",owner:"RunDevelopment"},smalltalk:{title:"Smalltalk",owner:"Golmote"},smarty:{title:"Smarty",require:"markup-templating",optional:"php",owner:"Golmote"},sml:{title:"SML",alias:"smlnj",aliasTitles:{smlnj:"SML/NJ"},owner:"RunDevelopment"},solidity:{title:"Solidity (Ethereum)",alias:"sol",require:"clike",owner:"glachaud"},"solution-file":{title:"Solution file",alias:"sln",owner:"RunDevelopment"},soy:{title:"Soy (Closure Template)",require:"markup-templating",owner:"Golmote"},sparql:{title:"SPARQL",require:"turtle",owner:"Triply-Dev",alias:"rq"},"splunk-spl":{title:"Splunk SPL",owner:"RunDevelopment"},sqf:{title:"SQF: Status Quo Function (Arma 3)",require:"clike",owner:"RunDevelopment"},sql:{title:"SQL",owner:"multipetros"},squirrel:{title:"Squirrel",require:"clike",owner:"RunDevelopment"},stan:{title:"Stan",owner:"RunDevelopment"},stata:{title:"Stata Ado",require:["mata","java","python"],owner:"RunDevelopment"},iecst:{title:"Structured Text (IEC 61131-3)",owner:"serhioromano"},stylus:{title:"Stylus",owner:"vkbansal"},supercollider:{title:"SuperCollider",alias:"sclang",owner:"RunDevelopment"},swift:{title:"Swift",owner:"chrischares"},systemd:{title:"Systemd configuration file",owner:"RunDevelopment"},"t4-templating":{title:"T4 templating",owner:"RunDevelopment"},"t4-cs":{title:"T4 Text Templates (C#)",require:["t4-templating","csharp"],alias:"t4",owner:"RunDevelopment"},"t4-vb":{title:"T4 Text Templates (VB)",require:["t4-templating","vbnet"],owner:"RunDevelopment"},tap:{title:"TAP",owner:"isaacs",require:"yaml"},tcl:{title:"Tcl",owner:"PeterChaplin"},tt2:{title:"Template Toolkit 2",require:["clike","markup-templating"],owner:"gflohr"},textile:{title:"Textile",require:"markup",optional:"css",owner:"Golmote"},toml:{title:"TOML",owner:"RunDevelopment"},tremor:{title:"Tremor",alias:["trickle","troy"],owner:"darach",aliasTitles:{trickle:"trickle",troy:"troy"}},turtle:{title:"Turtle",alias:"trig",aliasTitles:{trig:"TriG"},owner:"jakubklimek"},twig:{title:"Twig",require:"markup-templating",owner:"brandonkelly"},typescript:{title:"TypeScript",require:"javascript",optional:"js-templates",alias:"ts",owner:"vkbansal"},typoscript:{title:"TypoScript",alias:"tsconfig",aliasTitles:{tsconfig:"TSConfig"},owner:"dkern"},unrealscript:{title:"UnrealScript",alias:["uscript","uc"],owner:"RunDevelopment"},uorazor:{title:"UO Razor Script",owner:"jaseowns"},uri:{title:"URI",alias:"url",aliasTitles:{url:"URL"},owner:"RunDevelopment"},v:{title:"V",require:"clike",owner:"taggon"},vala:{title:"Vala",require:"clike",optional:"regex",owner:"TemplarVolk"},vbnet:{title:"VB.Net",require:"basic",owner:"Bigsby"},velocity:{title:"Velocity",require:"markup",owner:"Golmote"},verilog:{title:"Verilog",owner:"a-rey"},vhdl:{title:"VHDL",owner:"a-rey"},vim:{title:"vim",owner:"westonganger"},"visual-basic":{title:"Visual Basic",alias:["vb","vba"],aliasTitles:{vba:"VBA"},owner:"Golmote"},warpscript:{title:"WarpScript",owner:"RunDevelopment"},wasm:{title:"WebAssembly",owner:"Golmote"},"web-idl":{title:"Web IDL",alias:"webidl",owner:"RunDevelopment"},wgsl:{title:"WGSL",owner:"Dr4gonthree"},wiki:{title:"Wiki markup",require:"markup",owner:"Golmote"},wolfram:{title:"Wolfram language",alias:["mathematica","nb","wl"],aliasTitles:{mathematica:"Mathematica",nb:"Mathematica Notebook"},owner:"msollami"},wren:{title:"Wren",owner:"clsource"},xeora:{title:"Xeora",require:"markup",alias:"xeoracube",aliasTitles:{xeoracube:"XeoraCube"},owner:"freakmaxi"},"xml-doc":{title:"XML doc (.net)",require:"markup",modify:["csharp","fsharp","vbnet"],owner:"RunDevelopment"},xojo:{title:"Xojo (REALbasic)",owner:"Golmote"},xquery:{title:"XQuery",require:"markup",owner:"Golmote"},yaml:{title:"YAML",alias:"yml",owner:"hason"},yang:{title:"YANG",owner:"RunDevelopment"},zig:{title:"Zig",owner:"RunDevelopment"}},plugins:{meta:{path:"plugins/{id}/prism-{id}",link:"plugins/{id}/"},"line-highlight":{title:"Line Highlight",description:"Highlights specific lines and/or line ranges."},"line-numbers":{title:"Line Numbers",description:"Line number at the beginning of code lines.",owner:"kuba-kubula"},"show-invisibles":{title:"Show Invisibles",description:"Show hidden characters such as tabs and line breaks.",optional:["autolinker","data-uri-highlight"]},autolinker:{title:"Autolinker",description:"Converts URLs and emails in code to clickable links. Parses Markdown links in comments."},wpd:{title:"WebPlatform Docs",description:'Makes tokens link to WebPlatform.org documentation. The links open in a new tab.'},"custom-class":{title:"Custom Class",description:"This plugin allows you to prefix Prism's default classes (.comment can become .namespace--comment) or replace them with your defined ones (like .editor__comment). You can even add new classes.",owner:"dvkndn",noCSS:!0},"file-highlight":{title:"File Highlight",description:"Fetch external files and highlight them with Prism. Used on the Prism website itself.",noCSS:!0},"show-language":{title:"Show Language",description:"Display the highlighted language in code blocks (inline code does not show the label).",owner:"nauzilus",noCSS:!0,require:"toolbar"},"jsonp-highlight":{title:"JSONP Highlight",description:"Fetch content with JSONP and highlight some interesting content (e.g. GitHub/Gists or Bitbucket API).",noCSS:!0,owner:"nauzilus"},"highlight-keywords":{title:"Highlight Keywords",description:"Adds special CSS classes for each keyword for fine-grained highlighting.",owner:"vkbansal",noCSS:!0},"remove-initial-line-feed":{title:"Remove initial line feed",description:"Removes the initial line feed in code blocks.",owner:"Golmote",noCSS:!0},"inline-color":{title:"Inline color",description:"Adds a small inline preview for colors in style sheets.",require:"css-extras",owner:"RunDevelopment"},previewers:{title:"Previewers",description:"Previewers for angles, colors, gradients, easing and time.",require:"css-extras",owner:"Golmote"},autoloader:{title:"Autoloader",description:"Automatically loads the needed languages to highlight the code blocks.",owner:"Golmote",noCSS:!0},"keep-markup":{title:"Keep Markup",description:"Prevents custom markup from being dropped out during highlighting.",owner:"Golmote",optional:"normalize-whitespace",noCSS:!0},"command-line":{title:"Command Line",description:"Display a command line with a prompt and, optionally, the output/response from the commands.",owner:"chriswells0"},"unescaped-markup":{title:"Unescaped Markup",description:"Write markup without having to escape anything."},"normalize-whitespace":{title:"Normalize Whitespace",description:"Supports multiple operations to normalize whitespace in code blocks.",owner:"zeitgeist87",optional:"unescaped-markup",noCSS:!0},"data-uri-highlight":{title:"Data-URI Highlight",description:"Highlights data-URI contents.",owner:"Golmote",noCSS:!0},toolbar:{title:"Toolbar",description:"Attach a toolbar for plugins to easily register buttons on the top of a code block.",owner:"mAAdhaTTah"},"copy-to-clipboard":{title:"Copy to Clipboard Button",description:"Add a button that copies the code block to the clipboard when clicked.",owner:"mAAdhaTTah",require:"toolbar",noCSS:!0},"download-button":{title:"Download Button",description:"A button in the toolbar of a code block adding a convenient way to download a code file.",owner:"Golmote",require:"toolbar",noCSS:!0},"match-braces":{title:"Match braces",description:"Highlights matching braces.",owner:"RunDevelopment"},"diff-highlight":{title:"Diff Highlight",description:"Highlights the code inside diff blocks.",owner:"RunDevelopment",require:"diff"},"filter-highlight-all":{title:"Filter highlightAll",description:"Filters the elements the highlightAll and highlightAllUnder methods actually highlight.",owner:"RunDevelopment",noCSS:!0},treeview:{title:"Treeview",description:"A language with special styles to highlight file system tree structures.",owner:"Golmote"}}})},2885:(e,t,n)=>{const r=n(9901),a=n(9642),i=new Set;function s(e){void 0===e?e=Object.keys(r.languages).filter((e=>"meta"!=e)):Array.isArray(e)||(e=[e]);const t=[...i,...Object.keys(Prism.languages)];a(r,e,t).load((e=>{if(!(e in r.languages))return void(s.silent||console.warn("Language does not exist: "+e));const t="./prism-"+e;delete n.c[n(6500).resolve(t)],delete Prism.languages[e],n(6500)(t),i.add(e)}))}s.silent=!1,e.exports=s},6726:(e,t,n)=>{var r={"./":2885};function a(e){var t=i(e);return n(t)}function i(e){if(!n.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}a.keys=function(){return Object.keys(r)},a.resolve=i,e.exports=a,a.id=6726},6500:(e,t,n)=>{var r={"./":2885};function a(e){var t=i(e);return n(t)}function i(e){if(!n.o(r,e)){var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}return r[e]}a.keys=function(){return Object.keys(r)},a.resolve=i,e.exports=a,a.id=6500},9642:e=>{"use strict";var t=function(){var e=function(){};function t(e,t){Array.isArray(e)?e.forEach(t):null!=e&&t(e,0)}function n(e){for(var t={},n=0,r=e.length;n "));var o={},l=e[r];if(l){function c(t){if(!(t in e))throw new Error(r+" depends on an unknown component "+t);if(!(t in o))for(var s in a(t,i),o[t]=!0,n[t])o[s]=!0}t(l.require,c),t(l.optional,c),t(l.modify,c)}n[r]=o,i.pop()}}return function(e){var t=n[e];return t||(a(e,r),t=n[e]),t}}function a(e){for(var t in e)return!0;return!1}return function(i,s,o){var l=function(e){var t={};for(var n in e){var r=e[n];for(var a in r)if("meta"!=a){var i=r[a];t[a]="string"==typeof i?{title:i}:i}}return t}(i),c=function(e){var n;return function(r){if(r in e)return r;if(!n)for(var a in n={},e){var i=e[a];t(i&&i.alias,(function(t){if(t in n)throw new Error(t+" cannot be alias for both "+a+" and "+n[t]);if(t in e)throw new Error(t+" cannot be alias of "+a+" because it is a component.");n[t]=a}))}return n[r]||r}}(l);s=s.map(c),o=(o||[]).map(c);var u=n(s),d=n(o);s.forEach((function e(n){var r=l[n];t(r&&r.require,(function(t){t in d||(u[t]=!0,e(t))}))}));for(var p,m=r(l),f=u;a(f);){for(var h in p={},f){var g=l[h];t(g&&g.modify,(function(e){e in d&&(p[e]=!0)}))}for(var b in d)if(!(b in u))for(var x in m(b))if(x in u){p[b]=!0;break}for(var v in f=p)u[v]=!0}var y={getIds:function(){var e=[];return y.load((function(t){e.push(t)})),e},load:function(t,n){return function(t,n,r,a){var i=a?a.series:void 0,s=a?a.parallel:e,o={},l={};function c(e){if(e in o)return o[e];l[e]=!0;var a,u=[];for(var d in t(e))d in n&&u.push(d);if(0===u.length)a=r(e);else{var p=s(u.map((function(e){var t=c(e);return delete l[e],t})));i?a=i(p,(function(){return r(e)})):r(e)}return o[e]=a}for(var u in n)c(u);var d=[];for(var p in l)d.push(o[p]);return s(d)}(m,u,t,n)}};return y}}();e.exports=t},2703:(e,t,n)=>{"use strict";var r=n(414);function a(){}function i(){}i.resetWarningCache=a,e.exports=function(){function e(e,t,n,a,i,s){if(s!==r){var o=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw o.name="Invariant Violation",o}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:i,resetWarningCache:a};return n.PropTypes=n,n}},5697:(e,t,n)=>{e.exports=n(2703)()},414:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},4448:(e,t,n)=>{"use strict";var r=n(7294),a=n(7418),i=n(3840);function s(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n