Example build fixes

examples/package.json

@@ -7,10 +7,9 @@
   "scripts": {
     "build": "npm run -s build:pre && cross-env NODE_ENV=production rollup -c",
     "build:pre": "npm run -s build:metadata && npm run -s build:sharing",
-    "build:metadata": "node ./scripts/metadata.mjs",
-    "build:sharing": "node ./scripts/sharing-html.mjs",
-    "build:standalone": "node ./scripts/standalone-html.mjs",
-    "build:thumbnails": "node ./scripts/thumbnails.mjs",
+    "build:metadata": "node ./scripts/build-metadata.mjs",
+    "build:sharing": "node ./scripts/build-sharing.mjs",
+    "build:thumbnails": "node ./scripts/build-thumbnails.mjs",
     "clean": "node ./scripts/clean.mjs",
     "develop": "cross-env NODE_ENV=development concurrently --kill-others \"npm run watch\" \"npm run serve\"",
     "lint": "eslint --ext .js,.mjs .",

examples/rollup.config.js

@@ -10,7 +10,7 @@ import terser from '@rollup/plugin-terser';
 
 // custom plugins
 import { copyStatic } from './utils/plugins/rollup-copy-static.mjs';
-import { generateStandalone } from './utils/plugins/rollup-generate-standalone.mjs';
+import { buildExamples } from './utils/plugins/rollup-build-examples.mjs';
 
 // engine rollup utils
 import { treeshakeIgnore } from '../utils/plugins/rollup-treeshake-ignore.mjs';
@@ -23,46 +23,7 @@ const NODE_ENV = process.env.NODE_ENV ?? '';
 const ENGINE_PATH = !process.env.ENGINE_PATH && NODE_ENV === 'development' ?
     '../src/index.js' : process.env.ENGINE_PATH ?? '';
 
-const STATIC_FILES = [
-    // static main page src
-    { src: './src/static', dest: 'dist/' },
-
-    // static iframe src
-    { src: './iframe', dest: 'dist/iframe' },
-
-    // assets used in examples
-    { src: './assets', dest: 'dist/static/assets/', once: true },
-
-    // thumbnails used in examples
-    { src: './thumbnails', dest: 'dist/thumbnails/', once: true },
-
-    // external libraries used in examples
-    { src: './src/lib', dest: 'dist/static/lib/', once: true },
-
-    // engine scripts
-    { src: '../scripts', dest: 'dist/static/scripts/' },
-
-    // playcanvas engine types
-    { src: '../build/playcanvas.d.ts', dest: 'dist/playcanvas.d.ts' },
-
-    // playcanvas observer
-    {
-        src: './node_modules/@playcanvas/observer/dist/index.mjs',
-        dest: 'dist/iframe/playcanvas-observer.mjs',
-        once: true
-    },
-
-    // modules (N.B. destination folder is 'modules' as 'node_modules' are automatically excluded by git pages)
-    { src: './node_modules/monaco-editor/min/vs', dest: 'dist/modules/monaco-editor/min/vs', once: true },
-
-    // fflate (for when using ENGINE_PATH)
-    { src: '../node_modules/fflate/esm/', dest: 'dist/modules/fflate/esm', once: true },
-
-    // engine path
-    ...getEnginePathFiles()
-];
-
-function getEnginePathFiles() {
+const getEnginePathFiles = () => {
     if (!ENGINE_PATH) {
         return [];
     }
@@ -79,18 +40,18 @@ function getEnginePathFiles() {
     // packed module builds
     const dest = 'dist/iframe/ENGINE_PATH/index.js';
     return [{ src, dest }];
-}
+};
 
-function checkAppEngine() {
+const checkAppEngine = () => {
     // types
     if (!fs.existsSync('../build/playcanvas.d.ts')) {
         const cmd = `npm run build target:types --prefix ../`;
         console.log('\x1b[32m%s\x1b[0m', cmd);
         execSync(cmd);
     }
-}
+};
 
-function getEngineTargets() {
+const getEngineTargets = () => {
     // Checks for types and engien for app building
     checkAppEngine();
 
@@ -135,7 +96,46 @@ function getEngineTargets() {
         );
     }
     return targets;
-}
+};
+
+const STATIC_FILES = [
+    // static main page src
+    { src: './src/static', dest: 'dist/' },
+
+    // static iframe src
+    { src: './iframe', dest: 'dist/iframe' },
+
+    // assets used in examples
+    { src: './assets', dest: 'dist/static/assets/', once: true },
+
+    // thumbnails used in examples
+    { src: './thumbnails', dest: 'dist/thumbnails/', once: true },
+
+    // external libraries used in examples
+    { src: './src/lib', dest: 'dist/static/lib/', once: true },
+
+    // engine scripts
+    { src: '../scripts', dest: 'dist/static/scripts/' },
+
+    // playcanvas engine types
+    { src: '../build/playcanvas.d.ts', dest: 'dist/playcanvas.d.ts' },
+
+    // playcanvas observer
+    {
+        src: './node_modules/@playcanvas/observer/dist/index.mjs',
+        dest: 'dist/iframe/playcanvas-observer.mjs',
+        once: true
+    },
+
+    // modules (N.B. destination folder is 'modules' as 'node_modules' are automatically excluded by git pages)
+    { src: './node_modules/monaco-editor/min/vs', dest: 'dist/modules/monaco-editor/min/vs', once: true },
+
+    // fflate (for when using ENGINE_PATH)
+    { src: '../node_modules/fflate/esm/', dest: 'dist/modules/fflate/esm', once: true },
+
+    // engine path
+    ...getEnginePathFiles()
+];
 
 export default [
     {
@@ -148,7 +148,7 @@ export default [
             skipWrite: true
         },
         treeshake: false,
-        plugins: [generateStandalone(NODE_ENV, ENGINE_PATH), copyStatic(NODE_ENV, STATIC_FILES)]
+        plugins: [buildExamples(NODE_ENV, ENGINE_PATH), copyStatic(NODE_ENV, STATIC_FILES)]
     },
     {
         // A debug build is ~2.3MB and a release build ~0.6MB

examples/scripts/standalone-html.mjs → examples/scripts/build-examples.mjs

@@ -29,7 +29,7 @@ export function controls({ fragment }) {
  * @param {string[]} files - The files in the example directory.
  * @returns {string} File to write as standalone example.
  */
-function generateExampleFile(categoryKebab, exampleNameKebab, setEngineType, files) {
+const generateExampleFile = (categoryKebab, exampleNameKebab, setEngineType, files) => {
     let html = EXAMPLE_HTML;
 
     // title
@@ -48,17 +48,22 @@ function generateExampleFile(categoryKebab, exampleNameKebab, setEngineType, fil
     }
 
     return html;
-}
+};
+
+/**
+ * @param {Record<string, string>} env - The environment variables.
+ */
+export const build = (env = {}) => {
+    Object.assign(process.env, env);
 
-function main() {
     if (!fs.existsSync(`${MAIN_DIR}/dist/`)) {
         fs.mkdirSync(`${MAIN_DIR}/dist/`);
     }
     if (!fs.existsSync(`${MAIN_DIR}/dist/iframe/`)) {
         fs.mkdirSync(`${MAIN_DIR}/dist/iframe/`);
     }
 
-    exampleMetaData.forEach((data) => {
+    exampleMetaData.forEach((/** @type {{ categoryKebab: string; exampleNameKebab: string; path: string; }} */ data) => {
         const { categoryKebab, exampleNameKebab, path } = data;
         const name = `${categoryKebab}_${exampleNameKebab}`;
 
@@ -115,5 +120,4 @@ function main() {
             fs.writeFileSync(`${MAIN_DIR}/dist/iframe/${name}.${file}`, script);
         });
     });
-}
-main();
+};

examples/scripts/metadata.mjs → examples/scripts/build-metadata.mjs

@@ -18,7 +18,7 @@ const MAIN_DIR = `${dirname(__filename)}/../`;
  */
 const exampleMetaData = [];
 
-function main() {
+const main = () => {
     const rootPath = `${MAIN_DIR}/src/examples`;
     const categories = getDirFiles(rootPath);
 
@@ -54,5 +54,5 @@ function main() {
     }
 
     fs.writeFileSync(`${MAIN_DIR}/cache/metadata.mjs`, `export const exampleMetaData = ${objStringify(exampleMetaData)};\n`);
-}
+};
 main();

examples/scripts/sharing-html.mjs → examples/scripts/build-sharing.mjs

@@ -14,7 +14,7 @@ import { exampleMetaData } from '../cache/metadata.mjs';
  * @param {string} options.largeThumbnailName - The large thumbnail name.
  * @returns {string} - The template string.
  */
-function template({ path, exampleTitle, largeThumbnailName }) {
+const template = ({ path, exampleTitle, largeThumbnailName }) => {
     return `<!DOCTYPE html>
       <html>
         <head>
@@ -30,14 +30,14 @@ function template({ path, exampleTitle, largeThumbnailName }) {
           <p>Please follow <a href="/#/${path}">this link</a>.</p>
         </body>
       </html>`;
-}
+};
 
 // @ts-ignore
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 const MAIN_DIR = `${__dirname}/../`;
 
-function main() {
+const main = () => {
     if (!fs.existsSync(`${MAIN_DIR}/dist/`)) {
         fs.mkdirSync(`${MAIN_DIR}/dist/`);
     }
@@ -58,5 +58,5 @@ function main() {
         }
         fs.writeFileSync(`${dirPath}/index.html`, content);
     }
-}
+};
 main();

examples/scripts/thumbnails.mjs → examples/scripts/build-thumbnails.mjs

@@ -10,6 +10,7 @@ import { fileURLToPath } from 'url';
 import { spawn, execSync } from 'node:child_process';
 
 import { exampleMetaData } from '../cache/metadata.mjs';
+import { sleep } from './utils.mjs';
 
 // @ts-ignore
 const __filename = fileURLToPath(import.meta.url);
@@ -118,7 +119,7 @@ class PuppeteerPool {
  * @param {string} categoryKebab - Category kebab name.
  * @param {string} exampleNameKebab - Example kebab name.
  */
-async function takeThumbnails(pool, categoryKebab, exampleNameKebab) {
+const takeThumbnails = async (pool, categoryKebab, exampleNameKebab) => {
     const poolItem = pool.allocPoolItem();
     const page = await pool.newPage(poolItem);
     if (DEBUG) {
@@ -166,12 +167,12 @@ async function takeThumbnails(pool, categoryKebab, exampleNameKebab) {
     await pool.closePage(poolItem, page);
 
     console.log(`screenshot taken for: ${categoryKebab}/${exampleNameKebab}`);
-}
+};
 
 /**
  * @param {typeof exampleMetaData} metadata - Example metadata.
  */
-async function takeScreenshots(metadata) {
+const takeScreenshots = async (metadata) => {
     if (metadata.length === 0) {
         return;
     }
@@ -207,19 +208,10 @@ async function takeScreenshots(metadata) {
 
     // close pool
     await pool.close();
-}
+};
 
-/**
- * @param {number} ms - Milliseconds.
- * @returns {Promise<void>} - Sleep promise.
- */
-function sleep(ms = 0) {
-    return new Promise((resolve) => {
-        setTimeout(resolve, ms);
-    });
-}
 
-async function main() {
+const main = async () => {
     console.log('Spawn server on', PORT);
     // We need this kind of command:
     // npx serve dist --config ../serve.json
@@ -244,5 +236,5 @@ async function main() {
     }
     console.log('Killed server on', PORT);
     return 0;
-}
+};
 main().then(process.exit);

examples/scripts/clean.mjs

@@ -9,8 +9,8 @@ import { fileURLToPath } from 'url';
 const __filename = fileURLToPath(import.meta.url);
 const MAIN_DIR = `${dirname(__filename)}/../`;
 
-function main() {
+const main = () => {
     fs.rmSync(`${MAIN_DIR}/dist`, { recursive: true, force: true });
     fs.rmSync(`${MAIN_DIR}/cache`, { recursive: true, force: true });
-}
+};
 main();