Update npm deps

plugins/base/frontend/build.gradle.kts

@@ -1,9 +1,9 @@
 plugins {
-    id("com.github.node-gradle.node") version "3.1.0"
+    id("com.github.node-gradle.node") version "3.1.1"
 }
 
 node {
-    version.set("12.18.2")
+    version.set("16.13.0")
     download.set(true)
 }
 

plugins/base/frontend/package.json

@@ -7,7 +7,7 @@
     "dist": "./dist"
   },
   "scripts": {
-    "build": "webpack --mode=production --devtool sourcemap",
+    "build": "webpack --mode=production --devtool source-map",
     "lint": "eslint . && npm run stylelint",
     "stylelint": "stylelint --ignore-path .gitignore ./src/main/**/*.scss",
     "start": "webpack-dev-server -d --history-api-fallback --inline --hot --colors --port 9010"
@@ -23,41 +23,39 @@
     ]
   },
   "dependencies": {
-    "@babel/core": "^7.8.3",
-    "@jetbrains/babel-preset-jetbrains": "^2.1.4",
-    "@jetbrains/logos": "1.1.5",
-    "@jetbrains/ring-ui": "3.0.47",
-    "@types/node": "^12.12.36",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
-    "@types/react-scrollspy": "^3.3.3",
-    "babel-loader": "^8.0.6",
-    "lodash": "^4.17.19",
-    "postcss-import": "^12.0.1",
-    "postcss-preset-env": "^6.7.0",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-scrollspy": "^3.4.3",
-    "redbox-react": "^1.6.0",
-    "ts-loader": "^7.0.0",
-    "typescript": "^3.8.3",
-    "webpack": "^4.41.5",
-    "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.10.1"
+    "@babel/core": "^7.16.0",
+    "@jetbrains/babel-preset-jetbrains": "^2.3.1",
+    "@jetbrains/logos": "1.4.27",
+    "@jetbrains/ring-ui": "^4.1.3",
+    "@types/node": "^16.11.10",
+    "@types/react": "^17.0.37",
+    "@types/react-dom": "^17.0.11",
+    "babel-loader": "^8.2.3",
+    "lodash": "^4.17.21",
+    "postcss-import": "^14.0.2",
+    "postcss-preset-env": "^7.0.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "ts-loader": "^9.2.6",
+    "typescript": "^4.5.2",
+    "webpack": "^5.64.4",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.6.0"
   },
   "devDependencies": {
-    "@jetbrains/stylelint-config": "^2.0.0",
-    "@types/lodash": "^4.14.158",
-    "babel-eslint": "^10.0.3",
-    "eslint": "^6.8.0",
-    "mini-css-extract-plugin": "^0.11.0",
+    "@babel/eslint-parser": "^7.16.3",
+    "@jetbrains/stylelint-config": "^3.0.2",
+    "@types/lodash": "^4.14.177",
+    "eslint": "^8.3.0",
+    "mini-css-extract-plugin": "^2.4.5",
     "react-svg-loader": "^3.0.3",
-    "sass": "^1.26.3",
-    "sass-loader": "^10.0.5",
-    "stylelint": "^13.3.2",
-    "yo": "^3.1.1"
+    "sass": "^1.43.5",
+    "sass-loader": "^12.3.0",
+    "stylelint": "^14.1.0",
+    "svg-inline-loader": "^0.8.2",
+    "terser-webpack-plugin": "^5.2.5"
   },
   "engines": {
-    "node": ">=8.0.0"
+    "node": ">=16.0.0"
   }
 }

plugins/base/frontend/src/main/components/search/dokkaFuzzyFilter.tsx

@@ -1,4 +1,4 @@
-import {Select} from "@jetbrains/ring-ui";
+import Select from '@jetbrains/ring-ui/components/select/select';
 import {Option, OptionWithHighlightComponent, OptionWithSearchResult} from "./types";
 import fuzzyHighlight from '@jetbrains/ring-ui/components/global/fuzzy-highlight.js'
 import React from "react";

plugins/base/frontend/src/main/components/search/search.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { Select, List } from '@jetbrains/ring-ui';
-import '@jetbrains/ring-ui/components/input-size/input-size.scss';
+import List from '@jetbrains/ring-ui/components/list/list';
+import Select from '@jetbrains/ring-ui/components/select/select';
+import '@jetbrains/ring-ui/components/input-size/input-size.css';
 import './search.scss';
 import { IWindow, Option, Props } from "./types";
 import { DokkaSearchAnchor } from "./dokkaSearchAnchor";

plugins/base/frontend/webpack.config.js

@@ -2,17 +2,12 @@ const {join, resolve} = require('path');
 
 const ringUiWebpackConfig = require('@jetbrains/ring-ui/webpack.config');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const TerserPlugin = require("terser-webpack-plugin");
 
 const pkgConfig = require('./package.json').config;
 
 const componentsPath = join(__dirname, pkgConfig.components);
 
-// Patch @jetbrains/ring-ui svg-sprite-loader config
-ringUiWebpackConfig.loaders.svgInlineLoader.include.push(
-  require('@jetbrains/logos'),
-  require('@jetbrains/icons')
-);
-
 const webpackConfig = () => ({
   entry: `${componentsPath}/root.tsx`,
   resolve: {
@@ -53,6 +48,12 @@ const webpackConfig = () => ({
             }
           }
         ]
+      },
+      {
+        test: /\.svg$/,
+        loader: require.resolve('svg-inline-loader'),
+        options: {removeSVGTagAttrs: false},
+        include: [require('@jetbrains/icons')]
       }
     ]
   },
@@ -64,9 +65,15 @@ const webpackConfig = () => ({
       chunkFilename: '[id].css',
     }),
   ],
+  optimization: {
+      minimize: true,
+      minimizer: [new TerserPlugin({
+        extractComments: false,
+      })],
+  },
   output: {
     path: __dirname + '/dist/'
   }
 });
 
-module.exports = webpackConfig;
+module.exports = webpackConfig;

plugins/base/src/main/kotlin/renderers/html/HtmlRenderer.kt

@@ -787,7 +787,10 @@ open class HtmlRenderer(
                                     type = ScriptType.textJavaScript,
                                     src = "###$it"
                                 ) {
-                                    async = true
+                                    if (it == "scripts/main.js")
+                                        defer = true
+                                    else
+                                        async = true
                                 }
                             }
                         it.isImage() -> if (it.isAbsolute) link(href = it)
@@ -832,9 +835,6 @@ open class HtmlRenderer(
                     }
                     div {
                         id = "main"
-                        templateCommand(PathToRootSubstitutionCommand("###", default = pathToRoot)) {
-                            script(type = ScriptType.textJavaScript, src = "###scripts/main.js") {}
-                        }
                         content()
                         div(classes = "footer") {
                             span("go-to-top-icon") {