Rollup build (#144)

* rollup build

Author: ellthompson

package-lock.json

@@ -46,43 +46,40 @@
     }
   },
   "devDependencies": {
-    "@babel/core": "^7.16.7",
-    "@babel/preset-env": "^7.16.8",
-    "@babel/preset-react": "^7.16.7",
     "@playcanvas/eslint-config": "^1.0.16",
     "@playcanvas/observer": "^1.3.1",
     "@playcanvas/pcui": "^2.2.6",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-node-resolve": "^13.1.3",
+    "@rollup/plugin-replace": "^3.0.1",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "@typescript-eslint/eslint-plugin": "^5.9.1",
     "@typescript-eslint/parser": "^5.9.1",
-    "awesome-typescript-loader": "^5.2.1",
-    "babel-loader": "^8.2.3",
     "concurrently": "^7.0.0",
-    "copy-webpack-plugin": "^10.2.0",
     "cross-env": "^7.0.2",
-    "css-loader": "^6.5.1",
     "eslint": "^8.6.0",
-    "html-webpack-plugin": "^5.5.0",
+    "handlebars": "^4.7.7",
     "playcanvas": "^1.51.5",
     "prop-types": "^15.8.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "rollup": "^2.64.0",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-module-replacement": "^1.2.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-typescript": "^1.0.1",
     "serve": "^13.0.2",
-    "style-loader": "^3.3.1",
-    "typescript": "^4.5.4",
-    "webpack": "^5.66.0",
-    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.9.1"
+    "tslib": "^2.3.1",
+    "typescript": "^4.5.4"
   },
   "scripts": {
     "lint": "eslint --ignore-pattern 'src/lib' --ext .ts src",
     "serve": "serve dist",
-    "build": "webpack --config webpack.config.js",
-    "build:watch": "webpack --config webpack.config.js --watch",
-    "build:server": "ENVIRONMENT=production PUBLIC_PATH=/viewer/static/ webpack --config webpack.config.js",
-    "build:analyze": "ENVIRONMENT=production ANALYZE_BUNDLE=true webpack --config webpack.config.js",
+    "build": "cross-env NODE_ENV=production rollup -c",
+    "build:watch": "rollup -c -w",
+    "build:server": "cross-env ENVIRONMENT=production PUBLIC_PATH=/viewer/static/ rollup -c",
     "develop": "concurrently --kill-others \"npm run build:watch\" \"npm run serve\"",
-    "develop:local": "cross-env ENGINE_PATH=../engine npm run develop"
+    "develop:local": "cross-env ENGINE_PATH=../engine/build/playcanvas.js npm run develop"
   }
 }

package.json

@@ -0,0 +1,55 @@
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import replace from '@rollup/plugin-replace';
+import typescript from 'rollup-plugin-typescript';
+import copy from 'rollup-plugin-copy';
+import { terser } from 'rollup-plugin-terser';
+import replacement from "rollup-plugin-module-replacement";
+import Handlebars from 'handlebars';
+import fs from 'fs';
+
+const html = fs.readFileSync(`./src/index.mustache`, "utf8");
+const template = Handlebars.compile(html);
+if (!fs.existsSync('./dist')) fs.mkdirSync('./dist');
+fs.writeFileSync(`./dist/index.html`, template({
+    hasPublicPath: !!process.env.PUBLIC_PATH,
+    analyticsID: process.env.ANALYTICS_ID,
+    oneTrustDomainKey: process.env.ONETRUST_DOMAIN_KEY,
+    oneTrustDeveloperId: process.env.ONETRUST_DEVELOPER_ID
+}));
+
+export default {
+    input: 'src/index.tsx',
+    output: {
+        dir: 'dist',
+        format: 'es'
+    },
+    plugins: [
+        replacement({
+            entries: [
+                {
+                    find: /^playcanvas$/,
+                    replacement: (importee) => {
+                        if (!process.env.ENGINE_PATH) return;
+                        importee.replace('playcanvas', process.env.ENGINE_PATH);
+                    }
+                }
+            ]
+        }),
+        replace({
+            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+            '__PUBLIC_PATH__': process.env.PUBLIC_PATH
+        }),
+        copy({
+            targets: [
+                { src: './src/style.css', dest: 'dist/' },
+                { src: './src/fonts.css', dest: 'dist/' },
+                { src: './static/*', dest: 'dist/static/' }
+            ]
+        }),
+        commonjs(),
+        resolve(),
+        typescript(),
+        (process.env.NODE_ENV === 'production' && terser())
+    ]
+};

rollup.config.js

@@ -6,17 +6,18 @@
     <meta name="keywords" content="glTF, GLB, WebGL, PlayCanvas, Viewer">
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-    <% if (htmlWebpackPlugin.options.hasPublicPath) { %>
+    {{#hasPublicPath}}
     <link rel="icon" type="image/png" href="/viewer/static/playcanvas-logo.png" />
     <link rel="manifest" href="/viewer/static/manifest.json">
-    <% if (htmlWebpackPlugin.options.analyticsID) { %>
+    <link ref="stylesheet" href="/viewer/style.css" />
+    {{#analyticsID}}
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script>
         window.dataLayer = window.dataLayer || [];
         function gtag() { dataLayer.push(arguments); }
 
-        if ('<%= htmlWebpackPlugin.options.oneTrustDeveloperId %>') {
-            gtag('set', '<%= htmlWebpackPlugin.options.oneTrustDeveloperId %>', true); // OneTrust developer id
+        if ({{{ oneTrustDeveloperId }}}) {
+            gtag('set', {{{ oneTrustDeveloperId }}}, true); // OneTrust developer id
         }
 
         gtag('consent', 'default', {
@@ -26,7 +27,7 @@
         });
 
         gtag('js', new Date());
-        gtag('config', '<%= htmlWebpackPlugin.options.analyticsID %>');
+        gtag('config', {{{ analyticsID }}});
 
         if (!window._optanonCallbacks) {
             window._optanonCallbacks = [];
@@ -43,18 +44,21 @@
             });
         });
     </script>
-    <script async src="https://www.googletagmanager.com/gtag/js?id=<%= htmlWebpackPlugin.options.analyticsID %>"></script>
-    <% } %>
-    <% } else { %>
+    <script async src="https://www.googletagmanager.com/gtag/js?id={{{ analyticsID }}}"></script>
+    {{/analyticsID}}
+    {{/hasPublicPath}}
+    {{^hasPublicPath}}
     <link rel="icon" type="image/png" href="./static/playcanvas-logo.png" />
     <link rel="manifest" href="./static/manifest.json">
-    <% } %>
+    <link rel="stylesheet" href="./style.css" />
+    {{/hasPublicPath}}
 </head>
 
 <body>
     <div id='app'></div>
-    <% if (htmlWebpackPlugin.options.hasPublicPath) { %>
-    <script src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js"  type="text/javascript" charset="UTF-8" data-domain-script="<%= htmlWebpackPlugin.options.oneTrustDomainKey %>" ></script>
+    {{#hasPublicPath}}
+    <script src="/viewer/index.js"></script>
+    <script src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js"  type="text/javascript" charset="UTF-8" data-domain-script="{{{ oneTrustDomainKey }}}" ></script>
     <script type="text/javascript">
         if (!window._optanonCallbacks) {
             window._optanonCallbacks = [];
@@ -66,6 +70,9 @@
             }
         }
     </script>
-    <% } %>
+    {{/hasPublicPath}}
+    {{^hasPublicPath}}
+    <script src="./index.js"></script>
+    {{/hasPublicPath}}
 </body>
 </html>

src/index.ejs renamed to src/index.mustache

@@ -2,7 +2,7 @@ import * as pc from 'playcanvas';
 import React from 'react';
 import ReactDOM from 'react-dom';
 // @ts-ignore: library file import
-import { wasmSupported, loadWasmModuleAsync } from 'lib/wasm-loader.js';
+import { wasmSupported, loadWasmModuleAsync } from '../lib/wasm-loader.js';
 
 import Viewer from './viewer';
 // import { Skybox, setSkyboxes } from './controls';
@@ -18,9 +18,6 @@ import Spinner from '@playcanvas/pcui/Spinner/component';
 import { getAssetPath, getRootPath } from './helpers';
 import { Skybox, Option } from './types';
 
-import './style.css';
-import './fonts.css';
-
 // initialize the apps state
 const observer: Observer = new Observer({
     show: {

src/index.tsx

@@ -4,8 +4,8 @@ import Container from '@playcanvas/pcui/Container/component';
 import Label from '@playcanvas/pcui/Label/component';
 // @ts-ignore: library file import
 import Button from '@playcanvas/pcui/Button/component';
-import React, { useRef, useContext } from 'react';
-import { Observer, URL } from './types';
+import React, { useRef } from 'react';
+import { Observer, File } from './types';
 
 const ObserverContext = React.createContext(null);
 const ObserverProvider = ObserverContext.Provider;
@@ -22,7 +22,7 @@ const LoadButton = () => {
         // `event` points to the selected file
         const viewer = (window as any).viewer;
         if (viewer && event.target.files.length) {
-            const urls: Array<URL> = [];
+            const urls: Array<File> = [];
             urls.push({
                 url: URL.createObjectURL(event.target.files[0]),
                 filename: event.target.files[0].name

src/load-ui.tsx

@@ -164,6 +164,10 @@ input {
     -ms-user-select: none;
 }
 
+#load-controls .pcui-container {
+    position: absolute;
+}
+
 .load-button-panel {
     width: 320;
     width: 320;

src/style.css

@@ -4,7 +4,7 @@ export interface Morph {
     weight?: number
 }
 
-export interface URL {
+export interface File {
     url: string,
     filename?: string
 }

src/types.ts

@@ -3,9 +3,9 @@ import * as pc from 'playcanvas';
 import * as pcx from 'playcanvas/build/playcanvas-extras.js';
 import DebugLines from './debug';
 // @ts-ignore: library file import
-import * as MeshoptDecoder from 'lib/meshopt_decoder.js';
+import * as MeshoptDecoder from '../lib/meshopt_decoder.js';
 import { getAssetPath } from './helpers';
-import { Morph, URL, Observer, HierarchyNode } from './types';
+import { Morph, File, Observer, HierarchyNode } from './types';
 // @ts-ignore: library file import
 import * as VoxParser from 'playcanvas/scripts/parsers/vox-parser.js';
 
@@ -475,7 +475,7 @@ class Viewer {
 
     // load the image files into the skybox. this function supports loading a single equirectangular
     // skybox image or 6 cubemap faces.
-    private loadSkybox(files: Array<URL>) {
+    private loadSkybox(files: Array<File>) {
         const app = this.app;
 
         if (files.length !== 6) {
@@ -517,7 +517,7 @@ class Viewer {
                 return 0;
             };
 
-            const sortPred = (first: URL, second: URL) => {
+            const sortPred = (first: File, second: File) => {
                 const firstOrder = getOrder(first.filename);
                 const secondOrder = getOrder(second.filename);
                 return firstOrder < secondOrder ? -1 : (secondOrder < firstOrder ? 1 : 0);
@@ -658,7 +658,7 @@ class Viewer {
     }
 
     // load gltf model given its url and list of external urls
-    private loadGltf(gltfUrl: URL, externalUrls: Array<URL>) {
+    private loadGltf(gltfUrl: File, externalUrls: Array<File>) {
 
         // provide buffer view callback so we can handle models compressed with MeshOptimizer
         // https://github.com/zeux/meshoptimizer
@@ -690,7 +690,7 @@ class Viewer {
         };
 
         const processImage = function (gltfImage: any, continuation: (err: string, result: any) => void) {
-            const u: URL = externalUrls.find((url) => {
+            const u: File = externalUrls.find((url) => {
                 return url.filename === pc.path.normalize(gltfImage.uri || "");
             });
             if (u) {
@@ -757,25 +757,25 @@ class Viewer {
     // load the list of urls.
     // urls can reference glTF files, glb files and skybox textures.
     // returns true if a model was loaded.
-    load(urls: Array<URL>) {
+    load(files: Array<File>) {
         // convert single url to list
-        if (!Array.isArray(urls)) {
-            urls = [urls];
+        if (!Array.isArray(files)) {
+            files = [files];
         }
 
         // step through urls loading gltf/glb models
         let result = false;
-        urls.forEach((url) => {
-            const filenameExt = pc.path.getExtension(url.filename).toLowerCase();
+        files.forEach((file) => {
+            const filenameExt = pc.path.getExtension(file.filename).toLowerCase();
             if (modelExtensions.indexOf(filenameExt) !== -1) {
-                this.loadGltf(url, urls);
+                this.loadGltf(file, files);
                 result = true;
             }
         });
 
         if (!result) {
             // if no models were loaded, load the files as skydome images instead
-            this.loadSkybox(urls);
+            this.loadSkybox(files);
         }
 
         // return true if a model/scene was loaded and false otherwise
@@ -996,7 +996,7 @@ class Viewer {
     // use webkitGetAsEntry to extract files so we can include folders
     private dropHandler(event: DragEvent) {
 
-        const removeCommonPrefix = (urls: Array<URL>) => {
+        const removeCommonPrefix = (urls: Array<File>) => {
             const split = (pathname: string) => {
                 const parts = pathname.split(pc.path.delimiter);
                 const base = parts[0];
@@ -1021,22 +1021,22 @@ class Viewer {
         };
 
         const resolveFiles = (entries: Array<FileSystemFileEntry>) => {
-            const urls: Array<URL> = [];
+            const files: Array<File> = [];
             entries.forEach((entry: FileSystemFileEntry) => {
-                entry.file((file: File) => {
-                    urls.push({
-                        url: URL.createObjectURL(file),
+                entry.file((entryFile: any) => {
+                    files.push({
+                        url: URL.createObjectURL(entryFile),
                         filename: entry.fullPath.substring(1)
                     });
-                    if (urls.length === entries.length) {
+                    if (files.length === entries.length) {
                         // remove common prefix from files in order to support dragging in the
                         // root of a folder containing related assets
-                        if (urls.length > 1) {
-                            removeCommonPrefix(urls);
+                        if (files.length > 1) {
+                            removeCommonPrefix(files);
                         }
 
                         // if a scene was loaded (and not just a skybox), clear the current scene
-                        if (this.load(urls) && !event.shiftKey) {
+                        if (this.load(files) && !event.shiftKey) {
                             this.resetScene();
                         }
                     }

src/viewer.ts

@@ -13,7 +13,6 @@
         "allowSyntheticDefaultImports" : true,
         "esModuleInterop" : true
     },
-    "include": [
-        "src"
-    ],
+    "include": ["src"],
+    "exclude": ["node_modules"]
 }