chore: lint fixes for v3 update

docusaurus.config.js

@@ -342,4 +342,4 @@ const config = {
         }),
 };
 
-module.exports = config;
+export default config;

src/components/Example/index.tsx

@@ -1,11 +1,11 @@
-import PixiPlayground from '@site/src/components/Playground/PixiPlayground';
-import type { IVersion } from '@site/src/components/Playground/PixiPlayground/usePixiVersions';
-
+import classNames from 'classnames';
+import { extractSource } from '../Playground/PixiPlayground/useEditorCode';
 import styles from './index.module.scss';
 import BrowserOnly from '@docusaurus/BrowserOnly';
+import PixiPlayground from '@site/src/components/Playground/PixiPlayground';
 import { getExampleEntry } from '@site/src/examples';
-import { extractSource } from '../Playground/PixiPlayground/useEditorCode';
-import classNames from 'classnames';
+
+import type { IVersion } from '@site/src/components/Playground/PixiPlayground/usePixiVersions';
 
 export default function Example({ id, pixiVersion, mode }: { id: string; pixiVersion: IVersion; mode?: any })
 {

src/components/Homepage/ClosingSection/index.tsx

@@ -1,6 +1,6 @@
+import { useInView } from 'react-intersection-observer';
 import HomeCTA from '../HomeCTA';
 import styles from './index.module.scss';
-import { useInView } from 'react-intersection-observer';
 
 const animShortUp = (duration: number, delay: number) => ({
     opacity: 0,

src/components/Homepage/FeatureList/index.tsx

@@ -1,6 +1,6 @@
-import styles from './index.module.scss';
-import features from './features.json';
 import { useInView } from 'react-intersection-observer';
+import features from './features.json';
+import styles from './index.module.scss';
 
 export default function FeatureList(): JSX.Element
 {

src/components/Homepage/HeroHeader/index.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
-import styles from './index.module.scss';
 import HomeCTA from '../HomeCTA';
+import styles from './index.module.scss';
 
 export default function HeroHeader(): JSX.Element
 {

src/components/Homepage/HomeCTA/index.tsx

@@ -1,5 +1,6 @@
-import Link from '@docusaurus/Link';
 import styles from './index.module.scss';
+import Link from '@docusaurus/Link';
+
 import type React from 'react';
 
 export interface HomeCTAOptions {

src/components/Homepage/KeyOfferings/index.tsx

@@ -1,7 +1,7 @@
-import styles from './index.module.scss';
+import { useInView } from 'react-intersection-observer';
 import content from './content.json';
 import graphics from './graphics.json';
-import { useInView } from 'react-intersection-observer';
+import styles from './index.module.scss';
 
 const Offerings = (): JSX.Element =>
 {

src/components/Homepage/OpenCollective/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import styles from './index.module.scss';
 import { useInView } from 'react-intersection-observer';
+import styles from './index.module.scss';
 
 interface OpenCollectiveData {
     MemberId: number;

src/components/Homepage/index.tsx

@@ -1,11 +1,11 @@
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import Layout from '@theme/Layout';
+import ClosingSection from './ClosingSection';
+import FeatureList from './FeatureList';
 import HeroHeader from './HeroHeader';
-import TestimonialCarousel from './TestimonialCarousel';
 import KeyOfferings from './KeyOfferings';
-import FeatureList from './FeatureList';
-import ClosingSection from './ClosingSection';
 import OpenCollective from './OpenCollective';
+import TestimonialCarousel from './TestimonialCarousel';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
 
 export default function Homepage(): JSX.Element
 {

src/components/Playground/PixiPlayground/MonacoEditor.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useEffect, useRef } from 'react';
-import type { editor } from 'monaco-editor';
+import { type SandpackState, FileTabs, SandpackStack, useActiveCode, useSandpack } from '@codesandbox/sandpack-react';
 import { useColorMode } from '@docusaurus/theme-common';
 import Editor from '@monaco-editor/react';
-import type { SandpackState } from '@codesandbox/sandpack-react';
-import { FileTabs, SandpackStack, useActiveCode, useSandpack } from '@codesandbox/sandpack-react';
+
+import type { editor } from 'monaco-editor';
 
 export type CodeChangeCallbackType = (code: string | undefined, state: SandpackState) => void;
 

src/components/Playground/PixiPlayground/index.tsx

@@ -1,14 +1,12 @@
-import { useColorMode } from '@docusaurus/theme-common';
-import { useCallback, useState } from 'react';
 import classNames from 'classnames';
-import { SandpackLayout, SandpackPreview, SandpackProvider, useSandpack } from '@codesandbox/sandpack-react';
-import { useContainerClassNameModifier } from '@site/src/hooks/useContainerClassNameModifier';
+import { useCallback, useState } from 'react';
+import styles from './index.module.scss';
+import MonacoEditor, { type CodeChangeCallbackType } from './MonacoEditor';
 import { latestVersion } from './usePixiVersions';
-import MonacoEditor from './MonacoEditor';
 import { useSandpackConfiguration } from './useSandpackConfiguration';
-import type { CodeChangeCallbackType } from './MonacoEditor';
-
-import styles from './index.module.scss';
+import { SandpackLayout, SandpackPreview, SandpackProvider, useSandpack } from '@codesandbox/sandpack-react';
+import { useColorMode } from '@docusaurus/theme-common';
+import { useContainerClassNameModifier } from '@site/src/hooks/useContainerClassNameModifier';
 
 type BasePlaygroundMode = 'tutorial' | 'fullscreen' | 'example' | 'embedded';
 

src/components/Playground/PixiPlayground/useEditorCode.ts

@@ -1,10 +1,11 @@
 import { useCallback, useMemo } from 'react';
-import type { OptionGroup } from '@site/src/components/Select';
-import type { SetURLStateType, URLSaveState } from '@site/src/components/Playground/PixiPlayground/usePlaygroundURLState';
-import type { ExampleSourceEntry } from '@site/src/examples';
 import { getExampleEntry, getExampleOptions } from '@site/src/examples';
+
 import type { IVersion } from './usePixiVersions';
 import type { SandpackState } from '@codesandbox/sandpack-react';
+import type { SetURLStateType, URLSaveState } from '@site/src/components/Playground/PixiPlayground/usePlaygroundURLState';
+import type { OptionGroup } from '@site/src/components/Select';
+import type { ExampleSourceEntry } from '@site/src/examples';
 
 export const defaultExampleId = 'sprite.basic';
 
@@ -56,16 +57,19 @@ export const useCodeExamples = ({ urlState, selectedOptionId, setURLState, pixiV
 
         const extraFiles = Object.entries(files)
             .filter(([key]) => (/^\/src\/(?!index\.js$|styles\.css$)/).test(key))
-            .reduce((acc, [key, value]) =>
-            {
-                let suffix = '';
+            .reduce(
+                (acc, [key, value]) =>
+                {
+                    let suffix = '';
 
-                if (activeFile === key) suffix = '*';
-                if (!visibleFiles.includes(key)) suffix = '!';
-                acc[key.substring(1) + suffix] = value.code;
+                    if (activeFile === key) suffix = '*';
+                    if (!visibleFiles.includes(key)) suffix = '!';
+                    acc[key.substring(1) + suffix] = value.code;
 
-                return acc;
-            }, {} as Record<string, string>);
+                    return acc;
+                },
+                {} as Record<string, string>,
+            );
 
         return {
             indexCode: files['/src/index.js'].code,

src/components/Playground/PixiPlayground/usePixiVersions.ts

@@ -1,5 +1,5 @@
-import versions from '@site/pixi-versions.json';
 import { gt } from 'semver';
+import versions from '@site/pixi-versions.json';
 
 export type IVersion = {
     version: string;

src/components/Playground/PixiPlayground/usePlaygroundURLState.ts

@@ -1,7 +1,8 @@
 import { evolve, isNil, unless } from 'ramda';
-import type { DeserializeParamsType, SerializeParamsType, SetStateType } from '@site/src/hooks/useURLStateParams';
 import { useURLStateParams } from '@site/src/hooks/useURLStateParams';
 
+import type { DeserializeParamsType, SerializeParamsType, SetStateType } from '@site/src/hooks/useURLStateParams';
+
 export type URLSaveState = {
     files: Record<string, { code: string }>;
     visibleFiles: string[];
@@ -60,7 +61,7 @@ export const usePlaygroundURLState = ({ defaultExampleId }: UsePlaygroundURLStat
 
             return {
                 state: state ?? undefined,
-                exampleId: state ? 'custom' : exampleId ?? defaultExampleId,
+                exampleId: state ? 'custom' : (exampleId ?? defaultExampleId),
             };
         },
         serializeParams,

src/components/Playground/index.tsx

@@ -1,11 +1,11 @@
+import styles from './index.module.scss';
+import BrowserOnly from '@docusaurus/BrowserOnly';
 import PixiPlayground from '@site/src/components/Playground/PixiPlayground';
-import Select from '@site/src/components/Select';
 import { defaultExampleId, useCodeExamples } from '@site/src/components/Playground/PixiPlayground/useEditorCode';
-import type { IVersion } from '@site/src/components/Playground/PixiPlayground/usePixiVersions';
 import { usePlaygroundURLState } from '@site/src/components/Playground/PixiPlayground/usePlaygroundURLState';
+import Select from '@site/src/components/Select';
 
-import styles from './index.module.scss';
-import BrowserOnly from '@docusaurus/BrowserOnly';
+import type { IVersion } from '@site/src/components/Playground/PixiPlayground/usePixiVersions';
 
 export default function Playground({ pixiVersion }: { pixiVersion: IVersion })
 {

src/components/Select.tsx

@@ -1,7 +1,5 @@
-import type { ChangeEvent, HTMLAttributes } from 'react';
-import { useCallback } from 'react';
 import classNames from 'classnames';
-
+import { type ChangeEvent, type HTMLAttributes, useCallback } from 'react';
 import styles from './Select.module.scss';
 
 export type Option = {

src/components/Tutorial/index.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
+import PixiPlayground from '../Playground/PixiPlayground';
+import { extractSource } from '../Playground/PixiPlayground/useEditorCode';
 import styles from './index.module.scss';
-import Link from '@docusaurus/Link';
 import BrowserOnly from '@docusaurus/BrowserOnly';
-import PixiPlayground from '../Playground/PixiPlayground';
+import Link from '@docusaurus/Link';
+import { type TutorialStep, getTutorialEntry } from '@site/src/tutorials';
+
 import type { IVersion } from '../Playground/PixiPlayground/usePixiVersions';
-import type { TutorialStep } from '@site/src/tutorials';
-import { getTutorialEntry } from '@site/src/tutorials';
-import { extractSource } from '../Playground/PixiPlayground/useEditorCode';
 
 function BrowserTutorial({
     data,

src/components/TutorialGallery/TutorialCard/index.tsx

@@ -1,5 +1,6 @@
-import { useHistory } from '@docusaurus/router';
 import styles from './index.module.scss';
+import { useHistory } from '@docusaurus/router';
+
 import type { TutorialCardData } from '@site/src/tutorials';
 
 export default function TutorialCard({ data }: { data: TutorialCardData }): JSX.Element

src/components/TutorialGallery/index.tsx

@@ -1,7 +1,8 @@
 import styles from './index.module.scss';
-import type { IVersion } from '../Playground/PixiPlayground/usePixiVersions';
-import { getTutorialCardsData } from '@site/src/tutorials';
 import TutorialCard from './TutorialCard';
+import { getTutorialCardsData } from '@site/src/tutorials';
+
+import type { IVersion } from '../Playground/PixiPlayground/usePixiVersions';
 
 export default function TutorialGallery({ pixiVersion }: { pixiVersion: IVersion }): JSX.Element
 {

src/examples/index.ts

@@ -1,8 +1,9 @@
-import type { OptionGroup } from '../components/Select';
 import { lte, major, minor, patch, prerelease, rcompare, valid } from 'semver';
 import v7x from './v7.0.0/index';
 import v8x from './v8.0.0/index';
 
+import type { OptionGroup } from '../components/Select';
+
 export type ExampleDataEntry = {
     name: string;
     hide?: boolean;

src/examples/v7.0.0/index.ts

@@ -1,25 +1,25 @@
+// Defines order of examples in documentation and playground dropdown, it's defined
+// separately here so it can be used in runtime code and in the md generation script
+import examplesData from './examplesData.json';
 import collisionDetection from '!!raw-loader!./advanced/collisionDetection.js';
 import mouseTrail from '!!raw-loader!./advanced/mouseTrail.js';
 import scratchCard from '!!raw-loader!./advanced/scratchCard.js';
 import screenShot from '!!raw-loader!./advanced/screenShot.js';
 import slots from '!!raw-loader!./advanced/slots.js';
 import spinners from '!!raw-loader!./advanced/spinners.js';
 import starWarp from '!!raw-loader!./advanced/starWarp.js';
-
 import async from '!!raw-loader!./assets/async.js';
 import background from '!!raw-loader!./assets/background.js';
 import bundle from '!!raw-loader!./assets/bundle.js';
 import multiple from '!!raw-loader!./assets/multiple.js';
 import promise from '!!raw-loader!./assets/promise.js';
-
 import blendModes from '!!raw-loader!./basic/blendModes.js';
 import cacheAsBitmap from '!!raw-loader!./basic/cacheAsBitmap.js';
 import container from '!!raw-loader!./basic/container.js';
 import particleContainer from '!!raw-loader!./basic/particleContainer.js';
 import simplePlane from '!!raw-loader!./basic/simplePlane.js';
 import tinting from '!!raw-loader!./basic/tinting.js';
 import transparentBackground from '!!raw-loader!./basic/transparentBackground.js';
-
 import click from '!!raw-loader!./events/click.js';
 import customHitarea from '!!raw-loader!./events/customHitarea.js';
 import customMouseIcon from '!!raw-loader!./events/customMouseIcon.js';
@@ -30,24 +30,19 @@ import logger from '!!raw-loader!./events/logger.js';
 import nestedBoundaryWithProjection from '!!raw-loader!./events/nestedBoundaryWithProjection.js';
 import pointerTracker from '!!raw-loader!./events/pointerTracker.js';
 import slider from '!!raw-loader!./events/slider.js';
-
 import custom from '!!raw-loader!./filtersAdvanced/custom.js';
 import mouseBlending from '!!raw-loader!./filtersAdvanced/mouseBlending.js';
 import shaderToyFilterRenderTexture from '!!raw-loader!./filtersAdvanced/shaderToyFilterRenderTexture.js';
-
 import blur from '!!raw-loader!./filtersBasic/blur.js';
 import colorMatrix from '!!raw-loader!./filtersBasic/colorMatrix.js';
 import displacementMapCrawlies from '!!raw-loader!./filtersBasic/displacementMapCrawlies.js';
 import displacementMapFlag from '!!raw-loader!./filtersBasic/displacementMapFlag.js';
-
 import advanced from '!!raw-loader!./graphics/advanced.js';
 import dynamic from '!!raw-loader!./graphics/dynamic.js';
 import simple from '!!raw-loader!./graphics/simple.js';
-
 import filter from '!!raw-loader!./masks/filter.js';
 import graphics from '!!raw-loader!./masks/graphics.js';
 import sprite from '!!raw-loader!./masks/sprite.js';
-
 import instancedGeometry from '!!raw-loader!./meshAndShaders/instancedGeometry.js';
 import interleavingGeometry from '!!raw-loader!./meshAndShaders/interleavingGeometry.js';
 import mergingGeometry from '!!raw-loader!./meshAndShaders/mergingGeometry.js';
@@ -57,39 +52,32 @@ import sharedShader from '!!raw-loader!./meshAndShaders/sharedShader.js';
 import sharingGeometry from '!!raw-loader!./meshAndShaders/sharingGeometry.js';
 import texturedMeshAdvanced from '!!raw-loader!./meshAndShaders/texturedMeshAdvanced.js';
 import texturedMeshBasic from '!!raw-loader!./meshAndShaders/texturedMeshBasic.js';
+import triangle from '!!raw-loader!./meshAndShaders/triangle.js';
 import triangleColor from '!!raw-loader!./meshAndShaders/triangleColor.js';
 import triangleTextured from '!!raw-loader!./meshAndShaders/triangleTextured.js';
-import triangle from '!!raw-loader!./meshAndShaders/triangle.js';
 import uniforms from '!!raw-loader!./meshAndShaders/uniforms.js';
-
 import offscreenCanvasBasic from '!!raw-loader!./offscreenCanvas/basic.js';
 import webWorker from '!!raw-loader!./offscreenCanvas/webWorker.js';
-
 import animatedSpriteAnimationSpeed from '!!raw-loader!./sprite/animatedSpriteAnimationSpeed.js';
 import animatedSpriteExplosion from '!!raw-loader!./sprite/animatedSpriteExplosion.js';
 import animatedSpriteJet from '!!raw-loader!./sprite/animatedSpriteJet.js';
 import spriteBasic from '!!raw-loader!./sprite/basic.js';
 import textureSwap from '!!raw-loader!./sprite/textureSwap.js';
 import tilingSprite from '!!raw-loader!./sprite/tilingSprite.js';
 import video from '!!raw-loader!./sprite/video.js';
-
 import bitmapText from '!!raw-loader!./text/bitmapText.js';
 import fromFont from '!!raw-loader!./text/fromFont.js';
 import pixiText from '!!raw-loader!./text/pixiText.js';
 import webFont from '!!raw-loader!./text/webFont.js';
-
 import gradientBasic from '!!raw-loader!./textures/gradientBasic.js';
 import gradientResource from '!!raw-loader!./textures/gradientResource.js';
 import renderTextureAdvanced from '!!raw-loader!./textures/renderTextureAdvanced.js';
 import renderTextureBasic from '!!raw-loader!./textures/renderTextureBasic.js';
 import textureRotate from '!!raw-loader!./textures/textureRotate.js';
-import type { Option } from '@site/src/components/Select';
-
-// Defines order of examples in documentation and playground dropdown, it's defined
-// separately here so it can be used in runtime code and in the md generation script
-import examplesData from './examplesData.json';
 import { camelCaseToSentenceCase } from '@site/src/utils/utils';
+
 import type { CategoryDataType, ExampleDataEntry, ExamplesDataType, ExamplesJsonType, ExamplesSourceType } from '..';
+import type { Option } from '@site/src/components/Select';
 
 const examplesSource: ExamplesSourceType = {
     basic: {

src/examples/v8.0.0/advanced/mouseTrail.js

@@ -1,4 +1,4 @@
-import { Application, Assets, Point, MeshRope } from 'pixi.js';
+import { Application, Assets, MeshRope, Point } from 'pixi.js';
 
 (async () =>
 {

src/examples/v8.0.0/advanced/scratchCard.js

@@ -1,4 +1,4 @@
-import { Application, Assets, Graphics, Sprite, RenderTexture, Point } from 'pixi.js';
+import { Application, Assets, Graphics, Point, RenderTexture, Sprite } from 'pixi.js';
 
 (async () =>
 {

src/examples/v8.0.0/advanced/slots.js

@@ -1,15 +1,15 @@
 import {
     Application,
     Assets,
+    BlurFilter,
     Color,
     Container,
-    Texture,
-    Sprite,
+    FillGradient,
     Graphics,
+    Sprite,
     Text,
     TextStyle,
-    BlurFilter,
-    FillGradient,
+    Texture,
 } from 'pixi.js';
 
 (async () =>