Update app: updated to nodejs 16, multiple packages and fixes (#104)

Main Changes:
Replaced redux-little-router package and deleted it
Updated to Nodejs v16
Updated packages:
storybook, jest, react-tooltip, jspdf, webpack (v5), scratch (-storage/-svg-renderer/-render-fonts/-paint/-audio/-blocks/-vm), serverless-offline, html-webpack-plugin, workbox-plugin, file-loader
deleted: netlify-lambda
Replaced svg loader for react components

Commits:

* added new library for redux/router, almost all replaced

* deleted all uses of redux-little-router

* run lint and fixes

* changed nodejs version of deployment

* fixed switch import, node version to 16

* replaced unsafe deprecated methods

* packages updated: storybook, jest, react-tooltip

* updated jspdf

* webpack to v5. Changes for v3 of react-intl, cant update yet. Project loading but with errors

* webpack compiling, svg errors stil

* fixed bugs from scratch-storage, replaced store for helper, its running!

* fixed serverless online bug, added catch to reject promise fix

* updated workbox plugin, replaced file-loader, new loader for svg react components

* deleted non valid option for webpack5

* modified netlify build command

* not using deprecated netlify package, webpack file to v5§

* added missing import

* deleted unused netlify-lambda

Author: cami-espinozaq

.gitignore

@@ -41,3 +41,6 @@ yarn-error.log
 
 # Jupyter Checkpoints
 .ipynb_checkpoints/
+
+# docker-compose
+docker-compose.yml

.storybook/main.js

@@ -21,4 +21,11 @@ module.exports = {
     // Return the altered config
     return config
   },
+  stories: [
+    {
+      directory: '../src',
+      files: ['**/*.stories.mdx', '**/*.stories.@(js|jsx|ts|tsx)'],
+    }
+  ],
+  framework: { name: "@storybook/react-webpack5" }
 }

.storybook/preview.js

@@ -1,12 +1,9 @@
 import React from 'react'
-import { configure, addDecorator } from '@storybook/react'
 import { Provider } from 'react-redux'
-import { createStore, combineReducers } from 'redux'
+import { createStore } from 'redux'
 import '../src/css/defaults.css'
 import '../src/css/typography.css'
 
-const req = require.context('../src/components', true, /\.stories\.jsx?$/)
-
 const BackgroundDecorator = (story) => (
   <div style={{ backgroundColor: 'darkorange', minHeight: '100vh' }}>
     {story()}
@@ -19,7 +16,6 @@ const ReduxDecorator = (story) => (
   <Provider store={mockStore}>{story()}</Provider>
 )
 
-addDecorator(BackgroundDecorator)
-addDecorator(ReduxDecorator)
-
-configure(req, module)
+export default {
+  decorators: [BackgroundDecorator, ReduxDecorator],
+}

assets/img/maus_question.svg

@@ -1,11 +1,27 @@
+// module.exports = {
+//   plugins: [
+//     '@babel/syntax-dynamic-import',
+//     '@babel/transform-async-to-generator',
+//     [
+//       'react-intl',
+//       {
+//         messagesDir: './translations/messages/',
+//       },
+//     ],
+//   ],
+//   presets: ['@babel/env', '@babel/react'],
+// }
+
+// for react-intl v3
 module.exports = {
   plugins: [
     '@babel/syntax-dynamic-import',
     '@babel/transform-async-to-generator',
     [
-      'react-intl',
+      'formatjs',
       {
-        messagesDir: './translations/messages/',
+        idInterpolationPattern: '[sha512:contenthash:base64:6]',
+        ast: true,
       },
     ],
   ],

babel.config.js

@@ -2,31 +2,31 @@ version: '3.5'
 
 services:
   entry:
-    image: traefik
+    image: traefik:1.7
     command: -c /dev/null --api --docker --docker.domain=localhost
     volumes:
       - /var/run/docker.sock:/var/run/docker.sock
     ports:
-      - "8601:80"
+      # - "8601:80"
       - "8080:8080"
     labels:
       traefik.enable: false
-  app:
-    image: node:alpine
-    command: /src/node_modules/.bin/yarn start
-    working_dir: /src
-    environment:
-      DOCKER_WATCH: 1
-      AWS_ACCESS_KEY_ID: shaiChotufuochizi7ei
-      AWS_SECRET_ACCESS_KEY: thaacooG9iequeexooreiKoh9daihoo8ta0aifoh1ChahBi1ko
-      AWS_REGION: eu-central-1
-    volumes:
-      - ".:/src"
-    labels:
-      traefik.port: 8601
-      traefik.frontend.rule: Host:localhost
+  # app:
+  #   image: node:16.3.0-alpine
+  #   command: /src/node_modules/.bin/yarn start
+  #   working_dir: /src
+  #   environment:
+  #     DOCKER_WATCH: 1
+  #     AWS_ACCESS_KEY_ID: shaiChotufuochizi7ei
+  #     AWS_SECRET_ACCESS_KEY: thaacooG9iequeexooreiKoh9daihoo8ta0aifoh1ChahBi1ko
+  #     AWS_REGION: eu-central-1
+  #   volumes:
+  #     - ".:/src"
+  #   labels:
+  #     traefik.port: 8601
+  #     traefik.frontend.rule: Host:localhost
   backend:
-    image: node:alpine
+    image: node:16.3.0-alpine
     command: /src/node_modules/.bin/yarn start:backend -o 0.0.0.0
     working_dir: /src
     environment:

docker-compose.yml

@@ -5,9 +5,9 @@
   "main": "./dist/scratch-gui.js",
   "scripts": {
     "postinstall": "patch-package",
-    "build": "webpack --colors --bail",
-    "build:backend:netlify": "netlify-lambda build src/backend -c webpack.netlify-functions.js",
-    "build:netlify": "yarn assets:netlify && yarn build && yarn build:backend:netlify",
+    "build": "webpack --bail",
+    "build:backend:netlify": "webpack -c webpack.netlify-functions.js",
+    "build:netlify": "yarn build && yarn build:backend:netlify",
     "build:patternlib": "build-storybook -o .patternlib",
     "build:printserver:win": "pkg -t node10-win --out-path dist/ scripts/print-server.js",
     "clean": "rimraf ./build && mkdirp build && rimraf ./dist && mkdirp dist",
@@ -19,8 +19,8 @@
     "i18n:src": "babel src > tmp.js && rimraf tmp.js && build-i18n-src ./translations/messages/ ./translations/",
     "import-sprites": "ts-node scripts/import-sprites.ts",
     "lint": "eslint . --ext .js,.jsx",
+    "lint:fix": "eslint --fix --ext .js,.jsx .",
     "assets:download": "aws s3 sync s3://code4maus-assets assets",
-    "assets:netlify": "AWS_ACCESS_KEY_ID=$DEPLOY_AWS_ACCESS_KEY_ID AWS_SECRET_ACCESS_KEY=$DEPLOY_AWS_SECRET_ACCESS_KEY npm run assets:download",
     "assets:upload": "aws s3 sync --exclude .gitkeep --exclude .DS_Store assets s3://code4maus-assets",
     "start": "webpack-dev-server",
     "start:backend": "serverless offline",
@@ -42,10 +42,8 @@
     "@babel/preset-env": "^7.3.1",
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.4.4",
-    "@storybook/addon-actions": "^5.3.17",
-    "@storybook/addon-links": "^5.3.17",
-    "@storybook/addons": "^5.3.17",
-    "@storybook/react": "^5.3.17",
+    "@storybook/react": "^6.0.0",
+    "@svgr/webpack": "^8.1.0",
     "@types/node": "^11.11.3",
     "arraybuffer-loader": "^1.0.3",
     "autoprefixer": "^9.5.0",
@@ -56,7 +54,7 @@
     "bowser": "^1.9.3",
     "chromedriver": "^2.39.0",
     "classnames": "^2.2.5",
-    "copy-webpack-plugin": "^5.0.1",
+    "copy-webpack-plugin": "^7.0.0",
     "css-loader": "^3.4.2",
     "dotenv": "^7.0.0",
     "envsubstr": "^0.0.1",
@@ -77,9 +75,9 @@
     "get-user-media-promise": "^1.1.4",
     "gh-pages": "^2.0.1",
     "globby": "^9.1.0",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^5.0.0",
     "immutable": "^3.8.2",
-    "jest": "^24.5.0",
+    "jest": "^28.0.2",
     "lodash.bindall": "^4.4.0",
     "lodash.debounce": "^4.0.8",
     "lodash.defaultsdeep": "^4.6.0",
@@ -90,7 +88,6 @@
     "minilog": "^3.1.0",
     "mkdirp": "^0.5.1",
     "nanoid": "^2.0.1",
-    "netlify-lambda": "1.4.3",
     "patch-package": "^6.2.1",
     "pkg": "^4.3.7",
     "platform": "^1.3.5",
@@ -103,64 +100,60 @@
     "prop-types": "^15.5.10",
     "raf": "^3.4.0",
     "raw-loader": "^2.0.0",
-    "react": "^16.8.4",
+    "react": "16.14.0",
     "react-contextmenu": "^2.9.2",
-    "react-dom": "^16.8.4",
+    "react-dom": "16.14.0",
     "react-draggable": "^3.0.5",
-    "react-intl": "^2.4.0",
+    "react-intl-2": "npm:react-intl@3.2.0",
     "react-intl-redux": "^2.1.0",
     "react-markdown-loader": "^1.1.14",
     "react-modal": "^3.4.4",
-    "react-popover": "^0.5.7",
     "react-redux": "^6.0.1",
     "react-responsive": "^6.1.1",
     "react-style-proptype": "^3.2.1",
     "react-tabs": "^3.0.0",
     "react-test-renderer": "^16.8.4",
-    "react-tooltip": "^3.6.1",
+    "react-tooltip": "^5.28.0",
     "react-virtualized": "^9.19.1",
     "redux": "^4.0.1",
-    "redux-little-router": "^15.1.1",
     "redux-logger": "^3.0.6",
     "redux-mock-store": "^1.2.3",
     "redux-throttle": "^0.1.1",
     "request": "^2.88.0",
     "request-promise-native": "^1.0.5",
     "rimraf": "^2.6.1",
-    "scratch-paint": "0.2.0-prerelease.20181120191526",
-    "scratch-render": "0.1.0-prerelease.20210325231800",
-    "scratch-render-fonts": "1.0.0-prerelease.20210401210003",
-    "scratch-storage": "1.2.2",
-    "scratch-svg-renderer": "0.2.0-prerelease.20210511195415",
+    "scratch-paint": "2.2.21",
+    "scratch-render": "1.0.38",
+    "scratch-render-fonts": "^1.0.0",
+    "scratch-storage": "2.3.3",
+    "scratch-svg-renderer": "1.0.0",
     "selenium-webdriver": "4.0.0-alpha.1",
     "serverless": "^1.83.3",
     "serverless-domain-manager": "^3.1.0",
     "serverless-dotenv-plugin": "^2.0.1",
-    "serverless-offline": "^4.9.2",
+    "serverless-offline": "^8.8.0",
     "serverless-pseudo-parameters": "^2.2.0",
     "serverless-webpack": "^5.2.0",
     "startaudiocontext": "1.2.1",
     "style-loader": "^0.23.1",
     "svg-to-image": "^1.1.3",
-    "svgo": "^1.2.2",
-    "svgo-loader": "^2.2.0",
+    "svgo-loader": "^4.0.0",
     "text-encoding": "^0.7.0",
     "ts-node": "^8.0.2",
     "typescript": "^3.2.4",
     "wav-encoder": "^1.3.0",
     "web-audio-test-api": "^0.5.2",
-    "webpack": "^4.25.1",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.10",
+    "webpack": "^5.67.0",
+    "webpack-cli": "^5.0.0",
+    "webpack-dev-server": "^4.0.10",
     "webpack-visualizer-plugin": "^0.1.11",
-    "workbox-webpack-plugin": "^4.1.1",
+    "workbox-webpack-plugin": "^5.1.3",
     "xhr": "^2.5.0",
     "yarn": "^1.9.4"
   },
   "jest": {
     "setupFiles": [
-      "raf/polyfill",
-      "<rootDir>/test/helpers/enzyme-setup.js"
+      "raf/polyfill"
     ],
     "testPathIgnorePatterns": [
       "src/test.js"
@@ -171,23 +164,31 @@
     }
   },
   "dependencies": {
+    "@formatjs/intl-pluralrules": "^5.2.14",
+    "@formatjs/intl-relativetimeformat": "^11.2.14",
     "@react-hook/window-size": "^1.0.13",
     "audio-context": "^1.0.3",
+    "babel-plugin-formatjs": "^10.5.16",
+    "connected-react-router": "^6.9.3",
     "cors": "^2.8.5",
     "ejs-loader": "^0.3.3",
     "express": "^4.16.4",
     "ffmpeg.js": "^3.1.9001",
     "gifshot": "^0.4.5",
     "hls.js": "^0.12.4",
     "html2canvas": "^1.0.0-alpha.12",
-    "jspdf": "^1.5.3",
+    "jspdf": "^2.5.1",
     "lodash.keyby": "^4.6.0",
     "multer": "^1.4.1",
     "piano-analytics-js": "^6.8.3",
     "qrcode.react": "^0.9.3",
-    "scratch-audio": "0.1.0-prerelease.20200528195344",
-    "scratch-blocks": "0.1.0-prerelease.20210529032338",
-    "scratch-vm": "0.2.0-prerelease.20210510162256",
+    "react-intl": "2.9.0",
+    "react-popover": "^0.5.10",
+    "react-router": "5.0.0",
+    "react-router-dom": "5.0.0",
+    "scratch-audio": "1.0.0",
+    "scratch-blocks": "1.1.6",
+    "scratch-vm": "3.0.9",
     "shortid": "^2.2.14",
     "slugg": "^1.2.1",
     "uuid": "^3.3.2",
@@ -197,7 +198,9 @@
     "printer": "^0.2.2"
   },
   "resolutions": {
-    "history": "4.7.2"
+    "history": "4.9.0",
+    "cheerio": "1.0.0-rc.12",
+    "isomorphic-dompurify": "1.9.0"
   },
   "prettier": {
     "tabWidth": 2,

package.json

@@ -2,7 +2,7 @@ service: hackingstudio-code4maus
 
 provider:
   name: aws
-  runtime: nodejs14.x
+  runtime: nodejs16.x
   region: eu-central-1
   role: 'arn:aws:iam::#{AWS::AccountId}:role/hackingstudio/code4maus/hackingstudio-code4maus-functions'
   stage: ${file(scripts/env.js):stage}

serverless.yml

@@ -10,8 +10,6 @@ const s3 = initS3(customEndpoint)
 export const handler = async (event) => {
   const { filename } = JSON.parse(event.body)
 
-  console.log("filename for handler", filename)
-
   if (!filename) {
     return respond.error(400, "Missing request body key 'filename'.")
   }
@@ -21,8 +19,6 @@ export const handler = async (event) => {
     Key: `data/assets/${filename}`,
   }
 
-  console.log("params", params)
-
   try {
     await s3.headObject(params).promise()
     return respond.error(409, 'Asset already exists.', { exists: true })