11import React , {
2- type ReactElement ,
2+ lazy ,
3+ Suspense ,
34 useEffect ,
45 useMemo ,
56 useRef ,
@@ -16,36 +17,127 @@ const sourceFiles = import.meta.glob("./examples/**/*.{ts,tsx,js}", {
1617 eager : true ,
1718} ) as Record < string , string > ;
1819
19- import { ExampleAseprite } from "./examples/aseprite/ExampleAseprite" ;
20- import { ExampleBenchmark } from "./examples/benchmark/ExampleBenchmark" ;
21- import { ExampleBlendModes } from "./examples/blendModes/ExampleBlendModes" ;
22- import { ExampleCompressedTextures } from "./examples/compressedTextures/ExampleCompressedTextures" ;
23- import { ExampleDeviceTest } from "./examples/deviceTest/ExampleDeviceTest" ;
24- import { ExampleDragAndDrop } from "./examples/dragAndDrop/ExampleDragAndDrop" ;
25- import { ExampleGraphics } from "./examples/graphics/ExampleGraphics" ;
26- import { ExampleHelloWorld } from "./examples/helloWorld/ExampleHelloWorld" ;
27- import { ExampleIsometricRPG } from "./examples/isometricRpg/ExampleIsometricRPG" ;
28- import { ExampleLights } from "./examples/lights/ExampleLights" ;
29- import { ExampleLineOfSight } from "./examples/lineOfSight/ExampleLineOfSight" ;
30- import { ExampleMasking } from "./examples/masking/ExampleMasking" ;
31- import { ExamplePlatformer } from "./examples/platformer/ExamplePlatformer" ;
32- import { ExampleSpaceInvaders } from "./examples/spaceInvaders/ExampleSpaceInvaders" ;
33- import { ExampleSpine } from "./examples/spine/ExampleSpine" ;
34- import { ExampleSprite } from "./examples/sprite/ExampleSprite" ;
35- import { ExampleSVGShapes } from "./examples/svgShapes/ExampleSVGShapes" ;
36- import { ExampleText } from "./examples/text/ExampleText" ;
37- import { ExampleTexturePacker } from "./examples/texturePacker/ExampleTexturePacker" ;
38- import { ExampleTiledMapLoader } from "./examples/tiledMapLoader/ExampleTiledMapLoader" ;
39- import { ExampleUI } from "./examples/ui/ExampleUI" ;
40- import { ExampleVideo } from "./examples/video/ExampleVideo" ;
41- import { ExampleWhacAMole } from "./examples/whac-a-mole/ExampleWhacAMole" ;
20+ // lazy-load each example so they are code-split into separate chunks
21+ const ExampleAseprite = lazy ( ( ) =>
22+ import ( "./examples/aseprite/ExampleAseprite" ) . then ( ( m ) => ( {
23+ default : m . ExampleAseprite ,
24+ } ) ) ,
25+ ) ;
26+ const ExampleBenchmark = lazy ( ( ) =>
27+ import ( "./examples/benchmark/ExampleBenchmark" ) . then ( ( m ) => ( {
28+ default : m . ExampleBenchmark ,
29+ } ) ) ,
30+ ) ;
31+ const ExampleBlendModes = lazy ( ( ) =>
32+ import ( "./examples/blendModes/ExampleBlendModes" ) . then ( ( m ) => ( {
33+ default : m . ExampleBlendModes ,
34+ } ) ) ,
35+ ) ;
36+ const ExampleCompressedTextures = lazy ( ( ) =>
37+ import ( "./examples/compressedTextures/ExampleCompressedTextures" ) . then (
38+ ( m ) => ( { default : m . ExampleCompressedTextures } ) ,
39+ ) ,
40+ ) ;
41+ const ExampleDeviceTest = lazy ( ( ) =>
42+ import ( "./examples/deviceTest/ExampleDeviceTest" ) . then ( ( m ) => ( {
43+ default : m . ExampleDeviceTest ,
44+ } ) ) ,
45+ ) ;
46+ const ExampleDragAndDrop = lazy ( ( ) =>
47+ import ( "./examples/dragAndDrop/ExampleDragAndDrop" ) . then ( ( m ) => ( {
48+ default : m . ExampleDragAndDrop ,
49+ } ) ) ,
50+ ) ;
51+ const ExampleGraphics = lazy ( ( ) =>
52+ import ( "./examples/graphics/ExampleGraphics" ) . then ( ( m ) => ( {
53+ default : m . ExampleGraphics ,
54+ } ) ) ,
55+ ) ;
56+ const ExampleHelloWorld = lazy ( ( ) =>
57+ import ( "./examples/helloWorld/ExampleHelloWorld" ) . then ( ( m ) => ( {
58+ default : m . ExampleHelloWorld ,
59+ } ) ) ,
60+ ) ;
61+ const ExampleIsometricRPG = lazy ( ( ) =>
62+ import ( "./examples/isometricRpg/ExampleIsometricRPG" ) . then ( ( m ) => ( {
63+ default : m . ExampleIsometricRPG ,
64+ } ) ) ,
65+ ) ;
66+ const ExampleLights = lazy ( ( ) =>
67+ import ( "./examples/lights/ExampleLights" ) . then ( ( m ) => ( {
68+ default : m . ExampleLights ,
69+ } ) ) ,
70+ ) ;
71+ const ExampleLineOfSight = lazy ( ( ) =>
72+ import ( "./examples/lineOfSight/ExampleLineOfSight" ) . then ( ( m ) => ( {
73+ default : m . ExampleLineOfSight ,
74+ } ) ) ,
75+ ) ;
76+ const ExampleMasking = lazy ( ( ) =>
77+ import ( "./examples/masking/ExampleMasking" ) . then ( ( m ) => ( {
78+ default : m . ExampleMasking ,
79+ } ) ) ,
80+ ) ;
81+ const ExamplePlatformer = lazy ( ( ) =>
82+ import ( "./examples/platformer/ExamplePlatformer" ) . then ( ( m ) => ( {
83+ default : m . ExamplePlatformer ,
84+ } ) ) ,
85+ ) ;
86+ const ExampleSpaceInvaders = lazy ( ( ) =>
87+ import ( "./examples/spaceInvaders/ExampleSpaceInvaders" ) . then ( ( m ) => ( {
88+ default : m . ExampleSpaceInvaders ,
89+ } ) ) ,
90+ ) ;
91+ const ExampleSpine = lazy ( ( ) =>
92+ import ( "./examples/spine/ExampleSpine" ) . then ( ( m ) => ( {
93+ default : m . ExampleSpine ,
94+ } ) ) ,
95+ ) ;
96+ const ExampleSprite = lazy ( ( ) =>
97+ import ( "./examples/sprite/ExampleSprite" ) . then ( ( m ) => ( {
98+ default : m . ExampleSprite ,
99+ } ) ) ,
100+ ) ;
101+ const ExampleSVGShapes = lazy ( ( ) =>
102+ import ( "./examples/svgShapes/ExampleSVGShapes" ) . then ( ( m ) => ( {
103+ default : m . ExampleSVGShapes ,
104+ } ) ) ,
105+ ) ;
106+ const ExampleText = lazy ( ( ) =>
107+ import ( "./examples/text/ExampleText" ) . then ( ( m ) => ( {
108+ default : m . ExampleText ,
109+ } ) ) ,
110+ ) ;
111+ const ExampleTexturePacker = lazy ( ( ) =>
112+ import ( "./examples/texturePacker/ExampleTexturePacker" ) . then ( ( m ) => ( {
113+ default : m . ExampleTexturePacker ,
114+ } ) ) ,
115+ ) ;
116+ const ExampleTiledMapLoader = lazy ( ( ) =>
117+ import ( "./examples/tiledMapLoader/ExampleTiledMapLoader" ) . then ( ( m ) => ( {
118+ default : m . ExampleTiledMapLoader ,
119+ } ) ) ,
120+ ) ;
121+ const ExampleUI = lazy ( ( ) =>
122+ import ( "./examples/ui/ExampleUI" ) . then ( ( m ) => ( { default : m . ExampleUI } ) ) ,
123+ ) ;
124+ const ExampleVideo = lazy ( ( ) =>
125+ import ( "./examples/video/ExampleVideo" ) . then ( ( m ) => ( {
126+ default : m . ExampleVideo ,
127+ } ) ) ,
128+ ) ;
129+ const ExampleWhacAMole = lazy ( ( ) =>
130+ import ( "./examples/whac-a-mole/ExampleWhacAMole" ) . then ( ( m ) => ( {
131+ default : m . ExampleWhacAMole ,
132+ } ) ) ,
133+ ) ;
42134
43135const examples : {
44136 label : string ;
45137 path : string ;
46138 sourceDir : string ;
47139 description : string ;
48- component : ReactElement ;
140+ component : React . ReactElement ;
49141} [ ] = [
50142 {
51143 component : < ExampleAseprite /> ,
@@ -237,15 +329,17 @@ const AceEditorPane = ({ value, mode }: { value: string; mode: string }) => {
237329 const editorRef = useRef < HTMLDivElement > ( null ) ;
238330 const editorInstance = useRef < import ( "ace-builds" ) . Ace . Editor | null > ( null ) ;
239331
332+ // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally run once on mount; value/mode are read for initial content only
240333 useEffect ( ( ) => {
241334 if ( ! editorRef . current || editorInstance . current ) return ;
242- Promise . all ( [
243- import ( "ace-builds/src-noconflict/ace" ) ,
244- import ( "ace-builds/src-noconflict/mode-javascript" ) ,
245- import ( "ace-builds/src-noconflict/mode-typescript" ) ,
246- import ( "ace-builds/src-noconflict/theme-one_dark" ) ,
247- ] )
248- . then ( ( [ aceModule ] ) => {
335+ // ace must load first — modes and themes depend on the global `ace` variable
336+ import ( "ace-builds/src-noconflict/ace" )
337+ . then ( async ( aceModule ) => {
338+ await Promise . all ( [
339+ import ( "ace-builds/src-noconflict/mode-javascript" ) ,
340+ import ( "ace-builds/src-noconflict/mode-typescript" ) ,
341+ import ( "ace-builds/src-noconflict/theme-one_dark" ) ,
342+ ] ) ;
249343 const aceLib = aceModule . default || aceModule ;
250344 if ( ! editorRef . current ) return ;
251345 const editor = aceLib . edit ( editorRef . current ) ;
@@ -259,6 +353,9 @@ const AceEditorPane = ({ value, mode }: { value: string; mode: string }) => {
259353 tabSize : 2 ,
260354 useWorker : false ,
261355 } ) ;
356+ // set the initial content
357+ editor . setValue ( value , - 1 ) ;
358+ editor . session . setMode ( `ace/mode/${ mode } ) ;
262359 editorInstance . current = editor ;
263360 } )
264361 . catch ( ( err ) => {
@@ -410,7 +507,7 @@ const router = createHashRouter([
410507 path : `/${ example . path } ,
411508 element : (
412509 < ExampleLayout label = { example . label } sourceDir = { example . sourceDir } >
413- { example . component }
510+ < Suspense > { example . component } </ Suspense >
414511 </ ExampleLayout >
415512 ) ,
416513 } ;
0 commit comments