Switch viewer alpha dist to allow code splitting for dynamic imports (B…

…abylonJS#15482) Add a test app to the public package for easy local testing
ryantrem · Aug 27, 2024 · 63beb29 · 63beb29
1 parent cfba502
commit 63beb29
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 48 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/public/@babylonjs/viewer-alpha/package.json b/packages/public/@babylonjs/viewer-alpha/package.json
@@ -17,6 +17,8 @@
         "license.md"
     ],
     "scripts": {
+        "start": "npm run serve -- --open test/apps/web/index.html",
+        "serve": "vite",
         "build": "npm run clean && npm run bundle",
         "clean": "rimraf lib && rimraf dist && rimraf *.tsbuildinfo",
         "bundle": "npm run bundle:lib && npm run bundle:dist:esm",
@@ -38,9 +40,11 @@
         "@rollup/plugin-node-resolve": "^15.2.3",
         "@rollup/plugin-terser": "^0.4.4",
         "@rollup/plugin-typescript": "^11.1.6",
+        "chalk": "^5.3.0",
         "rollup": "^4.18.0",
         "rollup-plugin-dts": "^6.1.1",
-        "rollup-plugin-minify-html-literals": "^1.2.6"
+        "rollup-plugin-minify-html-literals": "^1.2.6",
+        "vite": "^5.4.2"
     },
     "keywords": [
         "3D",

diff --git a/packages/public/@babylonjs/viewer-alpha/rollup.config.dist.esm.mjs b/packages/public/@babylonjs/viewer-alpha/rollup.config.dist.esm.mjs
@@ -12,10 +12,10 @@ const source = "dev";
 const commonConfig = {
     input: "../../../tools/viewer-alpha/src/index.ts",
     output: {
+        dir: "dist",
         sourcemap: true,
         format: "es",
         exports: "named",
-        inlineDynamicImports: true,
     },
     plugins: [
         typescript({ tsconfig: "tsconfig.build.dist.json" }),
@@ -34,15 +34,17 @@ const maxConfig = {
     ...commonConfig,
     output: {
         ...commonConfig.output,
-        file: "dist/babylon-viewer.esm.js",
+        entryFileNames: "babylon-viewer.esm.js",
+        chunkFileNames: "chunks/[name]-[hash].esm.js",
     },
 };
 
 const minConfig = {
     ...commonConfig,
     output: {
         ...commonConfig.output,
-        file: "dist/babylon-viewer.esm.min.js",
+        entryFileNames: "babylon-viewer.esm.min.js",
+        chunkFileNames: "chunks/[name]-[hash].esm.min.js",
     },
     plugins: [...commonConfig.plugins, terser(), minifyHTML()],
 };

diff --git a/packages/public/@babylonjs/viewer-alpha/test/apps/web/index.html b/packages/public/@babylonjs/viewer-alpha/test/apps/web/index.html
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+    <style>
+        html,
+        body {
+            width: 100%;
+            height: 100%;
+            padding: 0;
+            margin: 0;
+            overflow: hidden;
+        }
+    </style>
+    <body>
+        <script type="module" src="../../../dist/babylon-viewer.esm.js"></script>
+        <babylon-viewer src="https://raw.githubusercontent.com/BabylonJS/Assets/master/meshes/ufo.glb" env="https://assets.babylonjs.com/environments/ulmerMuenster.env">
+        </babylon-viewer>
+    </body>
+</html>
diff --git a/packages/public/@babylonjs/viewer-alpha/tsconfig.build.dist.json b/packages/public/@babylonjs/viewer-alpha/tsconfig.build.dist.json
@@ -1,6 +1,7 @@
 {
     "extends": "../../../tools/viewer-alpha/tsconfig.build.json",
     "compilerOptions": {
-        "declaration": false,
+        "outDir": "dist",
+        "declaration": false
     }
 }
diff --git a/packages/public/@babylonjs/viewer-alpha/vite.config.mjs b/packages/public/@babylonjs/viewer-alpha/vite.config.mjs
@@ -0,0 +1,20 @@
+"use strict";
+
+/* eslint-disable no-console */
+
+import { defineConfig, loadEnv } from "vite";
+import chalk from "chalk";
+
+export default defineConfig(({ mode }) => {
+    const env = loadEnv(mode, process.cwd());
+
+    const port = env.VIEWER_PORT ?? 1343;
+    console.log(`${chalk.bold(`Web Test App`)}: ${chalk.cyan(`http://localhost:${port}/test/apps/web/index.html`)}`);
+
+    return {
+        root: ".",
+        server: {
+            port,
+        },
+    };
+});
diff --git a/packages/tools/viewer-alpha/src/viewerElement.ts b/packages/tools/viewer-alpha/src/viewerElement.ts
@@ -304,43 +304,44 @@ export class HTML3DElement extends LitElement {
         return html`
             <div class="full-size">
                 <canvas id="renderCanvas" class="full-size" touch-action="none"></canvas>
-                ${this.animations.length > 0 &&
-                html`
-                    <slot name="tool-bar">
-                        <div part="tool-bar" class="tool-bar">
-                            <div class="progress-control">
-                                <button aria-label="${this.isAnimationPlaying ? "Pause" : "Play"}" @click="${this.toggleAnimation}">
-                                    ${!this.isAnimationPlaying
-                                        ? html`<svg viewBox="0 0 20 20">
-                                              <path d="${playFilledIcon}" fill="currentColor"></path>
-                                          </svg>`
-                                        : html`<svg viewBox="-3 -2 24 24">
-                                              <path d="${pauseFilledIcon}" fill="currentColor"></path>
-                                          </svg>`}
-                                </button>
-                                <input
-                                    aria-label="Animation Progress"
-                                    class="progress-wrapper"
-                                    type="range"
-                                    min="0"
-                                    max="1"
-                                    step="0.0001"
-                                    .value="${this.animationProgress}"
-                                    @input="${this._onProgressChanged}"
-                                    @pointerdown="${this._onProgressPointerDown}"
-                                />
-                            </div>
-                            <select aria-label="Select Animation Speed" @change="${this._onAnimationSpeedChanged}">
-                                ${allowedAnimationSpeeds.map((speed) => html`<option value="${speed}" .selected="${this.animationSpeed === speed}">${speed}x</option>`)}
-                            </select>
-                            ${this.animations.length > 1
-                                ? html`<select aria-label="Select Animation" @change="${this._onSelectedAnimationChanged}">
-                                      ${this.animations.map((name, index) => html`<option value="${index}" .selected="${this.selectedAnimation == index}">${name}</option>`)}
-                                  </select>`
-                                : ""}
-                        </div>
-                    </slot>
-                `}
+                ${this.animations.length === 0
+                    ? ""
+                    : html`
+                          <slot name="tool-bar">
+                              <div part="tool-bar" class="tool-bar">
+                                  <div class="progress-control">
+                                      <button aria-label="${this.isAnimationPlaying ? "Pause" : "Play"}" @click="${this.toggleAnimation}">
+                                          ${!this.isAnimationPlaying
+                                              ? html`<svg viewBox="0 0 20 20">
+                                                    <path d="${playFilledIcon}" fill="currentColor"></path>
+                                                </svg>`
+                                              : html`<svg viewBox="-3 -2 24 24">
+                                                    <path d="${pauseFilledIcon}" fill="currentColor"></path>
+                                                </svg>`}
+                                      </button>
+                                      <input
+                                          aria-label="Animation Progress"
+                                          class="progress-wrapper"
+                                          type="range"
+                                          min="0"
+                                          max="1"
+                                          step="0.0001"
+                                          .value="${this.animationProgress}"
+                                          @input="${this._onProgressChanged}"
+                                          @pointerdown="${this._onProgressPointerDown}"
+                                      />
+                                  </div>
+                                  <select aria-label="Select Animation Speed" @change="${this._onAnimationSpeedChanged}">
+                                      ${allowedAnimationSpeeds.map((speed) => html`<option value="${speed}" .selected="${this.animationSpeed === speed}">${speed}x</option>`)}
+                                  </select>
+                                  ${this.animations.length > 1
+                                      ? html`<select aria-label="Select Animation" @change="${this._onSelectedAnimationChanged}">
+                                            ${this.animations.map((name, index) => html`<option value="${index}" .selected="${this.selectedAnimation == index}">${name}</option>`)}
+                                        </select>`
+                                      : ""}
+                              </div>
+                          </slot>
+                      `}
             </div>
         `;
     }