Cleanup

package.json

@@ -43,7 +43,15 @@
           "exceptAfterSingleLine": true
         }
       ],
-      "import/no-unresolved": "off"
+      "import/no-unresolved": "off",
+      "import/extensions": [
+        "error",
+        "ignorePackages",
+        {
+          "ts": "never",
+          "tsx": "never"
+        }
+      ]
     }
   },
   "devDependencies": {
@@ -58,23 +66,19 @@
     "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@types/react": "^18.3.2",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.10.0",
-    "@typescript-eslint/parser": "^7.10.0",
+    "@typescript-eslint/eslint-plugin": "^7.11.0",
+    "@typescript-eslint/parser": "^7.11.0",
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
     "eslint": "^8.56.0",
-    "fflate": "^0.8.2",
-    "handlebars": "^4.7.8",
-    "playcanvas": "^1.71.2",
-    "prop-types": "^15.8.1",
+    "playcanvas": "^1.71.3",
     "qrious": "^4.0.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-visibility-sensor": "^5.1.1",
     "rollup": "^4.18.0",
-    "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-sass": "^1.12.22",
     "serve": "^14.2.3",
     "tslib": "^2.6.2",
@@ -84,7 +88,7 @@
     "build": "rollup -c",
     "watch": "rollup -c -w",
     "serve": "serve dist",
-    "develop": "concurrently --kill-others \"npm run watch\" \"npm run serve\"",
+    "develop": "cross-env BUILD_TYPE=debug concurrently --kill-others \"npm run watch\" \"npm run serve\"",
     "develop:local": "cross-env ENGINE_PATH=../engine npm run develop",
     "build:local": "cross-env ENGINE_PATH=../engine npm run build",
     "watch:local": "cross-env ENGINE_PATH=../engine npm run watch",

plugins/copy-and-watch.mjs

@@ -1,50 +1,58 @@
 import fs from 'fs';
 import path from 'path';
 
-// custom plugin to copy files and watch them
-export default function copyAndWatch(config) {
-    const resolvedConfig = {
-        targets: []
-    };
+const isDir = src => fs.lstatSync(src).isDirectory();
+
+/**
+ * Copy files and directories to the output directory and watch for changes.
+ *
+ * @param {object[]} targets - The array of objects with src, dest, and transform properties.
+ * @param {string} targets.src - The source file or directory.
+ * @param {string} targets.dest - The destination directory.
+ * @param {function} targets.transform - Optional function to transform file contents.
+ * @returns {import('rollup').Plugin} - The rollup plugin.
+ */
+export function copyAndWatch(targets = []) {
+    const resolvedTargets = [];
 
     // resolve source directories into files
-    config.targets.forEach((target) => {
-        const readRec = (pathname) => {
+    targets.forEach((target) => {
+        const readTargets = (pathname) => {
             if (!fs.existsSync(pathname)) {
                 console.log(`skipping missing file ${target.src}`);
-            } else {
-                if (fs.lstatSync(pathname).isDirectory()) {
-                    const children = fs.readdirSync(pathname);
-                    children.forEach((childPath) => {
-                        readRec(path.join(pathname, childPath));
-                    });
-                } else {
-                    let dest;
-                    if (fs.lstatSync(target.src).isDirectory()) {
-                        dest = path.join(target.dest || '', path.basename(target.destFilename || target.src), path.relative(target.src, pathname));
-                    } else {
-                        dest = path.join(target.dest || '', path.basename(target.destFilename || target.src));
-                    }
-                    resolvedConfig.targets.push({
-                        src: pathname,
-                        dest: dest,
-                        transform: target.transform
-                    });
-                }
+                return;
+            }
+
+            if (isDir(pathname)) {
+                fs.readdirSync(pathname).forEach((childPath) => {
+                    readTargets(path.join(pathname, childPath));
+                });
+                return;
             }
+
+            let dest = path.join(target.dest || '', path.basename(target.src));
+            if (isDir(target.src)) {
+                dest = path.join(dest, path.relative(target.src, pathname));
+            }
+
+            resolvedTargets.push({
+                src: pathname,
+                dest: dest,
+                transform: target.transform
+            });
         };
-        readRec(target.src);
+        readTargets(target.src);
     });
 
     return {
         name: 'copy-and-watch',
         buildStart() {
-            resolvedConfig.targets.forEach((target) => {
+            resolvedTargets.forEach((target) => {
                 this.addWatchFile(target.src);
             });
         },
         generateBundle() {
-            resolvedConfig.targets.forEach((target) => {
+            resolvedTargets.forEach((target) => {
                 const contents = fs.readFileSync(target.src);
                 this.emitFile({
                     type: 'asset',

rollup.config.mjs

@@ -11,15 +11,42 @@ import terser from '@rollup/plugin-terser';
 import typescript from "@rollup/plugin-typescript";
 
 // custom plugins
-import copyAndWatch from "./plugins/copy-and-watch.mjs";
+import { copyAndWatch } from "./plugins/copy-and-watch.mjs";
 
 // debug, profile, release
 const BUILD_TYPE = process.env.BUILD_TYPE || 'release';
 const ENGINE_DIR = process.env.ENGINE_PATH || 'node_modules/playcanvas';
-const PCUI_DIR = path.resolve(process.env.PCUI_PATH || 'node_modules/@playcanvas/pcui', 'react');
 
-const ENGINE_NAME = (BUILD_TYPE === 'debug') ? 'playcanvas.dbg.mjs' : 'playcanvas.mjs';
+const ENGINE_NAME = (BUILD_TYPE === 'debug') ? 'playcanvas.dbg/src/index.js' : 'playcanvas/src/index.js';
 const ENGINE_PATH = path.resolve(ENGINE_DIR, 'build', ENGINE_NAME);
+const PCUI_DIR = path.resolve(process.env.PCUI_PATH || 'node_modules/@playcanvas/pcui');
+
+const BLUE_OUT = '\x1b[34m';
+const BOLD_OUT = `\x1b[1m`;
+const REGULAR_OUT = `\x1b[22m`;
+const RESET_OUT = `\x1b[0m`;
+
+const title = [
+    `Building PlayCanvas Model Viewer`,
+    `type ${BOLD_OUT}${BUILD_TYPE}${REGULAR_OUT}`,
+    `engine ${BOLD_OUT}${ENGINE_DIR}${REGULAR_OUT}`,
+    `pcui ${BOLD_OUT}${PCUI_DIR}${REGULAR_OUT}`
+].map(l => `${BLUE_OUT}${l}`).join(`\n`);
+console.log(`${BLUE_OUT}${title}${RESET_OUT}\n`);
+
+const TARGETS = [
+    {
+        src: 'src/index.html',
+        transform: (contents) => {
+            return contents.toString()
+                .replace('__BASE_HREF__', process.env.BASE_HREF || '')
+                .replace('__');
+        }
+    },
+    { src: 'src/manifest.json' },
+    { src: 'src/fonts.css' },
+    { src: 'static/' }
+];
 
 export default {
     input: 'src/index.tsx',
@@ -28,24 +55,13 @@ export default {
         format: 'esm',
         sourcemap: true
     },
+    treeshake: 'smallest',
     plugins: [
-        copyAndWatch({
-            targets: [
-                {
-                    src: 'src/index.html',
-                    transform: (contents) => {
-                        return contents.toString().replace('__BASE_HREF__', process.env.BASE_HREF || '').replace('__')
-                    }
-                },
-                { src: 'src/manifest.json' },
-                { src: 'src/fonts.css' },
-                { src: 'static/' }
-            ]
-        }),
+        copyAndWatch(TARGETS),
         replace({
             values: {
                 // NOTE: this is required for react (??) - see https://github.com/rollup/rollup/issues/487#issuecomment-177596512
-                'process.env.NODE_ENV': JSON.stringify(BUILD_TYPE === 'release' ? 'production' : 'development'),
+                'process.env.NODE_ENV': JSON.stringify(BUILD_TYPE === 'release' ? 'production' : 'development')
             },
             preventAssignment: true
         }),
@@ -58,7 +74,7 @@ export default {
         alias({
             entries: {
                 'playcanvas': ENGINE_PATH,
-                'pcui': PCUI_DIR
+                '@playcanvas/pcui': PCUI_DIR
             }
         }),
         commonjs(),
@@ -68,13 +84,11 @@ export default {
                 baseUrl: '.',
                 paths: {
                     'playcanvas': [ENGINE_DIR],
-                    'pcui': [PCUI_DIR]
+                    '@playcanvas/pcui': [PCUI_DIR]
                 }
             }
         }),
         json(),
         (BUILD_TYPE !== 'debug') && terser()
-    ],
-    treeshake: 'smallest',
-    cache: false
+    ]
 };

src/index.tsx

@@ -15,7 +15,7 @@ import Viewer from './viewer';
 import './style.scss';
 
 import { version as modelViewerVersion } from '../package.json';
-import { version as pcuiVersion, revision as pcuiRevision } from 'pcui';
+import { version as pcuiVersion, revision as pcuiRevision } from '@playcanvas/pcui/react';
 
 // Permit some additional properties to be set on the window
 declare global {

src/ui/components/index.tsx

@@ -8,7 +8,7 @@ import {
     SliderInput,
     VectorInput,
     NumericInput
-} from 'pcui';
+} from '@playcanvas/pcui/react';
 import { Option } from '../../types';
 
 export const Detail = (props: { label: string, value:string|number}) => {

src/ui/errors.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { InfoBox } from 'pcui';
+import { InfoBox } from '@playcanvas/pcui/react';
 import { ObserverData } from '../types';
 
 // InfoBox that shows an error

src/ui/index.tsx

@@ -1,7 +1,7 @@
 import { Observer } from '@playcanvas/observer';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Container, Spinner } from 'pcui';
+import { Container, Spinner } from '@playcanvas/pcui/react';
 
 import { ObserverData } from '../types';
 import LeftPanel from './left-panel';

src/ui/left-panel/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Panel, Container, TreeViewItem, TreeView } from 'pcui';
+import { Panel, Container, TreeViewItem, TreeView } from '@playcanvas/pcui/react';
 import { HierarchyNode, SetProperty, ObserverData } from '../../types';
 
 import { Detail, Select, Toggle, Vector } from '../components';

src/ui/left-panel/morph-target-panel.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import VisibilitySensor from 'react-visibility-sensor';
 import { MorphTargetData, SetProperty, ObserverData } from '../../types';
-import { Panel } from 'pcui';
+import { Panel } from '@playcanvas/pcui/react';
 import { MorphSlider } from '../components';
 
 class MorphTargetPanel extends React.Component <{ morphs: ObserverData['morphs'], progress: number, setProperty: SetProperty }> {

src/ui/load-controls.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { Container, Label, Button, TextInput } from 'pcui';
+import { Container, Label, Button, TextInput } from '@playcanvas/pcui/react';
 
 import { File, SetProperty } from '../types';
 import { version as appVersion } from '../../package.json';

src/ui/popup-panel/animation-controls.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from 'pcui';
+import { Button } from '@playcanvas/pcui/react';
 import { SetProperty, ObserverData } from '../../types';
 
 import { NakedSelect, NakedSlider } from '../components';

src/ui/popup-panel/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from 'pcui';
+import { Button } from '@playcanvas/pcui/react';
 import { SetProperty, ObserverData } from '../../types';
 import AnimationControls from './animation-controls';
 import { CameraPanel, SkyboxPanel, LightPanel, DebugPanel, ViewPanel } from './panels';

src/ui/popup-panel/panels.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Container, Button, Label, TextInput } from 'pcui';
+import { Container, Button, Label, TextInput } from '@playcanvas/pcui/react';
 import { SetProperty, ObserverData } from '../../types';
 import { extract } from '../../helpers';
 // @ts-ignore no type defs included

src/ui/selected-node.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Container } from 'pcui';
+import { Container } from '@playcanvas/pcui/react';
 import { SetProperty, ObserverData } from '../types';
 
 import { Vector, Detail } from './components';