2020-04-21 17:49:52 -07:00
|
|
|
{
|
|
|
|
"name": "impress-2020-app",
|
|
|
|
"version": "0.1.0",
|
|
|
|
"private": true,
|
|
|
|
"dependencies": {
|
2021-09-30 18:37:09 -07:00
|
|
|
"@apollo/client": "^3.4.15",
|
2020-04-22 14:02:23 -07:00
|
|
|
"@apollographql/graphql-playground-html": "^1.6.24",
|
2020-09-02 03:06:09 -07:00
|
|
|
"@auth0/auth0-react": "^1.0.0",
|
2021-02-02 16:00:49 -08:00
|
|
|
"@chakra-ui/icons": "^1.0.4",
|
2021-04-30 12:48:03 -07:00
|
|
|
"@chakra-ui/react": "^1.6.0",
|
2021-02-02 16:00:49 -08:00
|
|
|
"@chakra-ui/theme-tools": "^1.0.3",
|
2020-12-25 09:07:59 -08:00
|
|
|
"@emotion/react": "^11.1.4",
|
|
|
|
"@emotion/styled": "^11.0.0",
|
2020-05-18 00:11:18 -07:00
|
|
|
"@loadable/component": "^5.12.0",
|
2020-10-09 08:55:03 -07:00
|
|
|
"@sendgrid/mail": "^7.2.6",
|
2021-01-16 10:59:54 -08:00
|
|
|
"@sentry/react": "^5.30.0",
|
|
|
|
"@sentry/tracing": "^5.30.0",
|
2020-04-21 17:49:52 -07:00
|
|
|
"@testing-library/jest-dom": "^4.2.4",
|
|
|
|
"@testing-library/react": "^9.3.2",
|
|
|
|
"@testing-library/user-event": "^7.1.2",
|
2021-02-02 21:38:57 -08:00
|
|
|
"@types/node": "^14.14.22",
|
|
|
|
"@types/react": "^17.0.1",
|
|
|
|
"@types/react-dom": "^17.0.0",
|
2020-05-14 15:51:08 -07:00
|
|
|
"apollo-link-persisted-queries": "^0.2.2",
|
2021-02-02 19:07:38 -08:00
|
|
|
"apollo-server": "^2.19.2",
|
|
|
|
"apollo-server-core": "^2.19.2",
|
|
|
|
"apollo-server-env": "^3.0.0",
|
2020-08-04 18:39:31 -07:00
|
|
|
"aws-sdk": "^2.726.0",
|
2021-01-03 20:16:48 -08:00
|
|
|
"canvas": "^2.6.1",
|
2021-08-19 16:12:12 -07:00
|
|
|
"chrome-aws-lambda": "^10.1.0",
|
2020-04-22 13:03:32 -07:00
|
|
|
"dataloader": "^2.0.0",
|
2020-10-28 00:00:14 -07:00
|
|
|
"dompurify": "^2.2.0",
|
Bundle CreateJS, instead of loading async
So I finally started looking into the race condition that makes item previews sometimes fail to load, and as expected, it was that we were trying to load the movie before CreateJS had necessarily loaded. Usually the timing worked out, esp after a reload, but not under certain circumstances!
Anyway, I've been wanting for a while to just bundle them instead. That'll help us more eagerly load them when we need them, and not depend on external CDNs, and remove a bunch of loading state!
So yeah, I had to learn how the `easeljs` and `tweenjs` NPM packages did their bundling, and how to use `imports-loader` to let them just register straight onto `window`! But we got there and it's pretty nice tbh!
2021-06-16 18:00:25 -07:00
|
|
|
"easeljs": "^1.0.2",
|
2021-05-14 19:51:48 -07:00
|
|
|
"escape-html": "^1.0.3",
|
2021-04-30 12:48:03 -07:00
|
|
|
"framer-motion": "^4.1.11",
|
2021-02-02 19:07:38 -08:00
|
|
|
"graphql": "^15.5.0",
|
2021-08-07 23:13:52 -07:00
|
|
|
"honeycomb-beeline": "^2.7.4",
|
2021-09-02 18:34:24 -07:00
|
|
|
"immer": "^9.0.6",
|
2020-08-04 18:39:31 -07:00
|
|
|
"jimp": "^0.14.0",
|
2020-09-02 23:00:16 -07:00
|
|
|
"jsonwebtoken": "^8.5.1",
|
|
|
|
"jwks-rsa": "^1.9.0",
|
LRU caches to speed up outfit layer preload
The layer preloader already takes advantage of, and primes, the HTTP cache.
But we still do duplicate work, on every OutfitPreview render, to re-execute movie clip libraries, and create a movie clip to test for animations. The former is nontrivial cost, and the latter is often large cost. This can make even basic outfit changes slow, when there's no change to the movie clip layers and the player is paused!
Here, we add an LRU cache for movie clip libraries, and for the question of "is it animated?". This should speed up a number of places where we would reload the movie (including between toggling the item), and various changes that were triggering full movie clip rebuilds unnecessarily.
We _aren't_ solving here for the fact that toggling an animated item requires rebuilding the movie clip, which could conceivably be cached—but with some state management trickiness, because ideally it should be a separate clip for each context where it's being shown. Imo not yet worth the effort! (esp because I think users understand that toggling an animated item can be slow, whereas this was affecting _other_ actions way too much)
2021-04-16 20:16:56 -07:00
|
|
|
"lru-cache": "^6.0.0",
|
2020-04-22 13:03:32 -07:00
|
|
|
"mysql2": "^2.1.0",
|
2020-04-25 06:50:34 -07:00
|
|
|
"node-fetch": "^2.6.0",
|
2021-08-17 01:01:09 -07:00
|
|
|
"playwright-core": "^1.14.0",
|
2020-12-28 14:07:03 -08:00
|
|
|
"react": "^17.0.1",
|
2020-09-01 17:59:04 -07:00
|
|
|
"react-autosuggest": "^10.0.2",
|
2020-12-28 14:07:03 -08:00
|
|
|
"react-dom": "^17.0.1",
|
2021-03-29 19:46:21 -07:00
|
|
|
"react-icons": "^4.2.0",
|
2020-05-10 00:21:04 -07:00
|
|
|
"react-router-dom": "^5.1.2",
|
2021-06-12 04:45:23 -07:00
|
|
|
"react-router-hash-link": "^2.4.3",
|
2020-12-28 13:47:09 -08:00
|
|
|
"react-scripts": "^4.0.1",
|
2020-10-22 23:22:04 -07:00
|
|
|
"react-transition-group": "^4.3.0",
|
2021-06-19 12:36:19 -07:00
|
|
|
"react-virtualized": "^9.22.3",
|
2020-10-28 00:00:14 -07:00
|
|
|
"simple-markdown": "^0.7.2",
|
Bundle CreateJS, instead of loading async
So I finally started looking into the race condition that makes item previews sometimes fail to load, and as expected, it was that we were trying to load the movie before CreateJS had necessarily loaded. Usually the timing worked out, esp after a reload, but not under certain circumstances!
Anyway, I've been wanting for a while to just bundle them instead. That'll help us more eagerly load them when we need them, and not depend on external CDNs, and remove a bunch of loading state!
So yeah, I had to learn how the `easeljs` and `tweenjs` NPM packages did their bundling, and how to use `imports-loader` to let them just register straight onto `window`! But we got there and it's pretty nice tbh!
2021-06-16 18:00:25 -07:00
|
|
|
"tweenjs": "^1.0.2",
|
2021-02-02 21:38:57 -08:00
|
|
|
"typescript": "^4.1.3",
|
2020-10-22 23:22:04 -07:00
|
|
|
"xmlrpc": "^1.3.2"
|
2020-04-21 17:49:52 -07:00
|
|
|
},
|
|
|
|
"scripts": {
|
2021-05-04 18:46:02 -07:00
|
|
|
"prepare": "husky install",
|
2021-02-07 00:23:19 -08:00
|
|
|
"start": "TS_NODE_COMPILER=typescript-cached-transpile vercel dev",
|
2021-02-02 22:25:54 -08:00
|
|
|
"dev": "yarn build-cached-data && REACT_APP_IMPRESS_LOG_IN_AS=$IMPRESS_LOG_IN_AS react-scripts start",
|
2020-12-28 13:47:09 -08:00
|
|
|
"build": "yarn build-cached-data && react-scripts build",
|
2021-01-03 22:58:09 -08:00
|
|
|
"vercel-build": "yum install libuuid-devel libmount-devel && cp /lib64/{libuuid,libmount,libblkid}.so.1 node_modules/canvas/build/Release/",
|
2021-01-03 19:57:02 -08:00
|
|
|
"test": "react-scripts test --env=jsdom",
|
2021-02-04 22:19:10 -08:00
|
|
|
"cypress": "cypress open",
|
2020-04-23 01:08:00 -07:00
|
|
|
"eject": "react-scripts eject",
|
2020-08-11 22:07:56 -07:00
|
|
|
"mysql": "mysql --host=impress.openneo.net --user=$(dotenv -p IMPRESS_MYSQL_USER) --password=$(dotenv -p IMPRESS_MYSQL_PASSWORD) --database=openneo_impress",
|
2020-09-18 05:24:03 -07:00
|
|
|
"mysql-dev": "mysql --host=localhost --user=impress_2020_dev --password=impress_2020_dev --database=impress_2020_dev",
|
2020-08-17 18:23:39 -07:00
|
|
|
"mysql-admin": "mysql --host=impress.openneo.net --user=matchu --password --database=openneo_impress",
|
2020-09-18 05:24:03 -07:00
|
|
|
"mysqldump": "mysqldump --host=impress.openneo.net --user=$(dotenv -p IMPRESS_MYSQL_USER) --password=$(dotenv -p IMPRESS_MYSQL_PASSWORD) --column-statistics=0",
|
2020-10-22 20:32:02 -07:00
|
|
|
"download-mysql-schema": "yarn --silent mysqldump --no-data openneo_impress closet_hangers closet_lists items item_translations modeling_logs parents_swf_assets pet_types pet_states swf_assets users | sed 's/ AUTO_INCREMENT=[0-9]*//g' > scripts/setup-mysql-dev-schema.sql && yarn --silent mysqldump openneo_impress species species_translations colors color_translations zones zone_translations > scripts/setup-mysql-dev-constants.sql",
|
2020-09-18 05:24:03 -07:00
|
|
|
"setup-mysql": "yarn mysql-admin < scripts/setup-mysql.sql",
|
|
|
|
"setup-mysql-dev": "yarn mysql-dev < scripts/setup-mysql-dev-constants.sql && yarn mysql-dev < scripts/setup-mysql-dev-schema.sql",
|
2021-02-07 00:08:21 -08:00
|
|
|
"build-cached-data": "ts-node --compiler=typescript-cached-transpile --transpile-only -r dotenv/config scripts/build-cached-data.js",
|
|
|
|
"cache-asset-manifests": "ts-node --compiler=typescript-cached-transpile --transpile-only -r dotenv/config scripts/cache-asset-manifests.js",
|
2021-03-10 05:19:51 -08:00
|
|
|
"delete-user": "ts-node --compiler=typescript-cached-transpile --transpile-only -r dotenv/config scripts/delete-user.js",
|
2021-02-07 00:08:21 -08:00
|
|
|
"export-users-to-auth0": "ts-node --compiler=typescript-cached-transpile --transpile-only -r dotenv/config scripts/export-users-to-auth0.js"
|
2020-04-21 17:49:52 -07:00
|
|
|
},
|
|
|
|
"eslintConfig": {
|
2021-05-03 15:31:24 -07:00
|
|
|
"extends": [
|
|
|
|
"react-app",
|
|
|
|
"plugin:cypress/recommended"
|
|
|
|
],
|
2021-05-03 15:01:49 -07:00
|
|
|
"rules": {
|
|
|
|
"no-console": [
|
2021-05-04 14:26:44 -07:00
|
|
|
"warn",
|
2021-05-03 15:01:49 -07:00
|
|
|
{
|
|
|
|
"allow": [
|
|
|
|
"debug",
|
|
|
|
"info",
|
|
|
|
"warn",
|
|
|
|
"error"
|
|
|
|
]
|
|
|
|
}
|
2021-05-13 01:13:21 -07:00
|
|
|
],
|
|
|
|
"import/first": "off",
|
Bundle CreateJS, instead of loading async
So I finally started looking into the race condition that makes item previews sometimes fail to load, and as expected, it was that we were trying to load the movie before CreateJS had necessarily loaded. Usually the timing worked out, esp after a reload, but not under certain circumstances!
Anyway, I've been wanting for a while to just bundle them instead. That'll help us more eagerly load them when we need them, and not depend on external CDNs, and remove a bunch of loading state!
So yeah, I had to learn how the `easeljs` and `tweenjs` NPM packages did their bundling, and how to use `imports-loader` to let them just register straight onto `window`! But we got there and it's pretty nice tbh!
2021-06-16 18:00:25 -07:00
|
|
|
"import/no-webpack-loader-syntax": "off",
|
2021-05-13 18:11:44 -07:00
|
|
|
"no-unused-vars": "off",
|
|
|
|
"@typescript-eslint/no-unused-vars": [
|
2021-05-13 01:13:21 -07:00
|
|
|
"warn",
|
|
|
|
{
|
2021-05-13 18:11:44 -07:00
|
|
|
"varsIgnorePattern": "^unused",
|
|
|
|
"argsIgnorePattern": "^_+$|^e$"
|
2021-05-13 01:13:21 -07:00
|
|
|
}
|
2021-05-03 15:01:49 -07:00
|
|
|
]
|
|
|
|
}
|
2020-04-21 17:49:52 -07:00
|
|
|
},
|
2021-05-04 18:46:02 -07:00
|
|
|
"lint-staged": {
|
|
|
|
"*.{js,ts,tsx}": [
|
|
|
|
"eslint --max-warnings=0 --fix"
|
|
|
|
]
|
|
|
|
},
|
2020-04-21 17:49:52 -07:00
|
|
|
"browserslist": {
|
|
|
|
"production": [
|
|
|
|
">0.2%",
|
|
|
|
"not dead",
|
|
|
|
"not op_mini all"
|
|
|
|
],
|
|
|
|
"development": [
|
|
|
|
"last 1 chrome version",
|
|
|
|
"last 1 firefox version",
|
|
|
|
"last 1 safari version"
|
|
|
|
]
|
2020-04-21 20:32:53 -07:00
|
|
|
},
|
|
|
|
"devDependencies": {
|
2021-02-02 22:25:54 -08:00
|
|
|
"5to6-codemod": "^1.8.0",
|
2020-04-22 13:03:32 -07:00
|
|
|
"apollo-server-testing": "^2.12.0",
|
2020-09-02 15:26:33 -07:00
|
|
|
"auth0": "^2.28.0",
|
2021-05-04 16:07:00 -07:00
|
|
|
"cypress": "^7.2.0",
|
2021-04-16 03:04:39 -07:00
|
|
|
"cypress-plugin-snapshots": "^1.4.4",
|
2020-04-30 00:01:49 -07:00
|
|
|
"dotenv-cli": "^3.1.0",
|
2020-08-17 18:23:39 -07:00
|
|
|
"es6-promise-pool": "^2.5.0",
|
2021-05-03 15:31:24 -07:00
|
|
|
"eslint-plugin-cypress": "^2.11.2",
|
2021-05-04 18:46:02 -07:00
|
|
|
"husky": "^6.0.0",
|
2021-06-16 18:28:40 -07:00
|
|
|
"imports-loader": "^1.2.0",
|
2020-09-02 03:49:58 -07:00
|
|
|
"inquirer": "^7.3.3",
|
2021-01-03 19:57:02 -08:00
|
|
|
"jest-image-snapshot": "^4.3.0",
|
2021-05-04 18:46:02 -07:00
|
|
|
"lint-staged": "^10.5.4",
|
2021-08-19 16:12:12 -07:00
|
|
|
"playwright": "^1.14.0",
|
2020-07-22 21:03:04 -07:00
|
|
|
"prettier": "^2.0.5",
|
2021-02-02 21:38:57 -08:00
|
|
|
"react-is": "^16.13.1",
|
2021-02-02 22:25:54 -08:00
|
|
|
"ts-node": "^9.1.1",
|
2021-02-07 00:08:21 -08:00
|
|
|
"typescript-cached-transpile": "^0.0.6",
|
2021-05-13 18:11:44 -07:00
|
|
|
"typescript-eslint": "^0.0.1-alpha.0",
|
2021-02-06 22:45:35 -08:00
|
|
|
"vercel": "^21.2.3"
|
2020-04-21 17:49:52 -07:00
|
|
|
}
|
|
|
|
}
|