Examples Overhaul

examples/.gitignore

@@ -0,0 +1,5 @@
+# Prettier config
+.prettierrc
+
+# Cache directory
+cache

examples/README.md

@@ -54,10 +54,10 @@ Each example can implement two methods to define its functionality:
 ```js
 import * as pc from 'playcanvas';
 /**
- * @param {import('../../../app/example.mjs').ExampleOptions} options - The example options.
+ * @param {import('../../app/components/example.mjs').ExampleOptions} options - The example options.
  * @returns {Promise<pc.AppBase>} The example application.
  */
-async function example({ canvas, deviceType, assetPath, scriptsPath }) {
+export async function example({ canvas, deviceType, assetPath, scriptsPath }) {
     const app = new pc.Application(canvas, {});
 }
 ```
@@ -67,8 +67,7 @@ This is the only function that's required to run an example. The code defined in
 You can load external scripts into an example using the `loadES5` function as follows:
 
 ```js
-import { loadES5 } from '../../loadES5.mjs';
-async function example({ canvas, deviceType, files, assetPath, glslangPath, twgslPath }) {
+export async function example({ canvas, deviceType, files, assetPath, glslangPath, twgslPath, loadES5 }) {
     const CORE  = await loadES5('https://cdn.jsdelivr.net/npm/@loaders.gl/core@2.3.6/dist/dist.min.js');
     const DRACO = await loadES5('https://cdn.jsdelivr.net/npm/@loaders.gl/draco@2.3.6/dist/dist.min.js');
     console.log({ CORE, DRACO })
@@ -87,10 +86,10 @@ This function allows you to define a set of PCUI based interface which can be us
 
 ```js
 /**
- * @param {import('../../app/example.mjs').ControlOptions} options - The options.
+ * @param {import('../../app/Example.mjs').ControlOptions} options - The options.
  * @returns {JSX.Element} The returned JSX Element.
  */
-function controls({ observer, ReactPCUI, React, jsx, fragment }) {
+export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
     const { Button } = ReactPCUI;
     return fragment(
         jsx(Button, {