Hotfix: Restructure Source Examples and Tutorial

docs/playground/index.md

@@ -8,4 +8,4 @@ custom_edit_url: null
 import Playground from '@site/src/components/Playground/index';
 import version from '../pixi-version.json';
 
-<Playground version={version} />
+<Playground pixiVersion={version} />

scripts/generate-example-docs.js

@@ -110,7 +110,7 @@ async function go()
                     '',
                     `# ${exampleTitle}`,
                     '',
-                    `<Example id="${exampleKey}" version={version}/>`,
+                    `<Example id="${exampleKey}" pixiVersion={version}/>`,
                     '',
                 ].join('\n');
 

scripts/generate-tutorial-docs.js

@@ -70,7 +70,7 @@ async function go()
                 'import Tutorial from \'@site/src/components/tutorial/index\';',
                 'import version from \'../pixi-version.json\';',
                 '',
-                `<Tutorial id="${tutorialKey}" version={version}/>`,
+                `<Tutorial id="${tutorialKey}" pixiVersion={version}/>`,
                 '',
             ].join('\n');
 

src/components/Example/index.tsx

@@ -3,11 +3,11 @@ import type { IVersion } from '@site/src/components/Playground/PixiPlayground/us
 
 import styles from './index.module.scss';
 import BrowserOnly from '@docusaurus/BrowserOnly';
-import { getExampleEntry } from '@site/src/examples/v7.3.2';
+import { getExampleEntry } from '@site/src/examples';
 
-export default function Example({ id, version }: { id: string; version: IVersion })
+export default function Example({ id, pixiVersion }: { id: string; pixiVersion: IVersion })
 {
-    const entry = getExampleEntry(id);
+    const entry = getExampleEntry(pixiVersion.version, id);
     const source = (entry?.source ?? entry) as string;
 
     return (
@@ -16,8 +16,8 @@ export default function Example({ id, version }: { id: string; version: IVersion
                 {() => (
                     <PixiPlayground
                         code={source}
-                        pixiVersion={version.npm}
-                        isPixiDevVersion={version.dev}
+                        pixiVersion={pixiVersion.version}
+                        isPixiDevVersion={pixiVersion.dev}
                         isPixiWebWorkerVersion={entry?.usesWebWorkerLibrary}
                         mode="example"
                     />

src/components/Playground/PixiPlayground/useEditorCode.ts

@@ -1,25 +1,28 @@
 import { useCallback, useMemo } from 'react';
-import type { ExampleSourceEntry } from '@site/src/examples/v7.3.2';
-import { getExampleOptions, getExampleEntry } from '@site/src/examples/v7.3.2';
 import type { OptionGroup } from '@site/src/components/Select';
 import type { SetURLStateType } 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';
 
 export const defaultExampleId = 'sprite.basic';
-const defaultExampleOptions = getExampleOptions();
 
 type UseCodeExamplesParams = {
     urlSourceCode: string | undefined;
     selectedOptionId: string;
     setURLState: SetURLStateType;
+    pixiVersion: IVersion;
 };
 
-export const useCodeExamples = ({ urlSourceCode, selectedOptionId, setURLState }: UseCodeExamplesParams) =>
+export const useCodeExamples = ({ urlSourceCode, selectedOptionId, setURLState, pixiVersion }: UseCodeExamplesParams) =>
 {
+    const version = pixiVersion.version;
+    const defaultExampleOptions = getExampleOptions(version);
     const hasUrlHashedCode = Boolean(urlSourceCode);
 
     const exampleEntry = useMemo<ExampleSourceEntry | undefined>(
-        () => getExampleEntry(selectedOptionId),
-        [selectedOptionId],
+        () => getExampleEntry(version, selectedOptionId),
+        [version, selectedOptionId],
     );
     const { source: sourceCode, usesWebWorkerLibrary } = useMemo<Omit<ExampleSourceEntry, 'hide'>>(
         () =>
@@ -50,7 +53,7 @@ export const useCodeExamples = ({ urlSourceCode, selectedOptionId, setURLState }
                         },
                     ],
                 })),
-        [hasUrlHashedCode],
+        [defaultExampleOptions, hasUrlHashedCode],
     );
 
     const handleOptionSelected = useCallback(

src/components/Playground/PixiPlayground/useSandpackConfiguration.ts

@@ -65,6 +65,8 @@ type UseDependenciesParams = {
     pixiVersion: string;
 };
 
+const isPreV8 = (pixiVersion: string) => Number(pixiVersion.split('.')[0]) < 8;
+
 const useDependencies = ({ isPixiWebWorkerVersion, isPixiDevVersion, pixiVersion }: UseDependenciesParams) =>
     useMemo(() =>
     {
@@ -74,7 +76,7 @@ const useDependencies = ({ isPixiWebWorkerVersion, isPixiDevVersion, pixiVersion
         const packages = [pixiPackageName];
 
         // Add these packages if we're using a version of pixi that doesn't have them built in, ie. < v8
-        if (Number(pixiVersion.split('.')[0]) < 8)
+        if (isPreV8(pixiVersion))
         {
             packages.push('@pixi/graphics-extras', '@pixi/math-extras');
         }
@@ -112,15 +114,22 @@ export const useSandpackConfiguration = ({
     // could flip between examples easily, investigate why it bugs out during editing
     const key = `${dependenciesKey}-${code}`;
 
-    const customSetup = {
+    let customSetup: Record<string, any> = {
         entry: 'index.html',
         dependencies,
-        devDependencies: {
-            '@babel/core': '^7.21.3',
-            'parcel-bundler': '^1.6.1',
-        },
     };
 
+    if (isPreV8(pixiVersion))
+    {
+        customSetup = {
+            ...customSetup,
+            devDependencies: {
+                '@babel/core': '^7.21.3',
+                'parcel-bundler': '^1.6.1',
+            },
+        };
+    }
+
     return {
         files,
         key,

src/components/Playground/index.tsx

@@ -7,11 +7,11 @@ import { usePlaygroundURLState } from '@site/src/components/Playground/PixiPlayg
 import styles from './index.module.scss';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 
-export default function Playground({ version }: { version: IVersion })
+export default function Playground({ pixiVersion }: { pixiVersion: IVersion })
 {
     const [urlState, setURLState] = usePlaygroundURLState({
         defaultExampleId,
-        defaultPixiVersion: version.version,
+        defaultPixiVersion: pixiVersion.version,
     });
     const { source: urlSourceCode, exampleId: selectedOptionId } = urlState;
 
@@ -20,6 +20,7 @@ export default function Playground({ version }: { version: IVersion })
             urlSourceCode,
             selectedOptionId,
             setURLState,
+            pixiVersion,
         });
 
     return (
@@ -38,8 +39,8 @@ export default function Playground({ version }: { version: IVersion })
                         </div>
                         <PixiPlayground
                             code={sourceCode}
-                            pixiVersion={version.npm}
-                            isPixiDevVersion={version.dev}
+                            pixiVersion={pixiVersion.version}
+                            isPixiDevVersion={pixiVersion.dev}
                             isPixiWebWorkerVersion={usesWebWorkerLibrary}
                             onCodeChanged={handleEditorCodeChanged}
                             mode="fullscreen"

src/components/Tutorial/index.tsx

@@ -3,10 +3,11 @@ import styles from './index.module.scss';
 import Link from '@docusaurus/Link';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import PixiPlayground from '../Playground/PixiPlayground';
-import { getTutorialEntry, type TutorialStep } from '@site/src/tutorials/v7.3.2';
 import type { IVersion } from '../Playground/PixiPlayground/usePixiVersions';
+import type { TutorialStep } from '@site/src/tutorials';
+import { getTutorialEntry } from '@site/src/tutorials';
 
-function BrowserTutorial({ data, version }: { data: TutorialStep[]; version: IVersion })
+function BrowserTutorial({ data, pixiVersion }: { data: TutorialStep[]; pixiVersion: IVersion })
 {
     let step = Number(window.location.hash.replace('#', ''));
 
@@ -64,30 +65,31 @@ function BrowserTutorial({ data, version }: { data: TutorialStep[]; version: IVe
             </div>
             <PixiPlayground
                 code={completedCode && showSolution ? completedCode : code}
-                pixiVersion={version.npm}
-                isPixiDevVersion={version.dev}
+                pixiVersion={pixiVersion.version}
+                isPixiDevVersion={pixiVersion.dev}
                 mode="tutorial"
             />
         </>
     );
 }
 
-export default function Tutorial({ id, version }: { id: string; version: IVersion }): JSX.Element
+export default function Tutorial({ id, pixiVersion }: { id: string; pixiVersion: IVersion }): JSX.Element
 {
+    const version = pixiVersion.version;
     const [showEditor, setShowEditor] = useState(false);
     const handleEditorToggle = (): void =>
     {
         setShowEditor(!showEditor);
     };
-    const entry = getTutorialEntry(id);
+    const entry = getTutorialEntry(version, id);
 
     return (
         <div className={`${styles.wrapper} ${showEditor ? styles.showEditor : ''}`}>
             <button onClick={handleEditorToggle} className={styles.editorToggle}>
                 {showEditor ? '<  To Instructions' : 'To Editor >'}
             </button>
             <BrowserOnly fallback={<h1 className={styles.loader}>LOADING...</h1>}>
-                {() => <BrowserTutorial data={entry.steps} version={version} />}
+                {() => <BrowserTutorial data={entry.steps} pixiVersion={pixiVersion} />}
             </BrowserOnly>
         </div>
     );

src/examples/index.ts

@@ -0,0 +1,40 @@
+import type { OptionGroup } from '../components/Select';
+import v7x from './v7.3.2/index';
+import v8x from './v8.0.0-rc/index';
+
+export type ExampleDataEntry = {
+    name: string;
+    hide?: boolean;
+    usesWebWorkerLibrary?: boolean;
+};
+export type ExampleSourceEntry = {
+    source: string;
+    hide: boolean;
+    usesWebWorkerLibrary: boolean;
+};
+
+// json data structure
+export type ExamplesJsonType = Record<string, (ExampleDataEntry | string)[]>;
+// sourcecode dictionary structure for below
+export type ExamplesSourceType = Record<string, Record<string, string>>;
+// normalized combination of the above
+export type CategoryDataType = Record<string, ExampleSourceEntry>;
+export type ExamplesDataType = Record<string, CategoryDataType>;
+
+// TODO: Use await import to dynamically load versioned content on demand instead?
+const versions: Record<string, { entries: ExamplesDataType; options: OptionGroup[] }> = {
+    '7.3.2': v7x,
+    '8.0.0-rc': v8x,
+};
+
+export function getExampleEntry(version: string, pathString: string): ExampleSourceEntry | undefined
+{
+    const [directory, example] = pathString.split('.');
+
+    return versions[version]?.entries[directory]?.[example];
+}
+
+export function getExampleOptions(version: string): OptionGroup[]
+{
+    return versions[version]?.options;
+}

src/examples/v7.3.2/index.ts

@@ -83,30 +83,13 @@ 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, OptionGroup } from '@site/src/components/Select';
+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';
-
-export type ExampleDataEntry = {
-    name: string;
-    hide?: boolean;
-    usesWebWorkerLibrary?: boolean;
-};
-export type ExampleSourceEntry = {
-    source: string;
-    hide: boolean;
-    usesWebWorkerLibrary: boolean;
-};
-// json data structure
-export type ExamplesJsonType = Record<string, (ExampleDataEntry | string)[]>;
-// sourcecode dictionary structure for below
-export type ExamplesSourceType = Record<string, Record<string, string>>;
-// normalized combination of the above
-export type CategoryDataType = Record<string, ExampleSourceEntry>;
-export type ExamplesDataType = Record<string, CategoryDataType>;
+import type { CategoryDataType, ExampleDataEntry, ExamplesDataType, ExamplesJsonType, ExamplesSourceType } from '..';
 
 const examplesSource: ExamplesSourceType = {
     basic: {
@@ -231,7 +214,7 @@ const normalizeExampleDataEntry = (categoryExample: ExampleDataEntry | string):
     };
 };
 
-const normalizedExamplesData = Object.entries(examplesData as ExamplesJsonType).reduce(
+const entries = Object.entries(examplesData as ExamplesJsonType).reduce(
     (directoryAcc, [categoryKey, categoryExamples]) => ({
         ...directoryAcc,
         [categoryKey]: categoryExamples.reduce((categoryAcc, categoryExampleOrString) =>
@@ -252,35 +235,27 @@ const normalizedExamplesData = Object.entries(examplesData as ExamplesJsonType).
     {} as ExamplesDataType,
 );
 
-export function getExampleEntry(pathString: string): ExampleSourceEntry | undefined
-{
-    const [directory, example] = pathString.split('.');
-
-    return normalizedExamplesData[directory]?.[example];
-}
-
-export function getExampleOptions(): OptionGroup[]
+const options = Object.entries(examplesData as ExamplesJsonType).map(([folderKey, folderEntries]) =>
 {
-    return Object.entries(examplesData as ExamplesJsonType).map(([folderKey, folderEntries]) =>
+    const options = folderEntries.reduce((acc, exampleDataEntry) =>
     {
-        const options = folderEntries.reduce((acc, exampleDataEntry) =>
+        const { name: exampleKey, hide } = normalizeExampleDataEntry(exampleDataEntry);
+
+        if (hide)
         {
-            const { name: exampleKey, hide } = normalizeExampleDataEntry(exampleDataEntry);
+            return acc;
+        }
 
-            if (hide)
-            {
-                return acc;
-            }
+        return acc.concat({
+            value: `${folderKey}.${exampleKey}`,
+            label: camelCaseToSentenceCase(exampleKey),
+        });
+    }, [] as Option[]);
 
-            return acc.concat({
-                value: `${folderKey}.${exampleKey}`,
-                label: camelCaseToSentenceCase(exampleKey),
-            });
-        }, [] as Option[]);
+    return {
+        label: camelCaseToSentenceCase(folderKey),
+        options,
+    };
+});
 
-        return {
-            label: camelCaseToSentenceCase(folderKey),
-            options,
-        };
-    });
-}
+export default { entries, options };