From bf9ee4fdb36dd884b221f9071eab21b1127cd8f7 Mon Sep 17 00:00:00 2001 From: KPal <48248865+kpal81xd@users.noreply.github.com> Date: Thu, 23 May 2024 11:52:03 +0100 Subject: [PATCH] Examples app bundle v1 (#6594) * treeshake smallest enabled * ignore playcanvas PCUI from being treeshaken * treeshake ignore only pcui * added device type constants directly (no playcanvas dependency) * format rollup * Updated PCUI * removed PCUI aliasing --- examples/package-lock.json | 68 ++++--------- examples/package.json | 5 +- examples/rollup.config.js | 99 +++++++++---------- .../src/app/components/DeviceSelector.mjs | 14 ++- examples/src/app/constants.mjs | 8 ++ 5 files changed, 81 insertions(+), 113 deletions(-) diff --git a/examples/package-lock.json b/examples/package-lock.json index 47e4eec0d6d..0ccfdcdcf05 100644 --- a/examples/package-lock.json +++ b/examples/package-lock.json @@ -13,8 +13,7 @@ "@monaco-editor/react": "^4.5.1", "@playcanvas/eslint-config": "^1.5.0", "@playcanvas/observer": "1.4.0", - "@playcanvas/pcui": "^4.1.2", - "@rollup/plugin-alias": "^4.0.4", + "@playcanvas/pcui": "^4.3.0", "@rollup/plugin-commonjs": "^22.0.2", "@rollup/plugin-node-resolve": "^13.3.0", "@rollup/plugin-replace": "^4.0.0", @@ -32,7 +31,7 @@ "playcanvas": "file:..", "prop-types": "^15.7.2", "puppeteer": "^20.9.0", - "react": "^18.2.0", + "react": "^18.3.1", "react-dom": "^18.2.0", "react-es6": "^1.0.0", "react-router-dom": "^5.3.4", @@ -43,17 +42,17 @@ }, "..": { "name": "playcanvas", - "version": "1.70.0-dev", + "version": "1.71.0-dev", "dev": true, "license": "MIT", "dependencies": { - "@types/webxr": "^0.5.14", + "@types/webxr": "^0.5.15", "@webgpu/types": "^0.1.40" }, "devDependencies": { - "@babel/core": "^7.24.3", + "@babel/core": "^7.24.4", "@babel/eslint-parser": "^7.24.1", - "@babel/preset-env": "^7.24.3", + "@babel/preset-env": "^7.24.4", "@playcanvas/canvas-mock": "^1.0.1", "@playcanvas/eslint-config": "^1.7.1", "@rollup/plugin-babel": "^6.0.4", @@ -72,18 +71,21 @@ "karma-mocha": "^2.0.1", "karma-sinon": "^1.0.5", "karma-spec-reporter": "^0.0.36", - "mocha": "^10.3.0", + "mocha": "^10.4.0", "publint": "^0.2.7", - "rollup": "^4.13.0", + "rollup": "^4.16.4", "rollup-plugin-dts": "^6.0.2", "rollup-plugin-jscc": "2.0.0", "rollup-plugin-visualizer": "^5.12.0", - "serve": "^14.2.1", + "serve": "^14.2.2", "sinon": "^17.0.1", - "typedoc": "^0.25.12", - "typedoc-plugin-mdn-links": "^3.1.18", - "typescript": "^5.4.3", + "typedoc": "^0.25.13", + "typedoc-plugin-mdn-links": "^3.1.22", + "typescript": "^5.4.5", "xhr2": "^0.2.1" + }, + "engines": { + "node": ">=18.0.0" } }, "../node_modules/@aashutoshrathi/word-wrap": { @@ -8981,9 +8983,10 @@ "license": "MIT" }, "node_modules/@playcanvas/pcui": { - "version": "4.1.2", + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/@playcanvas/pcui/-/pcui-4.3.0.tgz", + "integrity": "sha512-nhyF+u55ws1FPA4A3EkD9p4ujK2HfGxuA6GRWJWe2A9tPyKRMGTNNjrubc/4GnmCxfZP7ux9QEd/a82MXSoU3g==", "dev": true, - "license": "MIT", "dependencies": { "@playcanvas/observer": "^1.4.0" } @@ -9054,25 +9057,6 @@ "node": ">=12" } }, - "node_modules/@rollup/plugin-alias": { - "version": "4.0.4", - "dev": true, - "license": "MIT", - "dependencies": { - "slash": "^4.0.0" - }, - "engines": { - "node": ">=14.0.0" - }, - "peerDependencies": { - "rollup": "^1.20.0||^2.0.0||^3.0.0" - }, - "peerDependenciesMeta": { - "rollup": { - "optional": true - } - } - }, "node_modules/@rollup/plugin-commonjs": { "version": "22.0.2", "dev": true, @@ -12544,9 +12528,10 @@ } }, "node_modules/react": { - "version": "18.2.0", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", + "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "dev": true, - "license": "MIT", "dependencies": { "loose-envify": "^1.1.0" }, @@ -13082,17 +13067,6 @@ "dev": true, "license": "MIT" }, - "node_modules/slash": { - "version": "4.0.0", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=12" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/smart-buffer": { "version": "4.2.0", "dev": true, diff --git a/examples/package.json b/examples/package.json index dff10baaaec..38ec134de77 100644 --- a/examples/package.json +++ b/examples/package.json @@ -41,8 +41,7 @@ "@monaco-editor/react": "^4.5.1", "@playcanvas/eslint-config": "^1.5.0", "@playcanvas/observer": "1.4.0", - "@playcanvas/pcui": "^4.1.2", - "@rollup/plugin-alias": "^4.0.4", + "@playcanvas/pcui": "^4.3.0", "@rollup/plugin-commonjs": "^22.0.2", "@rollup/plugin-node-resolve": "^13.3.0", "@rollup/plugin-replace": "^4.0.0", @@ -60,7 +59,7 @@ "playcanvas": "file:..", "prop-types": "^15.7.2", "puppeteer": "^20.9.0", - "react": "^18.2.0", + "react": "^18.3.1", "react-dom": "^18.2.0", "react-es6": "^1.0.0", "react-router-dom": "^5.3.4", diff --git a/examples/rollup.config.js b/examples/rollup.config.js index 26b2b3269a5..8712d3130fc 100644 --- a/examples/rollup.config.js +++ b/examples/rollup.config.js @@ -3,10 +3,9 @@ import path from 'path'; import { execSync } from 'child_process'; // 1st party Rollup plugins -import alias from '@rollup/plugin-alias'; -import commonjs from "@rollup/plugin-commonjs"; +import commonjs from '@rollup/plugin-commonjs'; import replace from '@rollup/plugin-replace'; -import resolve from "@rollup/plugin-node-resolve"; +import resolve from '@rollup/plugin-node-resolve'; import terser from '@rollup/plugin-terser'; // custom plugins @@ -14,20 +13,15 @@ import { copyStatic } from './utils/plugins/rollup-copy-static.mjs'; import { generateStandalone } from './utils/plugins/rollup-generate-standalone.mjs'; // engine rollup utils +import { treeshakeIgnore } from '../utils/plugins/rollup-treeshake-ignore.mjs'; import { buildTarget } from '../utils/rollup-build-target.mjs'; // util functions import { isModuleWithExternalDependencies } from './utils/utils.mjs'; 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 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 ENGINE_PATH = + !process.env.ENGINE_PATH && NODE_ENV === 'development' ? '../src/index.js' : process.env.ENGINE_PATH ?? ''; const STATIC_FILES = [ // static main page src @@ -52,7 +46,11 @@ const STATIC_FILES = [ { 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 }, + { + 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 }, @@ -87,14 +85,7 @@ function 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); - } - - // engine - if (!fs.existsSync('../build/playcanvas/src/index.js')) { - const cmd = `npm run build target:esm:release:unbundled --prefix ../`; - console.log("\x1b[32m%s\x1b[0m", cmd); + console.log('\x1b[32m%s\x1b[0m', cmd); execSync(cmd); } } @@ -109,33 +100,39 @@ function getEngineTargets() { } if (NODE_ENV === 'production') { // Outputs: dist/iframe/playcanvas.mjs - targets.push(...buildTarget({ - moduleFormat: 'esm', - buildType: 'release', - bundleState: 'unbundled', - input: '../src/index.js', - dir: 'dist/iframe' - })); + targets.push( + ...buildTarget({ + moduleFormat: 'esm', + buildType: 'release', + bundleState: 'unbundled', + input: '../src/index.js', + dir: 'dist/iframe' + }) + ); } if (NODE_ENV === 'production' || NODE_ENV === 'development') { // Outputs: dist/iframe/playcanvas.dbg.mjs - targets.push(...buildTarget({ - moduleFormat: 'esm', - buildType: 'debug', - bundleState: 'unbundled', - input: '../src/index.js', - dir: 'dist/iframe' - })); + targets.push( + ...buildTarget({ + moduleFormat: 'esm', + buildType: 'debug', + bundleState: 'unbundled', + input: '../src/index.js', + dir: 'dist/iframe' + }) + ); } if (NODE_ENV === 'production' || NODE_ENV === 'profiler') { // Outputs: dist/iframe/playcanvas.prf.mjs - targets.push(...buildTarget({ - moduleFormat: 'esm', - buildType: 'profiler', - bundleState: 'unbundled', - input: '../src/index.js', - dir: 'dist/iframe' - })); + targets.push( + ...buildTarget({ + moduleFormat: 'esm', + buildType: 'profiler', + bundleState: 'unbundled', + input: '../src/index.js', + dir: 'dist/iframe' + }) + ); } return targets; } @@ -145,16 +142,13 @@ export default [ // used as a placeholder input: 'src/static/index.html', output: { - file: `cache/output.tmp` + file: 'cache/output.tmp' }, watch: { skipWrite: true }, treeshake: false, - plugins: [ - generateStandalone(NODE_ENV, ENGINE_PATH), - copyStatic(NODE_ENV, STATIC_FILES) - ] + plugins: [generateStandalone(NODE_ENV, ENGINE_PATH), copyStatic(NODE_ENV, STATIC_FILES)] }, { // A debug build is ~2.3MB and a release build ~0.6MB @@ -163,23 +157,18 @@ export default [ dir: 'dist', format: 'umd' }, + treeshake: 'smallest', plugins: [ - alias({ - entries: { - // define supported module overrides - '@playcanvas/pcui/react': PCUI_REACT_PATH, - '@playcanvas/pcui/styles': PCUI_STYLES_PATH - } - }), commonjs(), + treeshakeIgnore([/@playcanvas\/pcui/g]), // ignore PCUI treeshake resolve(), replace({ values: { - 'process.env.NODE_ENV': JSON.stringify(NODE_ENV) + 'process.env.NODE_ENV': JSON.stringify(NODE_ENV) // for REACT bundling }, preventAssignment: true }), - (NODE_ENV === 'production' && terser()) + NODE_ENV === 'production' && terser() ] }, ...getEngineTargets() diff --git a/examples/src/app/components/DeviceSelector.mjs b/examples/src/app/components/DeviceSelector.mjs index 3e1b8929065..558a1fd42c7 100644 --- a/examples/src/app/components/DeviceSelector.mjs +++ b/examples/src/app/components/DeviceSelector.mjs @@ -1,15 +1,13 @@ -// Don't include all of 'playcanvas' for these defines, it just -// causes bigger bundles and prolongs the build time by ~3s. -import { - DEVICETYPE_WEBGL1, - DEVICETYPE_WEBGL2, - DEVICETYPE_WEBGPU, - DEVICETYPE_NULL -} from 'playcanvas'; import { Component } from 'react'; import { SelectInput } from '@playcanvas/pcui/react'; import { jsx } from '../jsx.mjs'; +import { + DEVICETYPE_WEBGPU, + DEVICETYPE_WEBGL1, + DEVICETYPE_WEBGL2, + DEVICETYPE_NULL +} from '../constants.mjs'; import '../events.js'; const deviceTypeNames = { diff --git a/examples/src/app/constants.mjs b/examples/src/app/constants.mjs index db926add5e6..76b2a324fce 100644 --- a/examples/src/app/constants.mjs +++ b/examples/src/app/constants.mjs @@ -1 +1,9 @@ export const MIN_DESKTOP_WIDTH = 601; + +export const DEVICETYPE_WEBGL2 = 'webgl2'; + +export const DEVICETYPE_WEBGL1 = 'webgl1'; + +export const DEVICETYPE_WEBGPU = 'webgpu'; + +export const DEVICETYPE_NULL = 'null';