diff --git a/examples/package.json b/examples/package.json index 0a96f36f5fb..fa3d8ba75d6 100644 --- a/examples/package.json +++ b/examples/package.json @@ -5,8 +5,8 @@ "main": "index.js", "type": "module", "scripts": { - "prebuild": "npm run -s build:metadata && npm run -s build:standalone && npm run -s build:sharing", "build": "cross-env NODE_ENV=production rollup -c", + "build:pre": "npm run -s build:metadata && npm run -s build:standalone && 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", @@ -14,7 +14,7 @@ "rollup:watch": "cross-env NODE_ENV=development rollup -c -w", "serve": "serve dist -l 5000 --no-request-logging --config ../serve.json", "lint": "eslint . --ext .js,.ts,.tsx", - "watch": "npm run prebuild && cross-env concurrently --kill-others \"npm run rollup:watch\"", + "watch": "cross-env concurrently --kill-others \"npm run rollup:watch\"", "watch:debug": "cross-env ENGINE_PATH=../build/playcanvas.dbg.js npm run watch", "watch:profiler": "cross-env ENGINE_PATH=../build/playcanvas.prf.js npm run watch", "develop": "cross-env NODE_ENV=development concurrently --kill-others \"npm run watch\" \"npm run serve\"", diff --git a/examples/rollup.config.js b/examples/rollup.config.js index 718afbc5dc4..e9cf29674ac 100644 --- a/examples/rollup.config.js +++ b/examples/rollup.config.js @@ -3,7 +3,7 @@ import * as fs from 'node:fs'; import fse from 'fs-extra'; import { fileURLToPath } from 'node:url'; import path from 'node:path'; -import { exec } from 'node:child_process'; +import { execSync } from 'node:child_process'; // 1st party Rollup plugins import alias from '@rollup/plugin-alias'; @@ -24,7 +24,7 @@ const PCUI_PATH = process.env.PCUI_PATH || 'node_modules/@playcanvas/pcui'; const PCUI_REACT_PATH = path.resolve(PCUI_PATH, 'react'); const PCUI_STYLES_PATH = path.resolve(PCUI_PATH, 'styles'); -const staticFiles = [ +const STATIC_FILES = [ // static main page src { src: './src/static', dest: 'dist/' }, @@ -51,6 +51,7 @@ const staticFiles = [ // 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' }, + // N.B. fflate will not be needed once extras module is rolled up { src: '../node_modules/fflate/esm/', dest: 'dist/modules/fflate/esm' } ]; @@ -86,21 +87,20 @@ let { ENGINE_PATH = '' } = process.env; if (!ENGINE_PATH && NODE_ENV === 'development') { ENGINE_PATH = '../src/index.js'; } - if (ENGINE_PATH) { const src = path.resolve(ENGINE_PATH); const content = fs.readFileSync(src, 'utf8'); const copyDir = isModuleWithExternalDependencies(content); if (copyDir) { - // Copy entire folder for MJS versions with external dependencies + // unpacked module builds const srcDir = path.dirname(src); const dest = 'dist/iframe/ENGINE_PATH'; - staticFiles.push({ src: srcDir, dest }); + STATIC_FILES.push({ src: srcDir, dest }); } else { - // This can be both UMD/ESM as a single file - const entryPoint = ENGINE_PATH.split("/").pop(); - const dest = 'dist/iframe/ENGINE_PATH/' + entryPoint; - staticFiles.push({ src, dest }); + // packed module builds + ENGINE_PATH.split("/").pop(); + const dest = 'dist/iframe/ENGINE_PATH/index.js'; + STATIC_FILES.push({ src, dest }); } } @@ -138,7 +138,7 @@ function watch(plugin, src) { /** * This plugin copies static files from source to destination. * - * @param {staticFiles} targets - Array of source and destination objects. + * @param {STATIC_FILES} targets - Array of source and destination objects. * @returns {RollupPlugin} The plugin. */ function copyStaticFiles(targets) { @@ -181,21 +181,46 @@ function buildAndWatchStandaloneExamples() { } }, generateBundle() { - const cmd = `cross-env NODE_ENV=${NODE_ENV} ENGINE_PATH=${ENGINE_PATH} npm run build:standalone`; + const cmd = `cross-env NODE_ENV=${NODE_ENV} ENGINE_PATH=${ENGINE_PATH} npm run build:pre`; console.log(cmd); - exec(cmd); + execSync(cmd, { stdio: 'inherit' }); } }; } -// define supported module overrides -const aliasEntries = { - '@playcanvas/pcui/react': PCUI_REACT_PATH, - '@playcanvas/pcui/styles': PCUI_STYLES_PATH -}; +function getEngineTargets() { + const targets = [ + // Outputs: dist/iframe/playcanvas-extras.mjs + scriptTargetEs6('pcx', '../extras/index.js', 'dist/iframe/playcanvas-extras.mjs') + ]; + if (NODE_ENV === 'production') { + // Outputs: dist/iframe/playcanvas.mjs + targets.push(buildTarget('release', 'es6', '../src/index.js', 'dist/iframe')); + } + if (NODE_ENV === 'production' || NODE_ENV === 'development') { + // Outputs: dist/iframe/playcanvas.dbg.mjs + targets.push(buildTarget('debug', 'es6', '../src/index.js', 'dist/iframe')); + } + if (NODE_ENV === 'production' || NODE_ENV === 'profiler') { + // Outputs: dist/iframe/playcanvas.prf.mjs + targets.push(buildTarget('profiler', 'es6', '../src/index.js', 'dist/iframe')); + } + return targets; +} + -/** @type {RollupOptions[]} */ -const targets = [ +export default [ + { + input: 'src/static/index.html', + output: { + file: `dist/copy.tmp` + }, + plugins: [ + buildAndWatchStandaloneExamples(), + copyStaticFiles(STATIC_FILES), + timestamp() + ] + }, { // A debug build is ~2.3MB and a release build ~0.6MB input: 'src/app/index.mjs', @@ -204,7 +229,13 @@ const targets = [ format: 'umd' }, plugins: [ - alias({ entries: aliasEntries }), + alias({ + entries: { + // define supported module overrides + '@playcanvas/pcui/react': PCUI_REACT_PATH, + '@playcanvas/pcui/styles': PCUI_STYLES_PATH + } + }), commonjs(), resolve(), replace({ @@ -217,43 +248,5 @@ const targets = [ timestamp() ] }, - { - input: 'src/static/index.html', - output: { - file: `dist/copy.tmp` - }, - plugins: [ - copyStaticFiles(staticFiles), - buildAndWatchStandaloneExamples(), - timestamp() - ] - }, - scriptTargetEs6('pcx', '../extras/index.js', 'dist/iframe/playcanvas-extras.mjs') + ...getEngineTargets() ]; - -// We skip building PlayCanvas ourselves when ENGINE_PATH is given. -// In that case we have a watcher which copies all necessary files. -if (ENGINE_PATH === '') { - /** @type {buildTarget} */ - const pushTarget = (...args) => { - targets.push(buildTarget(...args)); - }; - if (NODE_ENV === 'production') { - // Outputs: dist/iframe/playcanvas.mjs - pushTarget('release', 'es6', '../src/index.js', 'dist/iframe'); - // Outputs: dist/iframe/playcanvas.dbg.mjs - pushTarget('debug', 'es6', '../src/index.js', 'dist/iframe'); - // Outputs: dist/iframe/playcanvas.prf.mjs - pushTarget('profiler', 'es6', '../src/index.js', 'dist/iframe'); - } else if (NODE_ENV === 'development') { - // Outputs: dist/iframe/playcanvas.dbg.mjs - pushTarget('debug', 'es6', '../src/index.js', 'dist/iframe'); - } else if (NODE_ENV === 'profiler') { - // Outputs: dist/iframe/playcanvas.prf.mjs - pushTarget('profiler', 'es6', '../src/index.js', 'dist/iframe'); - } else { - console.warn("NODE_ENV is neither production, development nor profiler."); - } -} - -export default targets; diff --git a/examples/scripts/standalone-html.mjs b/examples/scripts/standalone-html.mjs index d100ce282f0..40979190610 100644 --- a/examples/scripts/standalone-html.mjs +++ b/examples/scripts/standalone-html.mjs @@ -33,11 +33,11 @@ function engineFor(type) { case 'DEVELOPMENT': return './ENGINE_PATH/index.js'; case 'PERFORMANCE': - return './playcanvas.prf.mjs/index.js'; + return './playcanvas.prf.mjs'; case 'DEBUG': - return './playcanvas.dbg.mjs/index.js'; + return './playcanvas.dbg.mjs'; } - return './playcanvas.mjs/index.js'; + return './playcanvas.mjs'; } /**