From 2884914cbe87b12b7c0cb522c7817f56da482772 Mon Sep 17 00:00:00 2001 From: Matchu Date: Thu, 10 Aug 2023 17:19:50 -0700 Subject: [PATCH] Fix createjs loading Tricky little thing! Directly importing I think doesn't work because it thinks `this` refers to something other than `window`? This fixes it tho! --- .../wardrobe-2020/components/OutfitMovieLayer.js | 11 ++++++++--- package.json | 2 +- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/app/javascript/wardrobe-2020/components/OutfitMovieLayer.js b/app/javascript/wardrobe-2020/components/OutfitMovieLayer.js index ae9d016d..9bf0906c 100644 --- a/app/javascript/wardrobe-2020/components/OutfitMovieLayer.js +++ b/app/javascript/wardrobe-2020/components/OutfitMovieLayer.js @@ -5,11 +5,16 @@ import { Box, Grid, useToast } from "@chakra-ui/react"; import { loadImage, logAndCapture, safeImageUrl } from "../util"; import usePreferArchive from "./usePreferArchive"; -// Importing EaselJS and TweenJS puts them directly into the `window` object! +// Import EaselJS and TweenJS as strings to run in a global context! // The bundled scripts are built to attach themselves to `window.createjs`, and // `window.createjs` is where the Neopets movie libraries expects to find them! -import "easeljs/lib/easeljs"; -import "tweenjs/lib/tweenjs"; +// +// TODO: Is there a nicer way to do this within esbuild? Would be nice to have +// builds of these libraries that just play better in the first place... +import easelSource from "easeljs/lib/easeljs.min.js"; +import tweenSource from "tweenjs/lib/tweenjs.min.js"; +new Function(easelSource).call(window); +new Function(tweenSource).call(window); function OutfitMovieLayer({ libraryUrl, diff --git a/package.json b/package.json index 13a758e2..ccd70847 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,6 @@ "tweenjs": "^1.0.2" }, "scripts": { - "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets --loader:.js=jsx --loader:.png=file --loader:.svg=file" + "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets --loader:.js=jsx --loader:.png=file --loader:.svg=file --loader:.min.js=text" } }