const dotenv = require("dotenv");

const fs = require("fs");

const path = require("path");

const selfsigned = require("selfsigned");

const webpack = require("webpack");

const cors = require("cors");

const HTMLWebpackPlugin = require("html-webpack-plugin");

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");

const packageLock = require("./package-lock.json");

const request = require("request");

const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");

function createHTTPSConfig() {

function getModuleDependencies(moduleName) {

function deepModuleDependencyTest(modulesArr) {

function createDefaultAppConfig() {

async function fetchAppConfigAndEnvironmentVars() {

function htmlPagePlugin({ filename, extraChunks = [], chunksSortMode, inject }) {

const threeExamplesDir = path.resolve(__dirname, "node_modules", "three", "examples");

const basisTranscoderPath = path.resolve(threeExamplesDir, "js", "libs", "basis", "basis_transcoder.js");

const dracoWasmWrapperPath = path.resolve(threeExamplesDir, "js", "libs", "draco", "gltf", "draco_wasm_wrapper.js");

const basisWasmPath = path.resolve(threeExamplesDir, "js", "libs", "basis", "basis_transcoder.wasm");

const dracoWasmPath = path.resolve(threeExamplesDir, "js", "libs", "draco", "gltf", "draco_decoder.wasm");

module.exports = async (env, argv) => {

env = env || {};

// Load environment variables from .env files.

// .env takes precedent over .defaults.env

// Previously defined environment variables are not overwritten

dotenv.config({ path: ".env" });

dotenv.config({ path: ".defaults.env" });

let appConfig = undefined;

/**

if (argv.mode !== "production" || env.bundleAnalyzer) {

if (env.loadAppConfig || process.env.LOAD_APP_CONFIG) {

if (!env.localDev) {

// Load and set the app config and environment variables from the remote server.

// A Hubs Cloud server or dev.reticulum.io.invalid can be used.

appConfig = await fetchAppConfigAndEnvironmentVars();

}

} else {

if (!env.localDev) {

// Use the default app config with all features enabled.

appConfig = createDefaultAppConfig();

}

}

if (env.localDev) {

const localDevHost = "hubs.local";

// Local Dev Environment (npm run local)

Object.assign(process.env, {

HOST: localDevHost,

RETICULUM_SOCKET_SERVER: localDevHost,

CORS_PROXY_SERVER: "hubs-proxy.local:4000",

NON_CORS_PROXY_DOMAINS: `${localDevHost},dev.reticulum.io.invalid`,

BASE_ASSETS_PATH: `https://${localDevHost}:8080/`,

RETICULUM_SERVER: `${localDevHost}:4000`,

POSTGREST_SERVER: "",

ITA_SERVER: "",

UPLOADS_HOST: `https://${localDevHost}:4000`

});

}

}

// In production, the environment variables are defined in CI or loaded from ita and

// the app config is injected into the head of the page by Reticulum.

const host = process.env.HOST_IP || env.localDev || env.remoteDev ? "hubs.local" : "localhost";

const liveReload = !!process.env.LIVE_RELOAD || false;

const devServerHeaders = {

"Access-Control-Allow-Origin": "*"

};

// 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 internalHostname = process.env.INTERNAL_HOSTNAME || "hubs.local";

return {

cache: {

type: "filesystem"

},

resolve: {

alias: {

// aframe and networked-aframe are still using commonjs modules. three and bitecs are peer dependanciees

// but they are "smart" and have builds for both ESM and CJS depending on if import or require is used.

// This forces the ESM version to be used otherwise we end up with multiple instances of the libraries,

// and for example AFRAME.THREE.Object3D !== THREE.Object3D in Hubs code, which breaks many things.

three$: path.resolve(__dirname, "./node_modules/three/build/three.module.js"),

bitecs$: path.resolve(__dirname, "./node_modules/bitecs/dist/index.mjs"),

// UMD libraries that need explicit module resolution to work with ES6 imports

"js-cookie": path.resolve(__dirname, "./node_modules/js-cookie/src/js.cookie.js"),

"jwt-decode": path.resolve(__dirname, "./node_modules/jwt-decode/lib/index.js"),

"event-target-shim": path.resolve(__dirname, "./node_modules/event-target-shim/dist/event-target-shim.mjs"),

"linkify-it": path.resolve(__dirname, "./node_modules/linkify-it/index.js"),

"hls.js": path.resolve(__dirname, "./node_modules/hls.js/dist/hls.js"),

"url-toolkit": path.resolve(__dirname, "./node_modules/url-toolkit/src/url-toolkit.js"),

// Fix for pdfjs-dist v4 ES module imports

"process/browser": path.resolve(__dirname, "./node_modules/process/browser.js"),

// TODO these aliases are reequired because `three` only "exports" stuff in examples/jsm

"three/examples/js/libs/basis/basis_transcoder.js": basisTranscoderPath,

"three/examples/js/libs/draco/gltf/draco_wasm_wrapper.js": dracoWasmWrapperPath,

"three/examples/js/libs/basis/basis_transcoder.wasm": basisWasmPath,

"three/examples/js/libs/draco/gltf/draco_decoder.wasm": dracoWasmPath

},

// Allows using symlinks in node_modules

symlinks: false,

fallback: {

// need to specify this manually because some random lodash code will try to access

// Buffer on the global object if it exists, so webpack will polyfill on its behalf

Buffer: false,

fs: false,

// Modern browsers have these APIs natively, no need for polyfills

stream: false,

path: false

},

extensions: [".mjs", ".ts", ".tsx", ".js", ".jsx"]

},

entry: {

support: path.join(__dirname, "src", "support.js"),

index: path.join(__dirname, "src", "index.js"),

hub: path.join(__dirname, "src", "hub.js"),

scene: path.join(__dirname, "src", "scene.js"),

avatar: path.join(__dirname, "src", "avatar.js"),

link: path.join(__dirname, "src", "link.js"),

discord: path.join(__dirname, "src", "discord.js"),

cloud: path.join(__dirname, "src", "cloud.js"),

signin: path.join(__dirname, "src", "signin.js"),

verify: path.join(__dirname, "src", "verify.js"),

tokens: path.join(__dirname, "src", "tokens.js"),

"whats-new": path.join(__dirname, "src", "whats-new.js"),

"webxr-polyfill": path.join(__dirname, "src", "webxr-polyfill.js")

},

output: {

filename: "assets/js/[name]-[chunkhash].js",

publicPath: process.env.BASE_ASSETS_PATH || ""

},

target: ["web", "es2020"], // use es2020 for modern browsers as defined in browserslistrc

devtool: argv.mode === "production" ? "source-map" : "inline-source-map",

devServer: {

client: {

overlay: {

errors: true,

warnings: false

}

},

server: {

type: "https",

options: createHTTPSConfig()

},

host: "0.0.0.0",

port: 8080,

allowedHosts: [host, internalHostname],

headers: devServerHeaders,

hot: liveReload,

liveReload: liveReload,

historyApiFallback: {

rewrites: [

{ from: /^\/link/, to: "/link.html" },

{ from: /^\/avatars/, to: "/avatar.html" },

{ from: /^\/scenes/, to: "/scene.html" },

{ from: /^\/signin/, to: "/signin.html" },

{ from: /^\/discord/, to: "/discord.html" },

{ from: /^\/cloud/, to: "/cloud.html" },

{ from: /^\/verify/, to: "/verify.html" },

{ from: /^\/tokens/, to: "/tokens.html" },

{ from: /^\/whats-new/, to: "/whats-new.html" }

]

},

setupMiddlewares: (middlewares, { app }) => {

}

},

performance: {

// Ignore media and sourcemaps when warning about file size.

assetFilter(assetFilename) {

return !/\.(map|png|jpg|gif|glb|webm)$/.test(assetFilename);

}

},

module: {

rules: [

// Force CommonJS handling for specific problematic modules - must be first rule

{

test: /\.js$/,

include: function (modulePath) {

},

type: "javascript/auto",

parser: {

requireEnsure: false,

requireInclude: false,

amd: false

}

},

{

test: /\.html$/,

loader: "html-loader",

options: {

minimize: false, // This is handled by HTMLWebpackPlugin

sources: {

list: [

{ tag: "img", attribute: "src", type: "src" },

{ tag: "a-asset-item", attribute: "src", type: "src" },

{ tag: "audio", attribute: "src", type: "src" },

{ tag: "source", attribute: "src", type: "src" }

]

}

}

},

// On legacy browsers we want to show a "unsupported browser" page. That page needs to run on older browsers so w set the target 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

{

test: [

path.resolve(__dirname, "src", "utils", "configs.js"),

path.resolve(__dirname, "src", "utils", "i18n.js"),

path.resolve(__dirname, "src", "support.js")

],

loader: "babel-loader",

options: {

presets: ["@babel/react", ["@babel/env", { targets: { ie: 11 } }]],

plugins: require("./babel.config").plugins

}

},

// Some JS assets are loaded at runtime and should be copied unmodified and loaded using file-loader

{

test: [basisTranscoderPath, dracoWasmWrapperPath],

loader: "file-loader",

options: {

outputPath: "assets/raw-js",

name: "[name]-[contenthash].[ext]"

}

},

// TODO worker-loader has been deprecated, but we need "inline" support which is not available yet

// ideally instead of inlining workers we should serve them off the root domain instead of CDN.

{

test: /\.worker\.js$/,

loader: "worker-loader",

options: {

filename: "assets/js/[name]-[contenthash].js",

publicPath: "/",

inline: "no-fallback"

}

},

{

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")],

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

// Also handle .mjs files from pdfjs-dist v4

{

test: /\.(js|mjs)$/,

include: [path.resolve(__dirname, "node_modules", "pdfjs-dist")],

loader: "babel-loader",

type: "javascript/auto",

resolve: {

fullySpecified: false

}

},

{

// We use babel to handle typescript so that features are correctly polyfilled for our targeted browsers. It also ends up being

// a good deal faster since it just strips out types. It does NOT typecheck. Typechecking is handled at build time by `npm run check`

// and concurrently at dev time with ForkTsCheckerWebpackPlugin

test: /\.tsx?$/,

include: [path.resolve(__dirname, "src")],

exclude: [path.resolve(__dirname, "node_modules")],

loader: "babel-loader"

},

{

test: /\.(scss|css)$/,

use: [

{

loader: MiniCssExtractPlugin.loader

},

{

loader: "css-loader",

options: {

modules: {

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"

}

}

},

"sass-loader"

]

},

{

test: /\.svg$/,

include: [path.resolve(__dirname, "src", "react-components")],

use: [

{

loader: "@svgr/webpack",

options: {

titleProp: true,

replaceAttrValues: { "#000": "currentColor" },

exportType: "named",

svgo: true,

svgoConfig: {

plugins: [

{

name: "preset-default",

params: {

overrides: {

removeViewBox: false,

mergePaths: false,

convertShapeToPath: false,

removeHiddenElems: false

}

}

}

]

}

}

}

]

},

{

oneOf: [

{ resourceQuery: /inline/, type: "asset/inline" },

{

test: /\.(png|jpg|gif|glb|ogg|mp3|mp4|wav|woff2|webm|3dl|cube)$/,

type: "asset/resource",

generator: {

// move required assets to output dir and add a hash for cache busting

// Make asset paths relative to /src

filename: function ({ filename }) {

}

}

}

]

},

{

test: /\.(wasm)$/,

type: "javascript/auto",

use: {

loader: "file-loader",

options: {

outputPath: "assets/wasm",

name: "[name]-[contenthash].[ext]"

}

}

},

{

test: /\.(glsl|frag|vert)$/,

use: { loader: "raw-loader" }

}

]

},

optimization: {

splitChunks: {

maxAsyncRequests: 10,

maxInitialRequests: 10,

cacheGroups: {

frontend: {

test: deepModuleDependencyTest([

"react",

"react-dom",

"prop-types",

"raven-js",

"react-intl",

"classnames",

"react-router",

"@fortawesome/fontawesome-svg-core",

"@fortawesome/free-solid-svg-icons",

"@fortawesome/react-fontawesome"

]),

name: "frontend",

chunks: "initial",

priority: 40

},

engine: {

test: deepModuleDependencyTest(["aframe", "three"]),

name: "engine",

chunks: "initial",

priority: 30

},

store: {

test: deepModuleDependencyTest(["phoenix", "jsonschema", "event-target-shim", "jwt-decode", "js-cookie"]),

name: "store",

chunks: "initial",

priority: 20

},

hubVendors: {

test: /[\\/]node_modules[\\/]/,

name: "hub-vendors",

chunks: chunk => chunk.name === "hub",

priority: 10

}

}

}

},

plugins: [

new ForkTsCheckerWebpackPlugin({

typescript: {

diagnosticOptions: {

semantic: true,

syntactic: false // this will already fail in the babel step

}

}

}),

new webpack.ProvidePlugin({

process: "process/browser",

// TODO we should bee direclty importing THREE stuff when we need it

THREE: "three"

}),

new BundleAnalyzerPlugin({

analyzerMode: env && env.bundleAnalyzer ? "server" : "disabled"

}),

// Each output page needs a HTMLWebpackPlugin entry

htmlPagePlugin({

filename: "index.html",

extraChunks: ["support"],

chunksSortMode: "manual"

}),

htmlPagePlugin({

filename: "hub.html",

extraChunks: ["webxr-polyfill", "support"],

chunksSortMode: "manual",

inject: "head"

}),

htmlPagePlugin({

filename: "scene.html",

extraChunks: ["support"],

chunksSortMode: "manual",

inject: "head"

}),

htmlPagePlugin({

filename: "avatar.html",

extraChunks: ["support"],

chunksSortMode: "manual",

inject: "head"

}),

htmlPagePlugin({

filename: "link.html",

extraChunks: ["support"],

chunksSortMode: "manual"

}),

htmlPagePlugin({

filename: "discord.html"

}),

htmlPagePlugin({

filename: "whats-new.html",

inject: "head"

}),

htmlPagePlugin({

filename: "cloud.html",

inject: "head"

}),

htmlPagePlugin({

filename: "signin.html"

}),

htmlPagePlugin({

filename: "verify.html"

}),

htmlPagePlugin({

filename: "tokens.html"

}),

new CopyWebpackPlugin({

patterns: [

{

from: "src/hub.service.js",

to: "hub.service.js"

}

]

}),

new CopyWebpackPlugin({

patterns: [

{

from: "src/schema.toml",

to: "schema.toml"

}

]

}),

// Extract required css and add a content hash.

new MiniCssExtractPlugin({

filename: "assets/stylesheets/[name]-[contenthash].css"

}),

// Define process.env variables in the browser context.

new webpack.DefinePlugin({

"process.env": JSON.stringify({

NODE_ENV: argv.mode,

SHORTLINK_DOMAIN: process.env.SHORTLINK_DOMAIN,

RETICULUM_SERVER: process.env.RETICULUM_SERVER,

RETICULUM_SOCKET_SERVER: process.env.RETICULUM_SOCKET_SERVER,

THUMBNAIL_SERVER: process.env.THUMBNAIL_SERVER,

CORS_PROXY_SERVER: process.env.CORS_PROXY_SERVER,

NON_CORS_PROXY_DOMAINS: process.env.NON_CORS_PROXY_DOMAINS,

BUILD_VERSION: process.env.BUILD_VERSION,

SENTRY_DSN: process.env.SENTRY_DSN,

GA_TRACKING_ID: process.env.GA_TRACKING_ID,

POSTGREST_SERVER: process.env.POSTGREST_SERVER,

UPLOADS_HOST: process.env.UPLOADS_HOST,

BASE_ASSETS_PATH: process.env.BASE_ASSETS_PATH,

APP_CONFIG: appConfig

})

})

]

};