update babel, postcss and webpack

.dockerignore

@@ -1,4 +1,7 @@
 .db
+.testdb
+.codexdocsrc
+
 node_modules
 docker
 test

.postcssrc

@@ -6,8 +6,8 @@ plugins:
     postcss-media-minmax: {}
     postcss-custom-selectors: {}
     postcss-nested-ancestors: {}
-    postcss-nesting: {}
     postcss-nested: {}
+    postcss-nesting: {}
     postcss-color-mod-function: {}
     postcss-color-hex-alpha: {}
     postcss-font-family-system-ui: {}

docker-compose.yml

@@ -5,7 +5,7 @@ services:
       dockerfile: docker/Dockerfile.prod
       context: .
     ports:
-      - 5000:3000
+      - "5005:3000"
     volumes:
       - ./.codexdocsrc:/usr/src/app/.codexdocsrc:ro
       - ./config/production.json:/usr/src/app/config/production.json:ro

docker/Dockerfile.prod

@@ -11,4 +11,4 @@ COPY . .
 
 RUN yarn compile
 
-CMD ["yarn", "start"]
+CMD ["yarn", "start:ts"]

package.json

@@ -14,7 +14,7 @@
     "test": "cross-env NODE_ENV=testing mocha --recursive ./dist/test --exit",
     "test:ts": "cross-env NODE_ENV=testing ts-mocha ./src/test/*.ts ./src/test/**/*.ts --exit",
     "lint": "eslint --fix --cache --ext .ts ./src/backend",
-    "build": "webpack ./src/frontend/js/app.js --o='./public/dist/[name].bundle.js' --output-library=Docs --output-public-path=/dist/ -p --mode=production",
+    "build": "webpack --mode=production",
     "build:dev": "webpack ./src/frontend/js/app.js --o='./public/dist/[name].bundle.js' --output-library=Docs --output-public-path=/dist/ -p --mode=development --watch",
     "precommit": "yarn lint && yarn test:ts",
     "generatePassword:ts": "ts-node ./src/generatePassword.ts",
@@ -50,10 +50,10 @@
     "uuid4": "^2.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.0",
+    "@babel/core": "^7.17.5",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/polyfill": "^7.2.5",
+    "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.1.0",
+    "@babel/preset-env": "^7.16.11",
     "@codexteam/misprints": "^1.0.0",
     "@editorjs/checklist": "^1.3.0",
     "@editorjs/code": "^2.7.0",
@@ -93,14 +93,14 @@
     "@types/twig": "^1.12.6",
     "@typescript-eslint/eslint-plugin": "^4.28.5",
     "@typescript-eslint/parser": "^4.28.5",
-    "autoprefixer": "^9.1.3",
+    "autoprefixer": "^10.4.2",
     "babel": "^6.23.0",
     "babel-eslint": "^10.0.1",
-    "babel-loader": "^8.0.2",
+    "babel-loader": "^8.2.3",
     "chai": "^4.1.2",
     "chai-http": "^4.0.0",
-    "css-loader": "^1.0.0",
+    "css-loader": "^6.7.0",
-    "cssnano": "^4.1.0",
+    "cssnano": "^5.1.0",
     "eslint": "^7.31.0",
     "eslint-config-codex": "^1.6.2",
     "eslint-plugin-chai-friendly": "^0.4.1",
@@ -108,31 +108,31 @@
     "eslint-plugin-node": "^8.0.1",
     "highlight.js": "^11.1.0",
     "husky": "^1.1.2",
-    "mini-css-extract-plugin": "^0.4.3",
+    "mini-css-extract-plugin": "^2.6.0",
     "mocha": "^5.2.0",
     "mocha-sinon": "^2.1.2",
     "module-dispatcher": "^2.0.0",
     "normalize.css": "^8.0.1",
     "nyc": "^13.1.0",
-    "postcss": "^7.0.2",
+    "postcss": "^8.4.7",
-    "postcss-apply": "^0.11.0",
+    "postcss-apply": "^0.12.0",
-    "postcss-color-hex-alpha": "^5.0.2",
+    "postcss-color-hex-alpha": "^8.0.3",
     "postcss-color-mod-function": "^3.0.3",
-    "postcss-custom-media": "^7.0.7",
+    "postcss-custom-media": "^8.0.0",
-    "postcss-custom-properties": "^8.0.8",
+    "postcss-custom-properties": "^12.1.4",
-    "postcss-custom-selectors": "^5.1.2",
+    "postcss-custom-selectors": "^6.0.0",
-    "postcss-font-family-system-ui": "^4.1.0",
+    "postcss-font-family-system-ui": "^5.0.0",
-    "postcss-loader": "^3.0.0",
+    "postcss-loader": "^6.2.1",
-    "postcss-media-minmax": "^4.0.0",
+    "postcss-media-minmax": "^5.0.0",
-    "postcss-nested": "^4.1.0",
+    "postcss-nested": "^5.0.6",
     "postcss-nested-ancestors": "^2.0.0",
-    "postcss-nesting": "^7.0.0",
+    "postcss-nesting": "^10.1.3",
     "postcss-smart-import": "^0.7.6",
     "rimraf": "^3.0.2",
     "sinon": "^11.1.2",
     "ts-mocha": "^8.0.0",
     "typescript": "^4.3.5",
-    "webpack": "^4.17.1",
+    "webpack": "^5.70.0",
-    "webpack-cli": "^3.1.0"
+    "webpack-cli": "^4.9.2"
   }
 }

public/dist/code-styling.css

@@ -7,5 +7,5 @@
 
   Outdated base version: https://github.com/primer/github-syntax-light
   Current colors taken from GitHub's CSS
-*/.hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}
+*/.hljs{background:#fff;color:#24292e}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{background-color:#f0fff4;color:#22863a}.hljs-deletion{background-color:#ffeef0;color:#b31d28}
-.diff{display:inline-block;width:100%}.diff span{color:inherit!important}.diff--added{color:#277030;background-color:#e2fce7}.diff--added:before{content:"+";opacity:.4}.diff--removed{color:#ae363c;background-color:#ffe6e6}.diff--removed:before{content:"-";opacity:.4}
+.diff{display:inline-block;width:100%}.diff span{color:inherit!important}.diff--added{background-color:#e2fce7;color:#277030}.diff--added:before{content:"+";opacity:.4}.diff--removed{background-color:#ffe6e6;color:#ae363c}.diff--removed:before{content:"-";opacity:.4}

public/dist/editor.bundle.js.LICENSE.txt

@@ -0,0 +1,68 @@
+/*! For license information please see editor.js.LICENSE.txt */
+
+/**
+ * CodeTool for Editor.js
+ *
+ * @author CodeX (team@ifmo.su)
+ * @copyright CodeX 2018
+ * @license MIT
+ * @version 2.0.0
+ */
+
+/**
+ * Delimiter Block for the Editor.js.
+ *
+ * @author CodeX (team@ifmo.su)
+ * @copyright CodeX 2018
+ * @license The MIT License (MIT)
+ * @version 2.0.0
+ */
+
+/**
+ * Header block for the Editor.js.
+ *
+ * @author CodeX (team@ifmo.su)
+ * @copyright CodeX 2018
+ * @license MIT
+ * @version 2.0.0
+ */
+
+/**
+ * Image Tool for the Editor.js
+ *
+ * @author CodeX <team@codex.so>
+ * @license MIT
+ * @see {@link https://github.com/editor-js/image}
+ *
+ * To developers.
+ * To simplify Tool structure, we split it to 4 parts:
+ *  1) index.js — main Tool's interface, public API and methods for working with data
+ *  2) uploader.js — module that has methods for sending files via AJAX: from device, by URL or File pasting
+ *  3) ui.js — module for UI manipulations: render, showing preloader, etc
+ *  4) tunes.js — working with Block Tunes: render buttons, handle clicks
+ *
+ * For debug purposes there is a testing server
+ * that can save uploaded files and return a Response {@link UploadResponseFormat}
+ *
+ *       $ node dev/server.js
+ *
+ * It will expose 8008 port, so you can pass http://localhost:8008 with the Tools config:
+ *
+ * image: {
+ *   class: ImageTool,
+ *   config: {
+ *     endpoints: {
+ *       byFile: 'http://localhost:8008/uploadFile',
+ *       byUrl: 'http://localhost:8008/fetchUrl',
+ *     }
+ *   },
+ * },
+ */
+
+/**
+ * Raw HTML Tool for CodeX Editor
+ *
+ * @author CodeX (team@codex.so)
+ * @copyright CodeX 2018
+ * @license The MIT License (MIT)
+ */

public/dist/main.bundle.js.LICENSE.txt

@@ -0,0 +1,8 @@
+/*!
+ * CodeX Module Dispatcher — Initialize frontend Modules from the DOM without inline scripts
+ * 
+ * @copyright CodeX Team <team@ifmo.su>
+ * @license MIT https://github.com/codex-team/dispatcher/LICENSE
+ * @author @polinashneider https://github.com/polinashneider
+ * @version 2.0.0
+ */

webpack.config.js

@@ -1,4 +1,5 @@
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require('path');
 
 /**
  * Options for the Babel
@@ -11,20 +12,23 @@ const babelLoader = {
       [
         '@babel/preset-env',
         {
-          'useBuiltIns': 'usage'
+          'useBuiltIns': 'usage',
-        }
+        },
-      ]
+      ],
     ],
     plugins: [
-      '@babel/plugin-syntax-dynamic-import'
+      '@babel/plugin-syntax-dynamic-import',
-    ]
+    ],
-  }
+  },
 };
 
-module.exports = (env) => {
+module.exports = () => {
   return {
+    entry: './src/frontend/js/app.js',
     output: {
-      libraryExport: 'default' // uses to export .default field of app.js exported class instance
+      filename: '[name].bundle.js',
+      path: path.resolve(__dirname, './public/dist'),
+      libraryExport: 'default', // uses to export .default field of app.js exported class instance
     },
     module: {
       rules: [
@@ -36,41 +40,36 @@ module.exports = (env) => {
               options: {
                 // you can specify a publicPath here
                 // by default it use publicPath in webpackOptions.output
-                publicPath: '../'
+                publicPath: '../',
-              }
+              },
             },
             {
               loader: 'css-loader',
               options: {
-                importLoaders: 1
+                importLoaders: 1,
-              }
+              },
             },
             {
               loader: 'postcss-loader',
-              options: {
+            },
-                config: {
+          ],
-                  path: './src/frontend/'
-                }
-              }
-            }
-          ]
         }, {
           test: /\.js$/,
           exclude: /(node_modules|bower_components)/,
           use: [
-            babelLoader
+            babelLoader,
-          ]
+          ],
-        }
+        },
-      ]
+      ],
     },
     plugins: [
       new MiniCssExtractPlugin({
         // Options similar to the same options in webpackOptions.output
-        filename: '[name].css'
+        filename: '[name].css',
-      })
+      }),
     ],
     optimization: {
-      splitChunks: false
+      splitChunks: false,
-    }
+    },
   };
 };