- {store._preferences?.avatarVoiceLevels?.[person.profile.displayName]?.muted ? (
-
- ) : (
-
- )}
+ {getPersonMuteState(person) ? : }
)}
{getPersonName(person, intl)}
diff --git a/src/react-components/room/RoomSidebar.js b/src/react-components/room/RoomSidebar.js
index 98438a0b1c..f722075a8b 100644
--- a/src/react-components/room/RoomSidebar.js
+++ b/src/react-components/room/RoomSidebar.js
@@ -70,12 +70,12 @@ function SceneAttribution({ attribution }) {
}
SceneAttribution.propTypes = {
- attribution: {
+ attribution: PropTypes.shape({
name: PropTypes.string,
title: PropTypes.string,
author: PropTypes.string,
url: PropTypes.string
- }
+ })
};
// To assist with content control, we avoid displaying scene links to users who are not the scene
diff --git a/src/react-components/room/Tip.stories.js b/src/react-components/room/Tip.stories.js
index 5986933027..730f225304 100644
--- a/src/react-components/room/Tip.stories.js
+++ b/src/react-components/room/Tip.stories.js
@@ -41,6 +41,10 @@ const TOOLTIP_STEPS = {
export const Tooltips = ({ step }) => } />;
+Tooltips.args = {
+ step: Object.keys(TOOLTIP_STEPS)[0]
+};
+
Tooltips.argTypes = {
step: {
name: "Onboarding tips step",
@@ -48,8 +52,7 @@ Tooltips.argTypes = {
control: {
type: "select",
labels: TOOLTIP_STEPS
- },
- defaultValue: Object.keys(TOOLTIP_STEPS)[0]
+ }
}
};
diff --git a/src/react-components/room/TipContainer.js b/src/react-components/room/TipContainer.js
index 9988b506aa..1c69c729d0 100644
--- a/src/react-components/room/TipContainer.js
+++ b/src/react-components/room/TipContainer.js
@@ -8,7 +8,14 @@ import { discordBridgesForPresences, hasEmbedPresences } from "../../utils/phoen
import { Tooltip } from "./Tooltip";
const isEndTooltipStep = step =>
- ["tips.desktop.end", "tips.mobile.end", "tips.standalone.end", "tips.desktop.menu", "tips.mobile.menu", "tips.standalone.menu"].includes(step);
+ [
+ "tips.desktop.end",
+ "tips.mobile.end",
+ "tips.standalone.end",
+ "tips.desktop.menu",
+ "tips.mobile.menu",
+ "tips.standalone.menu"
+ ].includes(step);
function OkDismissLabel() {
return ;
diff --git a/src/react-components/room/Tooltip.js b/src/react-components/room/Tooltip.js
index 1dabba68f5..1e310fb20c 100644
--- a/src/react-components/room/Tooltip.js
+++ b/src/react-components/room/Tooltip.js
@@ -16,7 +16,7 @@ let moveKeyBack = "S";
let moveKeyRight = "D";
let turnLeftKey = "Q";
let turnRightKey = "E";
-let tabKey = "Tab";
+const tabKey = "Tab";
// TODO The API to map from physical key to character is experimental. Depending on prospects of this getting wider
// implementation we may want to cook up our own polyfill based on observing key inputs
@@ -40,8 +40,7 @@ if (window.navigator.keyboard !== undefined && window.navigator.keyboard.getLayo
const onboardingMessages = defineMessages({
"tips.welcome": {
id: "tips.welcome",
- defaultMessage:
- "Welcome to {appName}
Let's take a quick look to get comfortable with the controls
"
+ defaultMessage: "Welcome to {appName}
Let's take a quick look to get comfortable with the controls
"
},
"tips.mobile.locomotion": {
id: "tips.mobile.locomotion",
@@ -53,11 +52,13 @@ const onboardingMessages = defineMessages({
},
"tips.mobile.defense": {
id: "tips.mobile.defense",
- defaultMessage: "If you find an avatar being a nuisance
or too loud or soft,
- do a two-finger tap to open the menu on their avatar,
- then tap the {hide} button or the volume buttons on their avatar.
"
+ defaultMessage:
+ "If you find an avatar being a nuisance
or too loud or soft,
- do a two-finger tap to open the menu on their avatar,
- then tap the {hide} button or the volume buttons on their avatar.
"
},
"tips.mobile.invite": {
id: "tips.mobile.invite",
- defaultMessage: "No one else is here.
Tap the {invite} button in the lower left or select Invite from the {menu} menu to share this room.
"
+ defaultMessage:
+ "No one else is here.
Tap the {invite} button in the lower left or select Invite from the {menu} menu to share this room.
"
},
"tips.desktop.locomotion": {
id: "tips.desktop.locomotion",
@@ -69,7 +70,8 @@ const onboardingMessages = defineMessages({
},
"tips.desktop.defense": {
id: "tips.desktop.defense",
- defaultMessage: "If you find an avatar being a nuisance
or too loud or soft,
- press {tab} to open the menu on their avatar,
- then click the {hide} button or the volume buttons on their avatar.
"
+ defaultMessage:
+ "If you find an avatar being a nuisance
or too loud or soft,
- press {tab} to open the menu on their avatar,
- then click the {hide} button or the volume buttons on their avatar.
"
},
"tips.desktop.invite": {
id: "tips.desktop.invite",
@@ -85,11 +87,13 @@ const onboardingMessages = defineMessages({
},
"tips.standalone.defense": {
id: "tips.standalone.defense",
- defaultMessage: "If you find an avatar being a nuisance
or too loud or soft,
- hold down {A} or {X} on a controller to open the menu on their avatar,
- then tap the {hide} button or the volume buttons on their avatar.
"
+ defaultMessage:
+ "If you find an avatar being a nuisance
or too loud or soft,
- hold down {A} or {X} on a controller to open the menu on their avatar,
- then tap the {hide} button or the volume buttons on their avatar.
"
},
"tips.standalone.invite": {
id: "tips.standalone.invite",
- defaultMessage: "No one else is here.
To share this room, exit VR then click the {invite} button in the lower left.
"
+ defaultMessage:
+ "No one else is here.
To share this room, exit VR then click the {invite} button in the lower left.
"
},
"tips.end": {
id: "tips.end",
@@ -126,11 +130,13 @@ const onboardingMessages = defineMessages({
});
function isStep(step, item) {
- return step.indexOf(item) !== -1;
+ // Defensive check: step may be undefined in testing/storybook environments
+ // where the component is rendered without proper initialization
+ return step && step.indexOf(item) !== -1;
}
function maxSteps(step) {
- return isStep(step, "desktop") ? 4 : (isStep(step, "mobile") ? 4 : 4);
+ return isStep(step, "desktop") ? 4 : isStep(step, "mobile") ? 4 : 4;
}
function Key({ children }) {
@@ -314,11 +320,9 @@ function onboardingSteps({ intl, step }) {
ol: chunks => {chunks}
,
li: chunks => {chunks},
tab: {tabKey},
- hide: (
-
- ),
- A: (),
- X: ()
+ hide: ,
+ A: ,
+ X:
}
},
navigationBar: {
@@ -336,7 +340,10 @@ function onboardingSteps({ intl, step }) {
type: Step,
params: {
invite: (
- } text={intl.formatMessage(onboardingMessages["invite-popover.title"])} />
+ }
+ text={intl.formatMessage(onboardingMessages["invite-popover.title"])}
+ />
),
menu: } />,
p: chunks => {chunks}
,
@@ -357,7 +364,12 @@ function onboardingSteps({ intl, step }) {
type: Step,
params: {
p: chunks => {chunks}
,
- menu: } text={intl.formatMessage(onboardingMessages["more-menu-popover.title"])} />
+ menu: (
+ }
+ text={intl.formatMessage(onboardingMessages["more-menu-popover.title"])}
+ />
+ )
},
messageId: "tips.menu"
}
@@ -370,8 +382,8 @@ function onboardingSteps({ intl, step }) {
params: {
p: chunks => {chunks}
,
p2: chunks => {chunks}
,
- B: (),
- Y: (),
+ B: ,
+ Y:
}
},
navigationBar: {
@@ -387,7 +399,7 @@ function onboardingSteps({ intl, step }) {
control: {
type: Step,
params: {
- p: chunks => {chunks}
,
+ p: chunks => {chunks}
}
},
navigationBar: {
@@ -415,7 +427,7 @@ function onboardingSteps({ intl, step }) {
control: {
type: Step,
params: {
- p: chunks => {chunks}
,
+ p: chunks => {chunks}
},
messageId: "tips.end"
}
@@ -465,7 +477,7 @@ Tooltip.propTypes = {
onPrev: PropTypes.func,
onNext: PropTypes.func,
onDismiss: PropTypes.func,
- step: PropTypes.string
+ step: PropTypes.string.isRequired
};
Tooltip.displayName = "Tooltip";
diff --git a/src/react-components/styles/style-utils.scss b/src/react-components/styles/style-utils.scss
index b48c4cd432..5d602131ef 100644
--- a/src/react-components/styles/style-utils.scss
+++ b/src/react-components/styles/style-utils.scss
@@ -1,3 +1,4 @@
+@use "sass:math";
@use './theme';
:local(.hide-lg) {
@@ -72,7 +73,7 @@ $spacing: (
// flex-basis 10% to 90%
@for $i from 1 to 9 {
- $percent: percentage($number: calc($i/10));
+ $percent: math.percentage(math.div($i, 10));
// .flex-basis-10 // flexBasis10
:local(.flex-basis-#{$i}0) {
flex-basis: $percent;
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 0ad2be36d9..3e1228e45e 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -1130,7 +1130,8 @@ class UIRoot extends Component {
const canCreateRoom = !configs.feature("disable_room_creation") || configs.isAdmin();
const canCloseRoom = this.props.hubChannel && !!this.props.hubChannel.canOrWillIfCreator("close_hub");
- const isModerator = this.props.hubChannel && this.props.hubChannel.canOrWillIfCreator("kick_users") && !isThisMobileVR;
+ const isModerator =
+ this.props.hubChannel && this.props.hubChannel.canOrWillIfCreator("kick_users") && !isThisMobileVR;
const moreMenu = [
{
diff --git a/src/scene-entry-manager.js b/src/scene-entry-manager.js
index 810eba7565..04252e7a79 100644
--- a/src/scene-entry-manager.js
+++ b/src/scene-entry-manager.js
@@ -541,8 +541,8 @@ export default class SceneEntryManager {
const audioStream = audioEl.captureStream
? audioEl.captureStream()
: audioEl.mozCaptureStream
- ? audioEl.mozCaptureStream()
- : null;
+ ? audioEl.mozCaptureStream()
+ : null;
if (audioStream) {
let audioVolume = Number(qs.get("audio_volume") || "1.0");
diff --git a/src/scene.js b/src/scene.js
index acd784692b..e5d03c3dd4 100644
--- a/src/scene.js
+++ b/src/scene.js
@@ -1,4 +1,4 @@
-import jwtDecode from "jwt-decode";
+import { jwtDecode } from "jwt-decode";
import React from "react";
import { createRoot } from "react-dom/client";
import "./assets/stylesheets/scene.scss";
diff --git a/src/storage/store.js b/src/storage/store.js
index 5689c94fd3..dd54943784 100644
--- a/src/storage/store.js
+++ b/src/storage/store.js
@@ -1,14 +1,15 @@
-import { Validator } from "jsonschema";
-import merge from "deepmerge";
+import * as Ajv from "ajv";
+import * as deepmerge from "deepmerge";
+const merge = deepmerge.default || deepmerge;
import Cookies from "js-cookie";
-import jwtDecode from "jwt-decode";
+import { jwtDecode } from "jwt-decode";
import { qsGet } from "../utils/qs_truthy.js";
import detectMobile, { isAndroid, isMobileVR } from "../utils/is-mobile";
const LOCAL_STORE_KEY = "___hubs_store";
const STORE_STATE_CACHE_KEY = Symbol();
const OAUTH_FLOW_CREDENTIALS_KEY = "ret-oauth-flow-account-credentials";
-const validator = new Validator();
+const ajv = new Ajv({ allErrors: true, removeAdditional: "failing" });
import { EventTarget } from "event-target-shim";
import { fetchRandomDefaultAvatarId, generateRandomName } from "../utils/identity.js";
import { NO_DEVICE_ID } from "../utils/media-devices-utils.js";
@@ -56,7 +57,7 @@ const isFirefoxReality = window.AFRAME?.utils.device.isMobileVR() && navigator.u
// Durable (via local-storage) schema-enforced state that is meant to be consumed via forward data flow.
// (Think flux but with way less incidental complexity, at least for now :))
export const SCHEMA = {
- id: "/HubsStore",
+ $id: "/HubsStore",
definitions: {
profile: {
@@ -103,7 +104,7 @@ export const SCHEMA = {
additionalProperties: false,
properties: {
lastUsedMicDeviceId: { type: "string" },
- micMuted: { type: "bool" }
+ micMuted: { type: "boolean" }
}
},
@@ -111,25 +112,25 @@ export const SCHEMA = {
type: "object",
additionalProperties: false,
properties: {
- shouldPromptForRefresh: { type: "bool", default: false },
+ shouldPromptForRefresh: { type: "boolean", default: false },
// Preferred media will be set dynamically
preferredMic: { type: "string", default: NO_DEVICE_ID },
preferredSpeakers: { type: "string", default: NO_DEVICE_ID },
preferredCamera: { type: "string", default: NO_DEVICE_ID },
- muteMicOnEntry: { type: "bool", default: false },
- disableLeftRightPanning: { type: "bool", default: false },
- audioNormalization: { type: "bool", default: 0.0 },
- invertTouchscreenCameraMove: { type: "bool", default: true },
- enableOnScreenJoystickLeft: { type: "bool", default: detectMobile() },
- enableOnScreenJoystickRight: { type: "bool", default: detectMobile() },
- enableGyro: { type: "bool", default: true },
- animateWaypointTransitions: { type: "bool", default: true },
- showFPSCounter: { type: "bool", default: false },
- allowMultipleHubsInstances: { type: "bool", default: false },
- disableIdleDetection: { type: "bool", default: false },
- fastRoomSwitching: { type: "bool", default: false }, // No longer used. TODO How to remove this safely?
- lazyLoadSceneMedia: { type: "bool", default: false },
- preferMobileObjectInfoPanel: { type: "bool", default: false },
+ muteMicOnEntry: { type: "boolean", default: false },
+ disableLeftRightPanning: { type: "boolean", default: false },
+ audioNormalization: { type: "boolean", default: 0.0 },
+ invertTouchscreenCameraMove: { type: "boolean", default: true },
+ enableOnScreenJoystickLeft: { type: "boolean", default: detectMobile() },
+ enableOnScreenJoystickRight: { type: "boolean", default: detectMobile() },
+ enableGyro: { type: "boolean", default: true },
+ animateWaypointTransitions: { type: "boolean", default: true },
+ showFPSCounter: { type: "boolean", default: false },
+ allowMultipleHubsInstances: { type: "boolean", default: false },
+ disableIdleDetection: { type: "boolean", default: false },
+ fastRoomSwitching: { type: "boolean", default: false }, // No longer used. TODO How to remove this safely?
+ lazyLoadSceneMedia: { type: "boolean", default: false },
+ preferMobileObjectInfoPanel: { type: "boolean", default: false },
// if unset, maxResolution = screen resolution
maxResolutionWidth: { type: "number", default: undefined },
maxResolutionHeight: { type: "number", default: undefined },
@@ -138,21 +139,21 @@ export const SCHEMA = {
globalSFXVolume: { type: "number", default: 100 },
snapRotationDegrees: { type: "number", default: 45 },
materialQualitySetting: { type: "string", default: defaultMaterialQuality },
- enableDynamicShadows: { type: "bool", default: false },
- disableSoundEffects: { type: "bool", default: false },
- disableMovement: { type: "bool", default: false },
- disableBackwardsMovement: { type: "bool", default: false },
- disableStrafing: { type: "bool", default: false },
- disableTeleporter: { type: "bool", default: false },
- disableAutoPixelRatio: { type: "bool", default: false },
+ enableDynamicShadows: { type: "boolean", default: false },
+ disableSoundEffects: { type: "boolean", default: false },
+ disableMovement: { type: "boolean", default: false },
+ disableBackwardsMovement: { type: "boolean", default: false },
+ disableStrafing: { type: "boolean", default: false },
+ disableTeleporter: { type: "boolean", default: false },
+ disableAutoPixelRatio: { type: "boolean", default: false },
movementSpeedModifier: { type: "number", default: 1 },
- disableEchoCancellation: { type: "bool", default: isFirefoxReality },
- disableNoiseSuppression: { type: "bool", default: isFirefoxReality },
- disableAutoGainControl: { type: "bool", default: isFirefoxReality },
+ disableEchoCancellation: { type: "boolean", default: isFirefoxReality },
+ disableNoiseSuppression: { type: "boolean", default: isFirefoxReality },
+ disableAutoGainControl: { type: "boolean", default: isFirefoxReality },
locale: { type: "string", default: "browser" },
- showRtcDebugPanel: { type: "bool", default: false },
- showAudioDebugPanel: { type: "bool", default: false },
- enableAudioClipping: { type: "bool", default: false },
+ showRtcDebugPanel: { type: "boolean", default: false },
+ showAudioDebugPanel: { type: "boolean", default: false },
+ enableAudioClipping: { type: "boolean", default: false },
audioClippingThreshold: { type: "number", default: 0.015 },
audioPanningQuality: { type: "string", default: defaultAudioPanningQuality() },
theme: { type: "string", default: undefined },
@@ -160,8 +161,8 @@ export const SCHEMA = {
nametagVisibility: { type: "string", default: "showAll" },
nametagVisibilityDistance: { type: "number", default: 5 },
avatarVoiceLevels: { type: "object" },
- enablePostEffects: { type: "bool", default: false },
- enableBloom: { type: "bool", default: true }, // only applies if post effects are enabled
+ enablePostEffects: { type: "boolean", default: false },
+ enableBloom: { type: "boolean", default: true }, // only applies if post effects are enabled
aaMode: { type: "string", default: AAModes.MSAA_4X } // only applies if post effects are enabled
}
},
@@ -245,6 +246,9 @@ export const SCHEMA = {
additionalProperties: false
};
+// Compile the schema with ajv
+const validateStore = ajv.compile(SCHEMA);
+
export default class Store extends EventTarget {
constructor() {
super();
@@ -278,11 +282,17 @@ export default class Store extends EventTarget {
this._shouldResetAvatarOnInit = false;
- const oauthFlowCredentials = Cookies.getJSON(OAUTH_FLOW_CREDENTIALS_KEY);
- if (oauthFlowCredentials) {
- this.update({ credentials: oauthFlowCredentials });
- this._shouldResetAvatarOnInit = true;
- Cookies.remove(OAUTH_FLOW_CREDENTIALS_KEY);
+ const oauthFlowCredentialsString = Cookies.get(OAUTH_FLOW_CREDENTIALS_KEY);
+ if (oauthFlowCredentialsString) {
+ try {
+ const oauthFlowCredentials = JSON.parse(oauthFlowCredentialsString);
+ this.update({ credentials: oauthFlowCredentials });
+ this._shouldResetAvatarOnInit = true;
+ Cookies.remove(OAUTH_FLOW_CREDENTIALS_KEY);
+ } catch (e) {
+ console.warn("Failed to parse OAuth flow credentials from cookie:", e);
+ Cookies.remove(OAUTH_FLOW_CREDENTIALS_KEY);
+ }
}
this._signOutOnExpiredAuthToken();
@@ -404,13 +414,21 @@ export default class Store extends EventTarget {
update(newState, mergeOpts) {
const finalState = merge({ ...this.state, preferences: this._preferences }, newState, mergeOpts);
- const { valid, errors } = validator.validate(finalState, SCHEMA);
+ const valid = validateStore(finalState);
// Cleanup unsupported properties
if (!valid) {
- errors.forEach(error => {
+ validateStore.errors.forEach(error => {
console.error(`Removing invalid preference from store: ${error.message}`);
- delete error.instance[error.argument];
+ // Navigate to the property that has the error
+ let obj = finalState;
+ const path = error.instancePath.split("/").filter(p => p !== "");
+ for (let i = 0; i < path.length - 1; i++) {
+ obj = obj[path[i]];
+ }
+ if (path.length > 0) {
+ delete obj[path[path.length - 1]];
+ }
});
}
diff --git a/src/systems/character-controller-system.js b/src/systems/character-controller-system.js
index c4203e9609..546fd26e25 100644
--- a/src/systems/character-controller-system.js
+++ b/src/systems/character-controller-system.js
@@ -266,8 +266,8 @@ export class CharacterControllerSystem {
(preferences.disableMovement
? 0
: preferences.disableBackwardsMovement
- ? Math.min(0, zCharacterAcceleration)
- : zCharacterAcceleration)
+ ? Math.min(0, zCharacterAcceleration)
+ : zCharacterAcceleration)
);
}
const lerpC = vrMode ? 0 : 0.85; // TODO: To support drifting ("ice skating"), motion needs to keep initial direction
diff --git a/src/systems/tips.js b/src/systems/tips.js
index ec09e3160c..ef06b2817d 100644
--- a/src/systems/tips.js
+++ b/src/systems/tips.js
@@ -28,7 +28,7 @@ let localStorageCache = null;
let finished = false; // Optimization, lets system skip altogether once finished.
const isMobile = AFRAME.utils.device.isMobile();
-const isThisMobileVR = AFRAME.utils.device.isMobileVR(); // used every tick
+const isThisMobileVR = AFRAME.utils.device.isMobileVR(); // used every tick
const tipPlatform = () => {
if (isThisMobileVR) return "standalone";
diff --git a/src/systems/waypoint-system.js b/src/systems/waypoint-system.js
index 5354c0a630..6075a9f921 100644
--- a/src/systems/waypoint-system.js
+++ b/src/systems/waypoint-system.js
@@ -28,7 +28,10 @@ const calculateIconTransform = (function () {
} else {
scale = 0.1 + 0.05 * distance;
}
- forward.copy(camToWaypoint).projectOnPlane(up.set(0, 1, 0)).normalize();
+ forward
+ .copy(camToWaypoint)
+ .projectOnPlane(up.set(0, 1, 0))
+ .normalize();
return outMat4
.makeBasis(
diff --git a/src/utils/auth-channel.js b/src/utils/auth-channel.js
index fe76275911..288776461c 100644
--- a/src/utils/auth-channel.js
+++ b/src/utils/auth-channel.js
@@ -1,4 +1,4 @@
-import uuid from "uuid/v4";
+import { v4 as uuid } from "uuid";
export default class AuthChannel {
constructor(store) {
diff --git a/src/utils/avatar-utils.js b/src/utils/avatar-utils.js
index b9b8440012..96909b4a3c 100644
--- a/src/utils/avatar-utils.js
+++ b/src/utils/avatar-utils.js
@@ -10,6 +10,7 @@ export const AVATAR_TYPES = {
};
export function getAvatarType(avatarId) {
+ if (!avatarId) return AVATAR_TYPES.SKINNABLE;
if (avatarId.startsWith("http")) return AVATAR_TYPES.URL;
return AVATAR_TYPES.SKINNABLE;
}
@@ -20,6 +21,8 @@ async function fetchSkinnableAvatar(avatarId) {
}
export async function fetchAvatar(avatarId) {
+ if (!avatarId) return null;
+
switch (getAvatarType(avatarId)) {
case AVATAR_TYPES.SKINNABLE:
return fetchSkinnableAvatar(avatarId);
diff --git a/src/utils/hub-channel.js b/src/utils/hub-channel.js
index f07d0d1185..f0b4cf8437 100644
--- a/src/utils/hub-channel.js
+++ b/src/utils/hub-channel.js
@@ -1,4 +1,4 @@
-import jwtDecode from "jwt-decode";
+import { jwtDecode } from "jwt-decode";
import { EventTarget } from "event-target-shim";
import { Presence } from "phoenix";
import { migrateChannelToSocket, discordBridgesForPresences, migrateToChannel } from "./phoenix-utils";
diff --git a/src/utils/load-pdf.tsx b/src/utils/load-pdf.tsx
index 8067b853c7..b0dd523279 100644
--- a/src/utils/load-pdf.tsx
+++ b/src/utils/load-pdf.tsx
@@ -1,5 +1,6 @@
/** @jsx createElementEntity */
-import { getDocument, PDFDocumentProxy } from "pdfjs-dist";
+import { getPDFLib } from "./pdf-lib";
+import type { PDFDocumentProxy } from "pdfjs-dist";
import { CanvasTexture, DoubleSide, LinearFilter, MeshBasicMaterial, sRGBEncoding } from "three";
import { HubsWorld } from "../app";
import { loadPageJob } from "../bit-systems/pdf-system";
@@ -11,7 +12,8 @@ import { ObjectMenuTargetFlags } from "../inflators/object-menu-target";
import { addComponent } from "bitecs";
function* createPDFResources(url: string): Generator {
- const pdf = (yield getDocument(url).promise) as PDFDocumentProxy;
+ const pdfjsLib = yield getPDFLib();
+ const pdf = (yield pdfjsLib.getDocument(url).promise) as PDFDocumentProxy;
const canvas = document.createElement("canvas");
const canvasContext = canvas.getContext("2d")!;
const texture = new CanvasTexture(canvas);
diff --git a/src/utils/media-utils.js b/src/utils/media-utils.js
index 466b78e2f7..850a0f461f 100644
--- a/src/utils/media-utils.js
+++ b/src/utils/media-utils.js
@@ -7,11 +7,14 @@ import HubsTextureLoader from "../loaders/HubsTextureLoader";
import { validMaterials } from "../components/hoverable-visuals";
import { isNonCorsProxyDomain, proxiedUrlFor, guessContentType } from "../utils/media-url-utils";
import { isIOS as detectIOS } from "./is-mobile";
-import Linkify from "linkify-it";
+import * as linkifyItModule from "linkify-it";
+const linkifyIt = linkifyItModule.default || linkifyItModule;
import tlds from "tlds";
import { mediaTypeFor } from "./media-type";
-import { MediaPlayer } from "dashjs";
-import { buildAbsoluteURL } from "url-toolkit";
+import * as dashjsModule from "dashjs";
+const dashjs = dashjsModule.default || dashjsModule;
+import * as urlToolkitModule from "url-toolkit";
+const urlToolkit = urlToolkitModule.default || urlToolkitModule;
import HLS from "hls.js";
import configs from "../utils/configs";
import qsTruthy from "../utils/qs_truthy";
@@ -40,7 +43,7 @@ export function mediaTypeName(type) {
return MediaTypeName.get(type) || "unknown";
}
-const linkify = Linkify();
+const linkify = linkifyIt();
linkify.tlds(tlds);
const mediaAPIEndpoint = getReticulumFetchUrl("/api/v1/media");
@@ -668,11 +671,11 @@ export async function resolveMediaInfo(urlString) {
}
export function createDashPlayer(url, videoEl, failLoad) {
- const player = MediaPlayer().create();
+ const player = dashjs.MediaPlayer().create();
player.extend("RequestModifier", function () {
return { modifyRequestHeader: xhr => xhr, modifyRequestURL: proxiedUrlFor };
});
- player.on(MediaPlayer.events.ERROR, failLoad);
+ player.on(dashjs.MediaPlayer.events.ERROR, failLoad);
player.initialize(videoEl, url);
player.setTextDefaultEnabled(false);
@@ -697,7 +700,7 @@ export function createHLSPlayer(url, videoEl, failLoad) {
// HACK HLS.js resolves relative urls internally, but our CORS proxying screws it up. Resolve relative to the original unproxied url.
// TODO extend HLS.js to allow overriding of its internal resolving instead
if (!u.startsWith("http")) {
- u = buildAbsoluteURL(baseUrl, u.startsWith("/") ? u : `/${u}`);
+ u = urlToolkit.buildAbsoluteURL(baseUrl, u.startsWith("/") ? u : `/${u}`);
}
xhr.open("GET", proxiedUrlFor(u), true);
diff --git a/src/utils/network-schemas.ts b/src/utils/network-schemas.ts
index b97517af7e..5158cebbfb 100644
--- a/src/utils/network-schemas.ts
+++ b/src/utils/network-schemas.ts
@@ -51,7 +51,7 @@ export const networkableComponents = Array.from(schemas.keys());
export function read(prop: any, eid: EntityID) {
if (ArrayBuffer.isView(prop[eid])) {
- return Array.from(prop[eid]);
+ return Array.from(prop[eid] as Uint8Array);
} else {
return prop[$isStringType] ? APP.getString(prop[eid]) : prop[eid];
}
@@ -59,7 +59,7 @@ export function read(prop: any, eid: EntityID) {
export function write(prop: any, eid: EntityID, value: any) {
if (ArrayBuffer.isView(prop[eid])) {
- prop[eid].set(value);
+ (prop[eid] as Uint8Array).set(value);
} else {
prop[eid] = prop[$isStringType] ? APP.getString(value) : value;
}
diff --git a/src/utils/pdf-lib.js b/src/utils/pdf-lib.js
new file mode 100644
index 0000000000..6bc45d9b5e
--- /dev/null
+++ b/src/utils/pdf-lib.js
@@ -0,0 +1,25 @@
+// Wrapper for pdfjs-dist to handle initialization properly
+let pdfjsLib;
+
+// Use dynamic import to ensure proper module loading
+export async function getPDFLib() {
+ if (!pdfjsLib) {
+ pdfjsLib = await import("pdfjs-dist");
+
+ // Set up worker if not already configured
+ if (typeof window !== "undefined" && pdfjsLib.GlobalWorkerOptions && !pdfjsLib.GlobalWorkerOptions.workerSrc) {
+ pdfjsLib.GlobalWorkerOptions.workerSrc =
+ require("!!file-loader?outputPath=assets/js&name=[name]-[hash].js!pdfjs-dist/build/pdf.worker.min.js").default;
+ }
+ }
+
+ return pdfjsLib;
+}
+
+// For synchronous access after initialization
+export function getPDFLibSync() {
+ if (!pdfjsLib) {
+ throw new Error("PDF.js not initialized. Call getPDFLib() first.");
+ }
+ return pdfjsLib;
+}
diff --git a/src/utils/vr-caps-detect.js b/src/utils/vr-caps-detect.js
index 6ebba5c51a..daaa2d0379 100644
--- a/src/utils/vr-caps-detect.js
+++ b/src/utils/vr-caps-detect.js
@@ -84,8 +84,8 @@ export async function getAvailableVREntryTypes() {
const screen = isThisMobileVR
? VR_DEVICE_AVAILABILITY.no
: isIDevice && isUIWebView
- ? VR_DEVICE_AVAILABILITY.maybe
- : VR_DEVICE_AVAILABILITY.yes;
+ ? VR_DEVICE_AVAILABILITY.maybe
+ : VR_DEVICE_AVAILABILITY.yes;
// HACK -- we prompt the user to install firefox if they click the VR button on a non-WebVR compatible
// browser. Without this check if you have FF on Mac/Linux you'll get the confusing flow of having a
diff --git a/test/integration/app-load-quick.test.js b/test/integration/app-load-quick.test.js
new file mode 100644
index 0000000000..adf5f3aae6
--- /dev/null
+++ b/test/integration/app-load-quick.test.js
@@ -0,0 +1,236 @@
+const test = require("ava");
+const puppeteer = require("puppeteer");
+const handler = require("serve-handler");
+const http = require("http");
+const path = require("path");
+const fs = require("fs");
+
+// Port counter to avoid conflicts
+let portCounter = 9100;
+
+function getNextPort() {
+ return portCounter++;
+}
+
+// Create a static file server for the built files
+function createServer(rootDir, port) {
+ return new Promise((resolve, reject) => {
+ const server = http.createServer((request, response) => {
+ return handler(request, response, {
+ public: rootDir,
+ headers: [
+ {
+ source: "**/*",
+ headers: [
+ {
+ key: "Access-Control-Allow-Origin",
+ value: "*"
+ }
+ ]
+ },
+ {
+ source: "**/*.map",
+ headers: [
+ {
+ key: "Content-Type",
+ value: "application/json"
+ }
+ ]
+ }
+ ]
+ });
+ });
+
+ server.listen(port, error => {
+ if (error) {
+ reject(error);
+ } else {
+ resolve(server);
+ }
+ });
+ });
+}
+
+// Helper to collect console errors and uncaught exceptions
+async function setupErrorCollection(page) {
+ const errors = [];
+
+ // Collect console errors
+ page.on("console", msg => {
+ if (msg.type() === "error") {
+ const text = msg.text();
+ // Filter out expected errors in test environment
+ const isExpectedError =
+ text.includes("Failed to load resource: net::ERR_NAME_NOT_RESOLVED") ||
+ text.includes("manifest.webmanifest") ||
+ text.includes("favicon.ico") ||
+ text.includes("dev.reticulum.io") ||
+ text.includes("Failed to load resource: the server responded with a status of 404");
+
+ if (!isExpectedError) {
+ errors.push({
+ type: "console.error",
+ text: text,
+ location: msg.location()
+ });
+ }
+ }
+ });
+
+ // Collect page errors (uncaught exceptions)
+ page.on("pageerror", error => {
+ const text = error.toString();
+ // Filter out expected errors in test environment
+ const isExpectedError =
+ (text.includes("Failed to fetch") && error.stack && (error.stack.includes("reticulum") || error.stack.includes("api/v1"))) ||
+ (text.includes("Failed to fetch") && error.stack && error.stack.includes("RETRY_DELAY_MS"));
+
+ if (!isExpectedError) {
+ errors.push({
+ type: "uncaught exception",
+ text: text,
+ stack: error.stack
+ });
+ }
+ });
+
+ // Collect unhandled promise rejections
+ await page.evaluateOnNewDocument(() => {
+ window.addEventListener("unhandledrejection", event => {
+ window.__unhandledRejections = window.__unhandledRejections || [];
+ window.__unhandledRejections.push({
+ reason: event.reason?.toString() || "Unknown reason",
+ promise: event.promise
+ });
+ });
+ });
+
+ return { errors };
+}
+
+// Quick test that assumes build is already done
+test("main app index.html loads without errors (quick)", async t => {
+ const distDir = path.join(__dirname, "../../dist");
+
+ // Skip if dist doesn't exist
+ if (!fs.existsSync(distDir)) {
+ t.pass("Skipping - dist directory doesn't exist. Run 'npm run build' first.");
+ return;
+ }
+
+ let server;
+ let browser;
+
+ try {
+ const port = getNextPort();
+ server = await createServer(distDir, port);
+
+ browser = await puppeteer.launch({
+ headless: "new",
+ args: [
+ "--no-sandbox",
+ "--disable-setuid-sandbox",
+ "--disable-dev-shm-usage",
+ "--disable-web-security",
+ "--enable-webgl",
+ "--enable-webgl2",
+ "--use-gl=swiftshader", // Software WebGL rendering for headless
+ "--enable-features=WebRTC",
+ "--enable-unsafe-webgpu",
+ "--use-fake-ui-for-media-stream",
+ "--use-fake-device-for-media-stream"
+ ]
+ });
+
+ const page = await browser.newPage();
+ const { errors } = await setupErrorCollection(page);
+
+ await page.goto(`http://localhost:${port}/index.html`, {
+ waitUntil: "domcontentloaded",
+ timeout: 30000
+ });
+
+ await new Promise(resolve => setTimeout(resolve, 2000));
+
+ const unhandledRejections = await page.evaluate(() => window.__unhandledRejections || []);
+
+ if (errors.length > 0) {
+ console.error("Console errors found:", errors);
+ }
+ if (unhandledRejections.length > 0) {
+ console.error("Unhandled promise rejections:", unhandledRejections);
+ }
+
+ t.is(errors.length, 0, `Found ${errors.length} console errors`);
+ t.is(unhandledRejections.length, 0, `Found ${unhandledRejections.length} unhandled promise rejections`);
+
+ } finally {
+ if (browser) await browser.close();
+ if (server) {
+ await new Promise(resolve => server.close(resolve));
+ }
+ }
+});
+
+test("admin app loads without errors (quick)", async t => {
+ const distDir = path.join(__dirname, "../../admin/dist");
+
+ // Skip if dist doesn't exist
+ if (!fs.existsSync(distDir)) {
+ t.pass("Skipping - admin dist directory doesn't exist. Run 'npm run build' in admin/ first.");
+ return;
+ }
+
+ let server;
+ let browser;
+
+ try {
+ const port = getNextPort();
+ server = await createServer(distDir, port);
+
+ browser = await puppeteer.launch({
+ headless: "new",
+ args: [
+ "--no-sandbox",
+ "--disable-setuid-sandbox",
+ "--disable-dev-shm-usage",
+ "--disable-web-security",
+ "--enable-webgl",
+ "--enable-webgl2",
+ "--use-gl=swiftshader", // Software WebGL rendering for headless
+ "--enable-features=WebRTC",
+ "--enable-unsafe-webgpu",
+ "--use-fake-ui-for-media-stream",
+ "--use-fake-device-for-media-stream"
+ ]
+ });
+
+ const page = await browser.newPage();
+ const { errors } = await setupErrorCollection(page);
+
+ await page.goto(`http://localhost:${port}/admin.html`, {
+ waitUntil: "domcontentloaded",
+ timeout: 30000
+ });
+
+ await new Promise(resolve => setTimeout(resolve, 2000));
+
+ const unhandledRejections = await page.evaluate(() => window.__unhandledRejections || []);
+
+ if (errors.length > 0) {
+ console.error("Console errors found:", errors);
+ }
+ if (unhandledRejections.length > 0) {
+ console.error("Unhandled promise rejections:", unhandledRejections);
+ }
+
+ t.is(errors.length, 0, `Found ${errors.length} console errors`);
+ t.is(unhandledRejections.length, 0, `Found ${unhandledRejections.length} unhandled promise rejections`);
+
+ } finally {
+ if (browser) await browser.close();
+ if (server) {
+ await new Promise(resolve => server.close(resolve));
+ }
+ }
+});
\ No newline at end of file
diff --git a/test/integration/app-load.test.js b/test/integration/app-load.test.js
new file mode 100644
index 0000000000..b54fbf7407
--- /dev/null
+++ b/test/integration/app-load.test.js
@@ -0,0 +1,338 @@
+const test = require("ava");
+const puppeteer = require("puppeteer");
+const handler = require("serve-handler");
+const http = require("http");
+const path = require("path");
+const { resolveStackTrace } = require("./source-map-resolver");
+
+// Create a static file server for the built files
+function createServer(rootDir, port) {
+ return new Promise((resolve, reject) => {
+ const server = http.createServer((request, response) => {
+ return handler(request, response, {
+ public: rootDir,
+ headers: [
+ {
+ source: "**/*",
+ headers: [
+ {
+ key: "Access-Control-Allow-Origin",
+ value: "*"
+ }
+ ]
+ },
+ {
+ source: "**/*.map",
+ headers: [
+ {
+ key: "Content-Type",
+ value: "application/json"
+ }
+ ]
+ }
+ ]
+ });
+ });
+
+ server.listen(port, error => {
+ if (error) {
+ reject(error);
+ } else {
+ resolve(server);
+ }
+ });
+ });
+}
+
+// Helper to collect console errors and uncaught exceptions
+async function setupErrorCollection(page) {
+ const errors = [];
+ const warnings = [];
+
+ // Collect console errors
+ page.on("console", msg => {
+ if (msg.type() === "error") {
+ const text = msg.text();
+ // Filter out expected errors in test environment
+ const isExpectedError =
+ text.includes("Failed to load resource: net::ERR_NAME_NOT_RESOLVED") ||
+ text.includes("manifest.webmanifest") ||
+ text.includes("favicon.ico") ||
+ text.includes("dev.reticulum.io") ||
+ text.includes("Failed to load resource: the server responded with a status of 404");
+
+ if (!isExpectedError) {
+ errors.push({
+ type: "console.error",
+ text: text,
+ location: msg.location()
+ });
+ }
+ } else if (msg.type() === "warning") {
+ warnings.push({
+ type: "console.warn",
+ text: msg.text(),
+ location: msg.location()
+ });
+ }
+ });
+
+ // Collect page errors (uncaught exceptions)
+ page.on("pageerror", async error => {
+ const text = error.toString();
+ // Filter out expected errors in test environment
+ const isExpectedError =
+ (text.includes("Failed to fetch") && error.stack && (error.stack.includes("reticulum") || error.stack.includes("api/v1"))) ||
+ (text.includes("Failed to fetch") && error.stack && error.stack.includes("RETRY_DELAY_MS"));
+
+ if (!isExpectedError) {
+ const resolvedStack = await resolveStackTrace(error.stack);
+ errors.push({
+ type: "uncaught exception",
+ text: text,
+ stack: resolvedStack || error.stack
+ });
+ }
+ });
+
+ // Collect unhandled promise rejections
+ await page.evaluateOnNewDocument(() => {
+ window.addEventListener("unhandledrejection", event => {
+ window.__unhandledRejections = window.__unhandledRejections || [];
+ window.__unhandledRejections.push({
+ reason: event.reason?.toString() || "Unknown reason",
+ promise: event.promise
+ });
+ });
+ });
+
+ return { errors, warnings };
+}
+
+// Port counter to avoid conflicts
+let portCounter = 9000;
+
+function getNextPort() {
+ return portCounter++;
+}
+
+test.before(async t => {
+ // Build the project before running tests
+ const { execSync } = require("child_process");
+
+ console.log("Building main project...");
+ execSync("npm run build", {
+ stdio: "inherit",
+ cwd: path.join(__dirname, "../..")
+ });
+
+ console.log("Building admin project...");
+ execSync("npm run build", {
+ stdio: "inherit",
+ cwd: path.join(__dirname, "../../admin")
+ });
+});
+
+test("main app loads without errors", async t => {
+ let server;
+ let browser;
+
+ try {
+ // Start server for main app
+ const distDir = path.join(__dirname, "../../dist");
+ const port = getNextPort();
+ server = await createServer(distDir, port);
+
+ // Launch headless Chrome
+ browser = await puppeteer.launch({
+ headless: "new",
+ args: [
+ "--no-sandbox",
+ "--disable-setuid-sandbox",
+ "--disable-dev-shm-usage",
+ "--disable-web-security", // Allow loading resources from different origins
+ "--enable-webgl",
+ "--enable-webgl2",
+ "--use-gl=swiftshader", // Software WebGL rendering for headless
+ "--enable-features=WebRTC",
+ "--enable-unsafe-webgpu",
+ "--use-fake-ui-for-media-stream",
+ "--use-fake-device-for-media-stream"
+ ]
+ });
+
+ const page = await browser.newPage();
+ const { errors, warnings } = await setupErrorCollection(page);
+
+ // Navigate to the main page
+ await page.goto(`http://localhost:${port}/index.html`, {
+ waitUntil: "domcontentloaded",
+ timeout: 30000
+ });
+
+ // Wait a bit for any async errors to surface
+ await new Promise(resolve => setTimeout(resolve, 2000));
+
+ // Check for unhandled promise rejections
+ const unhandledRejections = await page.evaluate(() => window.__unhandledRejections || []);
+
+ // Report any errors found
+ if (errors.length > 0) {
+ console.error("Console errors found:");
+ for (const error of errors) {
+ console.error(`\n[${error.type}] ${error.text}`);
+ if (error.stack) {
+ console.error(error.stack);
+ }
+ }
+ }
+ if (unhandledRejections.length > 0) {
+ console.error("Unhandled promise rejections:", unhandledRejections);
+ }
+
+ // Assert no errors
+ t.is(errors.length, 0, `Found ${errors.length} console errors`);
+ t.is(unhandledRejections.length, 0, `Found ${unhandledRejections.length} unhandled promise rejections`);
+
+ // Check that the page has some expected content
+ const title = await page.title();
+ t.truthy(title, "Page should have a title");
+
+ } finally {
+ if (browser) await browser.close();
+ if (server) {
+ await new Promise(resolve => server.close(resolve));
+ }
+ }
+});
+
+test("admin app loads without errors", async t => {
+ let server;
+ let browser;
+
+ try {
+ // Start server for admin app
+ const distDir = path.join(__dirname, "../../admin/dist");
+ const port = getNextPort();
+ server = await createServer(distDir, port);
+
+ // Launch headless Chrome
+ browser = await puppeteer.launch({
+ headless: "new",
+ args: [
+ "--no-sandbox",
+ "--disable-setuid-sandbox",
+ "--disable-dev-shm-usage",
+ "--disable-web-security"
+ ]
+ });
+
+ const page = await browser.newPage();
+ const { errors, warnings } = await setupErrorCollection(page);
+
+ // Navigate to the admin page
+ await page.goto(`http://localhost:${port}/admin.html`, {
+ waitUntil: "domcontentloaded",
+ timeout: 30000
+ });
+
+ // Wait a bit for any async errors to surface
+ await new Promise(resolve => setTimeout(resolve, 2000));
+
+ // Check for unhandled promise rejections
+ const unhandledRejections = await page.evaluate(() => window.__unhandledRejections || []);
+
+ // Report any errors found
+ if (errors.length > 0) {
+ console.error("Console errors found:");
+ for (const error of errors) {
+ console.error(`\n[${error.type}] ${error.text}`);
+ if (error.stack) {
+ console.error(error.stack);
+ }
+ }
+ }
+ if (unhandledRejections.length > 0) {
+ console.error("Unhandled promise rejections:", unhandledRejections);
+ }
+
+ // Assert no errors
+ t.is(errors.length, 0, `Found ${errors.length} console errors`);
+ t.is(unhandledRejections.length, 0, `Found ${unhandledRejections.length} unhandled promise rejections`);
+
+ // Check that the page has some expected content
+ const title = await page.title();
+ t.truthy(title, "Page should have a title");
+
+ } finally {
+ if (browser) await browser.close();
+ if (server) {
+ await new Promise(resolve => server.close(resolve));
+ }
+ }
+});
+
+// Test other key pages in the main app
+const mainAppPages = [
+ "hub.html",
+ "scene.html",
+ "avatar.html",
+ "link.html"
+];
+
+for (const pageName of mainAppPages) {
+ test(`${pageName} loads without errors`, async t => {
+ let server;
+ let browser;
+
+ try {
+ const distDir = path.join(__dirname, "../../dist");
+ const port = getNextPort();
+ server = await createServer(distDir, port);
+
+ browser = await puppeteer.launch({
+ headless: "new",
+ args: [
+ "--no-sandbox",
+ "--disable-setuid-sandbox",
+ "--disable-dev-shm-usage",
+ "--disable-web-security"
+ ]
+ });
+
+ const page = await browser.newPage();
+ const { errors, warnings } = await setupErrorCollection(page);
+
+ await page.goto(`http://localhost:${port}/${pageName}`, {
+ waitUntil: "domcontentloaded",
+ timeout: 30000
+ });
+
+ await new Promise(resolve => setTimeout(resolve, 2000));
+
+ const unhandledRejections = await page.evaluate(() => window.__unhandledRejections || []);
+
+ if (errors.length > 0) {
+ console.error(`\nConsole errors in ${pageName}:`);
+ for (const error of errors) {
+ console.error(`\n[${error.type}] ${error.text}`);
+ if (error.stack) {
+ console.error(error.stack);
+ }
+ }
+ }
+ if (unhandledRejections.length > 0) {
+ console.error(`Unhandled rejections in ${pageName}:`, unhandledRejections);
+ }
+
+ t.is(errors.length, 0, `Found ${errors.length} console errors in ${pageName}`);
+ t.is(unhandledRejections.length, 0, `Found ${unhandledRejections.length} unhandled promise rejections in ${pageName}`);
+
+ } finally {
+ if (browser) await browser.close();
+ if (server) {
+ await new Promise(resolve => server.close(resolve));
+ }
+ }
+ });
+}
\ No newline at end of file
diff --git a/test/integration/debug-avatar.js b/test/integration/debug-avatar.js
new file mode 100644
index 0000000000..218d4d33e5
--- /dev/null
+++ b/test/integration/debug-avatar.js
@@ -0,0 +1,77 @@
+const puppeteer = require("puppeteer");
+const handler = require("serve-handler");
+const http = require("http");
+const path = require("path");
+
+async function debugAvatar() {
+ const server = http.createServer((request, response) => {
+ return handler(request, response, {
+ public: path.join(__dirname, "../../dist"),
+ headers: [
+ {
+ source: "**/*",
+ headers: [
+ {
+ key: "Access-Control-Allow-Origin",
+ value: "*"
+ }
+ ]
+ },
+ {
+ source: "**/*.map",
+ headers: [
+ {
+ key: "Content-Type",
+ value: "application/json"
+ }
+ ]
+ }
+ ]
+ });
+ });
+
+ await new Promise((resolve, reject) => {
+ server.listen(9999, error => {
+ if (error) reject(error);
+ else resolve();
+ });
+ });
+
+ const browser = await puppeteer.launch({
+ headless: "new",
+ args: [
+ "--no-sandbox",
+ "--disable-setuid-sandbox",
+ "--disable-dev-shm-usage",
+ "--disable-web-security",
+ "--enable-webgl",
+ "--enable-webgl2",
+ "--use-gl=swiftshader"
+ ]
+ });
+
+ const page = await browser.newPage();
+
+ // Enable console logging
+ page.on("console", msg => {
+ console.log(`[${msg.type()}] ${msg.text()}`);
+ });
+
+ page.on("pageerror", error => {
+ console.error("Page error:", error.toString());
+ console.error("Stack:", error.stack);
+ });
+
+ console.log("Loading avatar.html...");
+ await page.goto("http://localhost:9999/avatar.html", {
+ waitUntil: "networkidle2",
+ timeout: 30000
+ });
+
+ await new Promise(resolve => setTimeout(resolve, 5000));
+
+ await browser.close();
+ server.close();
+}
+
+debugAvatar().catch(console.error);
\ No newline at end of file
diff --git a/test/integration/source-map-resolver.js b/test/integration/source-map-resolver.js
new file mode 100644
index 0000000000..c86aed66bc
--- /dev/null
+++ b/test/integration/source-map-resolver.js
@@ -0,0 +1,71 @@
+const fs = require("fs");
+const path = require("path");
+const { SourceMapConsumer } = require("source-map");
+
+// Cache for source maps
+const sourceMapCache = new Map();
+
+async function loadSourceMap(fileUrl) {
+ const mapUrl = fileUrl + ".map";
+
+ if (sourceMapCache.has(mapUrl)) {
+ return sourceMapCache.get(mapUrl);
+ }
+
+ try {
+ // Extract file path from URL
+ const urlPath = new URL(fileUrl).pathname;
+ const localPath = path.join(__dirname, "../..", "dist", urlPath);
+ const mapPath = localPath + ".map";
+
+ if (fs.existsSync(mapPath)) {
+ const mapContent = fs.readFileSync(mapPath, "utf8");
+ const consumer = await new SourceMapConsumer(JSON.parse(mapContent));
+ sourceMapCache.set(mapUrl, consumer);
+ return consumer;
+ }
+ } catch (e) {
+ // Ignore errors
+ }
+
+ return null;
+}
+
+async function resolveStackTrace(stack) {
+ if (!stack) return stack;
+
+ const lines = stack.split("\n");
+ const resolvedLines = [];
+
+ for (const line of lines) {
+ const match = line.match(/at\s+(?:(.+?)\s+\()?(.+?):(\d+):(\d+)\)?$/);
+ if (match) {
+ const [, functionName, fileUrl, line, column] = match;
+ const sourceMap = await loadSourceMap(fileUrl);
+
+ if (sourceMap) {
+ try {
+ const pos = sourceMap.originalPositionFor({
+ line: parseInt(line),
+ column: parseInt(column)
+ });
+
+ if (pos.source) {
+ const sourcePath = pos.source.replace(/^webpack:\/\/\//, "");
+ const resolvedLine = ` at ${functionName || ""} (${sourcePath}:${pos.line}:${pos.column})`;
+ resolvedLines.push(resolvedLine);
+ continue;
+ }
+ } catch (e) {
+ // Fall back to original line
+ }
+ }
+ }
+
+ resolvedLines.push(line);
+ }
+
+ return resolvedLines.join("\n");
+}
+
+module.exports = { resolveStackTrace };
\ No newline at end of file
diff --git a/test/unit/inflators/pdf.test.js b/test/unit/inflators/pdf.test.js
new file mode 100644
index 0000000000..cb58ed7c05
--- /dev/null
+++ b/test/unit/inflators/pdf.test.js
@@ -0,0 +1,264 @@
+import test from "ava";
+import { addComponent, addEntity, createWorld } from "bitecs";
+import { Scene, MeshBasicMaterial, CanvasTexture, Mesh, PlaneGeometry } from "three";
+import * as pdfjs from "pdfjs-dist";
+import { MediaPDF } from "../../../src/bit-components";
+
+// Configure PDF.js worker for Node.js environment
+pdfjs.GlobalWorkerOptions.workerSrc = require("pdfjs-dist/build/pdf.worker.min.js");
+
+// Mock canvas for headless testing
+class MockCanvas {
+ constructor() {
+ this.width = 256;
+ this.height = 256;
+ }
+
+ getContext() {
+ return new MockCanvasRenderingContext2D();
+ }
+}
+
+class MockCanvasRenderingContext2D {
+ constructor() {
+ this.canvas = new MockCanvas();
+ }
+
+ clearRect() {}
+ drawImage() {}
+ fillRect() {}
+ scale() {}
+ translate() {}
+ save() {}
+ restore() {}
+ transform() {}
+}
+
+// Create mock world with required properties
+function createMockWorld() {
+ const world = createWorld();
+ world.scene = new Scene();
+ world.nameToComponent = {
+ object3d: {},
+ networked: {},
+ owned: {},
+ AEntity: {}
+ };
+ world.ignoredNids = new Set();
+ world.deletedNids = new Set();
+ world.nid2eid = new Map();
+ world.eid2obj = new Map();
+ world.eid2mat = new Map();
+ world.time = { delta: 0, elapsed: 0, tick: 0 };
+ return world;
+}
+
+// Create a minimal PDF for testing
+async function createTestPDF() {
+ // Create a very simple PDF document programmatically
+ const pdfData = new Uint8Array([
+ 0x25, 0x50, 0x44, 0x46, 0x2d, 0x31, 0x2e, 0x34, // %PDF-1.4
+ 0x0a, 0x31, 0x20, 0x30, 0x20, 0x6f, 0x62, 0x6a, // \n1 0 obj
+ 0x0a, 0x3c, 0x3c, 0x2f, 0x54, 0x79, 0x70, 0x65, // \n<>\ne
+ 0x6e, 0x64, 0x6f, 0x62, 0x6a, 0x0a, 0x32, 0x20, // ndobj\n2
+ 0x30, 0x20, 0x6f, 0x62, 0x6a, 0x0a, 0x3c, 0x3c, // 0 obj\n<<
+ 0x2f, 0x54, 0x79, 0x70, 0x65, 0x2f, 0x50, 0x61, // /Type/Pa
+ 0x67, 0x65, 0x73, 0x2f, 0x4b, 0x69, 0x64, 0x73, // ges/Kids
+ 0x5b, 0x33, 0x20, 0x30, 0x20, 0x52, 0x5d, 0x2f, // [3 0 R]/
+ 0x43, 0x6f, 0x75, 0x6e, 0x74, 0x20, 0x31, 0x3e, // Count 1>
+ 0x3e, 0x0a, 0x65, 0x6e, 0x64, 0x6f, 0x62, 0x6a, // >\nendobj
+ 0x0a, 0x33, 0x20, 0x30, 0x20, 0x6f, 0x62, 0x6a, // \n3 0 obj
+ 0x0a, 0x3c, 0x3c, 0x2f, 0x54, 0x79, 0x70, 0x65, // \n<>\nendobj
+ 0x6a, 0x0a, 0x78, 0x72, 0x65, 0x66, 0x0a, 0x30, // j\nxref\n0
+ 0x20, 0x34, 0x0a, 0x30, 0x30, 0x30, 0x30, 0x30, // 4\n00000
+ 0x30, 0x30, 0x30, 0x30, 0x30, 0x20, 0x36, 0x35, // 00000 65
+ 0x35, 0x33, 0x35, 0x20, 0x66, 0x20, 0x0a, 0x30, // 535 f \n0
+ 0x30, 0x30, 0x30, 0x30, 0x30, 0x30, 0x30, 0x30, // 00000000
+ 0x39, 0x20, 0x30, 0x30, 0x30, 0x30, 0x30, 0x20, // 9 00000
+ 0x6e, 0x20, 0x0a, 0x30, 0x30, 0x30, 0x30, 0x30, // n \n00000
+ 0x30, 0x30, 0x30, 0x37, 0x34, 0x20, 0x30, 0x30, // 00074 00
+ 0x30, 0x30, 0x30, 0x20, 0x6e, 0x20, 0x0a, 0x30, // 000 n \n0
+ 0x30, 0x30, 0x30, 0x30, 0x30, 0x30, 0x31, 0x32, // 00000012
+ 0x34, 0x20, 0x30, 0x30, 0x30, 0x30, 0x30, 0x20, // 4 00000
+ 0x6e, 0x20, 0x0a, 0x74, 0x72, 0x61, 0x69, 0x6c, // n \ntrail
+ 0x65, 0x72, 0x0a, 0x3c, 0x3c, 0x2f, 0x53, 0x69, // er\n<
+ 0x3e, 0x0a, 0x73, 0x74, 0x61, 0x72, 0x74, 0x78, // >\nstartx
+ 0x72, 0x65, 0x66, 0x0a, 0x32, 0x31, 0x36, 0x0a, // ref\n216\n
+ 0x25, 0x25, 0x45, 0x4f, 0x46 // %%EOF
+ ]);
+
+ return await pdfjs.getDocument({ data: pdfData }).promise;
+}
+
+// Mock the PDF resources map (since we can't import it from TypeScript)
+const PDFResourcesMap = new Map();
+
+// Mock utility functions to mimic the PDF inflator behavior
+function createPlaneBufferGeometry(width, height, widthSegments, heightSegments, flipY = true) {
+ const geometry = new PlaneGeometry(width, height, widthSegments, heightSegments);
+ if (flipY === false) {
+ const uv = geometry.getAttribute("uv");
+ for (let i = 0; i < uv.count; i++) {
+ uv.setY(i, 1.0 - uv.getY(i));
+ }
+ }
+ return geometry;
+}
+
+function addObject3DComponent(world, eid, object3D) {
+ world.eid2obj.set(eid, object3D);
+}
+
+// Recreate the inflatePDF function behavior for testing
+function mockInflatePDF(world, eid, params) {
+ addObject3DComponent(
+ world,
+ eid,
+ new Mesh(createPlaneBufferGeometry(1, 1, 1, 1, params.material.map?.flipY), params.material)
+ );
+ addComponent(world, MediaPDF, eid);
+ PDFResourcesMap.set(eid, params);
+ MediaPDF.pageNumber[eid] = 1;
+ return eid;
+}
+
+test("PDF inflator integration test - creates PDF entity with correct components", async t => {
+ const world = createMockWorld();
+ const eid = addEntity(world);
+
+ // Create mock canvas and texture
+ const canvas = new MockCanvas();
+ const canvasContext = canvas.getContext("2d");
+ const texture = new CanvasTexture(canvas);
+ const material = new MeshBasicMaterial({ map: texture });
+
+ // Create real PDF document
+ const pdf = await createTestPDF();
+
+ const params = {
+ pdf,
+ material,
+ canvas,
+ canvasContext,
+ pageNumber: 1
+ };
+
+ // Test the inflator behavior
+ const result = mockInflatePDF(world, eid, params);
+
+ // Verify return value
+ t.is(result, eid);
+
+ // Verify MediaPDF component was added
+ t.true(MediaPDF.pageNumber[eid] !== undefined);
+ t.is(MediaPDF.pageNumber[eid], 1);
+
+ // Verify resources were stored in the map
+ t.true(PDFResourcesMap.has(eid));
+ const storedResources = PDFResourcesMap.get(eid);
+ t.is(storedResources.pdf, pdf);
+ t.is(storedResources.material, material);
+ t.is(storedResources.canvas, canvas);
+ t.is(storedResources.canvasContext, canvasContext);
+ t.is(storedResources.pageNumber, 1);
+
+ // Verify Object3D was added to the world
+ t.true(world.eid2obj.has(eid));
+ const mesh = world.eid2obj.get(eid);
+ t.truthy(mesh);
+ t.is(mesh.material, material);
+ t.truthy(mesh.geometry);
+});
+
+test("PDF inflator handles different page numbers correctly", async t => {
+ const world = createMockWorld();
+ const eid = addEntity(world);
+
+ const canvas = new MockCanvas();
+ const canvasContext = canvas.getContext("2d");
+ const texture = new CanvasTexture(canvas);
+ const material = new MeshBasicMaterial({ map: texture });
+ const pdf = await createTestPDF();
+
+ const params = {
+ pdf,
+ material,
+ canvas,
+ canvasContext,
+ pageNumber: 3
+ };
+
+ mockInflatePDF(world, eid, params);
+
+ // Page number should be set to 1 (default), not the input pageNumber
+ t.is(MediaPDF.pageNumber[eid], 1);
+
+ // But the stored resources should preserve the original pageNumber
+ const storedResources = PDFResourcesMap.get(eid);
+ t.is(storedResources.pageNumber, 3);
+});
+
+test("PDF inflator creates mesh with correct geometry properties", async t => {
+ const world = createMockWorld();
+ const eid = addEntity(world);
+
+ const canvas = new MockCanvas();
+ const canvasContext = canvas.getContext("2d");
+ const texture = new CanvasTexture(canvas);
+ texture.flipY = false; // Simulate texture with flipY false
+ const material = new MeshBasicMaterial({ map: texture });
+ const pdf = await createTestPDF();
+
+ const params = {
+ pdf,
+ material,
+ canvas,
+ canvasContext,
+ pageNumber: 1
+ };
+
+ mockInflatePDF(world, eid, params);
+
+ const mesh = world.eid2obj.get(eid);
+ t.truthy(mesh.geometry);
+
+ // Verify geometry is a plane with correct dimensions
+ const positionAttribute = mesh.geometry.getAttribute("position");
+ t.truthy(positionAttribute);
+
+ // Verify UV coordinates exist (important for texture mapping)
+ const uvAttribute = mesh.geometry.getAttribute("uv");
+ t.truthy(uvAttribute);
+});
+
+test("PDF.js integration works with real PDF document", async t => {
+ const pdf = await createTestPDF();
+
+ // Verify we can access real PDF properties
+ t.is(pdf.numPages, 1);
+
+ // Verify we can get a page from the real PDF
+ const page = await pdf.getPage(1);
+ t.truthy(page);
+
+ // Verify the page has expected properties
+ const viewport = page.getViewport({ scale: 1.0 });
+ t.truthy(viewport);
+ t.is(typeof viewport.width, "number");
+ t.is(typeof viewport.height, "number");
+
+ // Verify the viewport has reasonable dimensions
+ t.true(viewport.width > 0);
+ t.true(viewport.height > 0);
+});
\ No newline at end of file
diff --git a/types/pdfjs-dist.d.ts b/types/pdfjs-dist.d.ts
new file mode 100644
index 0000000000..76b1051ee5
--- /dev/null
+++ b/types/pdfjs-dist.d.ts
@@ -0,0 +1,4 @@
+declare module "pdfjs-dist/webpack" {
+ const pdfjsLib: any;
+ export = pdfjsLib;
+}
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 974c0bd98b..454c71da28 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -9,9 +9,9 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const TOML = require("@iarna/toml");
-const fetch = require("node-fetch");
+// Note: using axios instead of node-fetch for consistency
const packageLock = require("./package-lock.json");
-const request = require("request");
+const axios = require("axios");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
function createHTTPSConfig() {
@@ -158,13 +158,13 @@ async function fetchAppConfigAndEnvironmentVars() {
};
// Load the Hubs Cloud instance's app config in development
- const appConfigsResponse = await fetch(`https://${host}/api/v1/app_configs`, { headers });
+ const appConfigsResponse = await axios.get(`https://${host}/api/v1/app_configs`, { headers });
- if (!appConfigsResponse.ok) {
+ if (appConfigsResponse.status !== 200) {
throw new Error(`Error fetching Hubs Cloud config "${appConfigsResponse.statusText}"`);
}
- const appConfig = await appConfigsResponse.json();
+ const appConfig = appConfigsResponse.data;
if (appConfig.theme?.themes) {
appConfig.theme.themes = JSON.parse(appConfig.theme.themes);
}
@@ -174,11 +174,11 @@ async function fetchAppConfigAndEnvironmentVars() {
return appConfig;
}
- const hubsConfigsResponse = await fetch(`https://${host}/api/ita/configs/hubs`, { headers });
+ const hubsConfigsResponse = await axios.get(`https://${host}/api/ita/configs/hubs`, { headers });
- const hubsConfigs = await hubsConfigsResponse.json();
+ const hubsConfigs = hubsConfigsResponse.data;
- if (!hubsConfigsResponse.ok) {
+ if (hubsConfigsResponse.status !== 200) {
throw new Error(`Error fetching Hubs Cloud config "${hubsConfigsResponse.statusText}"`);
}
@@ -279,17 +279,56 @@ module.exports = async (env, argv) => {
// Behind and environment var for now pending further testing
if (process.env.DEV_CSP_SOURCE) {
- const CSPResp = await fetch(`https://${process.env.DEV_CSP_SOURCE}/`);
- const remoteCSP = CSPResp.headers.get("content-security-policy");
- devServerHeaders["content-security-policy"] = remoteCSP;
- // .replaceAll("connect-src", "connect-src https://example.com");
+ const CSPResp = await axios.get(`https://${process.env.DEV_CSP_SOURCE}/`);
+ const remoteCSP = CSPResp.headers["content-security-policy"];
+ let csp = remoteCSP;
+
+ // Add the required script hash to script-src
+ const scriptHash = "'sha256-1OX1cqGDXGZOzQijoLpHf88OwS4EEX61lCMqICZfrGQ='";
+ if (csp.includes("script-src")) {
+ if (!csp.includes(scriptHash)) {
+ // Avoid duplicates
+ csp = csp.replace(/script-src[^;]+/, `$& ${scriptHash}`);
+ }
+ } else {
+ csp += `; script-src ${scriptHash}`;
+ }
+
+ // Add the new connect-src directive for cdn.jsdelivr.net
+ const connectSrcDomain = "https://cdn.jsdelivr.net";
+ if (csp.includes("connect-src")) {
+ if (!csp.includes(connectSrcDomain)) {
+ // Avoid duplicates
+ csp = csp.replace(/connect-src[^;]+/, `$& ${connectSrcDomain}`);
+ }
+ } else {
+ csp += `; connect-src ${connectSrcDomain}`;
+ }
+ devServerHeaders["content-security-policy"] = csp.trim().replace(/;;/g, ";"); // Clean up
}
const internalHostname = process.env.INTERNAL_HOSTNAME || "hubs.local";
return {
- cache: {
- type: "filesystem"
- },
+ cache:
+ argv.mode === "development"
+ ? {
+ type: "memory",
+ maxGenerations: 1
+ }
+ : {
+ type: "filesystem",
+ buildDependencies: {
+ config: [__filename]
+ },
+ compression: "gzip",
+ cacheDirectory: path.resolve(__dirname, "node_modules/.cache/webpack"),
+ store: "pack",
+ maxMemoryGenerations: 1,
+ hashAlgorithm: "xxhash64",
+ maxAge: 2592000000, // 30 days
+ allowCollectingMemory: true,
+ memoryCacheUnaffected: true
+ },
resolve: {
alias: {
// aframe and networked-aframe are still using commonjs modules. three and bitecs are peer dependanciees
@@ -334,9 +373,24 @@ module.exports = async (env, argv) => {
},
output: {
filename: "assets/js/[name]-[chunkhash].js",
- publicPath: process.env.BASE_ASSETS_PATH || ""
+ publicPath: process.env.BASE_ASSETS_PATH || "",
+ environment: {
+ // Enable modern features for ES2022 targets
+ arrowFunction: true,
+ bigIntLiteral: true,
+ const: true,
+ destructuring: true,
+ dynamicImport: true,
+ forOf: true,
+ module: true,
+ optionalChaining: true,
+ templateLiteral: true
+ }
+ },
+ target: ["web", "es2021"], // ES2021 for Safari 15+ (macOS 10.15, iOS 15.8), Chrome 91+, Firefox 91+
+ externals: {
+ // Removed globalThis external as it causes ES module errors
},
- target: ["web", "es5"], // use es5 for webpack runtime to maximize compatibility
devtool: argv.mode === "production" ? "source-map" : "inline-source-map",
devServer: {
client: {
@@ -391,12 +445,14 @@ module.exports = async (env, argv) => {
res.send();
} else {
const url = req.originalUrl.replace("/cors-proxy/", "");
- request({ url, method: req.method }, error => {
- if (error) {
+ axios({ url, method: req.method, responseType: "stream" })
+ .then(response => {
+ response.data.pipe(res);
+ })
+ .catch(error => {
console.error(`cors-proxy: error fetching "${url}"\n`, error);
- return;
- }
- }).pipe(res);
+ res.status(500).send("Proxy error");
+ });
}
});
@@ -423,6 +479,12 @@ module.exports = async (env, argv) => {
},
module: {
rules: [
+ {
+ test: /core-js.*\.js$/,
+ resolve: {
+ fullySpecified: false
+ }
+ },
{
test: /\.html$/,
loader: "html-loader",
@@ -438,8 +500,7 @@ module.exports = async (env, argv) => {
}
}
},
- // On legacy browsers we want to show a "unsupported browser" page. That page needs to run on older browsers so w set the targeet to ie11.
- // Note: We do not actually include any polyfills so the code in these files just needs to be written with bare minimum browser APIs
+ // Support utility files can use Safari 15+ compatible syntax
{
test: [
path.resolve(__dirname, "src", "utils", "configs.js"),
@@ -448,7 +509,7 @@ module.exports = async (env, argv) => {
],
loader: "babel-loader",
options: {
- presets: ["@babel/react", ["@babel/env", { targets: { ie: 11 } }]],
+ presets: ["@babel/react", "@babel/env"], // Use browserslist for modern target
plugins: require("./babel.config").plugins
}
},
@@ -476,7 +537,13 @@ module.exports = async (env, argv) => {
test: /\.js$/,
include: [path.resolve(__dirname, "src")],
// Exclude JS assets in node_modules because they are already transformed and often big.
- exclude: [path.resolve(__dirname, "node_modules")],
+ exclude: function (modulePath) {
+ // Exclude all node_modules except hubs, but include core-js for proper handling
+ if (/node_modules\/core-js/.test(modulePath)) {
+ return true; // Don't process core-js through babel
+ }
+ return /node_modules/.test(modulePath) && !/node_modules\/hubs/.test(modulePath);
+ },
loader: "babel-loader"
},
// pdfjs uses features that break in IOS14, so we want to run it through babel https://github.com/mozilla/pdf.js/issues/14327
@@ -492,7 +559,13 @@ module.exports = async (env, argv) => {
// and concurrently at dev time with ForkTsCheckerWebpackPlugin
test: /\.tsx?$/,
include: [path.resolve(__dirname, "src")],
- exclude: [path.resolve(__dirname, "node_modules")],
+ exclude: function (modulePath) {
+ // Exclude all node_modules except hubs, but include core-js for proper handling
+ if (/node_modules\/core-js/.test(modulePath)) {
+ return true; // Don't process core-js through babel
+ }
+ return /node_modules/.test(modulePath) && !/node_modules\/hubs/.test(modulePath);
+ },
loader: "babel-loader"
},
{
@@ -508,11 +581,22 @@ module.exports = async (env, argv) => {
localIdentName: "[name]__[local]__[hash:base64:5]",
exportLocalsConvention: "camelCase",
// TODO we ideally would be able to get rid of this but we have some global styles and many :local's that would become superfluous
- mode: "global"
+ mode: "global",
+ // Restore default export behavior for css-loader 7 compatibility
+ namedExport: false,
+ exportOnlyLocals: false
}
}
},
- "sass-loader"
+ {
+ loader: "sass-loader",
+ options: {
+ api: "modern-compiler",
+ sassOptions: {
+ silenceDeprecations: ["legacy-js-api", "import", "global-builtin", "mixed-decls"]
+ }
+ }
+ }
]
},
{
@@ -585,6 +669,8 @@ module.exports = async (env, argv) => {
]
},
optimization: {
+ moduleIds: "deterministic",
+ chunkIds: "deterministic",
splitChunks: {
maxAsyncRequests: 10,
maxInitialRequests: 10,
@@ -612,8 +698,24 @@ module.exports = async (env, argv) => {
chunks: "initial",
priority: 30
},
+ // Separate PDF.js into its own chunk since it's large
+ pdfjs: {
+ test: deepModuleDependencyTest(["pdfjs-dist"]),
+ name: "pdfjs",
+ chunks: "all",
+ priority: 35,
+ enforce: true
+ },
+ // Separate large media processing libraries
+ media: {
+ test: deepModuleDependencyTest(["three-mesh-bvh", "postprocessing", "troika-three-text", "html2canvas"]),
+ name: "media",
+ chunks: "all",
+ priority: 25,
+ enforce: true
+ },
store: {
- test: deepModuleDependencyTest(["phoenix", "jsonschema", "event-target-shim", "jwt-decode", "js-cookie"]),
+ test: deepModuleDependencyTest(["phoenix", "ajv", "event-target-shim", "jwt-decode", "js-cookie"]),
name: "store",
chunks: "initial",
priority: 20
@@ -625,7 +727,14 @@ module.exports = async (env, argv) => {
priority: 10
}
}
- }
+ },
+ // Improve performance and reduce warnings
+ mangleExports: "deterministic",
+ sideEffects: false,
+ // Add concatenation for better minification
+ concatenateModules: argv.mode === "production",
+ // Minimize the size of large assets
+ realContentHash: true
},
plugins: [
new ForkTsCheckerWebpackPlugin({
@@ -642,7 +751,8 @@ module.exports = async (env, argv) => {
THREE: "three"
}),
new BundleAnalyzerPlugin({
- analyzerMode: env && env.bundleAnalyzer ? "server" : "disabled"
+ analyzerMode: env && env.bundleAnalyzer ? "server" : "disabled",
+ analyzerPort: "auto" // Automatically find an available port
}),
// Each output page needs a HTMLWebpackPlugin entry
htmlPagePlugin({
@@ -732,6 +842,12 @@ module.exports = async (env, argv) => {
APP_CONFIG: appConfig
})
})
- ]
+ ],
+ stats: {
+ // Reduce noise in webpack output
+ modules: false,
+ modulesSpace: 0,
+ assetsSort: "size"
+ }
};
};